Netlify Forms not working with Javascript enabled (Gatsby)

I have a site built with Gatsby. When I have Javascript enabled, my contact form submission does not work (I click submit and it just reloads the page). When I disable javascript, the contact form works successfully. I am using Gatsby, React, React-Bootstrap.

            <Form method="post" data-netlify="true" netlify-honeypot="bot-field" name="contact">
              <Form.Group className="d-none">
                <Form.Label>Bot Field</Form.Label>
                <Form.Control name="bot-field" />
              </Form.Group>
              <Form.Group>
                <Form.Label for="name">Name</Form.Label>
                <span className="text-danger">*</span>
                <InputGroup>
                  <InputGroup.Prepend>
                    <InputGroup.Text id="input-group-prepend-name">
                      <FontAwesomeIcon icon={['fas', 'user']} />
                    </InputGroup.Text>
                  </InputGroup.Prepend>
                  <Form.Control id="name" type="text" name="name" required />
                </InputGroup>
              </Form.Group>
              <Form.Row>
                <Col lg={6}>
                  <Form.Group>
                    <Form.Label for="email">Email</Form.Label>
                    <span className="text-danger">*</span>
                    <InputGroup>
                      <InputGroup.Prepend>
                        <InputGroup.Text id="input-group-prepend-email">
                          <FontAwesomeIcon icon={['fas', 'envelope']} />
                        </InputGroup.Text>
                      </InputGroup.Prepend>
                      <Form.Control id="email" type="email" name="email" required aria-describedby="input-group-prepend-email" />
                    </InputGroup>
                  </Form.Group>
                </Col>
                <Col lg={6}>
                  <Form.Group>
                    <Form.Label for="phone">Phone</Form.Label>
                    <span className="text-danger">*</span>
                    <InputGroup>
                      <InputGroup.Prepend>
                        <InputGroup.Text id="input-group-prepend-phone">
                          <FontAwesomeIcon icon={['fas', 'phone']} />
                        </InputGroup.Text>
                      </InputGroup.Prepend>
                      <Form.Control id="phone" type="tel" name="phone" required aria-describedby="input-group-prepend-phone" />
                    </InputGroup>
                  </Form.Group>
                </Col>
              </Form.Row>
              <Form.Group>
                <Form.Label for="message">Message</Form.Label>
                <span className="text-danger">*</span>
                <Form.Control id="message" as="textarea" name="message" rows="6" required />
              </Form.Group>
              <Button type="submit">Submit</Button>
            </Form>

Does anyone know why it is not working…?

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. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

There are also these two guides:

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