Having trouble sending data to the Contact Form 7 API and encountering an error while submitting the form:
{into: "#", status: "validation_failed", message: "One or more fields have an error. Please check and try again.", posted_data_hash: "", invalid_fields:
The input fields on the form are correctly named, for example name="your-name"
Here's how I am attempting to send the form data:
async function handleSubmit(e) {
e.preventDefault();
const formData = {};
Array.from(e.currentTarget.elements).forEach((field) => {
if (!field.name) return;
formData[field.name] = field.value;
});
await fetch(
"https://domain.tld/cms/wp-json/contact-form-7/v1/contact-forms/1234/feedback",
{
body: JSON.stringify(formData),
headers: {
"content-type": "multipart/form-data",
},
method: "POST",
}
)
.then((response) => response.json())
.then((data) => {
console.log(data);
})
.catch((error) => {
console.error("Error:", error);
});
}
I've tested it in Postman and received a successful status message. Not sure what I'm missing here.
Below is the form structure:
<Form onSubmit={handleSubmit}>
<Form.Group controlId="your-name">
<Form.Control
required
type="text"
placeholder="Your name"
name="your-name"
/>
<Form.Control.Feedback type="invalid">
Please enter your name
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="your-email">
<Form.Control
required
type="email"
placeholder="Your email address"
name="your-email"
/>
<Form.Control.Feedback type="invalid">
Please enter your email
</Form.Control.Feedback>
</Form.Group>
<Form.Group controlId="your-message">
<Form.Control
as="textarea"
cols={30}
rows={6}
placeholder="Write your message..."
name="your-message"
/>
</Form.Group>
<Button
type="submit"
variant="primary"
size="lg"
>
Send Message
<span></span>
</Button>
</Form>