Join us at JAMstack Conf San Francisco, October 16-18. Register today

Forms

Netlify comes with built-in form handling. Our build bots do it by parsing your HTML files directly at deploy time, so there’s no need for you to make an API call or include extra JavaScript on your site.

Code an HTML form into any page on your site, add a netlify attribute or data-netlify="true" to the <form> tag, and you can start receiving submissions in your Netlify site admin panel.

Your form’s name attribute determines what we call the form in the Netlify app interface. If you have more than one form on a site, each form should have a different name attribute.

Here’s an example:

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>   
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

By default, when visitors complete a form, they will see a generically styled success message with a link back to the form page. You can replace the default success message with a custom page you create by adding an action attribute to the <form> tag, entering the path of your custom page (like "/pages/success") as the value. The path must be relative to the site root, starting with a /.

Receiving Submissions

You can find all submissions to your Netlify forms in the Forms tab of your site dashboard. Select a form name from the Active forms list to access the submissions for that form. By default, only verified submissions are listed. You can switch to spam submissions via a dropdown above the list. It is possible to export verified submissions to a CSV file. You can also access submissions via our API.

Netlify has several built-in notification options for verified form submissions, including email and Slack notifications. You can find them in Settings > Forms > Form notifications. Select the Add notification dropdown to see your options. (This feature may not be available on all plans.)

Netlify also integrates with Zapier, so you can set up triggers that send your verified form submissions to any of the 500+ applications in their catalog.

Use this link to get access to the Netlify Zapier app: Netlify on Zapier

File Uploads

Netlify Forms can receive files uploaded via form submissions. To do this, add an input with type="file" to any form. When a form is submitted, a link to each uploaded file will be included in the form submission details. These are viewable in the Netlify app, in email notifications, and via our API.

Exporting Submissions

In the Netlify app, you can export verified form submissions to a CSV file. From the Forms tab, select the form you want to export, then click the Download as CSV button near the top of the form detail page.

Deleting Submissions

To select one or multiple form submissions of a particular form, check the box next to each submission title.

After you select the submission(s), a red Delete button will become available. When you click on the delete button, you’ll be prompted to confirm the deleting action. Once you confirm, your selected submission(s) will be deleted permanently.

Serverless Functions Integration

You can integrate your forms with Netlify’s serverless functions by triggering a function on verified form submissions. Find out more in the Functions docs.

Spam Filtering

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. Submissions flagged as spam by Akismet can be found by switching to your form’s Spam submissions list.

For additional protection, you can add a honeypot field and/or an explicit reCAPTCHA 2 challenge. 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 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 <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:

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

Explicit reCAPTCHA 2

If you would like to add a reCAPTCHA 2 challenge to a form, Netlify can include one for you, or you can add your own. To have Netlify provide the CAPTCHA:

  1. Add a data-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 same data-netlify-recaptcha="true" attribute.

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 with your own settings

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, or you use a JavaScript library to inject a CAPTCHA in your forms.

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:

  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. 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_KEY with the reCAPTCHA API site key.
    • SITE_RECAPTCHA_SECRET with the reCAPTCHA API secret key.
  3. Add a 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 g-recaptcha-response value.

If you submit your form via AJAX, make sure the g-recaptcha-response field is included in the body of the POST request.

Changing a submission’s state

You can change the state of a submission from spam to verified or vice versa. To do so, select one or multiple submissions and then use the Mark as spam or Mark as verified button.

AJAX Form Submissions

You can submit forms over AJAX/XHR as well, by using the action attribute of the form as the target for the AJAX request.

Note that Netlify automatically adds a hidden field to your published form called form-name with a value to match the name attribute of the form when you submit an HTML form instead of building one with JavaScript. Make sure to include this field in your AJAX request!

Here’s a simple jQuery example:

$("#my-form").submit(function(e) {
  e.preventDefault();

  var $form = $(this);
  $.post($form.attr("action"), $form.serialize()).then(function() {
    alert("Thank you!");
  });
});

Note that the content of the AJAX request must be URL-encoded. In the above example, the jQuery serialize() function handles the URL encoding. Netlify forms do not support JSON form data at this time.

JavaScript-rendered forms

Our bots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our bots won’t find it in the pre-built files. You can work around this by creating a hidden HTML form with the data-netlify="true" attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our reCAPTCHA 2 integration, and create a div element in the hidden HTML with the data-netlify-recaptcha="true" attribute.

You can also find related tutorials on our blog:

While the two articles are fairly framework-specific, the code demonstrates how to prerender forms when working with them in a web application.

Notifications

This feature may not be available on all plans.

You can send notifications for verified form submissions from your site dashboard at Settings > Forms > Form notifications. These notifications can be sent via email, webhook, or Slack. In the configuration options, you can choose to be notified for a single specific form, or for all verified submissions to any form on your site.

Email notifications

All notification emails are sent from team@netlify.com, and any replies to a notification will go to that address. If you would like to respond to a form submitter, you will need to enter their address manually.

The default subject for all form notifications is as follows:

Form submission from {YOUR-FORM-NAME} form

To override this, add a subject field to your form, and the value of that field will be used for the notification email subject. This field does not need to be visible to your users.

For greater control of form-triggered emails, or to connect other services, you can use the Netlify app on Zapier.

Zapier integration

Netlify is available on Zapier, where you can connect Netlify with over 1,000 other applications. You can set up a “Zap” action to be triggered when there is a verified form submission on your website. You can find out more on our blog, or use one of the templates below to get started:

Troubleshooting tips

If you’re having trouble using the form action to customize the success page, try linking to your custom success page from somewhere on the same page as the form. Use the same exact path in your test link as you’re trying to use for the action attribute, and make sure the link works there before digging further into your form.

If you’re sending test submissions of your form and not finding them in your Verified submissions list, it’s possible they’re getting flagged as spam by Akismet. Use the dropdown above the list to switch to Spam submissions and then recheck for your tests.

To avoid having your tests flagged as spam in the first place, we recommend you

  • enter a real email address instead of a fake one such as test@test.com.
  • write some full sentences in any textareas rather than just a few nonsense characters.
  • spread out the rate of submissions from a single IP address.

If you’re adding a honeypot field and/or reCAPTCHA 2 challenge, you can check the form detail page to confirm whether or not the Extra spam prevention has been successfully enabled.

Visit our Community forum to get more advice about how to debug your form.

Usage and Billing

You can check your Forms service usage under Settings > Forms > Form handling > Usage. This shows your current usage level and tracks your usage of the following services:

  • Submissions: This counts the total number of verified form submissions across all forms on your site during this billing period.
  • File uploads: This tracks the total storage size of all files uploaded via verified form submissions during the current billing period.

Forms pricing scales with usage. When usage reaches a level limit, the site will automatically upgrade to the next level or package.

Changing levels

Any team member with the ability to change settings on your site can also change levels for services on that site.

To do this, go to Settings > Forms > Form Handling > Usage, and select Change level. Level fees will be prorated and charged at the end of the billing cycle, to the team’s payment method.


Notice something is incorrect or outdated?

First off, great catch! We appreciate your discovery and want to ensure it gets addressed immediately. Please let us know here.



Want to have a conversation?

Visit the Netlify Community to discuss ideas and questions with your fellow Netlify users.

Want to get started quick?