Home
Support Forums

ReCaptcha & NextJS

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

Hey there, @guanacone :wave:

Thanks so much for reaching out about this! I see this thread has been a bit quiet for the past few days. Could you please file an issue on our netlify-plugin-nextjs repo? This will connect you with our Nextjs experts. When you post there, please include your public repo as well as any additional error messages or details that you have :slight_smile: