React-Bootstrap & Netlify's form not working

Hello, my Netlify form is not submitting when I hit submit.

 <Form
          name='form-name'
          method='POST'
          netlify
          netlify-honeypot='bot-field'
          hidden
        >
          <input type='hidden' name='form-name' value='contact'></input>
          <FloatingLabel type='name' label='Full Name' className='mb-3'>
            <Form.Control type='name' placeholder='John/Jane Doe' required />
          </FloatingLabel>
          <FloatingLabel
            controlId='email'
            label='Email Address'
            className='mb-3'
          >
            <Form.Control type='email' placeholder='your@email.com' />
          </FloatingLabel>
          <FloatingLabel
            controlId='phone'
            label='Phone Number'
            className='mb-3'
          >
            <Form.Control type='phone' placeholder='(888)888-8888' />
          </FloatingLabel>
          <FloatingLabel controlId='message' label='Message' className='mb-3'>
            <Form.Control
              as='textarea'
              rows={3}
              placeholder='message'
              style={{ height: "100px" }}
            />
          </FloatingLabel>
          <Button type='submit'>Submit</Button>
        </Form>

After I deployed to Netlify, then I got the error saying the page is not found 404 when I hit the submit button.

Screenshot_2

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

Additionally, this article covers what to do when you encounter a page not found error.

If you are still having problems, please provide more information such as what you have already tried, your form name as it exists in the UI, and a link to your live form. :slight_smile:

Thank you for the reply. I tried the support guide that you linked before I made the post, and unfortunately, I coudln’t get it work.

The second link, there is no log in the file but I do have redirect file in there with /* /redirect 200

I have tried exactly what this video has, but it still doesn’t work for me.

I wonder if it is because of my account. Whenever I go to the Forms section, it just shows me instruction of how to do it. Nothing else.

Hey there, @thunt4jr :wave:

Sorry to hear you are still encountering obstacles! Can you please share a link to your live form, as well as the form name as it exists in your UI? Thanks.

the form name is “form-name”

But you’ve set contact as the name here.

Unfortunately, that didn’t work.

            noValidate
            validated={validated}
            onSubmit={handleSubmit}
            name='contact'
            method='POST'
            data-netlify='true'
          >
            <input type='hidden' name='form-name' value='contact'></input>
            <Form.Group className='mb-3'>
              <Form.Label>Full Name</Form.Label>
              <Form.Control
                type='text'
                name='name'
                placeholder='John/Jane Doe'
              />
            </Form.Group>
            <Form.Group className='mb-3'>
              <Form.Label>Email Address</Form.Label>
              <Form.Control
                type='email'
                name='email'
                placeholder='your@email.com'
              />
            </Form.Group>
            <Form.Group className='mb-3'>
              <Form.Label>Message</Form.Label>
              <Form.Control
                type='message'
                name='message'
                as='textarea'
                rows={3}
                placeholder='Message for Reefmaker'
              />
            </Form.Group>
            <Button variant='primary' type='submit' className='mb-5'>
              Submit
            </Button>

I’m following this setup, and it still didn’t work. I did a whole new CRA and just for the form itself using this link. Forms setup | Netlify Docs
It didn’t work at all.


Here is the error message when it get post

I have used these codes from Forms setup | Netlify Docs, and it doesn’t work.

            noValidate
            validated={validated}
            onSubmit={handleSubmit}
            name='contact'
            action='/'
            data-netlify-honeypot='bot-field'
            data-netlify='true'
          >
            <input type='hidden' name='form-name' value='contact' />
            <p>
              <label>
                Your Name: <input type='text' name='name' />
              </label>
            </p>
            <p>
              <label>
                Your Email: <input type='email' name='email' />
              </label>
            </p>
            <p>
              <label>
                Message: <textarea name='message'></textarea>
              </label>
            </p>
            <p>
              <button type='submit'>Send</button>
            </p>
          </form>

SOLVED:

index.html in <body></body>

  <form name='contact' netlify hidden>
    <input type='text' name='name' />
    <input type='email' name='email' />
    <textarea name='message'></textarea>
  </form>

Your tutorial is outdated. The link above is the repository of the updated one that works.