npm init gatsby

cd my-gatsby-site

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.

src/pages/contact.js

# 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

http://localhost:8000/contact