There may be times when a form doesn’t submit as expected. This can happen for a variety of reasons, and in most cases, it’s due to conflicts with third-party software. This article guides you through a series of steps to help identify and resolve the issue.
How Submissions Work
To understand why a form submission might fail, it’s helpful to first know what happens behind the scenes when a form is submitted. Each submission involves sending a request, processing actions on the server, and returning a response to the browser. Here’s a breakdown of how that process works.
1. Request
When a form is submitted, a request is sent to WS Form by using the WordPress REST API. The request contains all of the submitted form fields plus any other data you may have configured for the form such as tracking data. The request is sent as a JSON packet.
Requests come in 3 types:
- Submit (Regular form submission)
- Save (Form save)
- Action (Action run immediately via conditional logic)
2. Action Processing
When the request is received, WS Form will run any actions configured to run for the request type, such as Save Submission, Show Message or Send Email. If any errors occur, WS Form will halt processing and send error details in the response.
3. Response
WS Form sends a response back to the web browser with a JSON packet. The JSON packet contains actions that need to be run client-side such as showing a success message or redirecting to another page.
Identifying Submission Errors
Most of the time, submission errors will be displayed after the submit button has been clicked.
Error messages will be shown for:
- Email sending errors
- Integration errors
- Webhook errors
- Malformed submission responses (e.g. if the JSON packet broken because of PHP error or warning messages)
- Server-side validation errors
Using the Debug Console
The WS Form debug console is a powerful tool that helps you diagnose, troubleshoot, and optimize form behavior directly within your browser.
The debug console will often include more information about an error as well as log information about actions.
To enable the debug console:
- Click on Settings in the WS Form admin menu.
- In the Basic tab, set Debug Console to Administrators only.
- Click Save.
When previewing a form or viewing a form on your site, the debug console will now appear at the bottom of the screen.
The Log tab can be used to see details about actions, event and other useful information about the lifecycle of the current form submission.
The Error tab will show any errors that have occurred during the action process or if the form submission response is malformed.
Learn more: Debug Console & Testing and Debugging Forms
Using the Browser Inspector
When a form or website feature isn’t working as expected, your browser’s built-in developer tools can help you pinpoint the issue. Here’s how to use the browser inspector to track down JavaScript and network-related errors.
1. Open the Browser Inspector
In most modern browsers (like Chrome, Firefox, or Edge), you can open the inspector by:
-
Right-clicking on the page and selecting Inspect, or
-
Pressing
F12orCtrl+Shift+I(Cmd+Option+Ion Mac).
2. Check for JavaScript Errors
Click on the Console tab. Any JavaScript errors will appear here in red. These may include:
-
Syntax or runtime errors in scripts
-
Conflicts between themes or plugins
-
Deprecated functions or undefined variables
Each error usually includes a file name and line number, making it easier to locate and resolve.
3. Monitor Network Activity
Next, go to the Network tab. This panel shows all requests made by the page (like form submissions or API calls). To capture everything, refresh the page after opening the Network tab.
You can filter by XHR or Fetch to focus on asynchronous requests (such as AJAX form submissions).
Look for requests that return a red status code (like 404 or 500). These indicate failed or incomplete responses from the server.
4. Check the Server Response
Click on any request in the Network tab to view its details. Then click the Response sub-tab. This shows the raw response returned by the server, which may include:
-
A success or error message
-
Debugging output
-
A PHP error, stack trace, or JSON error
-
HTML content indicating a redirect or login screen
Reviewing the Response tab can help you understand exactly what the server is sending back, and whether it matches what you expect.
Once you’ve identified the issue—whether it’s a JavaScript error or an unexpected server response—you can begin troubleshooting. This might involve fixing a script, adjusting plugin settings, or passing the error details to the WS Form support team.
Enabling Email Notifications
WS Form can send you an email if an error occurs when WS Form is processing form actions.
Learn more: Send Submissions Error Email Notifications