It’s a fairly common to have a contact form in a website. However, it requires some back-end logic (server-side code) or javascript for a full functioning contact form. That’s why setting up a working contact form for a static website (like a Gatsby powered site) a bit tricky. Don’t worry, there has a simple solution if you hosted your site with Netlify.

Netlify has their built in form service by which you can add a contact form in your site without writing any server-side code by yourself. However, with their free plan, you are allowed to receive only 100 messages per month along with 10MB storage facility, which is fair enough for a small website like personal blog. Isn’t it? If not then anytime you can switch to their paid version for more.

In this article I will show how to add contact form to a Gatsby powered website by using the built-in Netlify Form service. For more information on that visit Netlify Forms Docs.

How to add Netlify form?

I assume you already have your Gatsby powered website live on Netlify and now you just want to add the contact form in your site.

First, add the following HTML <form> code in your contact page, or in the page where you want to display the contact form. This is a very basic HTML code sample for contact form without any styling but feel free to add your css code to style it.

<form 
    name="contact"
    method="post" 
    data-netlify="true" 
    data-netlify-honeypot="bot-field"
    action="/success/"
>
    <input type="hidden" name="bot-field" />
    <div>
        <input type="text" name="name" placeholder="Name" required />
        <input type="email" name="email" placeholder="Email" required />
        <input type="text" name="subject" placeholder="Subject" required />
        <textarea name="message" required></textarea>
    </div>
    <div>
        <button type="submit">Send</button>
        <button type="reset">Clear</button>
    </div>
</form>

Let explain <form> tags of the above code briefly which are important in terms of Netlify form handling.

• name attribute of the <form> tag informs Netlify the name of your form and will be used in the the Netlify app interface of your site admin panel for further settings.
• data-netlify attribute of the <form> tag notifies Netlify that you are using their form service, so Netlify will manage the form submission. This attribute is mandatory and its value needs to set "true".
• data-netlify-honeypot is an optional attribute in the <form> tag . This is for anti-spam. The value of this attribute is the name of the hidden input field (in this example, the value is "bot-field"). So, if a spam bot fills out the hidden input field then the contact form won’t be submitted. Because only a boot could fill the hidden input field. That's why you need to add this <input type="hidden" name="bot-field" /> hidden <input> field in your <form>.
• action attribute of the <form> tag informs Netlify to display the site's own success page after a contact form submission. If this attribute is not defined then a default success message will be displayed from Netlify. To add a custom success page you have to create it in your src/page directory (for example, src/page/success.js) and then set the path of the custom success page as the value in the action attribute as shown in the above code (i.e. action="/success/").

That's it! With these minimal code, you can have a working form in you static site. Cool!

Now deploy the changes to Netlify to be published. Go to your website and submit the contact form, you should be directed to a custom success page (if you defined it otherwise a default success message from Netlify).

To check the form submission, go to your Netlify site admin panel, click the Forms link. You can see your contact form name there in the Active forms section (in this example the name of the form is "contact"). Click on the form name you can see all the form submissions there.

Hold on! You can also redirect form submissions to your email address. Go to your site admin panel on Netlify and go to Forms > Settings and usage > Form notifications > Add notification, then enter your email address to receive whenever a new form submission occurred.

To see the result, again go to your website and submit the contact form. Now check your email, you should receive there the form submission details. Great!

Note

If the above code does not work in your case, then add the following line in place of the hidden <input> field of your <form>. Should be working fine!

<input type="hidden" name="form-name" value="contact" /> 

In this hidden <input> field, the value attribute should contains the name of your form (in this example, the name of the form is "contact"). For your convenience, I have presented the complete <form> code below.

<form 
    name="contact" 
    method="post" 
    data-netlify="true" 
    data-netlify-honeypot="bot-field"
    action="/success/"
>
    <input type="hidden" name="form-name" value="contact" />     <div>
        <input type="text" name="name" placeholder="Name" required />
        <input type="email" name="email" placeholder="Email" required />
        <input type="text" name="subject" placeholder="Subject" required />
        <textarea name="message" required></textarea>
    </div>
    <div>
        <button type="submit">Send</button>
        <button type="reset">Clear</button>
    </div>
</form>

Summary

Netlify form service really make it simpler to add forms to a Gatsby powered site with these fewer steps. By following this article you can add Netlify form to your Gatsby site.

Happy coding!

References

• Netlify Forms Docs
• How to Integrate Netlify's Form Handling in a React App