Contact Form 7 is a good WordPress community member in regards to its correct use of JavaScript and plugs into the WordPress architecture.
However there are many plugins and themes that are not so well written and a host of problems can be due to a JavaScript conflict with either your current WordPress theme or one of the other plugins you are using.
Because it’s so popular, Contact Form 7 acts a bit like a canary in coal mine sniffing out plugins that cause JavaScript Conflicts.
Common signs you have a JavaScript Conflict
The spinning arrow continuing to spin after submitting a CF7 form, is a common symptom of a JavaScript conflict.
This typically indicates that Contact Form 7’s JavaScript is not completing due to a problem in some other JavaScript loaded on that page.
If the JavaScript added by one other plugin has an error, the execution of the code will generally stop. Subsequent scripts loaded by any other plugin or the theme will not be run and the functionality breaks.
Step by step approach to finding JavaScript conflicts
The most common and generally easiest way to find JavaScript Conflicts is to disable temporarily all JavaScript on your site, other than that from Contact Form 7, and then add back items until you get the problem again.
1. Switch temporarily to a WordPress default theme (Twenty Eleven etc.) and see if the problem goes away.
If it does, you’ve most likely got a JavaScript conflict with your current WordPress theme.
If switching to default theme doesn’t help it could be one of the plugins you are using that is causing the problem.
2. Disable (temporarily) all plugins other than Contact Form 7
If doing that solves the problem, you can then add back each item – one by one, until you find the possible cause of the problem.
Note: You may need to clear the browser cache between each one.
You will typically need to disable, temporarily, ALL JavaScript, other than that from Contact Form 7, including anything in your theme, if you want to get to the source of your problem.
Use Dev Tools to find JavaScript Problems
You can use Firebug or Chrome Dev Tools to try to find the cause of JavaScript conflicts with Contact Form 7.
Using Firebug or Chrome Dev Tools gives some general guidance on using Firebug or Chrome Dev Tools to find JavaScript conflicts.
In looking at JavaScript problems it’s important to realize that:
- Different JavaScript may be loading on different pages, as plugins should ideally only load JavaScript on relevant pages.
- Problems occurring on only some browsers or devices is relatively common with JavaScript Conflicts.
- Lack of errors and errors showing a symptom rather than the cause is unfortunately more commonly the case than not.
Finally, it may help you to run a JavaScript trace in Firebug or Chrome Dev Tools to see where the JavaScript stops responding.
Remember that a problem in one script can cause issues in another.
For example, some jQuery errors can stop jQuery processing any more script, which can make the culprit hard to find. A jQuery error in one of your plugins or your themes JavaScript files can stop jQuery processing before it gets to the CF7 script.
Contact the developer of the plugin or theme developer causing the conflict
If you identify a conflict with a particular plugin or theme, you can & should write to the plugin or theme developer and suggest they might have a possible conflict with CF7.
CF7 is one of the most popular plugins in the WordPress Plugin Repository, so it makes sense for developers to deal with any potential conflicts.
Also if a plugin or theme conflicts with CF7, it probably also conflicts with many other plugins. It can be a sign of a poorly coded theme or plugin that people should avoid using.
Using on_sent_ok in Additional Settings
Using on_sent_ok: in Additional Settings is often mentioned in the CF7 Support forum as a frequent contributor to problems.
If the JavaScript code you add here creates an error, for any reason, then the green success message that CF7 shows, when a form submission is sent sucessfully by email, may not display.
As such on_sent_ok: is a very powerful but potentially risky tool, particularly if don’t know exactly what you are doing with the JavaScript you add here.
You can temporarily clear out any items you have in Additional Settings to see if this is causing your problem.
You can stop Contact Form 7 loading any JavaScript
As a temporary stop gap measure you may consider stoping Contact Form 7 from loading any JavaScript.
When the value of WPCF7_LOAD_JS is set to false (default: true), Contact Form 7 does not load the JavaScript. You can set the value of this constant in your wp-config.php like this:
define(‘WPCF7_LOAD_JS’, false);
See Loading JavaScript and Stylesheet Only When it is Necessary
You will lose all of CF7’s Javascript functionality and of course the real cause is the theme or other plugin which we would likely regard as poorly written and avoid using.
You can also use Contact Form 7 Controls to disable all Contact Form 7 JavaScript via a simple option if want to avoid working with your wp-config.php file.
Useful Links
When Plugins Collide: Best Practices For Dealing With WordPress Plugin Conflicts
Conflict Diagnosis Guide for WordPress plugins
Using Your Browser to Diagnose JavaScript Errors
Debugging JavaScript
Contact Form 7 Troubleshooter
If you would like some help from our support staff & are willing to help us by providing information on your use of Contact Form 7 & CF7 Skins, you should complete the following form.
This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready + CF7 Skins Multi + CF7 Skins Logic
