Using Netlify Forms for a Contact Form

Netlify is a great platform for hosting static websites. I used it to host my personal website. One feature I discovered while working on my website was Netlify Forms. You can use Netlify Forms to create a simple contact form. It's also great because by default, it displays a success message when a visitor submits a form.

The form was incredibly simple to set up due to great documentation.

Step 1: Create an HTML form

Add name, method, and data-netlify attributes.

<form name="contact" method="POST" data-netlify="true"></form>

Step 2: Spam prevention.

You can add a honeypot field and/or a reCAPTCHA 2. Submissions that do not pass these filters will automatically be rejected.

Honeypot field

A honeypot field is a hidden form field that tricks bots into completing a field that humans can't see. So, if a form is submitted with the honeypot field completed, that form will be rejected.

Add a hidden honeypot field to your form by adding the netlify-honeypot="bot-field" attribute to your

tag. "bot-field" is the name of the hidden field. You can pick whatever name you would like, just make sure that the name in the form tag matches the name attribute of the hidden field.

So far, this is what the form looks this:

<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
</form>

reCAPTCHA 2

You can choose to add reCAPTCHA 2 instead or have both. Netlify provides a CAPTCHA you can use or you have the option of adding your own. I chose to add the honeypot field for my website because I don't like how CAPTCHAs look, but if you would like to add it to your website, then please refer to the Netlify docs.

Step 3: Add the other input fields you need to complete the form

<form 
  name="contact" 
  method="POST" 
  data-netlify="true" 
  netlify-honeypot="bot-field"
>
  <div class="hidden">
    <label>Don't fill this out if you're human: 
      <input name="bot-field"/>
    </label>
  </div>
  <input
    name="name"
    type="text"
    class="nameZone"
    placeholder="Full Name"
   />
   <input
     name="email"
     type="email"
     class="emailZone"
     placeholder="Email"
   />
   <input
     name="subject"
     type="text"
     class="subjectZone"
     placeholder="Subject"
   />
   <textarea
     name="message"
     class="messageZone"
     placeholder="Message"
   ></textarea>
   <input type="submit" value="Send Message" class="btn" />
</form>

And that's it! You can log onto your Netlify account and click on your website to review recent form submissions. If you click on 'Site settings' and go to 'Forms', you can set form notifications so that you get a Slack or email notification.