No Data after headers in Vue.js Form Submission on Dashboard

Hi All,
I am struggling with getting my Netlify form to work with a Vue.js site. I have been through a ton of troubleshooting, and I have gotten it to the point where it is in the dashboard and receiving submissions, but there is no information from the submission being captured, the submissions are blank after the Data Headers.

The website is elicollinson.com

First, what I have looked at:
The main form debugging page here: [Support Guide] Form problems, form debugging, 404 when submitting
The vue.js form article: https://www.netlify.com/blog/2018/09/07/how-to-integrate-netlify-forms-in-a-vue-app/

The page is prerendered and set up with the reactive form setup as detailed in that Vue form article.

Here is the code for my form:

Here is the script code:

I also captured the post request on a test request to see if there is a formatting issue there:
form-name=contact&fullName=Test%20Name&email=test%40test.com&message=Test%20Message&phoneNumber=1111111111

If anybody can see anything, or has a suggestion please let me know! I’m struggling to figure out how to debug this one.

The script:

Hey @elicollinson,
Sorry for the form trouble- you’re definitely not the only one! I’m wondering if the issue here is that your name attributes are capitalized, but you’re submitting lowercase name attributes? For example, the first input is name="FullName" but the data you’re sending is for fullName=Test.... On our end, we’re seeing this form with the capitalized keys, so could you please try changing the v-model to be v-model="form.FullName" etc and see if that works any better?

Hey Jen,
That fixed it! I appreciate it a lot, that was a week of struggle for me, thanks for getting it working!

1 Like