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.

 

CONTACT

Send

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 

     tag

  • 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 ( window.location.search.includes('success=true') ) {
      setSuccess(true);
    }
  }, []);

  return (
    
      

CONTACT

{success && (

Thanks for your message!

)}


Send
); }

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 https://generouspiratequeen.tumblr.com/post/635381439842697216

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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