Building a Contact Form with Gatsby & getform in 5 minutes

Hi there!

I'm Arisa, a freelance Full Stack Developer living in Germany🇩🇪

I'm developing Lilac, an online school with hands-on Frontend e-books and tutoring👩‍💻

What is this article about?

• Building a contact form with Gatsby.js and getform

Who is this article for?

• Anyone wants to build a form with Gatsby
• Anyone wants to build a form for free

Building a form is my favorite part since we've been introduced to use full of free sources.

I think you'll agree with me after what's written in this article😎

How to get started?

First thing first, sign up for getform.

Create a new form.

Name your form.

Copy example form snippet to paste & adjust in your contact form component file.

Make sure to put action attribute and the value you got in a form element.

As long as you keep the basics of the snippet like this, you're good to go.

// src/pages/contact.js

<form method="post" action="https://getform.io/{your-unique-getform-endpoint}">
  ...
  <label>
    Email
    <input type="email" name="email" />
  </label>
  <label>
    Name
    <input type="text" name="name" />
  </label>
  <label>
    Message
    <input type="text" name="message" />
  </label>
  ...
</form>

Test your results by submitting something.

You'll even see a nice Thank you page by default.

Check your getform dashboard.

Only takes under 5 minutes👍

But no one realizes without a reminder.

Let's set up an email reminder when someone sends you a form submission.

Just fill in your email address, and done✨

You'll get a reminder right away👍

Of course, it works with other languages😎

Your Gatsby contact form is ready in just 5 minutes!

Sources:

Gatsby: Building a Contact Form

getform: Building a Gatsby contact form using Getform