Umbraco Forms Api

[LouayJebran (Leo)]

Hi

I am trying to display a form in a react component

it works well for simple field types
like short answers and radio buttons

problem is I keep getting the same error on submit
when adding a recaptchaV2.

I can see that the payload contains a token
example
{
“contentKey”: “03fd2137-60b5-4a8c-a5bf-c539c0a39263”,
“culture”: “en”,
“values”: {
“contactEmail”: “[email protected]”,
“name”: “test”,
“lastname”: “test”,
“reCaptcha”: “tokken”
}
}

submitting the form as follows

const payload = {
    contentKey: "03fd2137-60b5-4a8c-a5bf-c539c0a39263",
    culture: "en",
    values: formData
};

try {
    await axios.post(
        `/umbraco/forms/api/v1/entries/${guid}`,
        payload,
        {
            headers: {
                "Content-Type": "application/json",
                "RequestVerificationToken": token
            },
        }
    );
    setSubmitted(true);
} catch (err: any) {
    if (err.response?.data?.errors) {
        setErrors(err.response.data.errors);
    }
} finally {
    setSubmitting(false);
}

error

{
    "type": "Error",
    "title": "The input does not contain any JSON tokens. Expected the input to start with a valid JSON token, when isFinalBlock is true. Path: $ | LineNumber: 0 | BytePositionInLine: 0.",
    "status": 500,
    "instance": "JsonException"
}

any ideas?
please and thank you

[jawood1 (Jonathan Wood)]

Hi @LouayJebran

I’m not able to re-create your specific issue however the error would suggest that the body of the request is empty so I would check that is definitely pushing correctly.

One thing I have noticed is that your recaptcha field from your example I presume is using the alias of the field your targeting, however the key for recaptcha should be g-recaptcha-response as the field value in-order to function correctly. Though this should produce a different error to yours.

I’d suggest checking out the docs Headless/AJAX Forms | Umbraco Forms there is a link to a gist though written in vanilla js that may help you get on the right track

[LouayJebran (Leo)]

hi Jonathan

”g-recaptcha-response” was correct.
I assumed ReCaptcah would function like any other field

thanks for your help