All form submissions are filtered for spam using Akismet, an industry leader in spam detection. Only submissions that pass the filter are included in your form’s Verified submissions list in the form submissions UI. Submissions flagged as spam by Akismet can be found by switching to your form’s Spam submissions list.
You can change the state of a submission from spam to verified or vice versa.
# Extra spam prevention
For additional protection to help prevent abuse of your forms, you can add a honeypot field, a reCAPTCHA 2, or both. We automatically reject submissions that do not pass these challenges. Junk submissions caught by a honeypot field or reCAPTCHA 2 won’t even be included in your form’s spam submissions. The Submissions page for a form will indicate if it has any extra spam prevention enabled.
# Honeypot field
“Honeypot” fields are hidden form fields that lure bot users into completing a field that human users can’t detect. A form submitted with a completed honeypot field can be safely rejected because only a bot would detect and complete the field. You can alert Netlify to a hidden honeypot field by adding a
netlify-honeypot attribute to your
Here’s an example:
<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true" > <p class="hidden"> <label> Don’t fill this out if you’re human: <input name="bot-field" /> </label> </p> <p> <label> Email: <input type="text" name="email" /> </label> </p> <p> <label> Message: <textarea name="message"></textarea> </label> </p> <p> <button type="submit">Send</button> </p> </form>
When Netlify’s build bots parse the static HTML during post-processing, they automatically strip the
netlify-honeypot attribute from the
<form> tag, leaving the honeypot input field in place. In the example above, if a spambot enters any value in
bot-field, Netlify will quietly reject the form submission.
If you submit your form with AJAX, make sure that the honeypot field name is included in the body of the POST request.
# reCAPTCHA 2 challenge
# Netlify-provided reCAPTCHA 2
To have Netlify provide the CAPTCHA:
- Add a
data-netlify-recaptcha="true"attribute to your
- In the place where you’d like the CAPTCHA to appear, add an empty
<div>element inside your form with the same
When your site is published, the form will include the necessary HTML to render the CAPTCHA.
Here’s an example:
<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true" > <p> <label> Email: <input type="text" name="name" /> </label> </p> <p> <label> Message: <textarea name="message"></textarea> </label> </p> <div data-netlify-recaptcha="true"></div> <p> <button type="submit">Send</button> </p> </form>
When a visitor submits the form, our servers will validate the CAPTCHA server-side. If the validation fails, we’ll redirect the visitor back to the same page and reject the form submission.
You can include one Netlify-provided reCAPTCHA 2 challenge per page. To use multiple challenges on one page, add custom reCAPTCHA 2.
# Custom reCAPTCHA 2
In this case, Netlify needs your reCAPTCHA 2 site key and secret for validating that the captcha response is correct. You can provide these values with environment variables in your site settings. Use
SITE_RECAPTCHA_KEY to set your site key, and
SITE_RECAPTCHA_SECRET to set the secret provided by reCAPTCHA 2.
To set up a custom reCAPTCHA:
Sign up for a reCAPTCHA API key pair and follow the instructions for adding reCAPTCHA to your site. This typically involves adding a script before the closing
</head>of your HTML template, and a snippet at the end of the
<form>where you want the reCAPTCHA widget to appear.
Log in to Netlify and add the following environment variable key/value pairs to the Site settings > Build & deploy > Environment > Environment variables panel:
- Key of
SITE_RECAPTCHA_KEYand Value of the reCAPTCHA API site key.
- Key of
SITE_RECAPTCHA_SECRETand Value of the reCAPTCHA API secret key.
- Key of
data-netlify-recaptcha="true"attribute to the HTML form that has the custom reCAPTCHA widget.
<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true" > <!-- input fields and custom reCAPTCHA snippet --> </form>
The Netlify servers will check the submissions from that form, and accept them only if they include a valid
If you submit your form with AJAX, make sure the
g-recaptcha-response field is included in the body of the POST request.
Did you find this doc useful?
Your feedback helps us improve our docs.