Netlify Forms: Simplicity at its Finest

This site is hosted on Netlify and uses edge functions to password protect my staging site.

I was expecting a similar workflow when I came to implement my contact form, but integrating forms with Netlify is easy, seriously easy.

It’s so breathtakingly, stupidly, ridiculously easy, that it doesn’t warrant a blog post, yet it’s so elegantly executed I felt it deserved one.

How to do it?

Turn it on Login to your netlify dashboard, go to forms, and enable form detection.
Add the form Add a form to your page, with the attribute "netlify or data-netlify="true" (easy now JSX supports custom html attributes).
That’s it! We don’t need to specify a method, or an action, but we can set it to POST to prevent the submission appearing in the query string, and we can add an action to have a custom success page.
Deploy it After enabling forms in netlify, on deploy it will scan for forms with this attribute, and “wire them up”. You can see your submissions in your panel,and set up email notifications/webhooks, to deal with them as they arrive.

Just like that, we’re now receiving our form submissions.

The docs are great, covering file uploads, AJAX submissions and custom success pages/messages

Conclusion

I find the simplicity of this setup genuinely impressive. The elegance, and ease with which forms can be added indicate some serious good planning and execution on Netlify’s part (though I find it unfortunately let down somewhat by their UI which over-complicates things throughout).

Before I began hosting this blog, I had no experience of Netlify, but I’m continually impressed. It’s reliable, feature rich, the build speeds are impressively fast, my experience with forms only further cements this.

Of course, this simplicity comes at the cost of vendor lock in - our forms are now just one more thing we will need to rewrite if we want to migrate from netlify.