Submission DOM tracking for Contact Form 7 Plugin

We created this plugin to be able to track form submissions in Google Analytics, with the Facebook pixel and to hide the form once completed. Before we were doing this with “on_sent_ok”. We also included the possibility to deregister the styles and JavaScript of the plugin on pages that doesn\’t contain a contact form.

This was published on the official Contact Form 7 website on June 7th, 2017 by the author of the plugin on_sent_ok Is Deprecated.

The “on_sent_ok” and its sibling setting “on_submit” of the Contact Form 7 plugin are deprecated and scheduled to be abolished by the end of 2017. The recommended alternative to on_sent_ok is using DOM events. This plugin helps to set this DOM events to track form submissions.

In order to minimize the impact on the large amount of sites we run, we decided to code this plugin.

Yes. It creates some entries in the options table. These entries are deleted if you deactivate and uninstall the plugin. If you only deactivate, settings are kept.

Install and activate. Go to Contact Form 7 / DOM tracking. Configure the plugin.

Go to Google Analytics Real Time.

Fill in a contact form and submit it.

Check if an event or page view is triggered when the form is submitted correctly.

If you are not using Google Analytics or do not have the Facebook pixel installed, please do not select these tracking options because it will lead to a JavaScript errors.

We detect if the plugin “Google Analytics for WordPress by MonsterInsights” is active because it uses a non standard call to Google Analytics. Instead of ga it calls __gatracker.

This is taken into account.

You can simply activate, deactivate or delete it in your plugin management section. If you delete the plugin through the management section the configuration is deleted (entries in options table are removed). If you delete the plugin through FTP the configuration is not deleted.

This plugin has been tested and works with PHP versions 5.5 and greater. WordPress itself recommends using PHP version 7 or greater. If you’re using a PHP version lower than 5.5 please upgrade your PHP version or contact your Server administrator.

Yes. We are running the plugin on several sites with WPML 3.7.x and 3.8.x.

Yes. The plugin requires a PHP version 5.5 or higher and we recommend using PHP version 7 or higher.

Of course we do. That’s why we created it. 😉

Please don’t use it with WordPress MultiSite, as it has not been tested.

The plugin CF7 Redirect is great for redirecting the form to a thank you page using the DOM events BUT it should not be used together with this plugin because it could create JavaScript errors.

Be careful with the plugin Contact Form 7 – PayPal & Stripe Add-on because after payment it redirects the user to a thank you page using the DOM events and therefore it should not be used together with this plugin because it will create JavaScript errors.

If you want to track the Facebook pixel leads please be advised that the plugin doesn’t work with the PixelYourSite plugin :-(. PixelYourSite uses it’s own functions instead of the standard fbq() functions of the Facebook pixel. The makers of the plugin were asked about how to track Contact Form 7 submissions and How can we track Contact Form 7 forms? and they have no real solution (redirecting to another page is not a solution and tracking the click of the submit button is also not a solution as we only want to track when the form was correctly sent). If you are using PixelYourSite and want to track the form submissions without using a thank you page, we would recommend you to use the Pixel Caffeine plugin from our friends of AdEspresso / Hootsuite. We like Pixel Caffeine because it’s easy to use, powerful and 100% free including the possibility to manage the Facebook Product Catalog with full WooCommerce & Easy Digital Downloads support.

If you are having problems with the plugin, first have a look at Javascript error in the Inspector Console. JavaScript errors can prevent the plugin from executing the tracking. No JavaScript errors should appear.

In order to Troubleshoot Google Analytics problems you can use the Tag Assistant (by Google) in the Google Chrome Browser. There you can track if everything works correctly. Please keep in mind that you have to ENABLE the Tag Assistant and then reload the page.

In order to Troubleshoot Facebook Pixel problemas you can use the Google Chrome Extension: Facebook Pixel Helper. There you can see if everything works correctly.

When you access a page with a Contact Form and the Facebook Pixel tracking enabled, you will se a “PageView” event that is green and a “Lead” event which has a red warning: “ERRORS: The Facebook pixel code on this page didn’t load, so no information was sent to Facebook”.

That the lead event has a red warning is normal. Here at Troubleshooting Pixel Errors you have more information:

Pixel Did Not Load: This error means that the Pixel Helper found what looks to be Facebook pixel code on your site, but the actual HTTP call was never made. This could typically due to an error in the code, but could also occur if the pixel fires on a dynamic event (e.g. on a button click). In that case, the error will disappear upon clicking on the button.

After sending correctly the contact form, the red warning disappears and a Green sign appears that indicates that the pixel fired correctly.

If you get the following JavaScript error in the Inspector Console uncaught TypeError: Cannot read property 'style' of null, then it seems that you activated the option: “Hide form after succesful submission?” which hides the contact form after it has been completed and sent correctly, but didn’t implement the code correctly.

In order to be able to hide only the form and not the succesful submission message, the form must be wrapped in a div called hidecontactform7contactform.

This has not been done and as this option adds this code to wpcf7mailsent: document.getElementById('hidecontactform7contactform').style.display = 'none'; it ends with a JavaScript error and the Facebook Pixel is not fired.

Please either uncheck this option or wrap the form into the div called hidecontactform7contactform.