Netlify recaptcha not working

Hi guys,
I’m new to netlify and I would like to make an html form with recaptcha.
I am using astro and the form is rendered from a react component.

The build log doesnt show that recaptcha field was detected even though I put the required field and attribute,
but if I scroll fast on page load I can spot the recaptcha field appearing for a brief moment and disappearing fast.
In addition, when I try to add recaptcha the form does not work. But without it, it works.

I’m rendering the form component in the astro page with client:visible and I also tried with client:load.

Here is the build log :

1:50:57 AM: ────────────────────────────────────────────────────────────────
1:50:57 AM: Post processing - HTML
1:50:57 AM:   2. Functions bundling                                         
1:50:57 AM: ────────────────────────────────────────────────────────────────
1:50:57 AM: ​
1:50:57 AM: The Netlify Functions setting targets a non-existing directory: netlify/functions
1:50:58 AM: Processing form - contact
1:50:57 AM: ​
1:50:57 AM: (Functions bundling completed in 1ms)
1:50:58 AM: Detected form fields:
 - bot-field
 - nom
 - email
 - entreprise
 - tel
 - message
 - who
1:50:57 AM: 

My form :

const handleSubmit = (e)=>{
        e.preventDefault();

        setIsSuccess(null);

        let formData = new FormData(e.target)
        fetch('/', {
          method: 'POST',
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          body: new URLSearchParams(formData).toString(),
        })
        .then(() => {
            setIsSuccess(true);
            setIsStatusOpen(true);
            e.target.reset();
        })
        .catch((error) =>{
            setIsSuccess(false);
            setIsStatusOpen(true);
            e.target.reset();
        })
    }

return(
        <>
            <form className="space-y-4" name="contact" method="POST" onSubmit={handleSubmit}
                data-netlify-recaptcha="true" data-netlify="true" netlify-honeypot="bot-field"
            >
                <input type="hidden" name="form-name" value="contact" />
                <input className="hidden" name="bot-field" />
                
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label className="sr-only" htmlFor="name">Nom</label>
                    <input
                        className="w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-primary"
                        placeholder="Nom"
                        type="text"
                        id="name"
                        name="nom"
                        required
                    />
                </div>

                <div>
                    <label className="sr-only" htmlFor="email">E-mail</label>
                    <input
                    className="w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-primary"
                    placeholder="E-mail"
                    type="email"
                    id="email"
                    name="email"
                    required
                    />
                </div>
                </div>
                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label className="sr-only" htmlFor="entreprise">Entreprise</label>
                    <input
                    className="w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-primary"
                    placeholder="Entreprise"
                    type="text"
                    id="entreprise"
                    name="entreprise"
                    required
                    />
                </div>

                <div>
                    <label className="sr-only" htmlFor="phone">Téléphone</label>
                    <input
                    className="w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-primary"
                    placeholder="Téléphone"
                    type="tel"
                    id="phone"
                    name="tel"
                    required
                    />
                </div>
                </div>

                <div>
                <label className="sr-only" htmlFor="message">Message</label>
                <textarea
                    className="w-full rounded-lg border border-gray-200 p-3 text-sm focus:outline-primary"
                    placeholder="Message"
                    rows="8"
                    id="message"
                    name="message"
                    required
                ></textarea>
                </div>
                <div>
                <label className="text-sm text-gray-400" htmlFor="message">Qui êtes-vous</label>
                <select id="who" name="who"  className="mt-1 block w-full rounded-md border border-gray-300 p-3 shadow-sm sm:text-sm focus:border-primary focus:outline-none focus:ring-primary">
                    <option>Particulier</option>
                    <option>PME</option>
                    <option>Groupe</option>
                </select>
                </div>
                <div data-netlify-recaptcha="true"></div>
                <div className="mt-4">
                {props.button}
                </div>
            </form>
        </>
    );

Hi @EyePatch128,

Could you please share the site on which we can see this happening?

Sure:
https://effortless-figolla-f3c411.netlify.app

Hi @EyePatch128,

Thanks for providing the link.

From the code provided, I’m not seeing that an empty

has been added with the data-netlify-recaptcha="true" attribute. I may have missed it, if you could point out where it’s been added.

Hi @Melvin,
Thank you for your response.
I am able to see it in the element inspection.
image

You can see the attribute on the form tag as well as the div before the end.
I should note that the div where it is supposed to be has around 400px, and I am not styling it.

Could it have something to do with astro hydration?

Hi @EyePatch128,

It should work, I have a simple Astro site here from the Netlify Astro Template it has a form and I’ve added recaptcha.

Would it be possible to create a minimal reproduction and share the GitHub repo? This is a simplified example of the issue that makes it clear and obvious what the issue is to help us debug it.

Hi @Melvin,
Thanks for your response.
Here is my repo: GitHub - Youssef-Mounhi/netlify-form
I checked the template you linked, and they do not use react or another framework for it.
I am going to try removing it from my code to se if it works.
Edit: The recaptcha appears if I just put the form in normal html, and not in a react component

Hi @EyePatch128,

Could add your own ReCaptcha as outlined: Bring your own reCAPTCHA to Netlify Forms

You can find more specific information on the custom recaptcha here in Netlify’s Docs.

Does this work for you?