DEV Community

Elizabeth Onyenekwe
Elizabeth Onyenekwe

Posted on

USING NETLIFY FORMS

While hosting your frontend applications on netlify, you can permit your forms to be submitted on Netlify without using any backend or api for submission and with just a little code, netlify takes care of it all.

Form submission on netlify can be achieved by setting the form action to “POST” and adding a Netlify attribute called “DATA-NETLIFY” and setting this attribute to “TRUE”. Give a name attribute to your form and input fields so that Netlify can identify the fields properly. Deploy your form to Netlify and all messages sent through the form is displayed in the “RECENT FORM SUBMISSIONS” section.

Setting Notifications

You can also be notified of a recent form submission on your email by going to the settings section on Netlify, then clicking on the forms section and then form notifications. Click on the “ADD NOTIFICATION” button and save Email notification to receive emails notifying you of recent form submissions.

Code Sample

<form action="POST" name="contact" data-netlify="true">
  <div>
    <div>
      <input type="text" name="name" placeholder="Your Name" />
    </div>
    <div>
      <input type="email" name="email" placeholder="Your Email" />
    </div>
  </div>
  <div>
    <input type="text" name="subject"  placeholder="Subject" />
  </div>
  <div>
    <textarea name="message" rows="5" placeholder="Message"></textarea>
  </div>
  <div>
    <button type="submit">Send Message</button></div>
</form>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
andrewbaisden profile image
Andrew Baisden

Netlify really did a good job. Integrating forms is quite straightforward.