Written by: Aleš Sýkora

The Author of Toolset.wiki. Big fan of Toolset plugins and WordPress.

I am big fan of WordPress and Toolset plugins. I have done many projects based on WordPress. I also have experience with online marketing, PPC advertising and SEO. I live in Czech Budweis – the town of Budweiser Budvar breverage in the south of the Czech Republic – the heart of Europe.

I love skateboarding, snowboarding, frisbee, fitness, healthy lifestyle, tattoos, mountain biking and other sports. I enjoy having time with friends with good beer and good music.

Tracking Toolset Forms in Google Analytics with Google Tag Manager

Last Update: 10. 11. 2019 , Category:

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.

contact form post type

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

submit idea form setup

[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:

modal trigger 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:

bootstrap modal with form

<!-- 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.

toolset form tracking tag manager

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

form trigger setting tag manager

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.

contact form tracking tag in google tag manager

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.

tag manager preview firing tag

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

contact form event universal analytics

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

Support Us via our Affiliate link!

Toolset logo WordPress

What to do next?

Need a Toolset License?

Buy via affiliate link!

Looking for a tutorial?


Help other users – Add your snippet!


Join the discussion!