Why use Forms?
Please give these debugging tips a try before posting a new post!
Forms are one of the most useful parts of modern websites because they allow us to capture input from our users.
There are many ways to use forms: contact forms, sign-up forms. Because forms can take many … uh… forms, implementing one can become tricky. Here are some tried and true approaches to debugging common form errors and things to consider. Comments are welcome!
Form-handling works automatically for HTML forms that meet the following additional requirements:
- You need to have a
data-netlify=trueattribute in your
<form …>definition. Note that once the form is processed, the resulting HTML that we serve will NOT have that parameter in it anymore!
- You need to include a
nameattribute on the opening
<form>tag. When the page is deployed we will add a hidden input with a
form-nameattribute that’s the same as the name you set for the form. This is used in our API to determine which form is receiving the input. This is handled automatically as long as the form includes a
namein the opening
<form>tag needs to be unique on your site.
- Every input in the form must have a “name” attribute. Something like
<input name="email" ...>or
<textarea name="message" ...>is what you need. The name is sent along with the value in the submission and let’s our API know how to handle form submissions.
namein each of your
<input>tags needs to be unique in that form.
- Make sure that you POST your form request (not GET) with a Content-Type of
application/x-www-form-urlencoded. However, if you are submitting the form with a file upload then the
Content-Typeneeds to be
- We use Akismet on all form submissions. If you see the form in the app.netlify.com UI, but you don’t see any submissions, double check that you aren’t sending junk info in your test submissions.
If you have an HTML5 compliant form that follows those guidelines, it just works!
There are some things you’ll probably want to adjust to suit your tastes:
- if you want to show your own content after the POST rather than our generic thank-you page, make sure you include an “action=/path” (/path should be the page you want to display - might be “/” or “/thank-you/english.html” - must be either ‘thank-you’ to use our automatic thank you page, or a path starting with / - but NOT a complete URL starting with http(s) ). While you wouldn’t seem to need an action for AJAX forms - it’s how we know what show after submission, so you do need one unless you’d like us to show our thank-you page. If this path doesn’t exist, we will also use our own standard thank you page.
For a working example using react that you can generalize to other frameworks from, check out this blog post from a co-worker: https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/
OK, did it work? Here’s some tips to tell, and a caveat:
HTML forms: Once the HTML form is deployed with the
netlify attribute, you’ll see an entry (with its name from step 3) in our UI at
https://app.netlify.com/sites/YOURSITENAME/forms . This will be present in our UI immediately after deploying. If it isn’t, we haven’t processed the form for some reason such as it not being present in HTML form.
Netlify Recaptcha: If you’re using the
<div netlify-recaptcha></div> element to add our recaptcha, you can only have one on any single page. If you put this div in multiple places, only the first one parsed will be replaced with an actual recaptcha.