Не могу реализовать форму на Nuxt + REST API Wordpress + Contact Form 7?

Question

[Дмитрий]

Добрый день!
Использую в качестве фронтенда Nuxt.js, а в качестве бэка Вордпресс через его REST API, запрос отправляю Axios-ом по адресу http ://сайт/wp-json/contact-form-7/v1/contact-forms/77/feedback, где 77 - айди моей формы на вордпрессе.

Если сделать поля формы на сервере необязательными, то ответ приходит 200, и на почту приходит письмо, но с пустыми полями.

Если сделать обязательными - то возвращается ответ с ошибкой валидации.
При использовании REST клиента - проблем нет, все приходит как положено.
тестовый сайт: tapka37.ru

Подскажите, пожалуйста что я делаю не так.
Заранее благодарен!

мой код:

form.vue

<v-form class="top-form">
    <v-text-field
      ref="names"
      v-model="names"
    />

    <v-text-field
      ref="phone"
      v-model="phone"
    />

    <v-text-field
      ref="email"
      v-model="email"
    />
    <v-btn
      @click="onSubmit"
    >
      получить
    </v-btn>
  </v-form>

export default {
  data: () => ({
    names: '',
    phone: '',
    email: ''
  }),
  methods: {
    onSubmit () {
      const asyncLog = async (asyncLog) => {
        try {
          const formData = {
            names: this.names,
            email: this.email,
            phone: this.phone
          }
          await this.$store.dispatch('forms/callback', formData)
        } catch (e) {
          throw e
        }
      }
    asyncLog()
    console.log(asyncLog())
    }
  }
}

вывод console.log

store/forms.js

export const actions = {
  async callback (formData) {
    try {
      const token = await this.$axios.post('http://admin.tapka37.ru/wp-json/contact-form-7/v1/contact-forms/77/feedback', formData)
    } catch (e) {
      throw e
    }
  }
}

Comments

[Mr. Grump]

посмотри в Devtools во вкладке Network какие данные уходят на сервер в твоем запросе

[Дмитрий]

Спасибо за ответ!
Вот упростил скрипт до невозможности:

methods: {
    onSubmit () {
      const formData = {
        names: this.names,
        email: this.email,
        phone: this.phone
      }
      this.$axios.post('http://admin.tapka37.ru/wp-json/contact-form-7/v1/contact-forms/77/feedback', formData)
    }
  }

Запрос из консоли

Но все-равно на почту приходят пустые данные ;(

почта

Answer 1

[Дмитрий]

Короче ничего не помогло(( подключил PhpMailer - вроде работает.

Answer 2

[Emmanuel Neni]

I had thesame issue but createing the formData with the formData constructor helped as so.

methods: {
    onSubmit () {
      const asyncLog = async (asyncLog) => {
        try {
           const formData = new FormData()

           formData.set('names', this.name)
           formData.set('email', this.email)
           formData.set('phone', this.phone)
      
          await this.$store.dispatch('forms/callback', formData)
        } catch (e) {
          throw e
        }
      }
    asyncLog()
    console.log(asyncLog())
    }
  }

Answer 3

[Игорь Васильев]

const formdata = new FormData();
formdata.append("your-name", "Bvz");
formdata.append("your-email", "[e-mail]");
formdata.append("your-subject", "Subject Text");
formdata.append("your-message", "Test message");
formdata.append("_wpcf7_unit_tag", "7061ed3"); // your uniq tag fron 

const requestOptions = {
  method: "POST",
  body: formdata,
  redirect: "follow"
};

fetch("http://your.domain/wp-json/contact-form-7/v1/contact-forms/28/feedback", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));

Укажите _wpcf7_unit_tag без этого форма не будет отправлена.
Обычно в шорткоде указан id он и есть _wpcf7_unit_tag
А вот id надо взять из адресной строки, параметр post

/wp-admin/admin.php?page=wpcf7&post=28&action=edit

Локально это всё может не работать, но если указать реальную почту отправителя, на продакшене, при чём после @ должно идти имя вашего домена, для теста попробуйте например Postman если получите:

{
    "contact_form_id": 28,
    "status": "mail_sent",
    "message": "Thank you for your message. It has been sent.",
    "posted_data_hash": "e3dfc8fb89a92eca04e644c72ee8e7d1",
    "into": "#7061ed3",
    "invalid_fields": []
}

Значит API работает.
На локальном сервере письмо не отправиться с большой вероятностью, а на продакшене уже могут приходить.

Contact Form 7
Версия 5.9.3
Автор: Takayuki Miyoshi