ReCaptcha not working with Gatsby

Hello,

We are building a website with CF7, Google Recaptcha and Gatsby.

We can to send the email with sendinblue and to read it in the Inbound Messages of the Flamingo Plugin. Nevertheless, all the messages are going to the spam because we don’t know how to configure the google recaptcha with Gatsby.

You can see the console errors and our code below:

Console Errors:

Invalid asm.js: Unexpected token
VM5400:1 Uncaught SyntaxError: Unexpected string
El nombre de la acción no es válido. Solo puedes incluir “A-Za-z/_”. No incluyas información específica del usuario.
Uncaught (in promise) El nombre de la acción no es válido. Solo puedes incluir “A-Za-z/_”. No incluyas información específica del usuario.

ContactForm7.js

import React, { useEffect, useState } from ‘react’
import { useFormik } from ‘formik’
import axios from ‘axios’
import { getFormValues } from “../../utils/html-methods”
import { graphql, useStaticQuery } from “gatsby”
import { Message } from “./ContactForm7.styled”
import { useGoogleReCaptcha } from ‘react-google-recaptcha-v3’

const ContactForm7 = ({ formNode }) => {
const { site } = useStaticQuery(graphql`
query ContactFormQuery {
site {
siteMetadata {
contactFormData {
auth_user
auth_pass
auth_url
submit_url
}
}
}
}
`)

const contactFormData = site && site.siteMetadata && site.siteMetadata.contactFormData
const FORM_ID = formNode && formNode.querySelector(‘[name=”_wpcf7″]’).value

const { executeRecaptcha } = useGoogleReCaptcha()
const [token, setToken] = useState(”) // store token
const [isSuccessMessage, setIsSuccessMessage] = useState(false) // manage is success message state
const [messageSent, setMessageSent] = useState(false) // manage sent message state
// this effect function authenticates our subcriber user to get a token
let [message, setMessage] = useState(”);
let [classType, setClassType] = useState(‘alert alert-success’)
useEffect(() => {
axios({
method: ‘post’,
url: contactFormData.auth_url,
data: {
username: contactFormData.auth_user, // provide a user credential with subscriber role
password: contactFormData.auth_pass
},
headers: {
‘Content-Type’: ‘application/json’
},
}).then(response => {
setToken(response.data.token)
}).catch(error => console.error( ‘Error’, error ))
}, [contactFormData])

// use useFormik hook using object destructuring assignment to extract helpful methods
const {
handleSubmit,
} = useFormik({
initialValues: getFormValues(formNode),
onSubmit: (formValues, { resetForm }) => {
// Check if the captcha was skipped or not
if (!executeRecaptcha) {
return false
}

// This is the same as grecaptcha.execute on traditional html script tags
const result = executeRecaptcha(‘contact-form’)
setToken(result) //–> grab the generated token by the reCAPTCHA

const currentForm = document.querySelector(‘#contact-form’)
const submitNode = currentForm.querySelector(‘[type=”submit”]’)
submitNode.setAttribute(‘disabled’, ‘disabled’)
formValues = getFormValues(currentForm)
// here we created a FormData field for each form field
const bodyFormData = new FormData()

Object.entries(formValues).forEach(([key, value]) => {
bodyFormData.set(key, value)
})

// here we sent
axios({
method: ‘post’,
url: contactFormData.submit_url.replace(‘__FORM_ID__’, FORM_ID),
data: bodyFormData,
headers: {
‘Authorization’: Bearer ${token},
‘Content-Type’: ‘multipart/form-data’
},
}).then(response => {

setMessage(response.data.message)

if (response.data.status === ‘mail_failed’) {
setMessageSent(true)
setIsSuccessMessage(false)
setClassType(‘alert alert-danger’);
}

if (response.data.status === ‘validation_failed’) {
setClassType(‘alert alert-danger’);
}

// actions taken when submission goes OK
resetForm()
setMessageSent(true)
setIsSuccessMessage(true)
submitNode.removeAttribute(‘disabled’)
}).catch(error => {
console.log(error)
// actions taken when submission goes wrong
setMessageSent(true)
setIsSuccessMessage(false)
submitNode.removeAttribute(‘disabled’)
})
},
})

useEffect(() => {
// set timeout 5 seconds to remove error/success message.
setTimeout(() => {
// this will reset messageSent and isSuccessMessage state
setMessageSent(false)
setIsSuccessMessage(false)
}, 5000);
// this effect function will be dispatched when isSuccessMessage or messageSent changes its state
}, [isSuccessMessage, messageSent])

return (
<form onSubmit={handleSubmit} id=”contact-form”>
<div dangerouslySetInnerHTML={{__html: formNode.innerHTML}} />

{messageSent && isSuccessMessage && (
<Message className={classType}>{message}</Message>
)}
{messageSent && !isSuccessMessage && (
<Message className={classType}>{message}</Message>
)}
</form>
)
}

export default ContactForm7

WordPress Plugins:
Flamingo v2.2.1
Contact Form 7 v5.3.2
WP GraphQL v1.1.3

Gatsby Packages:
“gatsby-source-wordpress”: “^3.3.8”,
“react-google-recaptcha-v3”: “^1.8.0”,
“formik”: “^2.1.4”,

Thanks,

Webmaster

The page I need help with: [log in to see the link]