Create and Deploy Gatsby.js Forms using Getform and Vercel
Published: 2021-08-22 21:00:27

[Getform](https://getform.io?utm_source=dev.to&utm_medium=website&utm_campaign=gatsby-vercel-article) 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](https://vercel.com/signup) and [Getform](https://getform.io/?utm_source=dev.to&utm_medium=website&utm_campaign=gatsby-vercel-article) 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](https://app.getform.io/login/?utm_source=dev.to&utm_medium=website&utm_campaign=gatsby-vercel-article) and create a new form endpoint. Getform will ask you to name your form endpoint and the timezone of the endpoint.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lv51tfo4h06wvc7ny5u.png)
 
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.

![Getform Endpoint Overview Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6ynegy97o12v0iid6ci.png)

**Step 3: Create your form component on your Gatsby project**

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

```js 
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](https://vercel.com/docs/git), make sure it has been pushed to a Git repository.

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

- [GitHub](https://vercel.com/import/git)[](https://vercel.com/import/git)

- [GitLab](https://vercel.com/import/git)[](https://vercel.com/import/git)

- [Bitbucket](https://vercel.com/import/git)[](https://vercel.com/import/git)

After your project has been imported, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/platform/deployments#preview), and all changes made to the [Production Branch](https://vercel.com/docs/git#production-branch) (commonly "main") will result in a [Production Deployment](https://vercel.com/docs/platform/deployments#production).

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ged1293y9rlxaitdw70u.png)

**NOTE:** You can find more information on Getform Automation action in the Getform [documentation](https://docs.getform.io/?utm_source=dev.to&utm_medium=website&utm_campaign=gatsby-vercel-article) and [features](https://getform.io/features) section on Getform.io.