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 name, method 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