Create and Deploy Gatsby.js Forms using Getform and Vercel

Getform is a form backend platform built for developers and designers that handles form submissions on static sites and sends submissions via email.

Getform also provides enhanced spam protection, form automations that includes fill & download forms, automatic responses, custom notifications and connection to 3^rd^ party services such as Google Sheets, Slack, Trello and more.

In this guide, you will discover how to process a file upload form on your Gatsby.js project, handle form submissions using Getform and deploy it with Vercel.

Before getting started, sign up for a free Vercel and Getform account.

Step 1: Set Up Your Gatsby.js Project

Install Gatsby CLI from your terminal:

$ npm install -g gatsby-cli

And create a new Gatsby app:

$ gatsby new gatsby-site

Add the axios dependency to your project:

$ npm install axios

Step 2: Create your form endpoint on Getform.io

Visit your Getform Dashboard and create a new form endpoint. Getform will ask you to name your form endpoint and the timezone of the endpoint.

With your form endpoint created, you can then copy the form's endpoint from the endpoint overview page. This will be used in your project as a place to submit your form data.

Step 3: Create your form component on your Gatsby project

Create a ContactForm.js file in the /src/pages directory with the code below:

import axios from 'axios';
import React, { useState } from "react"
import 'bootstrap/dist/css/bootstrap.min.css';


const GETFORM_FORM_ENDPOINT = "YOUR-FORM-ENDPOINT";


function Form() {
    const [formStatus, setFormStatus] = useState(false);
    const [query, setQuery] = useState({
        name: "",
        email: "",
    });

    const handleFileChange = () => (e) => {
        setQuery((prevState) => ({
            ...prevState,
            files: e.target.files[0]
        }));
    };

    const handleChange = () => (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setQuery((prevState) => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        Object.entries(query).forEach(([key, value]) => {
            formData.append(key, value);
        });

        axios
            .post(
                GETFORM_FORM_ENDPOINT,
                formData,
                {headers: {Accept: "application/json"}}
            )
            .then(function (response) {
                setFormStatus(true);
                setQuery({
                    name: "",
                    email: "",
                });
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    return (
        <div class="container-md">
            <h2>Gatsby File Upload Form using Getform.io</h2>
            <form
                acceptCharset="UTF-8"
                method="POST"
                enctype="multipart/form-data"
                id="gatsbyForm"
                onSubmit={handleSubmit}
            >
                <div className="form-group mb-2">
                    <label for="exampleInputEmail1">Email address</label>
                    <input
                        type="email"
                        className="form-control"
                        placeholder="Enter your email"
                        required
                        name="email"
                        value={query.email}
                        onChange={handleChange()}
                    />
                </div>
                <div className="form-group mb-2">
                    <label for="exampleInputName">Name</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Enter your name"
                        required
                        name="name"
                        value={query.name}
                        onChange={handleChange()}
                    />
                </div>
                <hr/>
                <div className="form-group mt-3">
                    <label className="mr-2">Upload your Resume:</label>
                    <input name="file" type="file" onChange={handleFileChange()}/>
                </div>
                <hr/>
                {formStatus ? (
                    <div className="text-success mb-2">
                        Your message has been sent.
                    </div>
                ) : (
                    ""
                )}
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        </div>
    );
}

export default Form

NOTE: Make sure to replace the value YOUR-FORM-ENDPOINT of the const GETFORM_FORM_ENDPOINT with your endpoint that you have copied in Step 2.

• We pass the full form data as an object to Axios. Axios will convert this into a multipart/form-data object before submitting and Getform understands this payload.

• We enable bootstrap by installing it using package managers, npm or yarn:\

with npm - npm install react-bootstrap bootstrap
with yarn - yarn add react-bootstrap bootstrap
and import it to our contact page using import 'bootstrap/dist/css/bootstrap.min.css';

You are now ready to deploy your project live and start receiving form submissions.

Step 4: Deploy with Vercel

To deploy your Gatsby + Getform app with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

• GitHub

• GitLab

• Bitbucket

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Form submissions received from either your localhost or production environments will show up in your Getform endpoint dashboard list in either Smart View or Table View options.

Once deployed, you will get a URL to see your app live, such as the following: https://gatsby-vercel-getform.vercel.app/

BONUS: Getform Automations

Getform allows you to setup Automation actions for custom redirections, Google reCAPTCHA integration, custom email templates, autoresponse emails and Zapier integration.  

For example, using Custom email template action, you can use your own HTML for email body and customize the From Name and Email Subject.

NOTE: You can find more information on Getform Automation action in the Getform documentation and features section on Getform.io.

Comments

[Daniel Zielinski]

I always get an "undefined" on the formStatus if I want to check for a response to show the "Thanks" after submitting. any ideas why?