Tracking Toolset Forms in Google Analytics with Google Tag Manager

min read / WordPress / Share on: Twitter, LinkedIn, Facebook

Post summary: What if you want to track your Toolset Forms submissions with Google Analytics Events? See how to do this with Google Tag Manager quickly.

Almost every serious website is monitoring traffic with Google Analytics. And every serious project should have some determined Goals.

What if your website’s goal is contact form submission. Can you check wich traffic source gets you the biggest amount of form submissions last month? No? Okay, let’s set up the form tracking quickly with Toolset Forms and Google Tag Manager.

Prepare your Contact Form with Toolset Forms

Create a Custom Post Type called Contact forms with Toolset Types.

And prepare new Post Form in Toolset Form builder. My form looks like this:

[credform class='cred-form cred-keep-original']

	[cred_field field='form_messages' value='' class='alert alert-warning']

	<div class="form-group">
		<label>What do you want to learn?</label>
		[cred_field field='post_title' value='' urlparam='' class='form-control' output='bootstrap']
	</div>

	<div class="form-group">
		<label>Describe it clearly</label>
		[cred_field field='post_content' value='' urlparam='' output='bootstrap']
	</div>

	<div class="form-group col-md-8">
      [cred_field field='recaptcha' value='' urlparam='' class='form-control' output='bootstrap']
	</div>
	<div class="form-group col-md-4">
	[cred_field field='form_submit' value='Submit' urlparam='' class='btn btn-primary btn-lg' output='bootstrap']
	</div>
<span class="clearfix">

[/credform]

And I also suggest you to add some e-mail notfication. But it is optional.

Publish your Toolset Forms form at website

I will use my form in Bootstrap component called modal which is technically a pop-up window. If you don’t need the modal, publish the form in your layout skip this step.

Modal has two parts. First is triggering button:

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sgst-form">Fill the form quickly</button>

Second is modal itself with Toolset Form shortcode:

<!-- Modal -->
<div class="modal fade" id="sgst-form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h2 class="modal-title">Article suggestion</h2>
</div>
<div class="modal-body">
<--!INSERT YOUR FORM SHORTCODE HERE-->
</div>
<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><br />
</div>
</div>
</div>
</div>

Setup the Form submission event tracking with Google Tag Manager

In your website’s Google Tag Manager container create a new Tag for Google Universal Analytics and select the Event from dropdown menu. Then fill the event informations which you want to display in Analytics.

Then set-up the firing trigger for the Tag. You need to find the Form submission in the list and set it up.

You can also select check validation but in that case you must set up the pages where the form is. Also if you plan to use more Form tracking tags for different forms then set the triggering only for this form with the Some forms checkbox. I will use this for all my forms and I don’t need to check the validation right now.

!UPDATE (22.10.2019) – there is some kind of collision when you use the facebook pixel. Pixel is automatically sending the form sent into data layer. I suggest to check the Some forms, select built in variable Form ID and add contains cred_form.

Finally save your Tag and publish the changes in your Tag Manager’s container. Also you can check if your trigger works with Tag manager preview mode. You should see the gtm.formSubmit event after send a form and your Tag successfully fired.

And also you will successfully see your event in Google Analytics.

That’s it. Did you successfully implemented your form tracking? Tell me in the comments below!

0 comments