Netlify provides out of the box support for automatic built-in form handling. Simply add an HTML form to your website and on your next build, Netlify will show your form on the project dashboard, along with any replies which have been received.
My forms aren't showing?! #
Although simple to set up, debugging why your forms aren't appearing on the Netlify dashboard requires a bit of investigation and understanding to how Netlify keeps track of your forms.
Firstly, do your forms show on your project overview page?
The left screenshot is what appears if your Netlify build has not detected any forms, whereas the right shows Netlify has detected our form, and is successfully receiving submissions.
If you see your forms on the dashboard, but don't receive submissions you may need to improve your spam filtering.
Valid forms #
In order for a form to be detected during build, a form has to pass validation:
- Your form must contain a
- The form must include a
- Every form input area must have a
nameattribute, which is used on the submission overview. Each
namewithin your form must be unique:
- If sending form submissions via an Ajax request, you must include a hidden
form-nameinput, with a value which equals your form name:
- If you let the browser handle form submissions, ensure your form includes a
Everything is valid, but my forms still don't show?! #
One common mistake is that developers think the 'inspected' HTML on their browser to match up with the server generated HTML (using
Right Click -> Inspect). Something else to keep in mind, is that developing with Gatsby provides a different build compared to a production one.
To find out what is it Netlify is processing during its own build, we can run the build command locally:
Within your editor, open up the
contact-us page on your site, expect to find a
public/contact-us/index.html file. Go ahead and open it.
In the file, you'll find a minified HTML output. This output is what Netlify scans during its own build process, searching for your valid form. Search this file for a
<form HTML element.
It exists: Great! This means your form is being detected, however something is wrong with it. Ensure all the validation steps above have been double-checked. If you're absolutely certain everything is correct, then you best contact Netlify support.
It doesn't exist: See below.
The above scenario can be applied to most applications, for example if performing an AJAX request to fetch data before rendering the form.
The reason for this happening could also be a library you're using, such as redux-persist, which waits until the browser can access local storage before re-hydrating redux, and renders nothing on the server.
If you're still struggling to get your forms working, drop me a tweet, and I'll happily take a look :)