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>
</>
);