Is hidden input with "form-name" is actually needed when the form is being submitted using JavaScript?

Support
,
1

Hello!

I have a website on Gatsby and I was wondering if hidden input with “form-name” is actually needed in my case. I think it is not since I haven’t been using it for a while and everything was fine. But in your docs everywhere is said that is so required that nothing will work without it when actually it does work really well.

Here is a rough example of my form:

import React from 'react';

const FORM_NAME = 'Blog Subscribers';

function encode(data) {
  return Object.keys(data)
    .map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
    .join('&');
}

export const Form = () => {
  const handleSubmit = () => {
    fetch('/', {
      method: 'POST',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: encode({ 'form-name': FORM_NAME, email: 'email@email.com' }),
    });
  };

  return (
    <form
      name={FORM_NAME}
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      noValidate
      onSubmit={handleSubmit}
    >
      <input name="email" type="email" />
    </form>
  );
};

Thanks!

2

Hi, @SilencerWeb, to answer this for certain we would need to examine the site itself. The backend form handler is created by parsing the HTML version of the form. The HTLM version should contain this input.

It is possible that the form handler was created when this input existed and continues to work now without it because the form handler was already created when it did exist.

Again, to say for sure, I would need a link to the HTML version of this form as covered in this support guide.

If there are other questions about this, please let us know.