Contact forms are a convenient way for users to reach out to you or your business. Behind the scenes, there are a variety of ways to set up a form on your website. Today, I’m going to go show you how to set up a contact form in your React App using Netlify.
Prerequisites
Before we begin, I’d like to stress that this is a very specific type of form setup. In order to benefit from this post, you will need to have a React web application set up and deployed using Netlify.
If that sounds good to you, read on!
Step 1: Code the Form
The first thing we’ll need to do is build your form in whichever component you want it to be displayed. I’m going to keep the form basic here and focus on the nitty-gritty. You can do the fun styling on your own!
Below is a sample contact form with a hidden input, a name input, an email input, a message input, and a submit button. You can see the code here on my Github Jist.
Step 2: Add Another Form to index.html
This next step may seem redundant, however, it is a necessary step in order for Netlify to detect our form. We are going to add another, stripped-down version of our form into index.html, just under the <body> tag. Again, you can see the code here on my Github Jist!
As you can see below, we’ve removed all the label fields as well as the submit button. It’s very important that the name fields for the form, input, and textarea remain the same.
Step 3: Push Changes and Test!
Now that the form is set up in our component and the hidden form is in place to be detected by the Netlify bots, we can go ahead and push our changes. Once the build is finished and you can view your form in the browser, go ahead and send a test submission.
After you submit, you will need to login to Netlify to see the submission. Navigate to the settings page of your site, then click forms in the sidebar on the left. From you should be able to see your submission now and also be able to set notification settings such as having them sent via email!
Conclusion
Today, I showed you how to set up a Netlify form in your React web application by:
- Creating a form
- Adding a hidden form to be detected by Netlify
- Sending a test submission
- Finding the submission on Netlify
- Setting email notifications
I hope you learned something today and as always, keep checking back for more front-end web development tips!
