Form Not Recognized on Gatsby Site

Support
, , ,
#1

I’ve taken a look at about >20 blog posts, community forum questions, and more, and I’m still having trouble getting Netlify to recognize my form for the Gatsby site I’m working on. I made sure that I’m avoiding the common culprits, which include:

  • Not having a name assigned to the form element in the opening form tag
  • Not assigning a name to every input in the form
  • Not including a hidden form-name input as follows:
<input type="hidden" name="form-name" value="myformname" />

Still, my form is not being picked up by Netlify and it is not appearing in https://app.netlify.com/sites/{sitename}/forms. Looking at the following, is there anything that you can see that I am missing?

<form
  name="emailcontact"
  method="POST"
  data-netlify="true"
  netlify-honeypot="bot-field"
  onSubmit={handleSubmit(markAsSubmitted)}
>
  <input type="hidden" name="form-name" value="emailcontact" />
  <input type="hidden" name="bot-field" />
    <label htmlFor="name">
      <input
        type="text"
        name="fullname"
        id="name"
      />
    </label>
    <label htmlFor="email">
      <input
        type="email"
        name="email"
        id="email"
      />
    </label>
    <input type="reset" name="reset" value="Clear" />
    <button type="submit" name="submitButton">
      Send
    </button>
</form>

Any insight would be very appreciated.

#2

Hi @nwrichmond, the form itself looks correct. Can you provide more information on ‘not recognized’? Is it showing up on your netlify site dashboard? Or are you seeing an error? In any case, here’s a known working example: https://github.com/imorente/gatsby-netlify-form-example/blob/master/src/pages/contact.js, can you compare to see your difference?

#3

Thanks @Dennis! To confirm, yes, the form doesn’t show up on the Netlify site dashboard.

After looking through imorente’s example, I can’t see any material differences between them. My form doesn’t use an action prop, but the docs suggest that it’s not required.

Maybe the right move is for me to create a public repo with a minimal example. I might catch the issue in the process. I’m using styled-components and react-hook-form in the form - after looking at other working examples, I don’t see why those might cause any issue, but I might be surprised.

I’ll post a link to a repo with a minimal example as soon as it’s ready :slight_smile:

#5

I too experienced this today. I’m not positive if I’ve pinpointed the issue but I changed my styled-component inputs to og inputs and I’m no longer getting 404’s on the submissions and I’m seeing them in Netlify.

#6

great to hear that you found a workaround that seems to work for you, @keegan ! Let us know if it creates any other trouble, please.

#7

I spun up a new gatsby site yesterday using a gatsby codebase with a working netlify form. I’m using the same form code that is currently working here https://keeg.in. I’m getting 404’s back on my https://remote.supply form submissions - having a super tough time troubleshooting as the code is identical aside from the form name.

#8

If everything is the same except for the form name, you’ll also want to check that in your handleSubmit method, you’re encoding the correct form, so 'form-name': 'main' in your case, I believe- want to give that a try and see if it fixes things for you?

#9

Thanks for getting back to me. I can confirm that I’m encoding the new form correctly. Would it help if I shared both forms to compare (even though they are the same aside from name)?

#10

keegan,

did you see this article already? I am wondering if you have changed the name in the html form as well.