Forms setup
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.
HTML forms
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>
JavaScript forms
You don't need to include extra JavaScript on your site to use Netlify Forms. But, if you want to, you can use JavaScript to render a form client-side. You can also submit forms over AJAX/XHR.
Work with 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.
Submit forms via AJAX
You can submit forms over AJAX/XHR as well, by targeting the AJAX request to an action
attribute on the form.
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.
Success messages
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 /
.
File uploads
Netlify Forms can receive files uploaded via form submissions. To do this, add an input with type="file"
to any form.
Forms: Serverless Functions Integration
Forms: Serverless Functions Integration
Forms: Custom reCAPTCHA 2 with your own settings
Did you find this doc useful?
Your feedback helps us improve our docs.