Search code examples
gatsbynetlify

How to implement Netlify Forms on Gatsby


I've been able to receive forms on another site using this same method, but for some reason I do not receive submissions on this site. Netlify dashboard says collecting from 1 form (with the correct name) and honeypot field is enabled.

What am I doing wrong?

<form name='contact' method='POST' className='contactForm' data-netlify="true" data-netlify-honeypot="bot-field" action='/success' >
  <input type="hidden" name="bot-field" />
  <input type="hidden" name="form-name" value="inquiry" />
  <input id='f1' type='text' name='name' required placeholder="name*"/>
  <input id='f6' type='email' name='address' required placeholder="email address*"/>
  <textarea id='f5' id='message' name='message' required placeholder="message*"></textarea>
  <button id='f8' type='submit' className='submitForm' name='submit'>submit!</button>
</form>

Solution

  • Ensure your form's name attribute and the value of the hidden form-name field are the same. In your example, the value should be contact

    <form name='contact' method='POST' className='contactForm' data-netlify="true" data-netlify-honeypot="bot-field" action='/success' >
      <input type="hidden" name="bot-field" />
      <input type="hidden" name="form-name" value="contact" />
      <input id='f1' type='text' name='name' required placeholder="name*"/>
      <input id='f6' type='email' name='address' required placeholder="email address*"/>
      <textarea id='f5' id='message' name='message' required placeholder="message*"></textarea>
      <button id='f8' type='submit' className='submitForm' name='submit'>submit!</button>
    </form>