D
D
Dmitry2019-10-10 22:14:47
RESTful API
Dmitry, 2019-10-10 22:14:47

Can't implement form on Nuxt + REST API Wordpress + Contact Form 7?

Good afternoon!
I use Nuxt.js as a frontend, and as a backend WordPress through its REST API, I send a request to Axios at http://website/wp-json/contact-form-7/v1/contact-forms/77/feedback , where 77 is the id of my wordpress form.
If you make the form fields optional on the server, then the response comes 200, and a letter arrives in the mail, but with empty fields .
If you make it mandatory, then a response with a validation error is returned.
When using the REST client, there are no problems, everything comes as expected.
test site: tapka37.ru
Please tell me what I'm doing wrong.
Thanks in advance!
my code is:
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 output
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
    }
  }
}

Answer the question

In order to leave comments, you need to log in

2 answer(s)
D
Dmitry, 2019-10-15
@dimidn

In short, nothing helped ((connected PhpMailer - it seems to work.

E
Emmanuel Neni, 2020-12-06
@NeniEmSu

I had the same issue but creating 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())
    }
  }

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question