DEV Community

Cover image for Building a Contact Form with Gatsby & getform in 5 minutes
Arisa Fukuzaki
Arisa Fukuzaki

Posted on

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?

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😎

gif

How to get started?

First thing first, sign up for getform.

Alt Text

Create a new form.

Alt Text

Name your form.

Alt Text

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

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode

Test your results by submitting something.

Alt Text

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

Alt Text

Check your getform dashboard.

Alt Text

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✨

Alt Text

You'll get a reminder right away👍

Alt Text

Alt Text

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

Top comments (0)