React.js: nothing happens when I submit a form

Support
,
1

Hello there!
First of all, sorry for my english, it’s not my first language. I hope I’ll be able to explain my problem.

I followed every steps ad read Netlify documentation, FAQ and all, but I still get the problem. I guess I forgot something but can’t find it.

I’m really new to React.js and Netlify btw so I’m sorry if it sounds dumb ^^;

The first time I tested my form, I felt on a “page not found” and found out that I needed to create a redirect file in my public folder.

Now that I have one, when I want to test my form and click the submit button, the page is refreshed but I’m still on my form (no “thank you page” or anything. There isn’t any error in my console, and I don’t have anything in my dashboard (neither in spams).).
Maybe my redirect file isn’t good?

My deployed link : https://symphonious-squirrel-9c124d.netlify.app/contact
(i’m still worrking on it, don’t look at my terrible css XD)

the html :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="description" content="Bienvenue sur le portfolio de Séverine Cuenot" />
  <title>Le Portfolio de Nine</title>
  <link rel="icon" href="/favicon.ico" />
  <script defer="defer" src="/js/runtime.05b258ceef994868bf45.js"></script>
  <script defer="defer" src="/js/537.616d0dae112b4c344996.js"></script>
  <script defer="defer" src="/js/main.910868745965f78aee82.js"></script>
  <link href="/css/main.css" rel="stylesheet" />
</head>
<body>
  <form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
  </form>
  <div id="root"></div>
</body>
</html>

the React component :


import './style.scss';

function ContactForm() {
  return (
    <form name="contact">
      <input type="hidden" name="form-name" value="contact" />
      <p>
        <label htmlFor="name">Name</label> <br />
        <input type="text" id="name" name="name" required />
      </p>
      <p>
        <label htmlFor="email">Email</label> <br />
        <input type="email" id="email" name="email" required />
      </p>
      <p>
        <label htmlFor="message">Message</label> <br />
        <textarea id="message" name="message" required />
      </p>
      <p>
        <input type="submit" value="Submit message" />
      </p>
    </form>
  );
}

export default ContactForm;

just in case, my _redirects :

/*    /index.html   200

Thanks a lot for your help!

2

Hi @NineInjections, welcome to the Netlify Support Forums and thanks for the post.

Your HTML should be updated to the below.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta name="description" content="Bienvenue sur le portfolio de Séverine Cuenot" />
  <title>Le Portfolio de Nine</title>
  <link rel="icon" href="/favicon.ico" />
  <script defer="defer" src="/js/runtime.05b258ceef994868bf45.js"></script>
  <script defer="defer" src="/js/537.616d0dae112b4c344996.js"></script>
  <script defer="defer" src="/js/main.910868745965f78aee82.js"></script>
  <link href="/css/main.css" rel="stylesheet" />
</head>
<body>
  <div id="root"></div>
</body>
</html>

Also your Form Component should be edited to the code below.

import './style.scss';

function ContactForm() {
  return (
    <form name="contact" method="POST" data-netlify="true">

        <label htmlFor="name">Name</label> <br />
        <input type="text" id="name" name="name" required />
    
        <label htmlFor="email">Email</label> <br />
        <input type="email" id="email" name="email" required />
      
        <label htmlFor="message">Message</label> <br />
        <textarea id="message" name="message" required />
    
        <input type="submit" value="Submit message" />
  
    </form>
  );
}

export default ContactForm;

Redeploy after the changes and let me know the outcome.

If you are still having difficulties you can checkout the support guide regarding Netlify Forms in the link below.

Thanks.