Vue Form submission only work on second attempt

[ChilledChild]

On submitting the form in https://dannychild.com/contact , the form does not successfully send, leading to a Netlify 404 page. Selecting the “back to our site” link will return to the original webpage, but with a trailing slash “/” in the URI. Submitting a form with the trailing slash in the URI will successfully submit the form.

Site is built on elegant-shannon-4716f9.netlify.app
I am using Awake Template for my theme.
Here is the contact webpage code
Here is the contact form code

I have followed [Support Guide] Form problems, form debugging, 404 when submitting and also How to Integrate Netlify’s Form Handling in a React App in relation to the theme, though I don’t understand why this is occurring. I would think that since the trailing slash changes the expected outcome that this could be beyond what the from is doing. Notably, select media and other blog posts are not generated when the trailing slash is present.

[hillary]

Hey there, @ChilledChild

Apologies for the slow response, and thank you so much for writing a detailed post and sharing what you have already tried-- we appreciate this! Is this issue still occurring for you? If so, please let me know and I will share this with another member of the Support team.

[ChilledChild]

Hi Hillary! Unfortunately I’ve had no success with previous attempts. I’d be glad to talk with a member of the support team

Let me know of any additional details or clarification I can provide.

[Scott]

Another good resource before we home in would be our Javascript-enabled forms docs: Forms setup | Netlify Docs

Which then, in turn, leads us here: How to Integrate Netlify Forms in a Vue App

Both will be valuable reads which I implore you to check out! I’d start anew with your form, following the advice here (especially the second link) but we’ll be happy to dig in to fault find if you’re still struggling afterwards.

[ChilledChild]

Hello @Scott ! I took some time to review both link you commented, very useful!
The form I am using is written in HTML as a ContactForm.vue file, which is imported as a component by the contact.vue file.

I used another user’s suggest code from here , though this was only partially successful.

After reviewing each page from Chrome Dev Tools, with and without the trailing slash in the URI, I found that not all form attributes are properly assigned in the html body, and other scripts in the html head are inconsistent.

Notably in the body, the tag <data-netlify="true"> does not exist on the page with the trailing slash. Additionally, the input type field only exists with the trailing slash, as per the second screenshot. I was not able to identify any abnormalities in my repository, in comparison to the deployed template.

[ChilledChild]

By adding <input type="hidden" name="form-name" value="contact"> in the contact form template, Netlify is able to properly handle the from without any loss of user inputted data.

[hillary]

Thanks so much for coming back and sharing your solution, @ChilledChild This will definitely be beneficial for any Forums members who find themselves encountering a similar issue.