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>

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

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
Basic SEO plugin with Toolset Types & Types Fields API
29. 9. 2018 in
Make your own SEO plugin with Toolset Types. No need to install any additional SEO plugins. Read our tutorial and make your own today!
Read More
Aleš Sýkora wrote
Change WordPress login logo with code
6. 11. 2020 in
Need to change wordpress login logo? Use this code in custom plugin or in Code Snippets plugin. Change the background image url to your image and Link Title to your site name for example.
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
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram