Netlify Forms

Creating Forms Without a Backend

If you have Questions fill out this form

• Netlify has built-in form handling¹
• No need for Backend or API calls
• Build bots parse HTML on deploy time for form attributes
  • netlify or data-netlify=“true”
  • name=“my-form”
  • method=“POST”
• After the parse Netlify injects this into your HTML
  • <input type="hidden" name="form-name" value=”my-form">

Features

• Netlify Forms has a spam filter
  • Honeypot lure bots so adding netlify-honeypot=bot-field pushes an alert
  • ReCAPTCHA can be added with data-netlify-recaptcha="true"
• Netlify allows for Form Notifications on submission
  • Email
  • Slack
  • Webhook
• Submissions can be exported to a CSV

Caveats

• If the form is rendered via JS it can't be parsed by default There are a few ways to work around this
  • NPM Packages such as react-netlify-forms²
  • Add a hidden form to your HTML and hidden input in the JS³
• Netlify Forms submissions are based on the latest form configuration
  • Data is fetchable from a API for all configurations
• If the form changes the previous submissions is blanked out on the admin UI
  • This can be remedied by hiding fields in your HTML
• With free Netlify Plan there are some limits per month
  • 100 submissions
  • 10 KB file upload

Examples

• HTML - html-form-contact
• Vanilla - vanilla-form-contact
• React - react-form-contact
• Svelte - svelte-form-contact
• Vue - vue-form-contact

Footnotes

Footnotes

1. Netlify Form Documentation ↩

2. React Netlify Forms (NPM) ↩

3. Integrate Netlify Forms in JSX ↩