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

Support
,
1

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: 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:

image
image2490×699 123 KB

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.

2

The script:

image
image1570×1851 203 KB

3

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?

4

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