How to Add a Contact Form to Your Gatsby Site Using Basin
Tom Fast on Feb 4 2022
![](https://s3-us-west-2.amazonaws.com/usebasin/uploads/blog/post/blog_header/13/basin_gatsby.png)
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.
![](https://lh6.googleusercontent.com/41eH1GC_zI9C0kOAXtoufiTtt86owNJENKRpy27LMCY_Er_JtzJ_UvfK6FAGBCgAIcOQw4QGFEMgZkHi8C1zTjrPmDxzeZXgsV0mM4lui0aLlRTB1vdEfjGE6TSm9ohlXVPuKAPm)
Under the Setup section, click on the link shown below to see a simple pre-built version of your form.
![](https://lh6.googleusercontent.com/uf28T77GVbwRnylzpvyEbMcv1XtzYq_mPdcntyhM2cYIm44xVNUFtvYQLJU9xpcdfsWRQFkuuqHvsCEN3g9PDD_bTbxrh4N1MpT4GtFLG90WkP2GVnRT7aGXZoExWD0VOrV6QTuT)
Scroll down to the pre-built form, then select the HTML and copy it.
![](https://lh4.googleusercontent.com/Sn2pdpie5b2VWVePShjEobyfCKeg6sFsumaIkazuLnA9Vmrbx0auq4a7qg086jbJyze8OSyNubtCJGBJr4n91Cg_1C23HHGieHm0ooIFzyGA0oTnaS2tf4QDuqBIFSRZ9w-A7YeZ)
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.
Get Started with a Free Basin account today!
Discover the benefits of Basin and how it can help streamline your forms. Sign up now and explore our features.
Sign Up for Free