How to track form submissions using GA4 events properly, not just reading page views on a success page. If you don't use forms in an iframe then it's very easy!
I really like the Ghost platform for its ease of use, extendability and awesome editor. This blog is built using Ghost, and has a number of contact forms on a few key landing pages as well as the normal contact page.
The official Ghost docs have a guide on inserting a Formspree form as a custom html block. I save my block as a snippet for reuse.
I've tried loads of other form builders and prefer Formspree. Typeform is my favourite because it looks great, but the paid version is £80 a month if you want Google Analytics tracking. The many clones out there may be cheaper but are still paid and they all use iframes.
Once you start loading things in iframes your Google Analytics tracking tag stops working - it can't see inside the iframe.
I like Formspree because it is just a simple form with the post pointing to their url
<form action="https://formspree.io/f/kgifngyr" method="POST">No iframes involved.
Google provides a Form Submission trigger that does all the hard work. It only works if the form is not in an iframe.
Create a trigger and select Form Submission
Choose Check Validation and filter by Page URL. I use a simple RegEx to only trigger on the pages that have a form.
contact|page-2|another-page
Save the trigger.
Go to variables and click configure in the top right. Select all the form variables.
Go to tags and click New and choose a GA4 event tag.
Setup the tag with the event name generate_lead and add an event parameter called lead_type and for the value select the pre-built variable Form ID
This means that when a form is submitted the form submission trigger is fired, which creates some variables (and adds to the datalayer) automatically, then fires the GA4 event using the form's ID as a lead type.
This final step with the Form ID allows segmenting the "generate_lead" event.
Create your formspree account and paste a form in a custom html block.
<form id="change_this_to_segment" action="https://formspree.io/yourform" method="post">
<label for="full-name">What's your name please?</label>
<input type="text" name="name" id="full-name" required>
<label for="email-address">Your email address</label>
<input type="email" name="_replyto" id="email-address" required>
<input type="submit" value="Submit">
</form>Preview your container in tag manager and go and fill in and submit your form.
In Tag Assistant you should see a form submit as the last event before the new page is loaded
Click the event and you should see the tag has fired
Click the tag to see its details. You might need to click "Display Variables as values" in the top right corner. The value of lead_type is the form id.
I want to capture the email from the form submit and store is as a variable in GTM so it can be passed to Woopra as a tracking ID.
I created a new customer javascript variable with a function that loops through the Form Element variable generated by the Form Submission trigger and looks for an email address.
function() {
try {
var searchEmail = function(input){
for(i=0; i<input.length; i++){
email = input[i].value;
if(email.match(/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i)){
return email;
}
}
}
return searchEmail({{Form Element}});
}catch(e) {
return "";
}
}