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

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.


Thanks for reading, and happy form building!

Have questions or need help?
Visit our docs or drop us a line at support@usebasin.com.

Try Basin today for free

Setup a powerful, no code form backend with just a few clicks.

Create your account