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">
    <label>Your Name: <input type="text" name="name" /></label>   
    <label>Your Email: <input type="email" name="email" /></label>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    <label>Message: <textarea name="message"></textarea></label>
    <button type="submit">Send</button>

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 tips:

  • 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.
  • Visit our Community forum to get more advice about how to debug your form.

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. You can also export the submissions to a CSV file, or access them via our API.

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. (This feature may not be available on all plans.)

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.

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

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

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" data-netlify="true">
  <p class="hidden">
    <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
    <label>Email: <input type="text" name="email" /></label>
    <label>Message: <textarea name="message"></textarea></label>
    <button type="submit">Send</button>

Now if someone enters any value in the bot-field, Netlify will quietly discard 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">
    <label>Email: <input type="text" name="name" /></label>
    <label>Message: <textarea name="message"></textarea></label>
  <div data-netlify-recaptcha="true"></div>
    <button type="submit">Send</button>

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

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.

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) {

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


This feature may not be available on all plans.

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, 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. If there is a form submission on your website, you can set up a “Zap” action to be triggered. You can find out more on our blog, or use one of the templates below to get started:

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 forms submissions across all forms on your site during this billing period.
  • File uploads: This tracks the total storage size of all files uploaded via form handling 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. Add-on 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?