Hide form element from public.html & invalid form field

Support
1

Netlify domain: gracious-babbage-21fe68

I have the form described here working with Forms. Yet the instructions for React specify that a form element must be present in the HTML for build bots to find it.

As a result, I see the empty form at the bottom of my page. I have tried to set display:none on the element, but this has no effect.

In addition, I suspect that my “Name” field is invalid, how should this be formatted? All other fields return correct data on submission of the form.

 <!-- A little help for the Netlify post-processing bots -->
<form style="display: none" name="contact" data-netlify="true" netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>

<form name="contact" method="post" data-netlify="true" netlify-honeypot="true" hidden>
<input type="hidden" name="form-name" value="contact" />
  
  <label hidden>
    <p>Don’t fill this out if you’re human: <input name="bot-field" /></p>
  </label>
  
  <div>
    <label htmlFor="first-name">First Name:<br />
      <input type="text" id="first-name" name="first-name" required />
    </label>
  </div>
  
  <div>
    <label htmlFor="last-name">Last Name:<br />
      <input type="text" id="last-name" name="last-name" required />
    </label>
  </div>
  
  <div>
    <label htmlFor="email">Email:<br />
      <input type="email" id="email" name="email" required />
    </label>
  </div>
  
  <div>
    <label htmlFor="message">Message:<br />
      <textarea id="message" name="message" required></textarea>
    </label>
  </div>
  
  <div>
    <button type="submit">Submit</button>
  </div>

</form>
2

Hi @chrisfinazzo

As mentioned in Work with JavaScript-rendered forms the elements in for rendered form and the placeholder form need to match. Currently there are name, email, and message fields in the placeholder, but first-name, last-name, email and message in the rendered form.

As for hiding the placeholder form… I cannot see it on the page, but is visible in the source which is not an issue. If you would prefer to not have it there, you can put it in a separate HTML file in the public directory of the project and Netlify will still pick it up as I have done in this demonstration.

3

Can confirm, there was a mismatch here. I will try the other approach you mentioned about hiding the rendered form - didn’t realize that was possible.

The more you know…