Building a Contact Form

This guide covers how to create a contact form in a Gatsby site, along with an overview of some strategies for handling form data that has been submitted.

Gatsby is built on top of React. So anything that is possible with a React form is possible in Gatsby. Additional details about how to add forms to gatsby can be found in the Adding Forms section.

Creating an Accessible Form

Faulty forms are a common barrier to a website’s accessibility, and can be especially problematic if you use a keyboard and screen reader to navigate the web. Forms should be clearly and intuitively organized into groups of related information, and each form field should be identified with a proper label.

More information on creating accessible forms can be found in WebAIM’s article on the subject.

Sending Form Data

When you submit a form, the corresponding data is typically sent to a server to be handled in some manner. More in-depth information on sending form data can be found on MDN.

Each method detailed below will start with the following contact form:

Form submission options in Gatsby

Netlify

If you’re hosting your site with Netlify, you gain access to their excellent form handling feature.

Setting this up only involves adding a few form attributes:

Now, all submissions to your form will appear in the Forms tab of your site dashboard. By adding the form attribute netlify-honeypot="bot-field" and a corresponding hidden input, Netlify will know to quietly reject any spam submissions you may receive.

More information on Netlify Forms can be found on their website.

Formspree

Formspree offers a generous free-tier service for handling form submissions on static sites. This makes it a great tool for having form submissions sent directly to an email address of your choosing, with very little setup required.

In order to begin leveraging Formspree’s features, you must add a form action directing the http POST method to the Formspree API (substituting your chosen email), as well as changing the name attribute of the email input to name="_replyto".

Once you’ve made the changes you can submit your own form for the first time and register using the email Formspree will send you, and all subsequent form submissions will be sent to your email address. You can find more information on the registration process or setup on their website.

All forms set up in this way come with reCAPTCHA by default, but you can also enable Honeypot spam filtering by adding a hidden input element with the name="_gotcha" field.

Because the input is hidden, Formspree will know that only a bot could have made the submission, and it will be silently ignore it!

Run your own server

If your form data requires a significant amount of business logic to handle, creating your own service might make the most sense. The most popular solution to this is writing an HTTP server - this can be done in many languages including PHP, Ruby, GoLang, or in our case Node.js with Express.

An initial implementation of a server using express, body-parser, and nodemailer may look like this:

This initial implementation listens for POST requests to /contact, and sends you an email with the submitted form data. You can deploy this server with services such as Now.

Once deployed, note the url of the deployment (something like my-project-abcd123.now.sh), and use it as your form action:

Now, all subsequent form submissions will be sent to your email address!

For an in-depth guide on running your own mail server, you can refer to this awesome guide by DataFire.

Other resources

If you have any issues or if you want to learn more about implementing your own contact form in Gatsby, check out this tutorial from Scott Tolinski:

youtube: hF7xJhzrr9s