Contact Form 7 is a good WordPress community member in regards to it’s use of JavaScript and plugs correctly 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.

Spinning arrow continues to rotate after submitting a formThe 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 (switch temporarily to a default theme), if you want to get to the source of the problem.

Build multi-part forms quickly and easily within Contact Form 7

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.

Use Firebug or Chrome Dev Tools

You can use Firebug or Chrome Dev Tools to try to find the cause of JavaScript conflicts with Contact Form 7.

In looking at JavaScript conflicts 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 Fire​bug or Chrome ​Dev Tools to see where the JavaScript stops responding.

See Using Firebug or Chrome Dev Tools for some general guidance on using Firebug or Chrome Dev Tools to find JavaScript conflicts.

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.

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 http://contactform7.com/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.

CF7 Skins - great looking Contact Form 7 forms made easy

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

Would you like some direct personal help using Contact Form 7


In my time answering questions in the Contact Form 7 support forum, I’ve noticed that some users would really like to get some direct personal help from me and would be happy to pay for that advice.

I also realized that I could answer most questions on Contact Form 7 in a few minutes that some people were spending hours trying to solve – often without success.

So putting those discoveries together, I decided to offer my expertise in this area on clarity.fm to see if people find it useful.

I recommend a requested call length of 15 minutes – this is sufficient to answer most questions.

%d bloggers like this: