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 and/or a reCAPTCHA 2. 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" fields are hidden form fields that lure bot users into completing a field that human users can't see. A form submitted with a completed honeypot field can be safely rejected because only a bot would see 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>
Now if someone enters any value in the
bot-field, Netlify will quietly reject the form submission.
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.
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 via 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 your Netlify dashboard and add the following environment variables to your site’s Settings > Build & deploy > Environment > Environment variables panel:
SITE_RECAPTCHA_KEYwith the reCAPTCHA API site key.
SITE_RECAPTCHA_SECRETwith the reCAPTCHA API secret key.
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 via 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.