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

I don’t see submissions when submitting using javascript. What am I doing wrong?

You probably aren’t doing anything “wrong” at all. This is actually a commonly asked question.

Here’s what you need to know: We hate spam about as much as you do.

When you submit via html’s default method, if our spam filtering flags the submission, it will redirect to a recaptcha page where it will wait for a non-robot to check the ‘I am not a robot’ field and this helps prevent spam. Very useful.

However, when you submit via javascript, our system is unable to present the recaptcha page. Don’t worry, we’ve provided a way around this.

You will need to implement what is called a honeypot field. Here’s a little more background on that. You could also give this a read through to learn how to make the honeypot even more effective, if you like!

Since this basically disabled our built-in recaptcha, we provide a couple of ways to implement a recaptcha directly on your form: an explicit recaptcha which is very simple to implement and a fully customizable version.

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

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

1 Like

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]))
      .join('&')
  }
  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).