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" netlify>
  <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 /.

Troubleshooting tip: If you’re having trouble with the form action, 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.

Receiving Submissions

Forms Free includes up to 100 form submissions per month. If your site receives more than that, we’ll automatically upgrade the site to Forms Pro, which includes up to 1000 submissions per month, plus other features. Additional form submissions are billed in blocks of 500 submissions.

Netlify has several built-in notification options for 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.

All form submissions can also be accessed via our API.

Netlify also integrates with Zapier, so you can set up triggers that send your 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.

Forms Free includes up to 10MB of total uploads via form submissions per month. If your site receives more than that, we’ll automatically upgrade the site to Forms Pro, which includes up to 1GB uploaded per month, plus other features. Additional usage is billed in blocks of 500MB.

Exporting Submissions

In the Netlify app, you can export 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.To select all submissions on a page, check the box at the very top of the list.

After you select the submission(s), a red Delete button will appear. 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.

Functions Integration

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

Spam Filtering

By default we run a spam filter when a form is submitted. If our filter flags a form submission as possible spam we will show the user a CAPTCHA challenge before storing the submission. Alternatively, you can have us replace this with an explicit reCAPTCHA 2 challenge for all visitors, directly in your form. You can also add a honeypot field to trick spam bots into submitting forms that we will automatically reject.

Explicit reCAPTCHA 2

You can configure your form to show the reCAPTCHA 2 challenge automatically. To do this, add a <div> element inside your form with a netlify-recaptcha or data-netlify-recaptcha attribute and we’ll fill it with the necessary html to render the CAPTCHA.

Here’s an example:

<form name="contact" method="POST" netlify>
  <p>
    <label>Email: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <div data-netlify-recaptcha></div>
  <p>
    <button type=”submit”>Send</button>
  </p>
</form>

When a visitor submits the form, our servers will verify the CAPTCHA server-side. If the verification fails, we’ll redirect the visitor back to the same page and won’t save 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 verify that form submissions come from a human. This is useful if you want to have more control over your verifications, or you use a JavaScript library to inject a captcha in your forms.

In this case, Netlify needs your reCAPTCHA2 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 > Build environment variables panel:
    • SITE_RECAPTCHA_KEY with the reCAPTCHA API site key.
    • SITE_RECAPTCHA_SECRET with the reCAPTCHA API secret key.
  3. Add a netlify-recaptcha (or data-netlify-recaptcha) attribute to the HTML form that has the custom reCAPTCHA widget.
<form name="contact" method="POST" netlify-recaptcha netlify>
  <!-- input fields and custom reCAPTCHA snippet -->
</form>

The Netlify servers will verify the submissions from that form, and save 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.

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 rejected as spam, 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" netlify>
  <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 discard the form submission.

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 netlify 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 reCAPTCHA2 integration, and create a div element in the hidden HTML with the netlify-recaptcha 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

You can send notifications for 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 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.

Usage and Billing

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

  • Submissions: This counts the total number of forms submissions across all forms on your site during ths billing period. Forms Free includes up to 100 submissions per month, and Forms Pro includes up to 1000 submissions per month. Additional usage is billed in blocks of 500 submissions.
  • File uploads: This tracks the total storage size of all files uploaded via form handling during the current billing period. Forms Free includes up to 10MB total uploaded per month, and Forms Pro includes up to 1GB total uploaded per month. Additional usage is billed in blocks of 500MB.

Metered features like submissions and file uploads are charged based on usage. When usage reaches a plan limit, the site will automatically upgrade to the next plan or package.

Changing plans

Any user with the ability to change settings on your site can also change plans for services on that site.

To do this, go to Settings > Forms > Form Handling > Usage, and select Change plan. Plan fees will be prorated and charged at the end of the billing cycle, to the account of the site owner.


Notice something is incorrect or outdated?

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

Want to get started quick?