× press ESC to close

Netlify builds, deploys, and hosts your front end.

Handling Form Submissions

Netlify comes with built-in form handling. 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.

We recommend setting a name attribute on the form so you can easily identify which form your incoming submissions are coming from (in case you ever have more than one form on a site).

The action attribute determines what visitors see after submitting a form. If you set it to "thank-you", 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 entering the path of your custom page (like "/pages/success") as the value for the action attribute.

Here’s an example:

<form name="contact" action="thank-you" 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>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

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

The simplest way to receive form submissions is to use the notification tab in the site admin UI to set up an email or Slack notification for your form.

All form submissions can also be accessed via our API.

Netlify also integrates with Zapier so you can setup 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

Spam Filtering

By default we run a spam filter when a form is submitted and if a form submission gets flagged as spam we will show the user a captcha before storing the submission.

As an alternative to this you can use a honeypot field to trick spam bots.

To take advantage of this, add 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" netlify-honeypot="bot-field" action="thank-you" netlify>
  <p class="hidden">
    <label>Don’t fill this out: <input name="bot-field"></label>
  </p>
  <p>
    <label>Email: <input type="text" name="name"></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. 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.

React example

We’ve got a great blog post with more thorough code examples that talks through a couple of kinds of React forms. Check it out if you’re having trouble getting that form on your react site to work as you’d like!


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?