[Common Issue] Form problems, form debugging, 404 when submitting

Hi there - I’m trying to get a basic form set up using Netlify at https://reclaimapp.io/signup/. I’ve read through this thread, read the docs, and also checked out the example form on GH. The form appears correctly and routes to /thanks, but the submissions haven’t come through. Would love to know what I’m doing wrong. Thx!

Never mind! I forgot to add the “hidden” input to my JS file. It now works like a charm. So cool and nifty. Thanks for making great documentation (even if I don’t read it carefully enough).

1 Like

A post was split to a new topic: Required fields in forms?

I’m late and I apologize, but I wanted to follow up. The problem was me, I followed a tutorial instead of reading the docs. Got everything running perfectly. Thanks for your help.

1 Like

In case anyone runs into the problem I had:

I was having the same issue many of you ha{d|ve} - forms were showing up on app.netlify, but submissions were blank. After trying all the fixes in the various places on the internet it still wasn’t working.

I finally realized my own submissions were being filtered by Netlify’s spam-filtering service provider. After reverse engineering the spam filter tests through trial and error I found that if you have a form field named “twitter”, the spam filter Gods REALLY want (need) your entered data to start with an “@” character. Wow! Lost more than a day of my life to these spam filter Gods.

tl;dr - Make sure you enter good data while testing. For me that meant including “@” in my “twitter” field.

1 Like

I’ve got some news to share - the spam management UI that @fool mentioned earlier in this thread has now been released! Check out the blog announcement and updated Forms documentation to learn more. The docs now also include tips on how to avoid having your test submissions flagged as spam in the first place.

1 Like

check this post :point_right: Manage spam submissions is now available in the UI!

1 Like

Hi there,

I have been struggling to setup a form on my VueJS site. I’ve tried many different variations and am still unable to receive form submissions. It redirects to a 404 each time the form has been submitted.
https://spencerversteeg.com

Form HTML
<form name="contact" method="POST" class="contact__form" netlify-honeypot="bot-field" data-netlify="true">
  <input type="hidden" name="form-name" value="Contact" />
    <p style="display: none" class="hidden">
     <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
  </p>
  <div class="contact__row">

    <div class="contact__col">
     <input v-model="form.name" name="name" type="text" placeholder="Your Name" class="contact__input contact__input--name">
    </div>
    
    <div class="contact__col">
     <input v-model="form.email" name="email" type="email" placeholder="Email Address" class="contact__input contact__input--email">
    </div>
  
  </div>
  <div class="contact__row">
    <div class="contact__col">
      <textarea v-model="form.message" name="message" class="contact__textarea contact__input" cols="50" rows="10"></textarea>
    </div>
  </div>
  <div class="contact__row">
    <div class="contact__col contact__col--right">
      <button type="submit" class="contact__button">Send</button>
    </div>
  </div>
</form>

Is it possible and if, how do you remove IP addresses of form submitter?

Hi there,

You can remove the form submissions from our system; that is the only way to remove the IP address information from our storage at present.

Hi Spencer!

Did you follow the steps in the original post at the top of this thread? 404 usually means one of a few things:

  1. Perhaps, we never recognized your form. When you show the form html - where is that stored? In a literal .html file, or is it built from JS dynamically? Do you see the form in the site config dashboard? (I see a form there with that name, but the last submission was rather after you posted in this thread, so maybe things have changed?
  2. You submit to an unexpected path. Based on that HTML, we’d only be looking for a POST to / since you have configured no explicit action=
  3. You submit with an unexpected form-name. This is/was likely the problem - “contact” != “Contact” and you have them mixed in your definition:
<form name="contact" method="POST" class="contact__form" netlify-honeypot="bot-field" data-netlify="true">
  <input type="hidden" name="form-name" value="Contact" />

Do form submissions work on a site’s Default Subdomain?

Or do they only work on the site’s Primary Domain?

Thanks
Eric

Forms are not dependent on specific domains at all, @emb. They will work on your netlify subdomain, custom domains domain aliases, etc.

Thanks! I found the issue. Was related to not having a hidden “form-name” input field for a react application. This helped https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

1 Like

Thanks for this - my form wouldn’t accept data until I added the botfield and then this underneath:

<input type="hidden" name="form-name" value="contact" />

Was driving me nuts. :slight_smile:

1 Like

My question would be, if I use a “Branch Deploy” such as staging for testing, should I be able to see it in https://app.netlify.com/sites/YOURSITENAME/forms ? Or it needs to be on production?.

Hi @alvaro.saburido,

Yup, forms deployed on a branch will also show up on /forms. We don’t separate forms based on the branch.

1 Like

A post was split to a new topic: Form not showing in dashboard, duplicate form names?

If you still have forms concerns / trouble / issues / questions, start a new topic in

https://community.netlify.com/c/netlify-platform/forms :slight_smile:

Please: :pray:

  • Write a fantastic title that summarizes your issue and is helpful for other users

and provide:

  • The URL to your netlify site
  • The HTML/JS code of your form, Example: <form>....</form>
  • The form name
  • Any errors or logs from the Netlify build logs, dashboard or browser developer console
  • Anything you have tried that did or didn’t help or make things better/worse

writing the best questions possible will ensure you get the best possible support in an efficient way from both community members and netlify staff. :muscle: