Setting Up a Netlify Contact Form in Your React Web Application

Photo by Miles Burke on Unsplash

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!

--

--

--

I struggle, I make mistakes, and then I write about solutions like I was an expert all along.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Internet Explorer 11 and Angular 2+

Additional fields in the Gutenberg WordPress editor

AngularJS vs Node.js: Which one You Should Choose?

Reselect project structure

‘100 Limited Edition Otaku Coinu Dog Ver.’

Frontend Weekly Digest #262 (30 May — 5 June 2022)

Create Dynamic Table from json in react js

iOS Ripple effect in React Native

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danny

Danny

I struggle, I make mistakes, and then I write about solutions like I was an expert all along.

More from Medium

Clone of Discord website

What is the JavaScript DOM? (Document Object Model)

Create A Portfolio Website: Part Four

Choosing the Best JavaScript Framework Between Vue and React