Skip to main content

Troubleshooting Form Issues

This guide walks you through troubleshooting and diagnosing some of the most commonly reported issues with your form's appearance, behavior, or submission of the form on the front end.

Instructions

1

Check Freeform Diagnostics page

Some of the most common issues in Freeform are related to the following:

  1. A newer version of Freeform resolves the issue. Please make sure you're using the latest version of Freeform, or at least check the Changelog to see if any relevant items have been fixed in newer versions.
  2. Javascript Test for Honeypot is enabled. This feature can be powerful for helping prevent spam on your forms, but it can easily break if your forms are not called correctly and/or you're using caching on your site. If using caching + Javascript Test feature, please see the Caching guide.
  3. The Freeform Script Insert Location setting is set to Manual. Most sites should use Page Footer, but in some cases it may be necessary to load these manually. If you must use Manual, please make sure you're loading Freeform's scripts in your forms with freeform.loadFreeformPlugin(). Please see the guide in the JS Plugin documentation for more info.
  4. There's an issue that Freeform has logged in the Error Logs. Freeform will sometimes log issues it discovers in its own error log file. Check out this area and see if there are any clues as to what might be causing the issue.

If no relevant issues are found on the Diagnostics page, please proceed to step 2 below...

2

Create a New Simple Template

Sometimes a quick and easy solution is to create a new template and add a basic Freeform form using the default Freeform sample template. This will help identify whether the issue is caused by errors in custom formatting templates, configuration issues, or other scripts that conflict with Freeform's.

This can alternatively be done by installing and using the Demo Templates that come with Freeform.

  1. Create a new template in your Craft /templates/ directory. Please ensure this is a blank template file, clean of any existing site layouts, scripts, etc.

  2. Copy and paste the following code into your new template, but replace yourFormHandle with the actual handle of your form:

    <html>
    <head></head>
    <body>

    {{ freeform.form("yourFormHandle", {
    formattingTemplate: 'basic-light/index.twig'
    }).render() }}

    </body>
    </html>
    • The formattingTemplate: 'basic-light/index.twig' parameter will force Freeform's Basic Light formatting template, which could help narrow down whether there are issues with your own custom formatting template (if applicable).

      It is not enough to just paste the freeform.form query into a blank template. It needs to contain the closing </body>` tag to know where to insert Freeform's scripts (if using the Page Footer option).

3

Load Your Form and Test

Go to the newly created template to load the form and see if everything works and behaves correctly.

  1. Does the form appear to display and behave correctly?
  2. Does the form submit correctly, without issue?

Works? If the form displays and behaves correctly in this isolated test, it could be an issue with your custom formatting template or conflicts from other scripts with Freeform's scripts.

  • To troubleshoot this further, work in small steps. Stay inside the isolated test template and follow the steps below:
    1. Remove the formattingTemplate: 'basic-light/index.twig' parameter (thus pulling in your chosen and potentially problematic formatting template) from the Form query and see how the form displays and behaves.
    2. The isolated template may continue to display and behave incorrectly due to missing styles and assets. Try slowly pulling in some of those into the isolated test template and see if it breaks.
    3. If issues continue, compare your custom formatting template to existing formatting template examples included with Freeform.
    4. If you're still not getting anywhere, try creating a brand new custom formatting template based on one of the formatting template examples included with Freeform.
      • Load it in the isolated test template and confirm it works correctly.
      • Slowly modify it to become closer to your original custom formatting template, checking the isolated test template often along the way to see when/where it breaks.
      • This process will help you narrow down where the issue might be.

Still Issues? If issues are still occurring in this isolated test, there could be an issue with your Freeform settings, site or server configuration, or server rewrite rules.

  • Proceed to step 4 for diagnosing common issues...
4

Check the Browser Console and Network Response

If the form still isn't loading or submitting correctly, check the browser's Console and see if any JS errors are logged. Also, check the Network tab for any issues. What you'll be looking for is the Response from a failed item.

  1. Click on the Network tab.
  2. In the filters menu, select All to ensure all items are shown.
  3. Look for any items that are in red and click on them. In the case of the below example, the options item was red.
  4. On the bottom-right side, click on the Response tab.
  5. The error will be logged here and will likely provide a clue as to where the issue might be. If you need assistance from the Solspace team, copy the error message there and create a new GitHub issue or private support ticket.
5

Contact Solspace Support

If you are unable to figure out the issue and need assistance from the Solspace team, please don't hesitate to create a new GitHub issue or private support ticket and provide all relevant information you discovered while attempting to troubleshoot the issue.

See Support Options
Finished!