[Support Guide] Form problems, form debugging, 404 when submitting

Why use Forms?

Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors.

There are many ways to use forms: contact forms, sign-up forms. Because forms can take many… uh… forms, implementing one can become tricky. Here are some tried and true approaches to debugging common form errors and things to consider. Comments are welcome!

(Please give these debugging tips a try before making a new post!)

Form-handling works automatically for HTML forms that meet the following requirements:

  1. You need to have a netlify or data-netlify=true attribute in your HTML <form …> definition. Note that once the form is processed during deploy, the resulting HTML that we serve will NOT have that parameter in it anymore!
  2. You need to include a name attribute on the opening <form> tag. When the page is deployed we will add a hidden input with a form-name attribute that’s the same as the name you set for the form. This is used in our API to determine which form is receiving the input. This is handled automatically as long as the HTML form includes a name.
  3. Please do not include extended symbols like @ in your <form ...> html definition. These will prevent our form detection from finding your form!
  4. The name in the opening <form> tag needs to be unique on your site. You can reuse it on other sites!
  5. Every input in the form must have a “name” attribute. Something like <input name="email" ...> or <textarea name="message" ...> is what you need. The name is sent along with the value in the submission and our API will only record data from form submissions with names matching the definition as parsed at deploy time.
  6. The name in each of your <input> tags needs to be unique within that form - can’t have two name=contact fields in the same form!
  7. Make sure that you POST your form request (not GET) with a Content-Type of application/x-www-form-urlencoded in most cases. However, if and only if you are submitting the form with a file upload then the Content-Type needs to be multipart/form-data instead.
  8. We use Akismet on all form submissions. If you see the form in the app.netlify.com UI, but you don’t see any of your test submissions, double check that you aren’t sending junk info in your test submissions or submitting over and over again from the same IP address (which looks spammy and may be hidden in our UI until you choose to view the spam submissions).

If you have an HTML5 compliant form that follows those guidelines, it just works!

There are some things you’ll probably want to adjust to suit your tastes:

Thank-you page

  • If you want to show your own content after the POST rather than our generic thank-you page, make sure you include an action=/path parameter in your form definition. (/path should be the page you want to display - might be “/” or “/thank-you/english.html” - must be either ‘thank-you’ to use our automatic thank you page, or a path starting with / - but NOT a complete URL starting with http(s) ). While you wouldn’t seem to need an action for AJAX forms - it’s how we know what to show after submission, so you do need one unless you’d like us to show our thank-you page. If this path doesn’t exist, we will use our own standard thank-you page.

If you’re using a pure javascript form instead, this additional step is required:

  • You still need to include an HTML form that meets the criteria above, including all the inputs with the same names as the javascript form. This is required because we parse HTML to find forms during your deploy - but we don’t try to parse javascript files. This means if you are using React, Vue, etc. which create HTML elements using Javascript during the render, you’ll still need to include an actual HTML file that includes all of the form details in it, including all possible inputs that you want to use. For a working example using React that you can generalize to other frameworks from, check out this blog post.

OK, did it work? Here’s some tips to tell, and a caveat:

HTML forms: Once the HTML form is deployed with the netlifyattribute, you’ll see an entry (with its name from step 3) in our UI at https://app.netlify.com/sites/YOURSITENAME/forms . This will be present in our UI immediately after deploying. If it isn’t, we haven’t processed the form for some reason such as it not being present in HTML format.

Netlify Recaptcha: If you’re using the <div netlify-recaptcha></div> element to add our recaptcha, you can only have one on any single page. If you put this div in multiple places, only the first one parsed will be replaced with an actual recaptcha.

Are submissions being marked as spam?

Customers have reported that certain field names, such as from, can cause all submissions to be marked as spam. Double-check your form field names and consider renaming your fields – particularly if one is from!

Still having trouble? Please start a new topic tagged netlify-forms:
https://answers.netlify.com/tag/netlify-forms

In that topic, Please:

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

and provide:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “pure javascript form”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse
11 Likes
"Page Not Found" when submitting form
Blank form submissions?
Netlify forms is removing one of my input fields for no reason? GatsbyJs
How to delete a form from the Netlify dashboard?
Fetching data from Formik form using Gatsby and use Netlify functions to post into Sanity
Forms not working, Believe I follow every step
Form not showing in dashboard, duplicate form names?
Netlify form is active but won't recieve submissions
Default thank you page doesn't show on form submit
Html form - inputs not received - creating form inputs with map
Netlify form not submitting
Forms with a service worker that precaches
Netlify Forms returns 404, loading using JavaScript
404 error when submitting form
Form not working can someonehelp
Contact Form POST Request Returning 404
Netlify-forms with vue Nuxt
Submitting a form gives a 404 Page not found
'Page not found' after submitting form
Form is discovered but no messages come through
Error 404 on submitting form with NuxtJS Vuejs
Form working for spammer but not for me
Form inside react modal not detected
GatsbyJS form not detected
Form not being detected
Can't put a netlify form on my Sapper.js site using the classic "netlify" attribute
Using netlify forms without an actual form?
Netlify form: There is no "Thank you" popup
Added new environment and DNS, now form submissions don't work in production
Netlify Form in Vue Not Working
Page Not Found 404 when I click submit button form
Cannot get Netlify to recognize form in Angular app
Having problem with forms in svelte
Serializing form data: text and file uploads
Contact form not working getting 404 then going back to the homepage
HTML5 Netlify form 'page not found'
Gatsby Form not working: form lives on a portal
Form submission not showing
Form and Gatsby - 404 on submit
Netlify Forms: Custom success message ignored due to invalid action parameter
Form submissions not appearing when using Firefox
`action` attribute within forms getting ignored
Form Submissions not working
Gatsby + Netlify Form Error 404
Nothing happens on submission of form
Netlify Contact Form Issue
Netlify Form Submission issue
Checkboxes Not Passing Multiple for Gatsby Site through Netlify Form
Checkboxes Not Passing Multiple for Gatsby Site through Netlify Form
Netlify form submission can't connect to server?
Gatsby forms - Parsing HTML SSG
Page not Found on form submittion
Vue Form submission only work on second attempt
Atributo data-netlify="true" não aparece no form mesmo eu colocando nele
Problems with form
Form Fields not submitted
Form submissions doesnt work, no captcha. Copied & pasted from Docs, still dont work
Multi-step form with Formik, Gatsby and Netlify
Started receiving a bunch of SPAM via form submissions
Empty form submissions due to "action"
Netlify form not getting recognised
Empty form submissions due to "action"
Netlify Form not submitting name field and message body
Document.referrer not working properly in netlify forms
Phone number disapears Angular with netlify forms
Forms not working
Form action leading to 404
React Hook Forms Works Locally But Not In Production
Next.js Form Issue
Vue.js form with prerender shows existing form, but keeps sending back 404, could be a redirect issue?
Form not working. Help!
Netlify forms from webflow code not working
I can't make netlify forms work in my project
Next.js ajax forms file not uploading
I get a success message by default in the Contact Us function. Is there any way to prevent this from happening?
Page Not Found 404 when I click submit button form
Can't seem to get forms to work in React
Thank you page works on dev, but not on a live website
Netlify Form not submitting name field and message body
Form entries not collected
Old form fields stuck in dashboard after changing fields in code
Issue with form contact and Hooks
Netlify Form Submit Button onClick event redirect to Stripe Checkout (Gatsby)
Old form deleted, new form not detected
Form Submissions Empty | Inputs Include Name Attr
Form method GET to redirect to /search page
Multiple Issues with Netifly Forms
Form submissions do not work at all. Tried everything
Value of netlify form is not passed into submission (radio buttons)
Netlify Forms and Google's amp-form
Form submission not showing multiple checkbox values
Netlify Form Overlap Two Different Website
Redirect form submission fails
Name field in form empty in submissions
Submitting contactform > getting 404 page not found
Contact Form not working sometimes
Netlify Form Submission to email
Forms not submitting after adding recaptcha
`action` attribute within forms getting ignored
Form submission 404
Forms not working with Paypal action
Support Guides - Or, how to find answers for frequent questions!
[Support Guide] Netlify forms with custom success pages for Gatsby and Nuxt
[Support Guide] My form renders with javascript but won't work properly
[Support Guide] Form not showing in Netlify site dashboard
404 Error Upon Submission of Form
[Support Guide] Form not showing in Netlify site dashboard
On submission , form gives me Error - Page not found
Netlify's Form redirects to wrong path. Rendered html shows correct path
Forms didn't capture any submitted entries on website
Problem Getting my Netlify Form to Work
Problem using Hugo with baseURL and Netlify forms
Forms not being sent with Next.js
Receiving empty forms
Form not working
Form fields missing
Form detected but no submissions
Form submission comes empty with no values,
Form detected but no submissions
React netlify form 404 error
Form Data collection with React Bootstrap
Netlify form not receiving data. Returning 404 on site
Status 404 () when submit form using react.js stateful component
Adding (data-netlify="true") to Form Code
Form not registering as active
404 error when submitting form
Recaptcha - Gatsby and react-hook-form don't working
Forms not properly submitting
Forms Not Working - 404 Error on submit
Netlify Form 404 on submit
Custom success page for a from
Missing field Values
Netlify-form on my website doesn't work
Custom Success Page not rendering after submitting form
Submission form got blank data
404 on form submit
Form submission does not appear
Delete active forms
Netlify Forms: Custom success message ignored due to invalid action parameter
Josephine-Ann/Mattlawie Issue with reCaptcha
Netlify Forms not working with Gatsby site after deploying to separate account?
Forms debugging question
Can there be more than one form?
The emails are not being shown in the forms
Netlify Form is not working - nothing happens after I submit
Form is not registering in dashboard -- Need for my wedding next week
reactJS netlify email special field add
Form submissions do not arrive. Seems a spam problem. No clue how to proceed (Gatsby)
Form made with WebFlow on Netlify?
How to delete a form from the Netlify dashboard?
Netlify input misses an attribute on deploy
Only receiving name, email and message input from the form
Multiple Forms Get Messed Up
Submitting Netlify Form gives 404
How can I recover submitted forms that do not show on dashboard?
Netlify-forms Contact Form submission 404 error
Netlify Form - Nuxt.js error during form parsing - Vue hydration fails
Cannot see form submissions!
Netlify form submissions not arriving
Failed to execute 'appendChild' on 'Node': This node type does not support this method
No form submission (React via Reagent)
HELP - Contact form submission using data-netlify="true" doesn't work
Gatsby/React Form conditionally rendered elements failing to be submitted to Netlify
Can't receving form messages!
Netlify Forms with Vuepress Issue
Problem with contact form submission
Form submission - correct POST reply, but no entry on the submissions page
No form submissions in Netlify UI
Form Submission Not Grabbing All Fields
Form success page gives 404 even though the page exists
Form in Gatsby site not receiving submissions
Getting 404 with form submission with angular
Still not seeing forms in Netlify Dashboard
Netlify Forms bug? I dont know. I am a newbie
Troubleshooting Netlify Forms w Gatsby
Netlify Forms not working with Javascript enabled (Gatsby)
No Data after headers in Vue.js Form Submission on Dashboard
Nuxt Netlify Form
Https://ayfc.netlify.app/contact
Is it possible to modify the response of a submission-created Function?
Empty forms (that were working)
Vue form questions
Forms not working with Next.js
Form is not being recognised
[Webflow] Netlify forms submission error
Netlify Form 404 after Divya Guide for Vue
Page not found when I submit form
Form Not Detected: The form is located in the Modal (Create using react-bootstrap)
Form Submissions Empty
[HELP] I somehow manage to break my contact form!
Contact form drops fields (form works well with request bin)
Netlify Form issue
How do I use Netlify forms with Angular 5
Netlify Forms not sending to my email
Form submission doesn't show thank you page
Form Submission - Issues with Set up
New Form Field not registering
Netlify Forms doesn't send File Attachment
NUXT + Netlify Forms
Vue + Nuxt.js Prerender Form not showing in forms page on dashboard
Generic success message not not appearing - missing form submission fields
Form submission is showing blank in the netlify Forms page
Form submissions missing some data inputs
Form Honeypot not working
Form submission in react
Netlify no longer detecting forms
Help please! Cannot get the form to work!
Example form not working with Gatsby starter?
Form not being recognised during gatsby build - 404 response in production
Blank form submissions issue
One form field is missing after submission
Form being captured but data from 2 fields is not being pulled
Netlify Forms: Page Not Found 404 on Submit
Form not working. Help!
Netlify form failing to capture key data
[Support Guide] Form not showing in Netlify site dashboard
Link breaks in Nuxt Website
Issue With Netlify Forms
Form data not received? Gatsby, Material UI, Formik
Netlify is not detecting my form
Netlify Forms missing few fields
Form not showing in forms dashboard
When the user clicks "send" he will be redirected to the FAQ page
Forms are connected, why am I not getting the emails?
Netlify forms not working in a Vue/gridsome app
Form is not working, returns 404
Netlify form not submitting, or showing page not found error
404 when submitting form
Netlify Forms input
Gatsby Form not working: form lives on a portal
Form Bots not stripping "netlify" from form (Svelte / Sapper / Forms)
Netify Form Empty
Form AJAX submission

I think I may have found an additional failure mode we could cover here. I have a new site, with a form that shows up in the forms list, and seems to post successfully. It redirects to the default success page “Your form submission has been received.”, but I never see any submissions for the form in the dashboard and the email address registered for notifications never receives the submission.

Could this be because the site is still just a random-name-12345.netlify.com site? Do forms only begin working once you attach a domain name and setup SSL?

1 Like

nope - forms work at any URL, so that isn’t the cause. Two most likely reasons for missing submissions which are both summarized as “It is most likely that they were marked as spam”.

  • 1 way that can happen is if you have set up some explicit spam prevention as documented here: https://www.netlify.com/docs/form-handling/#spam-filtering , but you are not using it correctly. Honeypot field filled out, or recaptcha not correctly configured. If either of those happen, the entry will be marked as spam regardless of content.
  • could be Akismet marking things as spam. This is likely in case you’ve tested a whole lot from the same IP address, or put real garbage data in, such as email address = test123.

Regardless, we’re working to release (code is mostly written, so this isn’t just “hope” but “bits committed already”) a UI for you to examine and mark entries as non-spam. For now, you’ll need to let us know what site it’s for and we can examine the missing entries in the database and mark them as non-spam for you, which will expose them to you for download/review.

1 Like

Great information, thanks! After the first couple of tries, I did test with typical test data (e.g 111 Test Dr., me@example.com) sort of thing. But I never saw those first tries either, so there may be some other issue as well with my syntax or usage.

Here’s the site: [removed to comply with new user constraints.]

I’ve also opened a question on StackOverflow, so I’ll update it once I’m sure of the solution. It may be helpful to add this issue to the documentation with a recommended way of testing forms and a warning about obvious test data. Or maybe that will just be part of the documentation for the new feature you mentioned when it comes out.

EDIT WITH SOLUTION: It turns out my core issue was a duplicate name on a form input. This caused the initial issue, and I bet I spam blocked myself trying to troubleshoot. Here’s the Stack Overflow question with details.

Hello! I am working on building my first form for client’s site, and hopefully my site next. I’m using Gatsby and I’ve gone over the excellent documentation on this site and Gatsby guru codebushi. My submissions are going through, but they are blank. I have added name parameters to my inputs. I have tried changing the name of the form, but no new forms show up in Netlify. What else could I be doing wrong?
Thanks in advance for the help

Looking in Netlify’s database to find a form for your site with the same name as the one you linked, I see a definition for your contact form that has ONLY the bot-field in it - we didn’t process any other fields at deploy time.

Two likely possibilities:

  • For your site, since I can see that the html for that page does have <input ... name="name" ...> type fields (rather than building them via javascript), so perhaps you have a SECOND, empty definition of that form somewhere else in your source code? We’re looking for another <form name=contact ...> type definition. It is also the case that the last deploy on ANY branch will update the form definition for ALL branches so you could also have an empty form with that name in some testing deploy that has overwritten production. Forms work on any branch/preview URL, but the definition in use on all of them will be the MOST RECENTLY DEPLOYED one.

  • For others, whose forms are javascript-generated, it’s likely that you’re missing this (from the debugging steps):

  • You need to create an html form to match the JS definition exactly (same form name, field names, etc). New JS forms will ONLY appear in our UI and only be processed correctly from the browser, if you have deployed this html form. You do NOT have to link to it - you can just create a “netlifyneedsthis.html” file with those definitions in it (and deploy it with your site) and that will work!

As I mentioned that second one is not your problem @RJGrunau :slight_smile:

1 Like

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.

2 Likes

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