Track Webflow Form Submissions with Google Analytics (GA4) & Tag Manager

Track Webflow Form Submissions with Google Analytics (GA4) & Tag Manager
In this post, we'll be setting up a Google Analytics 4 event to track your Webflow form submissions in Google Analytics as a conversion. You'll also be able to use the trigger we'll be setting up for the form submission to track ad lead conversions for platforms like Facebook, LinkedIn and Google Ads etc.

*Update* We've added some video content to this post that'll hopefully make it easier to follow along and show you some more advanced ways of doing this than detailed in the post below when it comes to tracking only specific forms or multiple different forms separately. Please subscribe to the channel to stay up to date on our latest how-to's and updates.

Depending on your form settings in Webflow there are basically two easy ways to track a form submision. If you've set up a redirect URL for your form you could track visits to the destination URL as a conversion, alternatively you could track the submission event, which is what we'll be doing.

This will we quite a quick post, but it's very useful as this trigger and event can be used for more than just seeing how many form submissions there have been in Google Analytics. If you use Google Ads or Facebook Ads etc. and want to run ads optimised for lead conversions you can use the trigger we'll be setting up in the post to track the leads generated by your ads, which will not only help your ad platform optimise for conversions, but allow you to see the cost per conversion for your campaigns.

We won't be covering how to set up Google Tag Manager, Google Analytics or how to add them to your Webflow Project. To do that you can go check out our previous posts:
Installing Google Tag Manager and Google Analytics in Webflow - Part 1
Installing Google Tag Manager and Google Analytics in Webflow - Part 2

Step 1 - Create your Tag

Head on over to Tag Manager, open your Webflow Project Container, hit Variables and Configure.

Tag Manager

Now go ahead and toggle all, you're not gonna need 'em all but just makes things easier when you're creating other triggers.

Tag Manager Variables

Head to Tag and hit New.

Tag Manager Tags

Give your Tag a name and choose the GA4 Event Tag.

Tag Manager GA4 Event

Now go ahead and select the config tag you set up in our other post. This is the GA4 account you want to send the event to. Give the event a name (this is what'll show in Google Antics). Finally, if you'd like to create Audiences in GA you can add a user parameter like (like lead_submit or whatever under User Properties).

Tag Manager GA4 Event Setup

Now the important bit, the tigger. We say important as this is what you'll not only use for GA, but for any other lead tags you'd like to create for platforms like Facebook or Pinterest etc.

Hit Triggering and the +

Tag Manager  Trigger

Give your Trigger a name and choose the Form Submission trigger under Trigger Type.

Tag Manager From Submission Trigger

You could stop the process here, but what if you have more than one form in your project? We're gonna narrow things down by only triggering on forms that are on the contact page. You could use other variables like Click Text etc. etc. but that's another post and can get super granular.

Let's select Some Forms, then Click URL, Contains and the URL of the contact us page.

Tag Manager Some Forms Trigger

And that's it for the tag setup, Submit, Publish and then test by hitting Preview.

Tag Manager Submit

Stick in your URL, and Connect. You'll now have the Preview Tab and your Site tab, head to your contact form, fill it in and submit, then switch back to the Preview Tab to see if everything's firing properly.

Tag Manager Debug

And there's our Tag.

Tag Manager Test Fire Debug

Let's take a closer look by clicking the Tag.

Tag Manager Event Test

Here we can see the Triggering filters we selected, the form submit event and the Click URL for the contact us page.

Now you can head to Google Analytics, you won't have anything yet, but once the events starts showing (wait a day), go to Events in GA4 and tick the conversion button next the the contact form submit event to have it show under conversions.

And you're done! Congrats. We'll cover how to reuse this Trigger for lead events in your ad platforms in another post.

Drop your questions in the comments if you get stuck, and remember to check out the How-To section of our blog for more tutorials.

Video Transript

Accordion Arrow

Okay. So today we're going to be looking at adding. Google analytics tracking to your forms and webflow. We've already covered adding tag manager. And our first video and post and adding Google analytics for to tag manager and webflow. So now we'll be looking at how you can easily track your workflow forms. So just some very quick housekeeping. If you don't know how to set up tag manager and webflow or you're struggling with Google analytics for you can check out the two blog posts on that. I'll stick the links in the comments and it's also on this blog post. And we're going to start off by heading to variables in tag manager. So you're going to open the container you created you're going to go to variables. I think we already ticked all of these on in the BBS video. Yes, we did. They're gonna head to configure. if you haven't done this already and may as well just check everything on and you'll see it lags a bit. So if I take this ball, right? And you'll see. On the bottom left hand corner there loading. So just take them all on. And then you're going to want to wait for this list to populate completely. And you're gonna get over to submit and publish because we want these variables live. And then we're going to cheat a little but first. Let's head over to our webflow project. So this was the test project that we just cloned in the last video off with flow. and we'll be using this contact form at the bottom of the landing page and then we've got the exact same contact form on the contact us page. Just got a different ID and we'll be using them. Crack and show different ways of filtering when you're tracking forms. But we're going to kick off by cheating a bit first. So we've just Published the site with published the changes were made by adding on the variables and we're going to go ahead and go to triggers and we're going to create a new trigger. Well, they're not triggers in here. There's just all pages. We're gonna have again and got a triggers and we're going to hit new. And we're just gonna call this generic. for much And this is just going to make it easier for you. then you don't have to think about much you're gonna go and add a form submission. And you're going to say all forms. So we will be tracking all forms. And what we're going to do is we're going to preview the page the metaphor and then grab the variables straight from the preview so that we don't have to get at all. So again same thing as before we're going to save we're gonna submit and the people who do this properly add version name version description saying, oh we just add near form submit, but we don't need any of that. Fine, it's just useful if you ever have to roll back. So this should be live now. Go to the site. And we're going to go down here. And if we look at the top over here, we've got a few plugins that I've got useful for us and we've got the Google tag assistant. It's a legacy plugin, but it still works. We're gonna want to enable that. we've also got this guy that you're definitely going to need and Not responding now. Ah, there we go. So this is the Explorer. for the preview and this guy is the tag assistant companion and you want both of them turned on the links are in the first person sitting up tag manager if you don't have them so you can just go over the grab them install the two Chrome plugins and you should leave it to go. So what we're going to do now is we're going to hit back to this homepage first so we can do inside tracking copy the URL. We're going to go to tag manager. We're going to go to the workspace again after we published going to click preview so that we can preview the page. Tag manager installed so it's capturing everything. Add that in you want to debug signal just okay? And we're gonna go ahead and say connect. And what you'll see happening now as it's looting loading the page, we've got tag manager running over here. So we're just gonna minimize that And you'll see the page is now connected. So everything we do now gets tracked. As if it is, so we're clicking around. or clicking on about and you'll see now. that are Yeah. if we contact go back. And you can see we clicked on a link everything is tracking perfectly. Cool, and we're gonna head back. So we've got a generic. Form Trigger or at least that's called it and basically, what's that? Is going to do is it's going to track everything. We didn't put in any filter. So every form submit on the website will try so let's go checks. jokes at that doesn't really matter. I'm gonna hold this test and I'm just gonna hit send. and thinking And your form has been submitted. And now if we head back over here, we can see that a form submit event has been tracked for click into that. You'll see nothing happened. We don't have it tag setup. We only have trigger setup. So we're going to go to variables. And we're going to scroll down and now there's a number of ways we can filter this. If you only have one form on the side doesn't matter you're tracking it now. It's all good. But now what happens if you add another form you want to track them differently in Google analytics. How are you going to distinguish between the two so we've got all these variables that we turned on. And that's going to make it super easy for us. So we've got a number of options and we'll go through them and we'll Implement a bunch of them to see so if we scroll down you can see the first thing you'll notice is we have a click ID. Which is that forms name from webflow and you'll see it's also over here where where is it? We've lost it. Um here we got form ID. Sorry. So there we go, so we can filter using the form name. We can filter using the path. So it's just on the home page. We can. You go for the URL, but that might change right because you're not going to be on webflio forever. You can filter using a button click. So if you go up here see there was a button. You could give an ID to the button and as you can see like a lot of this is empty now, right which means you could also add in variables, right? So if it becomes very complicated, you can head over to your Forum. You can click on the button, for example. And you can go to cut them attribute custom attributes and you can give it at Britain of value and that'll show up. And tag manager. Oh That'll show up in tag manager. So that'll be really simple. You want to try and stick to these guys. So otherwise you're going to have to go and create additional attributes where we just ticked on all the attributes. You'll have to create them a custom attribute there for it to track so that the easiest for example would be to just give it. A form text or whatever existing attribute it is. So we're going to go ahead now and we're going to filter the form. Using the form name, right? We'll click ID, but it's a thing. We're going to go over here. Copy it properly. And this is why you don't want to start off without the generic trigger because then you're gonna have to remember what the former's name is ADD W form of it and do all of that. So we are gonna just talk this guy again gonna hit in tag manager. And we're going to go to tags. And we're going to go create a trigger. So we're gonna let's tag first and we'll call this landing page. form I'll just say it's GA 4. We don't have Universal Analytics. Well this one because it's being phased out. So we're not gonna go through the whole process as it's much more complicated creating goals and Universal analytics and it is events. And we're going to go and hit event. Yeah, that's correct. Select the configuration tag, so that was a ga4 tag. We set up in the first now second video. Sorry. And we'll call this. Landing page for underscore born you're going to want to be careful here when you do. Event in tag manager. Google analytics is case sensitive. So you want to stick to lowercase just to make it simple? Give it a easily recognizable name and you can modify this in Google analytics for to give it more user-friendly names. And you can add other properties here, right? So let's say you want to Create a list of audience list that you want to use in Google ads or whatever someone submitted a form and you want to remark to them you can go. for submitted True blue, and now this user's properties will be tagged with form submitted True Value and you can go create an audience and Google analytics export that to other things that it's linked to us. though let's create a trigger. So we've got the generic trigger. That one's going to fire on everything so we can't use that one. We're going to create new trigger. the animal call this landing page form Later, and we'll just say it's a form submission. And we want to do some form. So instead of going all forms. We're gonna go some forms. And when I say the form ID and here you can go contains equals Etc. So we just want to go equals. The four name we just copied I'm going to go save. saved and then submit and publish and that's about it. We're done. It's been submitted now. If we go into here we can close the sky. We're going to refresh it real quick. We're just gonna hit. Refresh on this home page Make sure the tag manager loaded in the background. Grab that you are all again because I keep forgetting. I'm gonna go to workspace. We're gonna preview everything again just to test that. And I'm gonna connect. So now we installed it. To track this contact form at the bottom of the homepage. There's another contact form of contact page and it has a different format is we're gonna submit this guy first. alright, so Jake's check test .com anything in here submit The mission received okay. So let's go in here. We'll check there was a form submission. No tags fired. I'm going to variables we can see why because this form has a different name, right? Click idea again. Sorry. Same name? Here's the form ID. It's different. So now we're seeing okay. Well, we're not tracking that form. Let's say back to the contact us page. Let's go to home. Whoa. What did we do? Let's go to the homepage. I forgot to put it back button on this page that home isn't linked to anything. Okay, here we go. So we're tracking again Jay. exact Just putting that in you can have actual email if you want. There we go. milk and and we're sending the message. Oh contact form submitted. Let's go check. So we've got everything over here. There's a form submission. Let's click on it. Go to the top. It tags again. We'll see up success. this funnel tracked It fired on this trigger because it equal to that form name. There we go working. Beautifully. You can see the actual values if you want switch back to name. And now if you just click on the page as well, you can see all the tags that are fired. These are firing or pages. This guys the landing page tag. For the form from well, let's build that sorry. So we're good to go. This one works. You can see what number it was fired on if you want to go back and click again. So now we're not tracking this guy over here, right? We've got this button over here. Things happening. Oh, actually we are tracking that guy. So let's go back into tag manager now. And we're gonna hop over. To the second form and let's try a different way of doing it. So we're going to go to the contact us page. I'm going to submit this guy again. checks check and I'm random text thing. Okay, let's hit over here. We've got form submission again. The correct from submission again, and we'll see again. Nothing fired on this because it's only filtering for the homepage form. So let's try different method. We've got this guy on the contact us page. So let's say you've got a whole bunch of forms, which only want to track form a specific page and there's only one form there. You can get more creative and let's do a page path filters. We're just going to copy. Contact us. I'm going to head into tag manager again. Create a new tag. Oh one more polishing. Sorry new tag. on time attack us page or configuration same as before we're going to do an event. We want the event to go. To the geographic tag. We'll call this the contact on back page or we're going to leave out the user parameter there. It's not necessary for this. And we'll just pull it. in fact of act page or trigger and we are gonna say for submissions which you can all of them. We're gonna go for the a path you can say contains equals. That's fine. There's no other Pages here. save save the boat published continue Okay, we should be sorted. Let's go ahead and close those guys again. I'm gonna go in here. Back to workspace. You could actually just hit the refresh in the preview, but Hold it the long way around. Let's head back. We're gonna up actually we'll fill this one in again. Just again. Doesn't really matter. And we're gonna go to contact page. And submit and let's go see what happened to the two forms. So we are live. We've got a form submit. It was on. the home page and it's filtered. for the form ID We've got another one on the contact us page. There was a form submit a tag fired. Let's look at this tag. A filter for page path and that's live now. Let's head in to Google and lyrics Here we go. That's us in South Africa one user live on the site that over to reports. We've got a real-time. We should see the events coming in. It's loading very slowly, but there we go. We've got a contact page form submission. We've got the landing page form submission. We are pretty much good to go. Um, we can also go up here. Actually go up here. And record and if we were to refresh this, right? We'll leave that for now. Oh, so it's tracking in. two line lyrics you will see if you go to figure And you go to events. It's not here yet events lag by day. But in a day's time, they'll show up here and if you want to add them as conversions, it's simple as taking them on alternatively. You can click into here. If you're in a real rush though and recommend this causes weird things to happen sometimes. You can go what was the events name again? Thanks. Let's just go for the landing page form. And we'll we'll collect that record one. grab this guys name We'll head back into analytics and we're going to force a conversion. Well, then copy. Sorry. No, no again. Okay. We're gonna force a conversion on that so we don't have to wait a day to set it up. And then you approach form as a conversion. Let's head back to real time over here. in the reports and we're gonna have to go ahead. Kill this kill this reload the whole thing on Bob. Oh, yeah, we didn't save this. So let's stay here save. Might as well publish that change. I'll pay you. Hit back to workspace. the preview refreshed page everything's connecting so we can monitor its working properly. It was the home page Forum. We'll go Jegs. I'm random text. If that it's firing, yes. Support of motiventire the tags firing. Everything is good. And we're going to Google Analytics. And if we did it, right? Conversion event is supposed to be showing up. It may be lagging a little. Report chat sorts. Let's see. What's in there. They're not getting anything. It was just lagging. There we go. Landing page conversion it worked. We're good to go. So yeah one last thing we just did two methods right? You can use click IDs you can use click Text. Though. Yeah, we'll we'll see if we go into. The variable here again. There's there's a whole bunch right that that you can use. Again, you can use combinations, right? So you could go if there's a whole bunch of forms on the page. You could go you want to form ID and another variable so you would just go to the trigger again. Contact page form. So we've got your all on the sky. On this trigger. Oh We've got the your l on this trigger. We want to add another. Terrible that I'd have to filter by and we can go and say form ID contains. With low whatever the forms name is and it'll only get a combination of the two. And that's it if you have any questions. Please feel person in the comments.

recent projects