Formzillion Logo
Get Started

Guides

/

Gatsby

logo
app-logo

Add a form to your Gatsby

Initiate the collection of form submissions from your Gatsby form using formzillion.
Simply create your form in formzillion and insert your form-id into your form.

Building forms with Gatsby and Formzillion

Gatsby is a modern web development framework that enables the creation of fast, optimized, and content-rich websites.

This guide will demonstrate the quick process of adding a contact form to your Gatsby project and connecting it to Formzillion for submission handling.

How to create a Gatsby Contact Form

Step 1 — Create new form endpoint on Formzillion

Sign in to your Formzillion account and create a new form with name Gatsby Contact Form or a similar identifier. Formzillion will assign a unique form ID specifically for identifying your Gatsby form.

Step 2 — Get your Gatsby form ready for your website

It is a basic contact form with name, email address and message fields:

<form action="https://app.formzillion.com/f/{form_id}">
<input type="text" name="name" placeholder="Your Name">
<input type="email" name="email" placeholder="Your Email">
<input type="text" name="message" placeholder="Your Message">
<button type="submit">Send</button>
</form>

Copy

Step 3 — Create a new Gatsby site

The Gatsby command line interface (CLI) is the main tool you use to initialize, build and develop Gatsby sites. Know more

Open your terminal and enter the following command to initiate the creation of your Gatsby site.

npm install -g gatsby-cli

Copy

Create a new site.

gatsby new my-gatsby-site

Copy

Navigate to the site folder by changing directories, and execute the following command:

gatsby develop

Copy

You can now access the site in your browser by visiting https://localhost:8000. Below observe the sample site displayed on the screen:

gatsby site

Step 4 — Create a Contact Form

To incorporate a contact form into your Gatsby site, you can either add it to the existing src/pages/index.js file or create a new file called contact.js within the src/pages directory. Then, simply insert the given code block into the chosen file

To successfully submit your form to Formzillion, ensure that you include the 'FORM_ID' in the provided form code. This 'FORM_ID' should correspond to the ID assigned to your specific Formzillion form.

And there you have it! Once you fill out and submit the form, you will be able to view the default submission thank you page.

Thank you

Congratulations! Your Gatsby site now has the contact form powered by Formzillion!

Ready to send your first form submission?

Formzillion Logo Formzillion Cloud

The fastest way to organize and manage your forms

Get started for free
Formzillion Logo Formzillion Self-hosted

The optimal solution for teams that want absolute control of their forms data.

Read Docs
Follow us

Copyright © 2023 Zillionstack Inc. All rights reserved.

PrivacyTerms