Using WP REST API in Nodejs APP

Resolved phatza
(@phatza)

7 years, 7 months ago
Hi guys,

I’m developping a nodeJS web app using VueJS (and nuxtJS) and I would like to send email using an existing contact form through WP REST API. (Created on the back-office of my wordpress site)

I’m using JWT Authentication for WP REST API and AXIOS for HTTP requests.

This is my request (inside my app) :
```
axios.post('https://domain-name/wp-json/contact-form-7/v1/contact-forms/ID/feedback',
{
	body: {
                // Form fields corresponding to CF7
		yourName: this.name,
		yourCompany: this.company,
		yourEmail: this.email
	}
},
{
	headers: {
		Authorization: 'Bearer ' + token,
		'Content-Type': 'application/json;charset=UTF-8'
	}
})
.then((res) => {
	console.log(res.data)
})
```
The response has an error message: “one or more fields contain errors…” with the status code : “validation_failed”

I cannot find helpfull documentation about CF7 related to WP Rest API, and I’m not sure how to make “proper” request to do the trick and send the email through my JS app using CF7 & WP REST API.

Thanks for you time and your incoming responses.
Regards
- This topic was modified 7 years, 7 months ago by phatza.
- This topic was modified 7 years, 7 months ago by phatza.
- This topic was modified 7 years, 7 months ago by phatza.
- This topic was modified 7 years, 7 months ago by phatza.
- This topic was modified 7 years, 7 months ago by phatza.
- This topic was modified 7 years, 7 months ago by phatza.

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Author Takayuki Miyoshi
(@takayukister)

7 years, 7 months ago

The response has an error message: “one or more fields contain errors…” with the status code : “validation_failed”

It’s just that there are fields with invalid input. WP REST API has nothing to do with that. Correct the validation errors first.
Thread Starter phatza
(@phatza)

7 years, 7 months ago
Hi @takayukister !
Thanks for your reply 🙂

In the response I also got :
```
invalidFields: Array(3)
0: {into: "span.wpcf7-form-control-wrap.yourName", message: "Ce champ est obligatoire.", idref: null}
1: {into: "span.wpcf7-form-control-wrap.yourCompany", message: "Ce champ est obligatoire.", idref: null}
2: {into: "span.wpcf7-form-control-wrap.yourEmail", message: "Ce champ est obligatoire.", idref: null}
```
The fields seem to be invalid because they may not being populated by my request.
I’m not really sure how exactly pass the right values to CF7’s remote form.

Regards,

PS: the form is already created and works fine within WordPress
- This reply was modified 7 years, 7 months ago by phatza.
- This reply was modified 7 years, 7 months ago by phatza.
Thread Starter phatza
(@phatza)

7 years, 7 months ago
Hi @takayukister 🙂

Can you confirm that the right ROUTES/ENDPOINT for submitting data to my wordpress CF7’s form (and then send email) is the following one :
/contact-form-7/v1/contact-forms/(?P<id>\d+) ?

Do you have documentation about the JSON structure of CF7’s endpoints ?

Thanks a lot,
Regards
- This reply was modified 7 years, 7 months ago by phatza.
- This reply was modified 7 years, 7 months ago by phatza.
Plugin Author Takayuki Miyoshi
(@takayukister)

7 years, 7 months ago

No, the correct route is

contact-form-7/v1/contact-forms/(?P<id>\d+)/feedback

Have a look at includes/rest-api.php.

Thread Starter phatza
(@phatza)

7 years, 7 months ago

Thanks for your reply 🙂

I’m gonna check this further.

Thanks a lot !
Thread Starter phatza
(@phatza)

7 years, 7 months ago
Hey @takayukister !

I figured it out ! 🙂 🙂

I had to use FormData Javascript Class to parse correctly my data before sending them to the CF7’s form.
```
// Create new instance
let bodyFormData = new FormData()
// Set key:value pair according to your input:value form's fields
bodyFormData.set( 'key', 'value' )

// Request containing url, data, Object (containing headers for example)
axios.post('https://domain-name/wp-json/contact-form-7/v1/contact-forms/ID/feedback',
bodyFormData,
{
    headers: {
        Authorization: 'Bearer tokenKey' )
    }
})
.then((res) => {
console.log(res.data)
})
}
```
And it returns:
```
into: "#"
message: "Thanks for your message. It has been sent"
status: "mail_sent
```
Hope it will help 🙂
- This reply was modified 7 years, 7 months ago by phatza.
- This reply was modified 7 years, 7 months ago by phatza.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Using WP REST API in Nodejs APP’ is closed to new replies.

Tags