Movatterモバイル変換


[0]ホーム

URL:


Netlify Docs
Configure & deploy site/Forms/

Spam filters

All form submissions are filtered for spamusing Akismet, an industry leader in spam detection. Only submissions that pass the filter are included in your form’sVerified submissions list in theform submissions UI. Submissions flagged as spam by Akismet can be found by switching to your form’sSpam submissions list.

Tip

You canchange 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 ahoneypot field, areCAPTCHA 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. TheSubmissions 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 anetlify-honeypot attribute to your<form> with the name of your hidden field. Then make sure that field is present in the form, but hidden via CSS or JavaScript.

Here’s an example:

<formname="contact"method="POST"netlify-honeypot="bot-field"data-netlify="true"><pclass="hidden"><label>      Don’t fill this out if you’re human:<inputname="bot-field"/></label></p><p><label>      Email:<inputtype="text"name="email"/></label></p><p><label>      Message:<textareaname="message"></textarea></label></p><p><buttontype="submit">Send</button></p></form>

When Netlify parses the static HTML during post-processing, the build system automatically strips thenetlify-honeypot attribute from the<form> tag, leaving the honeypot input field in place. In the example above, if a spambot enters any value inbot-field, Netlify will quietly reject the form submission.

If yousubmit your form with AJAX, make sure that the honeypot field name is included in the body of the POST request. This happens automatically if you useFormData() to encode the body of the request.

# reCAPTCHA 2 challenge

If you would like to add areCAPTCHA 2 challenge to a form, Netlify can include one for you, or you canadd your own.

# Netlify-provided reCAPTCHA 2

To have Netlify provide the CAPTCHA:

  1. Add adata-netlify-recaptcha="true" attribute to your<form> tag.
  2. In the place where you’d like the CAPTCHA to appear, add an empty<div> element inside your form with the samedata-netlify-recaptcha="true" attribute.

When your site is published, the form will include the necessary HTML to render the CAPTCHA.

Here’s an example:

<formname="contact"method="POST"data-netlify-recaptcha="true"data-netlify="true"><p><label>      Email:<inputtype="text"name="name"/></label></p><p><label>      Message:<textareaname="message"></textarea></label></p><divdata-netlify-recaptcha="true"></div><p><buttontype="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, addcustom reCAPTCHA 2.

# Custom reCAPTCHA 2

You can also add your own reCAPTCHA 2 code in your site and let Netlify validate that form submissions come from a human. This is useful if you want to have more control over your validations, if you use a JavaScript library to inject a CAPTCHA in your forms, or if you need more than one CAPTCHA on a page.

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 withenvironment variables in your project configuration. UseSITE_RECAPTCHA_KEY to set your site key, and useSITE_RECAPTCHA_SECRET to set the secret provided by reCAPTCHA 2.

To set up a custom reCAPTCHA:

  1. 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.

  2. Create the following environment variables for your siteusing the Netlify UI, CLI, or API:

    • A variable with the key name ofSITE_RECAPTCHA_KEY and a value set to your reCAPTCHA API site key. If you have the option to set specificscopes for your environment variables, the scope must include bothBuilds andRuntime.
    • A variable with the key name ofSITE_RECAPTCHA_SECRET and a value set to your reCAPTCHA API secret key. If you have the option to set specificscopes for your environment variables, the scope must includeRuntime.
  3. Add adata-netlify-recaptcha="true" attribute to the HTML form that has the custom reCAPTCHA widget.

    <formname="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 validg-recaptcha-response value.

If yousubmit your form with AJAX, make sure theg-recaptcha-response field is included in the body of the POST request. This happens automatically if you useFormData() to encode the body of the request.

Setup Submissions

Did you find this doc useful?

Your feedback helps us improve our docs.


[8]ページ先頭

©2009-2025 Movatter.jp