Netlify CAPTCHA does not show up in form

sohelahmed · May 22, 2020, 8:35am

Hi,

I am trying to integrate Netlify-provided reCAPTCHA 2 (not custom) (Netlify forms) in my GatsbyJS website.

I followed the steps provided there.

But the CAPTCHA does not show up there before the submit button, Why?

Contact form link (live): Contact | Sohel Ahmed Mesaniya

Code:

contact.tsx

/** @jsx jsx */
import { jsx, Styled } from "theme-ui";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
import SEO from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo";
import { Box, Flex, Button } from "@theme-ui/components";

import {
  Label,
  Input,
  Select,
  Textarea,
  Radio,
  Checkbox,
  Slider,
} from "theme-ui";

type PageProps = {
  data: {
    page: {
      title: string;
      //   title_2: string;
      slug: string;
      excerpt: string;
      body: string;
    };
  };
};

const Contact = ({ data: { page } }: PageProps) => {
  
  return (
    <Layout>
      <SEO title={page.title} description={page.excerpt} />
      <Styled.h2>{page.title}</Styled.h2>

      <section sx={{ my: 5 }}>
        <MDXRenderer>{page.body}</MDXRenderer>

        <Box
          as="form"
          netlify-honeypot="bot-field"          
          // rel="noopener noreferrer nofollow"
          method="POST"
          data-netlify="true"
          name="sohelahmed.site-contact"
          data-netlify-recaptcha="true"
        >
          <p hidden>
            <label>
              Don’t fill this out if you're human: <input name="bot-field" />
            </label>
          </p>
          <input
            type="hidden"
            name="form-name"
            value="sohelahmed.site-contact"
          />
          
          <Label htmlFor="name">Name (optional)</Label>
          <Input name="name" mb={3} />
          <Label htmlFor="email">Email Address</Label>
          <Input name="email" type="email" mb={3} required />
          <Label htmlFor="subject">Subject (optional)</Label>
          <Input name="subject" mb={3} />
          <Label htmlFor="message">Message</Label>
          <Textarea name="message" rows="6" mb={3} required />
          <Label htmlFor="file">File (optional)</Label>
          <Input
            name="attachment"
            mb={3}
            type="file"
            accept="audio/aac video/x-msvideo image/bmp application/x-bzip application/x-bzip2 text/csv application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document application/gzip image/gif image/jpeg audio/mpeg video/mpeg application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg video/ogg image/png application/pdf application/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation application/vnd.rar application/x-tar image/tiff text/plain audio/wav audio/webm video/webm image/webp application/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet application/zip video/3gpp audio/3gpp video/3gpp2 audio/3gpp2 application/x-7z-compressed video/mp4, video/x-matroska"
            // multiple
          />          
          <div data-netlify-recaptcha="true"></div>
          <Button>Submit</Button>
        </Box>
      </section>
    </Layout>
  );
};

export default Contact;

HTML generated on live site:

<form method="POST" name="sohelahmed.site-contact" data-netlify-recaptcha="true" class="css-vurnku" enctype="multipart/form-data">
    <p hidden="">
        <label>Don’t fill this out if you're human: <input name="bot-field" /></label>
    </p>
    <input type="hidden" name="form-name" value="sohelahmed.site-contact" /><label for="name" class="css-knfhfe">Name (optional)</label><input name="name" class="css-nlbb7l" /><label for="email" class="css-knfhfe">Email Address</label>
    <input type="email" name="email" required="" class="css-nlbb7l" /><label for="subject" class="css-knfhfe">Subject (optional)</label><input name="subject" class="css-nlbb7l" /><label for="message" class="css-knfhfe">Message</label>
    <textarea name="message" rows="6" required="" class="css-nlbb7l"></textarea><label for="file" class="css-knfhfe">File (optional)</label>
    <input
        type="file"
        name="attachment"
        accept="audio/aac video/x-msvideo image/bmp application/x-bzip application/x-bzip2 text/csv application/msword application/vnd.openxmlformats-officedocument.wordprocessingml.document application/gzip image/gif image/jpeg audio/mpeg video/mpeg application/vnd.oasis.opendocument.presentation application/vnd.oasis.opendocument.spreadsheet application/vnd.oasis.opendocument.text audio/ogg video/ogg image/png application/pdf application/vnd.ms-powerpoint application/vnd.openxmlformats-officedocument.presentationml.presentation application/vnd.rar application/x-tar image/tiff text/plain audio/wav audio/webm video/webm image/webp application/vnd.ms-excel application/vnd.openxmlformats-officedocument.spreadsheetml.sheet application/zip video/3gpp audio/3gpp video/3gpp2 audio/3gpp2 application/x-7z-compressed video/mp4, video/x-matroska"
        class="css-nlbb7l"
    />
    <div></div>
    <button class="css-zqk9vd">Submit</button>
</form>

I have also went through similar forum topic such as Recaptcha only showing on reload but did not get solution.

If any more info needed, feel free to ask.

Thanks

sohelahmed · May 23, 2020, 1:45pm

Edit:

I am facing 2 more problems:

Google reCAPTCHA is shown for few seconds and then disappear when we hard reload the page
The form is not submitted. Not in verified and spam submission both

Dennis · May 25, 2020, 6:35pm

Hi! With Gatsby, even if the initial load of your page is a static html file, it is then ‘rehydrated’ using javascript as well as client-side routing. That said, the netlify-provided recaptcha can only work on purely static html forms. If you want to use a recaptcha, you’ll want to implement Spam filters | Netlify Docs.

sohelahmed · May 29, 2020, 6:02am

I have tried a lot for custom reCAPTCHA too. I got partial success. Sometime it shows up and sometimes it is shown for a second and then disappear on page refresh. Is there any open source example. covering GatsbyJs and Google reCAPTCHA v2 on Netlify?

Thanks.

perry · June 1, 2020, 5:19pm

hi sohelahmed,

i’ve been looking at your site and loaded it a handful of times, and I can’t reproduce the issues you are describing (not saying they are not happening, but there are too many unknows here to say why you are seeing this and we aren’t).

Are you able to see a pattern? Does this occur when you are in an incognito window? Any possibility that browser extensions are creating problems?

I don’t have a specific recommendation for a tutorial, but if you find one, I am sure others would benefit from you linking it here!

sohelahmed · June 3, 2020, 6:17am

I have changed code on my contact page now. I did not get success integrating Google reCAPTCHA. I am trying different ways now.

I tried GitHub - escaladesports/react-netlify-form and got success but I cannot validate the file input field in that form. So that is not the solution.

I have a requirement which have file upload field in form and client side validation of file size and extension/MIME type.

I am glad to privide more info.

Are you able to see a pattern?

Yes. When I open in new private/guest/incognito the first time, it show reCAPTCHA for a second (estimate time) and then disappear. On next refresh and so on, reCAPTCHA is completely not shown.

Sometime when I “Empty cache and hard refresh” I see reCAPTCHA for about a second and then disappear automatically like above.

Does this occur when you are in an incognito window?

This occur in incognito and normal window both. For more info please see above

Any possibility that browser extensions are creating problems?

No. Browser extensions are not creating problems.

Chrome: When I open in guest mode (with 0 extension) (not incognito), the problem occurs.

Firefox: Normal window with 0 extension: The problem occurs.

If, still more info needed, feel free to ask me. I will be glad to provide more info.

Dennis · June 9, 2020, 6:08pm

Hi @sohelahmed,

Here’s an example that uses the ‘react-google-recaptcha’ package: https://github.com/lunaceee/gatsby-netlify-form-example-recaptcha/blob/master/src/pages/recaptcha.js. Let me know if this works for you.

Regarding seeing the recaptcha for a second, this is because of how Gatsby works. When the static html file is initially loaded, Gatsby rehydrates the site using Javascript. When this happens, the Recaptcha that our system inserts gets overwritten by Gatsby since it is not aware of the Recaptcha.

sohelahmed · June 10, 2020, 5:20am

Thanks. I will try and let you know

sohelahmed · June 16, 2020, 2:21pm

I took reference from the repo you shared and it helped me. Thanks. I have no exactly copy pasted it, but it provided me guidance.

Important:
Line https://github.com/lunaceee/gatsby-netlify-form-example-recaptcha/blob/master/src/pages/recaptcha.js#L76 give me issue

In my opinion it is bit old. The solution i found is to just remove that line

From

<Recaptcha
            ref="recaptcha"
            sitekey={RECAPTCHA_KEY}
            onChange={this.handleRecaptcha}
          />

to

<Recaptcha

            sitekey={RECAPTCHA_KEY}
            onChange={this.handleRecaptcha}
          />