laubarnes

I ended up figuring out the problem was due to CF7’s integration to google’s reCAPTCHA. I went into the “Integration with Other Services” options, and removed the reCAPTCHA keys. The form submission works fine now.

I will investigate the option of adding reCAPTCHA to my Vue / Nuxt application, or disabling it on the individual form

Hopefully my experience helps others

I noticed that this post has been marked as resolved. But thought I would post my own experience on solving this issue for anyone else who has trouble formatting their body to post to the end point.

I have been developing a Nuxt / Vue application using wordpress rest api and Contact Form 7 to submit a form.

The two main things to do here

1. ensure your object keys are named the same as your CF7 keys within wordpress. By default, the field name are your-name and your-email. In your example above, you are just using nameTest and email.

2. You need to prepare your object to represent HTML form data. You can do this using the formData object. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

// 1. Format your body response
const emailBody = {
    "your-name": this.form.nameTest,
    "your-email": this.form.email,
    "your-message": this.form.message,
};

// 2. Create a FormData object, and append each field to the object
const form = new FormData();
for (const field in emailBody) {
    form.append(field, emailBody[field]);
}

I gave a more detail answer on stackoverflow for a similar post: https://stackoverflow.com/questions/56731006/what-parameter-contact-form-7-using-json-to-sent-using-api/61956314#61956314

Hopefully this can help others who are having the same issues