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.
This guide will cover ways to troubleshoot common JavaScript issues in WPForms.
In This Article
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.
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.
However, if essential JavaScript files aren’t being loaded, or are loaded incorrectly, then the browser’s built-in validation will appear instead.
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.
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.
If you have the Minify JavaScript files option enabled, then under it you should see a box labeled Excluded JavaScript Files
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.
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.
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.
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.
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.
Next, scroll to the Misc Options section and uncheck the box next to the Minify excluded CSS and JS files? option.
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.
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?.
Then, click the Save Changes and Empty Cache button to save your settings.
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.
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
Once you’ve added the script, be sure to save your settings by clicking the Save Settings button at the bottom of the page.
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.
Next, click the Save Settings button to save your changes.
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.
From here, be sure to disable the Minify option by unchecking the Enable checkbox.
Then, click on the Save Settings & Purge Caches button and check if you still have a JavaScript issue.
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.
When you’re ready, click the Save Settings & Purge Caches button and check to see if the issue is resolved.
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
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.
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.
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.
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.
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.
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.
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.
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
Once, you’ve added the script, click the Save Changes button located at the top-right of the page.
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.
Next, if the JS Minify, JS Combine, and Load JS Deferred options are toggled ON, be sure to toggle them to the OFF position.
Once, you’ve made your changes, click the Save Changes button located at the top-right of the page.
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.
Then, scroll to the Exclude JS section, and click the Add New Rule 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
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.
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.
Once, you’ve disabled these options, click the Submit button located at the bottom of the page.
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.
