How to Add a Contact Form to Your Gatsby Site Using Basin

Tom Fast on Feb 4 2022

Let’s get started by following the gatsbyjs Getting Started Guide: https://www.gatsbyjs.com/docs/quick-start/

Create a new website:

npm init gatsby

Go to the new directory for the new website

cd my-gatsby-site

Start the web server locally

npm run develop

Now grab your Basin form’s HTML code from the Basin website. You can find a sample of your form by navigating to the Forms page and selecting the form you’d like to add to the page.

Under the Setup section, click on the link shown below to see a simple pre-built version of your form.

Scroll down to the pre-built form, then select the HTML and copy it.

Create the following file:

src/pages/contact.js

Open up src/pages/contact.js in your code editor.

Here is an example of the contact.js file. Please make sure to change the <YOUR_FORM_ID> to your form ID provided in Basin.

# Add the following code:
import * as React from "react"// styles
const pageStyles = {
}

// markup
const IndexPage = () => {
  return (
    <main style={pageStyles}>
      <title>Home Page</title>
      <form
        action="http://localhost:3000/f/<YOUR_FORM_ID>"
        method="POST"
        enctype="multipart/form-data"
        id="form"
      >
        <label for="name">Name</label>
        <input type="text" name="name" />
        <label for="email">Email</label>
        <input type="email" name="email" required />
        <label for="message">Message</label>
        <textarea name="message"></textarea>
        <label for="checkbox1">Checkbox</label>
        <input type="checkbox" name="checkbox1" />
        <label for="checkbox2">Checkbox</label>
        <input type="checkbox" name="checkbox2" />
        <label for="radio1">Radio1</label>
        <input id="radio1" type="radio" name="radio" value="radio1" checked />
        <label for="radio2">Radio2</label>
        <input id="radio2" type="radio" name="radio" value="radio2" />
        <label for="file-upload">File Upload</label>
        <input type="file" name="file-upload" />
        <button type="submit">Send</button>
      </form>
    </main>
  )
}

export default IndexPage

You're all set up!

Open up the following URL in your browser:

http://localhost:8000/contact

If everything’s working correctly, then filling out and submitting the form should create a new submission on your form’s Submissions tab in Basin.