Support » Plugin: Contact Form 7 » Using WP REST API in Nodejs APP

  • Resolved phatza

    (@phatza)


    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 1 year, 3 months ago by phatza.
    • This topic was modified 1 year, 3 months ago by phatza.
    • This topic was modified 1 year, 3 months ago by phatza.
    • This topic was modified 1 year, 3 months ago by phatza.
    • This topic was modified 1 year, 3 months ago by phatza.
    • This topic was modified 1 year, 3 months ago by phatza.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    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.

    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 1 year, 3 months ago by phatza.
    • This reply was modified 1 year, 3 months ago by phatza.

    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 1 year, 3 months ago by phatza.
    • This reply was modified 1 year, 3 months ago by phatza.
    Plugin Author Takayuki Miyoshi

    (@takayukister)

    No, the correct route is

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

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

    Thanks for your reply 🙂

    I’m gonna check this further.

    Thanks a lot !

    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 1 year, 3 months ago by phatza.
    • This reply was modified 1 year, 3 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.