Netlify will not recognize gatsby form

My Contact form below.

https://5eda87726e16cb0007c01fd0--christianpreston.netlify.app/contact/

I have have tried multiple ways for netilfy to see the form that is generated from gatsby but I can never get it to work.

this is the basic HTML I have. I followed multiple help guides but I still get nothing to get it to work.

<form
          name="contact"
          method="POST"
          action="/success"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
        >
          <input type="hidden" name="bot-field" />
          <input type="hidden" name="form-name" value="contact" />

          <div>
            <p>
              <Input placeholder="Name" type="text" name="name" />
            </p>
            <p>
              <Input placeholder="Email" type="email" name="email" />
            </p>
            <p>
              <Textarea
                placeholder="Message to Christian...."
                rows={4}
                name="message"
              />
            </p>
            <div netlify-recaptcha></div>
            <p>
              <Button type="submit" sx={{ px: 5 }}>
                Submit
              </Button>
            </p>
          </div>
        </form>

Hi @cpreston321👋🏻

Nice Lekoarts theme :slight_smile:

Your issue is that you don’t have any <form> component present in your static files post-build. I see the <form> you showed above but it must be wrapped by some conditional React or something – if you run gatsby build locally then inspect the contact.html page that it generates, you will see there’s no <form> tag inside of that.

Is your source code open or is this private? The more code we can see, the more we can help.


Jon