My netlify site name is newdevsite.netlify.app - the site is built using Gatsby. I have a contact form which is recognized correctly and I am able to see submissions as I’d expect. I’m using my own google recaptcha process within the site code, but am attempting to use the netlify-honeypot attribute in my form - but to no avail. The netlify form section continues to inform me that I am not using any extra spam protection. I’ve read the docs on Netlify Spam filters page as well as the docs on the Gatsby site for working with Netlify honeypots. I have included all the data attributes suggested and have even taken to naming them exactly as the form example in the netlify example are named. Have seen similar issues here and there regarding Gatsby form issues - but these are usually in regards to Gatsby forms not showing up in the Netlify dashboard or not being able to receive submissions. I can see my form in the Netlify dashboard for the site and submissions work just fine. I’ve set my node environment to deploy at 16.2, though I doubt this would be the issue. I’m using styled components in my build - not sure if this would cause an issue or not. I’ll include the code for my form below, as well as the static HTML I am seeing in the deployed site. If anyone has experienced this or could point me towards a fix - I would appreciate it.
Here’s the form code:
<ContactFormWrapper>
<ContactForm
name="new-portfolio-contact"
id="contact-form"
netlify-honeypot="bot-field"
data-netlify="true"
method="POST"
>
<input type="hidden" name="new-portfolio-contact" value="contact" />
<FormGroup>
<NameInput
type="text"
id="name"
name="name"
value={name}
onChange={e => onChange(e)}
aria-required
required
/>
<FormLabelFloating htmlFor="name">your name</FormLabelFloating>
</FormGroup>
<FormGroup>
<EmailInput
type="email"
id="email"
name="email"
value={email}
onChange={e => onChange(e)}
aria-required
required
/>
<FormLabelFloating htmlFor="email">your email</FormLabelFloating>
</FormGroup>
<AltFormGroup className="hidden">
<label>subject</label>
<input
name="bot-field"
id="bot-field"
type="hidden"
tabIndex="-1"
value={subject}
onChange={e => onChange(e)}
/>
</AltFormGroup>
<FormGroup>
<TextArea
cols="30"
rows="10"
id="message"
name="message"
value={message}
onChange={e => onChange(e)}
aria-required
required
></TextArea>
<FormLabelFloating htmlFor="message">
message body
</FormLabelFloating>
</FormGroup>
<div>
<ContactSubmitButton
id="mySubmitBtn"
onClick={e => checkInputs(e)}
aria-label="contact form submit button to send your message to Jon"
aria-disabled={blockedIPs.some(address => address === ip)}
>
<FaArrowRight />
</ContactSubmitButton>
<p>send your message!</p>
</div>
<ReCAPTCHA
ref={recaptchaInstance}
size="invisible"
sitekey={siteKey}
theme="dark"
badge="inline"
/>
</ContactForm>
</ContactFormWrapper>
And here’s the static HTML from the deployed site:
<form
class="styles__ContactForm-sc-aliy6t-5 eexeva"
id="contact-form"
method="POST"
name="new-portfolio-contact"
>
<input type="hidden" name="form-name" value="new-portfolio-contact" /><input
type="hidden"
name="new-portfolio-contact"
value="contact"
/>
<div class="styles__FormGroup-sc-aliy6t-11 NnYNx">
<input
type="text"
id="name"
name="name"
value=""
aria-required="true"
required=""
class="styles__NameInput-sc-aliy6t-6 LiRoT"
/><label for="name" class="styles__FormLabelFloating-sc-aliy6t-12 bPiOtv"
>your name</label
>
</div>
<div class="styles__FormGroup-sc-aliy6t-11 NnYNx">
<input
type="email"
id="email"
name="email"
value=""
aria-required="true"
required=""
class="styles__EmailInput-sc-aliy6t-7 flafUx"
/><label for="email" class="styles__FormLabelFloating-sc-aliy6t-12 bPiOtv"
>your email</label
>
</div>
<div class="styles__AltFormGroup-sc-aliy6t-10 gFIPAM hidden">
<label>subject</label
><input type="hidden" name="bot-field" id="bot-field" tabindex="-1" />
</div>
<div class="styles__FormGroup-sc-aliy6t-11 NnYNx">
<textarea
cols="30"
rows="10"
id="message"
name="message"
aria-required="true"
required=""
class="styles__TextArea-sc-aliy6t-8 gxRWPm"
></textarea
><label for="message" class="styles__FormLabelFloating-sc-aliy6t-12 bPiOtv"
>message body</label
>
</div>
<div>
<button
id="mySubmitBtn"
aria-label="contact form submit button to send your message to Jon"
aria-disabled="false"
class="styles__ContactSubmitButton-sc-aliy6t-9 cTRLvy"
>
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 448 512"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"
></path>
</svg>
</button>
<p>send your message!</p>
</div>
<div></div>
</form>
I am including the bot-field data within post body to Netlify. Forms submitted by bots are capturing the fields data correctly - but clearly the honeypot is not working as expected. Any help is appreciated - thank you in advance.