How to Troubleshoot JavaScript Issues in WPForms

Are you or your site visitors experiencing JavaScript issues when submitting your WPForms? Many site owners use optimization and caching plugins to help speed up their sites. However, some features included in these plugins can cause WPForms functions to not work properly.

In this guide, we’ll cover ways to troubleshoot common JavaScript issues in WPForms.


Identifying JavaScript Issues

WPForms relies heavily on JavaScript for many of its features, such as field validation, conditional logic, CAPTCHA, and many more. If a form is not working as expected, a JavaScript issue is one of the things to check for.

In most cases, if the JavaScript within your forms is broken, you will see the error This page isn’t loading JavaScript properly, and the form will not be able to submit. Please check out our troubleshooting guide for details on resolving this issue. whenever a form submission is attempted.

JavaScript error

When this happens, it’s a good idea to do a quick check to see if your form is using the correct validation. To do this, go ahead and submit a form that has one or more required fields with no data filled in.

In a form where the JavaScript is running properly, each field validation will be in red.

Validation error

However, if essential JavaScript files aren’t being loaded, or are loaded incorrectly, then the browser’s built-in validation will appear instead.

Browser validation

If you are seeing the browser’s built-in validation, you’re likely experiencing a JavaScript issue. In most cases, these JavaScript issues are caused by optimization and caching plugins. In the next section, we’ll go over common features within these plugins that can cause JavaScript issues.

Optimization and Caching Plugins

JavaScript issues caused by optimization and caching plugins are usually due to these commonly found features:

  • Minify: Removes unnecessary characters from the code, such as white spaces, which produces a smaller file so that less data needs to be transferred.
  • Combine: Merges separate JavaScript/CSS files into one file to reduce the number of calls made to the server.
  • Load Deferred (Asynchronously): Disables the JavaScript and CSS files from being loaded and executed during page load, so that the page doesn’t need to “wait” for them.

In order to prevent WPForms JavaScript from being affected by these features (and potentially breaking core functionality), we can adjust specific settings within the optimization and caching plugins.

Adjusting Optimization Settings

In this section, we’ll cover how to exclude WPForms assets from popular optimization and caching plugins. We’ll also go over other settings that can be adjusted within each specific plugin, which can help to fix or prevent JavaScript issues.

WP Rocket

WP Rocket is a popular caching plugin for speeding up sites. However, in some cases, WPForms users run into issues because of its Combine JavaScript files option.

If you’re experiencing an issue with WPForms and WP Rocket, you can exclude WPForms assets and other JavaScript files from being optimized. In the next section, we’ll go over a few ways to do this.

Excluding a Page or Post

Excluding only a single page or post from optimization is a good option if you’re only experiencing issues on a single page within your site. In this example, we’ll show you how to exclude a single page from optimization when using the WordPress Block Editor.

First, open up the page you’d like to exclude. Then, navigate to the Page tab and open up the WP Rocket Options section. From here, make sure the Minify/combine JS option is unchecked and save your settings.

Minify combine JS WP Rocket page

Excluding WPForms Assets

Excluding WPForms assets will prevent the plugin’s JavaScript from being optimized site-wide. This can be helpful if you’ve run into issues with multiple forms and don’t want to go through each page or post to disable the optimization settings.

To exclude WPForms assets from optimization, navigate to Settings » WP Rocket and open up the File Optimization tab. From there, scroll to the JavaScript Files section.

File optimization option WP Rocket

If you have the Minify JavaScript files option enabled, then under it you should see a box labeled Excluded JavaScript Files 

JavaScript files section

In this box, add the following script:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Once you’ve added the script, be sure to click the SAVE CHANGES button to save your settings.

Excluded JS files minify JS

Now that you’ve excluded these assets, your forms should now work as expected on the frontend.

Excluding Files From Delaying JavaScript Execution

If you’re experiencing JavaScript issues and have the Delay JavaScript execution option enabled, WP Rocket suggests that you add some default exclusions to avoid complications.

To do this, go to Settings » WP Rocket » File Optimization, then scroll to the Delay JavaScript execution section.

Delay JS execution section

In the box labeled Excluded JavaScript Files, add the following scripts:

/jquery-?[0-9.](.*)(.min|.slim|.slim.min)?.js
js-(before|after)
(?:/wp-content/|/wp-includes/)(.*)

Then, be sure to save your changes by clicking the SAVE CHANGES button.

Excluded JS files delay JS execution

Note: For more specific information on WP Rocket settings, please refer to their documentation.

Autoptimize

In the Autoptimize plugin, the Optimize JavaScript Code option has been found to cause form issues in many cases.

If forms aren’t working as expected when Autoptimize is active on your site, and you’ve identified a JavaScript issue, you can try the following steps:

Excluding WPForms Assets

Within the Autoptimize settings, WPForms assets can be excluded from JavaScript optimization. To do this, first, you’ll need to navigate to Settings » Autoptimze.

Autoptimize settings

Then, under the JS, CSS & HTML tab, scroll to the Exclude scripts from Autoptimize section. Within this field, add the following script to exclude WPForms assets:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Note: By default, Autoptimize automatically adds some excluded scripts to the Exclude scripts from Autoptimize field. When manually adding scripts to this field, be sure to separate each one by a comma.

Exclude scripts from Autoptimize

Next, scroll to the Misc Options section and uncheck the box next to the Minify excluded CSS and JS files? option.

Minify CSS and JS Autoptimize

When you’re ready, be sure to save your settings by clicking the Save Changes and Empty Cache button at the bottom of the page.

Save changes and empty cache button

Disabling JavaScript Optimization

If excluding WPForms assets doesn’t resolve the issue, then you’ll need to disable the Optimize JavaScript Code option.

To do this, scroll to the top of the JS, CSS & HTML page and uncheck the box next to Optimize JavaScript Code?.

Disable optimize javascript code

Then, click the Save Changes and Empty Cache button to save your settings.

Save changes and empty cache button

Async JavaScript

The Async JavaScript plugin is used to optimize a site’s JavaScript by adding either async or defer attributes to JS scripts.

Here is the difference between the async and defer attributes:

  • Async: downloads JavaScript while still parsing HTML, but pauses the HTML parsing to execute the JavaScript.
  • Defer: downloads JavaScript while still parsing HTML, but waits to execute it until after HTML parsing is finished.

If either of these attributes is added, it can cause some WPForms scripts to load differently, resulting in an error.

If your forms aren’t working with Async JavaScript enabled, and you’ve identified a JavaScript issue, please proceed with the following steps:

Deactivating Async JavaScript

The first step is to deactivate the Async JavaScript plugin, then check if the issue is resolved. If deactivating the plugin helped, you can reactivate it, then move on to the next step.

Excluding WPForms Assets

Within the Async JavaScript settings, WPForms assets can be excluded from JavaScript optimization in two different ways: Script Exclusion or Plugin Exclusion. We’ll go over each of these options below:

Script Exclusion

To exclude WPForms scripts from Async JavaScript, you’ll need to navigate to Settings » Async JavaScript.

Async JavaScript Settings

Then, scroll to the Script Exclusion section. In the Scripts to Exclude field, input the following script:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Script exclusion Async JavaScript

Once you’ve added the script, be sure to save your settings by clicking the Save Settings button at the bottom of the page.

Save settings button Async JavaScript

Plugin Exclusion

To exclude any JavaScript files that are contained within the WPForms plugin, scroll to the Plugin Exclusion section, and click on the Exclusions field. Then, select WPForms.

Plugin exclusions Async JavaScript

Next, click the Save Settings button to save your changes.

Save settings button Async JavaScript

W3 Total Cache

W3 Total Cache has two different areas where you can configure settings for minifying JavaScript code: General Settings and Minify. We’ll go over how to disable JavaScript minification in both options.

General Settings

First, you’ll need to access the general settings in Performance » General Settings. Then, scroll to the Minify section.

General settings W3 Total Cache

From here, be sure to disable the Minify option by unchecking the Enable checkbox.

Disable minification W3 Total Cache

Then, click on the Save Settings & Purge Caches button and check if you still have a JavaScript issue.

Save settings and purge caches button.

Minify

If the steps above don’t resolve the issue, you can further fine-tune the optimization settings. To do this, go to Performance » Minify. Then, scroll to the JS section.

Then, disable the JS minify settings by unchecking the checkbox next to Enable.

JS minify settings W3

When you’re ready, click the Save Settings & Purge Caches button and check to see if the issue is resolved.

Save settings and purge caches button.

If the issue still persists, scroll to the Advanced section and locate the Never minify the following JS files field. In this field, you can exclude WPForms assets by inputting the following script:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Exclude WPForms assets W3 Total Cache

Once you’ve added the WPForms script, be sure to click the Save Settings & Purge Caches button to save your changes.

Note: For more specific information on W3 Total Cache settings, please refer to their documentation.

Save settings and purge caches button.

SiteGround Optimizer

The SiteGround Optimizer plugin has several options for JavaScript optimization within the  Frontend Optimization Settings. If you have identified a JavaScript issue on your site, and you’re using this plugin, then follow the steps below to help troubleshoot the issue.

Frontend Optimization Settings

First, you’ll need to access the minification settings by navigating to SG Optimizer » Frontend, then clicking on the JAVASCRIPT tab.

SG frontend optimization settings

From here, check to see if either the Minify JavaScript Files or the Combine JavaScript Files options are enabled. If they are, disable them by toggling the switches to the off position.

SiteGround disable minify combine JS

After you make any changes, SiteGround will automatically save them for you.

Before checking to see if you’ve resolved the issue, be sure to clear your cache. You can do this from the WordPress admin dashboard by clicking on Purge SG Cache at the top of the page.

Note: For more specific information on SiteGround Optimizer settings, please refer to their documentation.

Purge SG cache

LiteSpeed Cache

LiteSpeed Cache is a plugin commonly used on LiteSpeed servers. If this plugin is active on your site, and you’ve identified a JavaScript issue, please try the following steps:

Excluding a Page or Post

If you’re only experiencing a JavaScript issue on a certain page or post where you’re using WPForms, you can choose to exclude it from JavaScript optimization. To do this, go to LiteSpeed Cache » Page Optimization, and click the Tuning tab.

LiteSpeed Cache tuning

Then, scroll to the URI Excludes section, and enter the path to your post or page. For our example, we’ll add our contact page.

URI excludes

Now that you’ve added the path to your post or page, go ahead and click the Save Changes button at the top-right of the page.

Click save changes button LiteSpeed Cache

Excluding WPForms Assets

To exclude WPForms assets from LiteSpeed Cache, go to LiteSpeed Cache » Page Optimization, and click the Tuning tab.

From here, locate the JS Excludes field, and input the following script:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Exclude WPForms assets LiteSpeed Cache

Once, you’ve added the script, click the Save Changes button located at the top-right of the page.

Click save changes button LiteSpeed Cache

If you’re still experiencing JavaScript issues after completing the steps above, proceed to the next section.

Disabling JavaScript Optimization

To get to the JavaScript optimization settings, click on the JS Settings tab.

LiteSpeed Cache Page Optimization

Next, if the JS Minify, JS Combine, and Load JS Deferred options are toggled ON, be sure to toggle them to the OFF position.

Toggle JS minify options off

Once, you’ve made your changes, click the Save Changes button located at the top-right of the page.

Save changes button JS settings

Note: For more specific information on LiteSpeed Cache settings, please refer to their documentation.

WP Fastest Cache

WP Fastest Cache offers caching and optimization features, which can both cause potential issues when used with WPForms.

If this plugin is active on your site, and you’ve identified a JavaScript issue, please try the following steps:

Excluding WPForms Assets

To exclude WPForms assets from WP Fastest Cache, go to WP Fastest Cache, and click the Exclude tab.

WP Fastest Cache exclude tab

Then, scroll to the Exclude JS section, and click the Add New Rule button.

Exclude JS add new button

An Exclude Page Wizard overlay will now be displayed. Within the input field, add the following script, then click the SAVE button:

/wp-content/plugins/wpforms/assets/js/wpforms.min.js

Exclude assets WP Fastest Cache

If the JavaScript issue still persists, please proceed with the following steps.

Disabling JavaScript Optimization

To disable JavaScript optimization, navigate to WP Fastest Cache and click on the Settings tab.

WP Fastest Cache settings tab

Next, make sure the Minify JS and Combine JS options aren’t enabled. If they are enabled, uncheck the boxes next to each option to disable them.

Disable JS optimization WP Fastest Cache

Once, you’ve disabled these options, click the Submit button located at the bottom of the page.

Click submit button WP Fastest Cache

That’s it! Now you know how to troubleshoot JavaScript issues in WPForms.

Next, would you like to get more support or learn more tips for troubleshooting WPForms? Be sure to check out our troubleshooting guide for more details.