Track succesfull form submissions with Contact Form 7 using DOM events
|Author:||Apasionados (profile at wordpress.org)|
|WordPress version required:||4.0.1|
|WordPress version tested:||4.9.6|
|Added to WordPress repository:||04-09-2017|
|Total downloads:||2 359|
Click to start download
New menu entry in Contact after plugin is activated.
DOM Tracking under Contact menu
Plugin configuration options.
- First you will have to upload the plugin to the
- Then activate the plugin in the plugin panel.
- Go to CONTACT FORM 7 / DOM Tracking.
- Configure settings.
Why did you make this plugin?
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.
Does Contact Form 7 Submission DOM make changes to the database?
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.
How can I check out if the plugin works for me?
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.
Is there anything to take into consideration?
I use Google Analytics for WordPress by MonsterInsights. Does your plugin work with it?
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.
How can I remove Contact Form 7 Submission DOM tracking?
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.
Which PHP version do I need?
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.
Are there any known incompatibilities?
Please don’t use it with WordPress MultiSite, as it has not been tested.
Is this plugin compatible with WPML
Yes. We are running the plugin on several sites with WPML 3.7.x and 3.8.x.
Are there any server requirements?
Yes. The plugin requires a PHP version 5.5 or higher and we recommend using PHP version 7 or higher.
Do you make use of Contact Form 7 Submission DOM tracking yourself?
Of course we do. That’s why we created it. 😉
TROUBLESHOOTING Google Analytics tracking
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.
TROUBLESHOOTING Facebook Pixel
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.
TROUBLESHOOTING Cannot read property ‘style’ of null
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
This has not been done and as this option adds this code to
Please either uncheck this option or wrap the form into the div called
- Added Troubleshooting tips to the FAQ.
- All plugin options are deselected on first install.
- Added comment about tracking form submissions as page view in Google Analytics: It can create 404 errors in Google Search Console so we recommend not to use it.
- Changed default URL to track the pageview to: “URL of the contact form” + “/ok/”. For example if the contact form is on /contact/ the pageview when submitted successfully will be /contact/ok/
- Added Event Label information on settings page.
- Added Event Label to Google Analytics Event tracking with the contact form URL.
- Added check for Contact Form 7 version on Settings Page.
- Added options to customize Google Analytics events and page views.
- Added more options and made more options configurable.
- Made tracking options configurable.
- Added admin screen at Contact Form 7 / DOM tracking
- First official release.