Recaptcha - Gatsby and react-hook-form don't working

[LimaBruno]

I’m using Gatsby and the “react-hook-form” in a contact form, but data-netlify-recaptcha = “true” doesn’t work what can I do to work?

Code:

    import React from "react"
    import { useForm } from "react-hook-form"

    import * as S from "./styled"

    const ContactForm = () => {  
      const { register, errors, handleSubmit } = useForm({
          mode: "onChange"
      });

      const onSubmit = (data, e) => {
        console.log(JSON.stringify(data)) 
        e.target.submit()
      }

       return(
        <S.ContactWrapper>
            <S.ContactForm onSubmit={handleSubmit(onSubmit)} name="contact" method="post" netlify-honeypot="bot-field" data-netlify-recaptcha="true" data-netlify="true">
                <S.ContactInput type="hidden" name="bot-field" />
                <S.ContactInput type="hidden" name="form-name" value="contact" />
                <S.LabelMain for="name"><S.LabelName>Name:</S.LabelName>
                    <S.ContactInput
                      type="text"
                      name="name"
                      id="name"
                      alt="Name"
                      placeholder="Your Name"
                      ref={register({
                        required: "Required Field",
                        maxLength: {
                            value: 30,
                            message: "Max 30 characters"
                        }
                      })}
                    />
                    {errors.name && <S.Error>{errors.name.message}</S.Error>}
                </S.LabelMain>
                <S.LabelMain for="email"><S.LabelName>Email:</S.LabelName>
                    <S.ContactInput
                      type="email"
                      name="email"
                      id="email"
                      alt="Email"
                      placeholder="Your Email"
                      ref={register({
                       required: "Required Field",
                       pattern: {
                         value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
                         message: "Invalid E-mail"
                        }
                      })}
                    />
                    {errors.email && <S.Error>{errors.email.message}</S.Error>}
                </S.LabelMain>
                <S.LabelMain for="message"><S.LabelName>Mensagem:</S.LabelName>
                    <S.ContactArea
                      name="message"
                      id="message"
                      rows="5"
                      cols="33"
                      alt="Message"
                      placeholder="Your Message ..."
                      ref={register({
                        required: "Required Field",
                        maxLength: {
                            value: 180,
                            message: "Max 180 caracters"
                        }
                      })}
                    />
                    {errors.message && <S.Error>{errors.message.message}</S.Error>}
                </S.LabelMain>
                <div data-netlify-recaptcha="true"></div>
                <S.ContactButtonSend type="submit" aria-label="Send">
                <S.IconSend/>Send</S.ContactButtonSend>
                <S.ContactButtonRest type="reset" aria-label="Reset"><S.IconRest/>Reset</S.ContactButtonRest>
            </S.ContactForm>
        </S.ContactWrapper>
    )
}
export default ContactForm

Any help would be greatly appreciated! Thank you.

[perry]

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form.

[LimaBruno]

Thanks for your contribution, but I can’t work with recaptcha and react-hook-form. I also installed “react-google-recaptcha”, but it doesn’t work.

Links:

Spam filters

Netlify form validate then submit

I have a Gatsby/React build with a form connected to Netlify in a functional component, all working fine and outputting the submissions to the Netlify CP. I’ve now added validation using react-hook-form and so want to preventDefault on submission to run the validator function and then submit upon successful validation. The validation works fine, however I’m stuck trying to send the data via a function after the validation. I’ve attempted e.target.submit() but to no success. Any ideas where I’…

react-google-recaptcha

My Github:

LimaBruno/personal-blog/blob/master/src/components/ContactForm/index.js

My Blog Project:

Contato

What do you think about that?

Thank you!

[jen]

Hey @LimaBruno,
Just so we can narrow the scope of the issue, can you confirm that this form works correctly without data-netlify-recaptcha = “true”?

[LimaBruno]

Hey @jen,

Yes, the form is working, without data-netlify-recaptcha=“true” and div data-netlify-recaptcha=“true”. Look attached image

Can you tell me if netlify form is compatible with react hook?

Home

[LimaBruno]

Hey guys,

My problem has been solved. I reinstalled the “react-google-recaptcha” plugin. This tutorial was important

https://www.netlify.com/blog/2018/06/28/5-pro-tips-and-plugins-for-optimizing-your-gatsby-netlify-site/

Thanks so much!

[Scott]

Thanks for feeding back, @LimaBruno!