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

Добрый день!
Использую в качестве фронтенда 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
5d9f812dd0388330917963.jpeg


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
    }
  }
}
  • Вопрос задан
  • 378 просмотров
Пригласить эксперта
Ответы на вопрос 2
dimidn
@dimidn Автор вопроса
Короче ничего не помогло(( подключил PhpMailer - вроде работает.
Ответ написан
Комментировать
NeniEmSu
@NeniEmSu
Fullstack Devaloper, MD & Freelancer
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())
    }
  }
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы