Netlify form is not getting data properly

Site URL: https://brooksandgrant.com

We have built a Headless Shopify eCommerce store by using Gridsome(Vue.js framework that generates static sites) and we have a Netlify form on BROOKS&GRANT | Wholesale signup
We are sending data by using Axios in the Vue script.
The main issue is that Netlify parses form fields from the label tags, but we are sending data that has keys that do not match with the labels.
So we are getting only 2 fields(country, email) with the key and label matched, though we are sending 12 form fields.

For example, on Netlify we see a form field passed as “Town/City *”, but we are sending that form data like below:

{
   ...,
   country: "United Kingdom"
   townCity: "London",
   email: "user@example.com"
   ...
}

So we are not getting townCity form field because Netlify passed that field as “Town/City *”, while getting the country and email.

Please help me with this regard. Thanks!

How are you sending the data, with Axios you are the one that control how the data is fetched and what you send, so your code is likely wrong and your pulling the labels instead of the input names.

I am not pulling labels, but Netlify does. And I am not able to set a key like “Town/City” in javascript. so we are having mismatches.

You specifically said “We are sending the forms using axios”, when you use Axios, then Netlify isn’t parsing your form, you are, Netlify only handles what you send them.

You might think it’s Netlify, and it’s actually Vue, but half the point with using axios instead of the html attribute on the form is to control what you send and how you send it and when you send it.

If your form has the Netlify attribute, as in <form name="contact" method="POST" data-netlify="true">, then Netlify is parsing the form, if you use Axios, then you are parsing the form.

When I see on my Netlify account, I can see Netlify parses the form labels as the form fields. So I think Netlify does parse the form on behalf of me. I am not sure how can I handle it on my own when using Axios.
As your reference, please see the below code snippets. Thanks!

template:

...
<form name="wholesale" method="post" data-netlify="true" @submit="ev => handleSubmit(ev)">
   <input type="hidden" name="form-name" value="wholesale" />
   ...
   <div class="form-group mb-4 input-wrap">
    <label for="town_city" class="block mb-1">
       Town/City
        <span class="text-red">*</span>
    </label>
    <input
        type="text"
        name="town_city"
        id="town_city"
        class="bg-white"
        @input="ev => this.form.townCity = ev.target.value"
    />
   </div>
   ...
</form>
...

script:

<script>
export default {
  data: () => ({ 
    form: {
        ...
        townCity: '',
        ...
    },
  }),
  methods: {
    encode (data) {
      return Object.keys(data)
        .map(
          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
        )
        .join("&");
    },
    async handleSubmit (ev) {
        ev.preventDefault();
        const axiosConfig = {
            header: { "Content-Type": "application/x-www-form-urlencoded" }
        };
        const res = await axios.post(
            "/",
            this.encode({
            "form-name": "wholesale",
            ...this.form
            }),
            axiosConfig
        );
    }
  }
}
</script>

Hi @poberezhetspavlo

If you remove data-netlify="true" and/or disable form detection for your site, Netlify will not process any form data. You can post the form to a function or other endpoint.

Hi @coelmay,
Thanks for your reply. but we still want to use Netlify form but send data by using Axios.
We don’t want to create a function or other endpoint for that form.

You have the netlify HTML tags, the tutorial you followed are offering different approaches to do the same thing, you’ve done all of them at the same time.

<form name="wholesale" method="post" data-netlify="true" @submit="ev => handleSubmit(ev)">
   <input type="hidden" name="form-name" value="wholesale" />

This is wrong, you are only supposed to add data-netlify="true", the hidden input field is added by Netlify when you deploy your code, you don’t manually add it yourself. But if you use data-netlify="true", then you can also remove @submit=""

The Netlify does everything for me way (Recommended for you)

<form name="wholesale" method="post" data-netlify="true">
  <div class="form-group mb-4 input-wrap">
    <label for="town_city" class="block mb-1">
       Town/City
        <span class="text-red">*</span>
    </label>
    <input
        type="text"
        name="town_city"
        id="town_city"
        class="bg-white"
        v-model="form.townCity"
    />
   </div>
</div>

And then simply remove all and everything within <script>, it’s redundant.

If you want to do this the axios way, then

Template

<form method="post" v-on:submit.prevent="handleSubmit">
  <div class="form-group mb-4 input-wrap">
    <label for="town_city" class="block mb-1">
       Town/City
        <span class="text-red">*</span>
    </label>
    <input
        type="text"
        name="town_city"
        id="town_city"
        class="bg-white"
        v-model="form.townCity"
    />
   </div>
</form>

Script

<script>
export default {
  data() { 
    return {
      form: {
        townCity: '',
      },
    }
  }),
  methods: {
    async handleSubmit () {
        const params = new URLSearchParams();
        params.append('townCity', this.form.townCity);

        const config = {
            header: { "Content-Type": "application/x-www-form-urlencoded" }
        };

        const res = await axios.post("/", params, config);
        console.log(res);
    }
  }
}
</script>

I can not follow your recommendation as we don’t want the page to be refreshed after user submitting. but the axio’s way solution is still not working.

I was able to resolve the issue by converting the form data keys from camel case to snake case. so we have matched the keys with the input name attributes.
Netlify was just showing the labels but parse name attributes to know what form fields would come in.
Thank you and I appreciate you guys’ efforts @freddy and @coelmay!

1 Like

Great to know you got it sorted :partying_face: