Gatsby site build with form - form recognized, but honeypot field is not

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.

Could you share the site name, or the URL of the deployed form?

Hey there hrishikesh! So the the site name/url is https://newdevsite.netlify.app

hrishikesh - you’ll probably want to use the domain where I’m deploying which is https://joncollins.dev

I don’t think I’ve registered my google recaptcha admin with the netlify.app address - so going to that address may yield some recaptcha errors

The generated HTML that you’ve shared above, is that before or after deployment?

It’s after deployment - so I’m seeing what I’d expect as far as the Netlify data attributes being removed. And the form submissions work as I mentioned above.

What’s not working is the honeypot field. As you can see from the pic above - the form is saying no extra spam features are being utilized. And not submissions that contain the “subject” honeypot are still making it through to form submissions.

Thanks for clarifying @goloisaninja . When you build your site locally, do you see the netlify-honeypot="bot-field" in the static HTML page? If you do, can you send us that file so we can take a closer look?

It’s also worth mentioning that the honeypot functionality doesn’t provide the best protection, and we do already use Akismet to protect all of our customers, so another option is to stop using the honeypot on your form if that’s what’s breaking things.

Hello amelia! So the static HTML I provided above is identical for my local build as well as the deployed production site. I see the bot-honeypot field in both local and production as I’d expect. What’s bizarre, is that Netlify doesn’t seem to recognize the honeypot. You can see from the image I attached that Netlify alerts me that no additional spam features are being used (I’d expect to see that it recognizes I’m using the honeypot). And just to be clear - the form isn’t broken or anything. I am receiving submissions successfully and most submissions are directed to either spam or verified correctly by Askimet. But I’d love to cut down on the massive amount of spam submissions that seem to make it past the recaptcha even.

What’s curious as well is that the bot submission are INDEED filling out the “subject” bot field and Netlify is still not quietly dismissing these acknowledging the honeypot I have in place. I’ve seen other users struggle with this on Gatsby builds - but I can’t seem to find a specific solution that matches my use/need case. Any help you can provide or direction you can point me would be greatly appreciated! Thank you so much for all you do!