Formik form submission with recaptcha not working

mukulSharma · July 9, 2024, 1:11pm

I am experiencing an issue with reCAPTCHA integration in a form that uses Formik for handling form state and validation. I have created a test project for recaptcha functionality. It is working fine on the test project but I am getting a 303 status code after submission in the main project.

Here is the link to the test project

The reCAPTCHA token is being set correctly in the state and added to the form data before submission. Despite this, the form submission fails, and I am unsure why.

Here are some images of the main code

mukulSharma · July 9, 2024, 1:11pm

mukulSharma · July 9, 2024, 1:14pm

mukulSharma · July 9, 2024, 1:14pm

Here is the payload

Melvin · July 12, 2024, 2:19pm

Hi @mukulSharma,

Thanks for reaching out and welcome to Netlify’s Support Forums!

We did update our docs here:

With information for Next.js with Netlify/Next.js runtime version 5.

We also have a Starter Template here:

With a Netlify form to see how it’s coded. The relevant parts here:

the .html file:

github.com

netlify-templates/next-platform-starter/blob/main/public/__forms.html

<html>
    <head></head>
    <body>
        <form name="feedback" data-netlify="true" hidden>
            <input type="hidden" name="form-name" value="feedback" />
            <input name="name" type="text" />
            <input name="email" type="text" />
            <input name="message" type="text" />
        </form>
    </body>
</html>

and the js/jsx:

github.com

netlify-templates/next-platform-starter/blob/main/components/feedback-form.jsx

'use client';

import { useState } from 'react';
import { Card } from './card';

export function FeedbackForm() {
    const [status, setStatus] = useState(null);
    const [error, setError] = useState(null);

    const handleFormSubmit = async (event) => {
        event.preventDefault();
        try {
            setStatus('pending');
            setError(null);
            const myForm = event.target;
            const formData = new FormData(myForm);
            const res = await fetch('/__forms.html', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams(formData).toString()

This file has been truncated. show original

If you want to compare your code to that of the template.

Could you give that a try and let us know if you continue to have issues?

mukulSharma · July 16, 2024, 11:31am

Thanks for checking the query, everything in the form is working fine but when I add recaptcha, it returns 304 status code and the form is not being submitted.

hrishikesh · July 20, 2024, 4:24pm

Try removing the custom ReCaptcha.

Topic		Replies	Views
Issue with google recaptcha when use data-netlify-recaptcha="true" attribute in nextjs+prismic+formik Support netlify-forms , nextjs	9	188	July 7, 2024
ReCaptcha & NextJS Support netlify-forms , nextjs	1	893	July 6, 2021
Form Submission Issue: Form Not Submitting on Netlify Support netlify-forms	2	28	August 22, 2024
On Submission, netlify server respond with 404 Support netlify-forms , nextjs	1	1124	July 24, 2022
Forms not submitting after adding recaptcha Support netlify-forms	11	3862	June 4, 2020

Formik form submission with recaptcha not working

Related topics