CODEWITHSUNDEEP
jsonwordpressapicontact-form-7
Muhammad Wazexr
Muhammad Wazexr

Reputation: 153

What Parameter Contact Form 7 using JSON to sent using API

I want create API for contact form 7.

How to send data from front-end to Contact Form 7 using WP rest api? I mean, what should the data structure be to send it via the POST method?

http://xx.xxx/wp-json/contact-form-7/v1/contact-forms/<id-form>/feedback

I trying different ways, but request always return response “validation_failed”, “One or more fields contain erroneous data. Please check them and try again.”

I did not find anything about this in the documentation.

Upvotes: 2

Views: 6616

Answers (3)

Pradeep Mishra
Pradeep Mishra

Reputation: 11

// google recaptcha integration v3 with contact form 7 Rest API

let email = $('input.email').val();
let g_recaptcha_response = $('textarea.g-recaptcha-response').val();
let data = new FormData(form);
data.append("email", email);
data.append("_wpcf7_recaptcha_response", g_recaptcha_response);
// _wpcf7_recaptcha_response key is important and should be same
$.ajax({
 type: "POST",
 enctype: 'multipart/form-data',
 url: "/wp-json/contact-form-7/v1/contact-forms/783/feedback",
 data: data,
 processData: false,
 contentType: false,
 cache: false,
 timeout: 600000,
}).then((data) => {alert(data.message);});

Upvotes: 1

Laurence B.
Laurence B.

Reputation: 91

Were you able to find the solution? I've been working with the Contact Form 7 REST API and there are a few things you need to do to be abled to get a 'success' response, instead of validation_failed.

First, you need to know what form fields you need to submit. This is set up in your CF7's contact form. The field's name is defined in contact form. Most likely, CF7 uses the naming structure your-name and your-email. So you will need to format your post body to match this.

Next, you will need to submit it using FormData() https://developer.mozilla.org/en-US/docs/Web/API/FormData. From personal experience, I found that if I send my request as a normal object by using post, CF7 sends back validation_failed.

Note: I am using Nuxt's http package to submit data, but you are able to use axios here.

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

// 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]);
}

// Submit your form body using axios, or any other way you would like
const response = await this.$http.post(this.getEndEndpoint, form);

This is working for me, I am no longer getting the status validation_failed. Instead I now get a spam status. Trying to solve this problem now

Good luck

Upvotes: 2

Beneris
Beneris

Reputation: 637

add_filter( 'wpcf7_mail_components', 'show_cf7_request', 10, 3 );
function show_cf7_request( $components, $wpcf7_get_current_contact_form, $instance ) { 
    print_r($_REQUEST);
    die();
    return $components; 
};

Don't try on LIVE ;)

Upvotes: 1

Related Questions