Aleš Sýkora wrote

Tracking Toolset Forms in Google Analytics with Google Tag Manager

7. 8. 2018 in

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 class="form-group">
		<label>Describe it clearly</label>
		[cred_field field='post_content' value='' urlparam='' output='bootstrap']

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


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 class="modal-body">
<div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button><br />

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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Toggle Table Row with jQuery (usable in Toolset)
31. 12. 2019 in
If you want toggle to open a new row in the table, then you need to use some jQuery with Toolset again. First – create the table (you can use it in view, content tempate, etc.). All credit for this example goes to jsfiddle: And use it with this jQuery script. Do not forget […]
Read More
Aleš Sýkora wrote
Fluent Forms maps input (usable with Toolset Maps too)
If you want to add map field with click to put marker function and save the GPS data, you can use the Google Maps API with Fluent Forms. You will need Google Maps API Key and plugin for custom code snippets (you can also build your own plugin from the code by saving as PHP […]
Read More
Aleš Sýkora wrote
Best practise for jQuery in Toolset
3. 7. 2019 in
Let me explain best practices for using jQuery inside a View, Form or Content Template's JS panel.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram