Netlify form with gatsby 4.25

Support
1

Hi, the site is https://cocky-goldstine-857fd7.netlify.app/, the netlify form is auto detected during build but cannot receive any submission, wondering where it has gone wrong, the ajax fetch submission return with 200, so I suppose the submission is successfully, but nothing is received in the netlify end.

   <form className="flex flex-col"
            id="myForm"
            name="Contact Form Brevity"
            method="POST"
            data-netlify="true"
            data-netlify-recaptcha="true"
            onSubmit={handleSubmit}
        >
            <input type="hidden" name="form-name" value="Contact Form Brevity" />
2

@edlau I’d imagine this is a problem, but perhaps only for the netlify.app url?
image

3

This is the recaptcha, it’s verifying with https://brevity.cc at the moment, so form submission does not work on this domain either.

4

Hence why I said…

It just won’t make much sense for anyone else to look at the netlify.app url as a point of checking/testing if the captcha hasn’t been whitelisted there.

You’ve supplied the domain now though, so that helps to know that you aren’t testing only on the netlify.app url and that the error isn’t captcha related.

5

Yes, sorry about it, it’s unlikely a recaptcha problem as the submit button enabled once the recaptcha is verified, so I was wondering what is the issue for not receiving any submission, when the form is detected and the fetch function below return 200.

    const handleSubmit = e => {
        e.preventDefault()
        const form = e.target
        const recaptchaValue = recaptchaRef.current.getValue()

        const encode = data => {
            return Object.keys(data)
            .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
            .join("&")
        }

        fetch('/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: encode({
                'form-name': form.getAttribute('name'),
                'g-recaptcha-response': recaptchaValue,
                ...state,
            }),
        })
        .then(() => setOpen(o => !o))
        .catch(error => alert(error))
    }
6

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form. :slight_smile: