Contact Form 7 + WordPress REST API

  • Resolved kamsou

    (@kamsou)


    4 years, 7 months ago

    Good morning, sir,
    I have a problem with contact 7 form that I want related to my Vuejs front. I use the rest api of wordpress.
    I’m getting my inputs back. I use axios. My post works with Insomnia. But not with my dev site.

     data: function () {
        return {
          form: {
          nameTest: '',
          mail: '',
          message: '',
          },
          errors: [],
          url: 'https://mywebsite.com/wp-json/contact-form-7/v1/contact-forms/143/feedback'
        }
      },
    
    methods: {
      submitForm() {
        axios.post(this.url, this.form)
        .then((response) => {
          console.log(response); 
          this.errors = [];
        })
        .catch((error) => {
          this.errors = error.response.data.message
        });
      }
    },

    And the response on submit :

    into: "#"
status: "validation_failed"
message: "Un ou plusieurs champs contiennent une erreur. Veuillez vérifier et essayer à nouveau."
invalidFields: (2) [{…}, {…}]

    Any idea ?

    • This topic was modified 4 years, 7 months ago by kamsou.
Viewing 1 replies (of 1 total)

  • 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

Viewing 1 replies (of 1 total)
  • The topic ‘Contact Form 7 + WordPress REST API’ is closed to new replies.