React form redirect genrating error

Support
,
1

I have hosted basic react website that is using react-router-dom, bootstrap and form. But when I am submittng the form it is generating error. I have enabled netlify form option but still this happning. I also tried _redirects file and netlify.toml file but issue not resolved. Can suggest me how can i solve this issue.

Link: https://troublefixer.netlify.app/
Issue in the contact page

import React from "react";
import Button from "react-bootstrap/Button";
import Col from "react-bootstrap/Col";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import "../styles/Contact.css";
function Contact() {
  return (
    <div id="contacts">
      <Form name="contact" method="post">
        <input type="hidden" name="form-name" value="contact" />

        <Form.Group className="mb-3" as={Col} controlId="name">
          <Form.Label>Name</Form.Label>
          <Form.Control type="text" placeholder="Enter your name" required />
        </Form.Group>

        <Row className="mb-3">
          <Form.Group as={Col} controlId="phoneNo">
            <Form.Label>Mobile No.</Form.Label>
            <Form.Control type="tel" placeholder="+919874563210" required />
          </Form.Group>

          <Form.Group id="mail" as={Col} controlId="email">
            <Form.Label>Email</Form.Label>
            <Form.Control type="email" placeholder="Enter email" required />
          </Form.Group>
        </Row>

        <Form.Group className="mb-3" controlId="subject">
          <Form.Label>Subject</Form.Label>
          <Form.Control
            placeholder="Enter of subject of your message"
            required
          />
        </Form.Group>

        <Form.Group className="mb-3" controlId="message">
          <Form.Label>Message</Form.Label>
          <Form.Control
            as="textarea"
            placeholder="Enter your message"
            required
          />
        </Form.Group>
        <Button variant="primary" type="submit" value="Submit message">
          Submit
        </Button>
      </Form>
    </div>
  );
}

export default Contact;
2

What’s the error? Can you share that?

3

The error that @princesingh282002 refers to seems to be:

image
image1278×722 80.6 KB

It may be related to the form not sending any data:

image
image970×126 23 KB

5

@BruceWood The issue is likely with your site code, nobody will have changed anything as Netlify’s team won’t change your site, and there’s nothing for them to fix on their end.

I don’t work for them, but I’ve just taken another quick look at what I can see.

  • Do you have a static version of the form in your output that isn’t react based?
  • Do you see the form being detected in your build log?

Note that Netlify won’t detect forms that are JavaScript based, since your project is a Single Page Application (SPA) if I view source on your contact page I see only:

image
image2200×134 151 KB

So it’s possible that Netlify hasn’t even detected your form.

See the note in the documentation here:
https://docs.netlify.com/forms/setup/#work-with-javascript-rendered-forms

1 Like