netlify site name:
https://cranky-wright-8dd353.netlify.app/
Trying to adapt a form whith ‘ReCaptcha’ validation that is working with GatsbyJS but not with NextJS.
The problem is that ReCaptcha doesn’t and the form won’t submit. The form is correctly recognized and when all ReCaptcha references are commented out, the form is submitted as expected.
const ContactForm = () => {
const [state, setState] = useState('');
const [buttonDisabled, setButtonDisabled] = useState(true);
const recaptchaRef = createRef();
const encode = (data) => {
return Object.keys(data)
.map((key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`)
.join('&');
};
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
const form = e.target;
const recaptchaValue = recaptchaRef.current.getValue();
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
'g-recaptcha-response': recaptchaValue,
...state,
}),
})
.then(() => {
e.target.reset();
alert('Message changed');
})
.catch((error) => alert(error));
};
return (
<SectionWrapper id='contact'>
<GlitchTitle content='Contact Me'/>
<StyledForm
className='flex flex-col w-2/4 justify-center items-center'
name='contact-form'
method='POST'
data-netlify='true'
data-netlify-recaptcha='true'
onSubmit={handleSubmit}
>
<input type='hidden' name='form-name' value='contact-form'/>
<input
id='text-input'
type='text'
name='name'
placeholder='Name'
onChange={handleChange}
required
/>
<input
id='email-input'
type='email'
name='email'
placeholder='Email'
onChange={handleChange}
required
/>
<textarea
className=''
id='textarea'
type='text'
name='message'
placeholder='Message'
onChange={handleChange}
rows={5}
maxLength={350}
required
/>
<button
className='border-2 m-3 w-1/2 hover:bg-gray-300 hover:text-black'
type='submit'
disabled={buttonDisabled}
>
Submit
</button>
<ReCAPTCHA
ref={recaptchaRef}
sitekey={process.env.NEXT_PUBLIC_SITE_RECAPTCHA_KEY}
id='recaptcha-google'
onChange={() => setButtonDisabled(false)}
/>
</StyledForm>
</SectionWrapper>
);
};
