No form submissions in Netlify UI

Support
1

I’m not getting any verified or spam form submissions under the Netlify UI for my project https://5f84df61da822500076f7876--quirky-chandrasekhar-d7c462.netlify.app/#contact.

Heres what I’m doing in Gatsby:

<form
      className="contact-form"
      name="contact"
      method="post"
      action="/success"
      data-netlify-honeypot="bot-field"
      data-netlify="true"
    >
      <input type="hidden" name="bot-field"></input>
      <input type="hidden" name="form-name" value="contact" />
      <label htmlFor="contact-form-email">Email</label>
      <input
        id="contact-form-email"
        className="contact-form-input"
        type="email"
        name="email"
        required
      />
      <label htmlFor="contact-form-name">Name</label>
      <input
        id="contact-form-name"
        className="contact-form-input"
        type="text"
        name="name"
        required
      />
      <label htmlFor="contact-form-message">Message</label>
      <textarea
        id="contact-form-message"
        className="contact-form-input"
        name="message"
        placeholder="Say hi!"
        rows="5"
        cols="50"
        required
      />
      <button className="contact-form-submit" type="submit">
        Send <RiMailSendLine />
      </button>
    </form>

From what I can tell, all of the necessary attributes are in the form, but nothing appears in the Netlify UI on submission.

Also, when the form is submitted the page just seems to redirect to the root URL and not the /success action.

Thanks in advance for any help!

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. 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!

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:

3

Hey Perry, thanks for the response!

I’ve read though the support guide and implemented all of the required fields, used POST and, as this is the only form on the site, there aren’t any duplicate field names.

The link to the live contact form is at the top of my initial post.

Interestingly, the Netlify form attribute tags which are present when running locally are removed on the deployment of the site. As I’m pretty new to Netlify, this might be normal but I’d appreciate if you could let me know for sure!

Locally:

Screenshot 2020-10-12 at 18.35.37
Screenshot 2020-10-12 at 18.35.371038×422 98.6 KB

Live on Netlify (same commit as above):

Screenshot 2020-10-12 at 18.36.06
Screenshot 2020-10-12 at 18.36.061046×392 92.4 KB

This is still true after using the “Clear cache and deploy site” action.

4

Hey there,
Can you try swapping the bot-field and form-name, so that the hidden input with the form-name comes first? I’m wondering if we’re expecting form-name to be the first attribute we look for, and when we don’t find it, we don’t know to match the submission with the form.

And for the redirect, could you try changing the action to / and then redirecting on success with Gatsby’s navigate function? There’s a code sample in this post that shows how: [Support Guide] Netlify forms with custom success pages for Gatsby and Nuxt

Let us know if that helps!

1 Like
5

Thanks Jen, that’s fixed it!

Not sure how I didn’t find that support guide before but it’s a great resource for getting the form up and running with Gatsby.

Also, I had a play and found the form successfully submits messages whether the form-name field is first or elsewhere in the form (i.e after the bot-field).

In case it’s helpful to anyone, the code for the working form can be found here.

1 Like