Contact Form

How It Works

Static sites don’t have a server to POST a form to, which is normally where contact forms fall apart. Netlify Forms sidesteps that by scanning your built HTML for any <form> with a data-netlify="true" attribute, at deploy time, and quietly wiring up a submission endpoint for it. No backend code, no API route, nothing to host yourself.

Three things make a plain HTML form into a Netlify form:

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
    <input type="hidden" name="form-name" value="contact" />
</form>

The data-netlify="true" attribute is what gets it detected. The hidden form-name input has to match the form’s own name, since Netlify’s static HTML scanner can’t run your JavaScript to figure that out at parse time. netlify-honeypot adds a field real users never see or fill in; if it comes back filled, Netlify silently drops the submission as spam.

Past that, it’s a completely ordinary HTML form: required and type="email" do real client-side validation with zero JavaScript.

Folder Structure

src/_includes/demo-live/contact-form.njk ← the form itself
src/assets/scss/components/_form.scss     ← field styling

Important Files

src/_includes/demo-live/contact-form.njk

<p>This is a real Netlify Forms submission form. Fill it out and submit it once this site is deployed on Netlify and it'll actually land in the Netlify dashboard, no backend of your own required.</p>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" class="contact-form">
  <input type="hidden" name="form-name" value="contact">
  <p class="visually-hidden">
    <label>Don't fill this out if you're human: <input name="bot-field"></label>
  </p>
  <div class="form-field">
    <label for="contact-name">Name</label>
    <input id="contact-name" name="name" type="text" autocomplete="name" required>
  </div>
  <div class="form-field">
    <label for="contact-email">Email</label>
    <input id="contact-email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="form-field">
    <label for="contact-message">Message</label>
    <textarea id="contact-message" name="message" rows="5" required></textarea>
  </div>
  <button type="submit" class="button">Send message</button>
</form>

Notes

• This only works once the site is actually deployed on Netlify. Netlify’s bots need to see the built HTML to register the form, so submitting it from a local build or a non-Netlify host won’t go anywhere.
• The honeypot field is hidden with the same .visually-hidden class used elsewhere on this site (not display: none), since some spam bots skip fields that are display-hidden but still fill in ones that are only visually hidden.
• Netlify also supports file uploads and reCAPTCHA on the same form with a couple more attributes, no extra markup needed for the basics shown here.