[Common Issue] I don't see forms submissions when using javascript

I have a form rendered using javascript, but it’s not submitting. What’s going on?

There’s a few things to consider when using javascript with a netlify-handled form.

  • If you are rendering your form using javascript and are not using a static site generator (or, your generator does not render it down to html such as gatsby does), you will need to make sure you have a hidden pure-html version of your form anywhere in your site. This means a file ending in .html that has a definition starting with <form ..... Our form-handling is only able to parse this kind of html forms at deploy time to prepare our service to receive submissions.
  • If you are defining your form using javascript but will be not submitting your form using javascript, you will need to add the following hidden field to enable correct form submissions on top of a static HTML version of the form: <input type="hidden" name="form-name" value="contact" /> where the value is the name of your form. This is needed, because on HTML forms, the form-name hidden field is added to the form that tells our system the name of the form the submission is from. However, unless you do so explicitly in your javascript, since our system is unable to add it onto javascript rendered forms, you’ll need to provide it explicitly.
  • If you are submitting your form using javascript, you’ll want to make sure that the form data being sent has the same fields (by name= - including spelling and punctuation!) are your html version and includes the form-name field as mentioned above.

JavaScript opens up a lot of possibilities. Awesome, right?

Let us know how this worked out! If you have any other questions, comment below!

Updated Dec 19 2019


Update - setting the resource/url parameter for fetch() to the active redirect base successfully records the form submission in Netlify:
fetch('/en', ...)

Hi! thanks for the post. I’m able to submit via JS fetch() (without a honeypot field even), but when I enable the following language based redirects the submissions don’t go through. Any thoughts? Thanks!

// _redirects
/ /es 302 Language=es
/ /en 302
// submit via fetch()
netlifyFormSubmit (name, data) {
  const encode = (data) => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
  return fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: encode({ 'form-name': name, ...data })

Could you link us to your form in production so we can see it in action, @evvvritt ? Hard to tell what is happening without more context - such as the meaning of “don’t go through” - HTTP 404? missing submissions? Empty submissions?

Knowing where to find your form would help us out a lot. If you don’t want to post the URL here, you could say “netlify site ID # X and the form is at /path on deploy ID Y”. You can find the site ID on the general settings page, and the deploy ID will be in the URL from the logs for the deploy you were testing on (last component: https://app.netlify.com/site/deploys/Y).