Nuxt / Netlify Form returning empty form data fields

Question

I'm using Nuxt and Netlify Forms for a contact form, Everything is working as expected (validation, submit success) however I am getting empty form fields on submissions. I have tried matching the v-model and form names with no success. Do I have to change the body.encode to retrieve the v-model fields or somehow get the value of the name fields inputs?

Markup:

               <form
                name="contactForm"
                method="post"
                netlify-honeypot="bot-field"
                data-netlify="true"
                @submit.prevent="handleSubmit()"
                >
                <input type="hidden" name="form-name" value="contactForm" />
                <div class="form-group">
                  <!--user name -->
                  <div class="floating-label">
                    <input
                      v-model="contact_name"
                      class="floating-input"
                      name="name"
                      type="text"
                      placeholder=" "
                      :class="{
                        'child-has-error': $v.contact_name.$error,
                      }"
                    />
                    <label>Enter Your Name</label>
                    <p v-if="$v.contact_name.$dirty">
                      <span
                        v-if="!$v.contact_name.required"
                        class="form__alert"
                      >
                        Name is required
                      </span>
                    </p>
                  </div>
                  <!-- end user name -->

                  <!--user email -->
                  <div class="floating-label">
                    <input
                      v-model="contact_email"
                      class="floating-input"
                      type="text"
                      name="email"
                      placeholder=" "
                      :class="{
                        'child-has-error': $v.contact_email.$error,
                      }"
                    />
                    <label>Enter Your Email</label>
                    <p v-if="$v.contact_email.$dirty">
                      <span
                        v-if="!$v.contact_email.required"
                        class="form__alert"
                      >
                        Email is required
                      </span>

                      <span v-if="!$v.contact_email.email" class="form__alert">
                        Please enter a valid email
                      </span>
                    </p>
                  </div>
                  <!-- end user email -->

                  <!--user message -->
                  <div class="floating-label">
                    <textarea
                      v-model="contact_message"
                      class="form-control form-control--textarea"
                      rows="5"
                      name="message"
                      placeholder="Enter Your Message"
                      :class="{ 'child-has-error': $v.contact_message.$error }"
                    />
                    <p v-if="$v.contact_message.$dirty">
                      <span
                        v-if="!$v.contact_message.required"
                        class="form__alert"
                      >
                        Enter Your Message
                      </span>
                      <span
                        v-if="!$v.contact_message.minLength"
                        class="form__alert"
                      >
                        Message must be over 10 characters :)
                      </span>
                    </p>
                  </div>
                  <!-- end user message -->
                </div>
                <button type="submit" class="btn btn-primary">
                  Send Message
                  <font-awesome-icon far icon="arrow-right" />
                </button>
              </form>

Script:

<script>
import { required, email, minLength } from 'vuelidate/lib/validators'
export default {
  data() {
    return {
      title: 'Contact Form',
      show_contact: true,

      contact_name: '',
      contact_email: '',
      contact_message: '',

      form: {
        name: '',
        email: '',
        message: '',
      },
    }
  },
  validations: {
    contact_name: {
      required,
    },
    contact_email: {
      required,
      email,
    },
    contact_message: {
      required,
      minLength: minLength(10),
    },
  },
  methods: {
    encode(data) {
      return Object.keys(data)
        .map(
          (key) => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
        )
        .join('&')
    },
    handleSubmit() {
      this.$v.$touch()

      if (this.$v.$invalid) {
        return true
      }

      fetch('/', {
        method: 'post',

        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },

        body: this.encode({
          'form-name': 'contactForm',
          ...this.form,
        }),
      })
        // eslint-disable-next-line no-console
        .then(() => {
          this.show_contact = false
          // eslint-disable-next-line no-console
          console.log('Message Success')
        })
        // eslint-disable-next-line no-console
        .catch((e) => console.error(e))
    },
  },
}
</script>

Answer 1

I'm working on a Nuxt/Netlify project too currently. There are 3 scenarios

1. If you're using Nuxt as a static site It looks like you're not binding your form values to the fields you're sending to Netlify

It's probably safe to replace

  form: {
    name: '',
    email: '',
    message: '',
  },

with

form: {
    contact_name: '',
    contact_email: '',
    contact_message: '',
}

2. Otherwise, assuming you're using Nuxt as an SPA and using a static stand-in form in this example here

Your stand-in form must contain fields with the same name as your actual form field. Otherwise, your form will be submitted but won't be seen on the NetlifyUI due to their build bots not expecting those form fields.

Answer 2

You've been sending this.form as your data

body: this.encode({
  'form-name': 'contactForm',
  ...this.form,
}),

but you never set values to it based on your inputs. I did not see any reference to it.

Either use those in your v-model bindings or convert this.form from data to a computed property like:

form() {
  return {
    name: this.contact_name,
    email: this.contact_email,
    message: this.contact_message
  }
}