Setting up Gatsby forms with Netlify

By the end of this blog you will be able to configure your form in Gatsby and be able to send the form input in to your email, you will also like how easy it is to setup. At build time Gatsby generates static files and this configuration works with any static generated sites or HTML sites. If you site is dynamic server rendered this will not be helpful.

I am assuming you have pushed you repo to github and deployed your site to Netlify.

The first step and the only configuration in your website is to add some Netlify attributes data-netlify=”true" and netlify-honeypot=”bot-field” to your gatsby forms.

The data-netlify attribute will trigger Netlify to recognize there is a from submission and the message will be stored in your Netlify account. All you have to do is visit your netlify account and click the form tab.

All the forms with the data-netlify will be listed in the form tab and you can click on the form to see all the messages received. You can also configure Netlify to forward all new messages received through your forms to your email. To setup your email all you have to do is to visit the setting tab in your Netlify account and click the notification tab under forms. There you can easily add the email in which you want to email to be forwarded.