How to add a Netlify Contact Form in React

How to add a Netlify Contact Form in React:


Note: I used these two extremely helpful articles to guide me through: this oneand this.

Step 1: Add the form with Netlify attributes

  • Create a simple contact form (I used Material-UI here)
  • IMPORTANT: Add Netlify built-in features to process form submissions. Look at namemethod and data-netlify attributes inside the form element
  • Also, Netlify recommends adding a hidden input inside the form. The important attribute here is value, which should be the same as the form’s name: contact.




Step 2: Add another form to your index.html file

  • Netlify recommends adding the following block of code to your index.htmlfile, right after the opening  tag in order to allow Netlify to process the form.
  • The action attribute here would be used for redirecting. More on this on the next step.


Step 3: Add a success message and avoid redirecting

  • What’s the goal here? To help people stay on your website.
  • Add the following code, including useEffect and useState as well as the message under the 


  • IMPORTANT: Make sure that the action attribute inside the form element takes the user to the right path. In my case it’s "/contact/?success=true"contact here is my route and the name of my component.

Note: most of this code was taken from one of the articles I mentioned in the introduction.

//Final code 
export default function Contact() {
  const [success, setSuccess] = useState(false);

  useEffect(() => {
    if ('success=true') ) {
  }, []);

  return (


{success && (

Thanks for your message!


); }

Step 4: Finally, check your form submissions

  • Assuming that you’ve already deployed your site, check your form submissions on your Netlify project dashboard
  • It should look something like this:

That’s it. Hopefully it worked as expected. If not, just let me know and we’ll find a way

from Tumblr

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s