Netlify Forms с Gridsome / Vuejs - PullRequest
       21

Netlify Forms с Gridsome / Vuejs

0 голосов
/ 13 апреля 2019

Итак, я пытаюсь обработать запрос формы, используя формы netlify. Все работает отлично, за исключением того, что данные не отправляются с формой.

Итак, вот форма

<template>
    <form @submit.prevent="handleSubmit" name="Free Assessment Form" method="post" data-netlify-honeypot="bot-field">
      <span class="slogan">{{ slogan }}</span>
      <input type="hidden" name="form-name" value="contact"  class="hidden"/>
      <input @input="ev => formData.business_name = ev.target.value" type="text" name="Business Name" placeholder="Business Name" :class="{'input-error': error}" @change="error = false">
      <input @input="ev => formData.first_name = ev.target.value" type="text" name="First Name" placeholder="First Name" :class="{'input-error': error}" @change="error = false">
      <input @input="ev => formData.last_name = ev.target.value" type="text" name="Last Name" placeholder="Last Name" :class="{'input-error': error}" @change="error = false">
      <input @input="ev => formData.email = ev.target.value" type="email" name="Email" placeholder="Email" :class="{'input-error': error}" @change="error = false">
      <input @input="ev => formData.phone = ev.target.value" type="text" name="Phone Number" placeholder="Phone Number" :class="{'input-error': error}" @change="error = false">
      <button type="submit" class="form-btn">Submit</button>
    </form>
</template>

<script>
export default {
  name: 'Form',
  props: ['slogan'],
    data() {
    return {
      formData: {},
      error: false
    }
  },
  methods: {
    encode(data) {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&')
    },
    handleSubmit(e) {
      fetch('/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: this.encode({
          'form-name': e.target.getAttribute('name'),
              ...this.formData
        }),
      })
      .then(() => {
        this.formData = ""
        this.$router.push('/')
        alert('Form Submitted!')
      })
      .catch(error => alert(error))
    }
  }
}
</script>

Теперь, когда форма отправлена, я получаю электронное письмо, как и ожидалось, но я получаю только ключи формы. Я не получаю значения ключей формы.

В моей локальной разработке, когда я console.log data передал в метод кодирования, все это есть, поэтому я не понимаю, почему он не работает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...