Netlify Form Posts Submission but Not Data with NuxtJS

Hello!

Please see the production url that contains the form in question https://tylerpweb-nuxt.netlify.app/contact/

This is my first time attempting to implement a form with Nuxt as I am building my portfolio site. (A second iteration, so my second time using Netlify Forms. First time with just a basic HTML page)

After following the instructions provided by this Medium article it appears that the Netlify form is hooked up successfully. When first testing, the form on submit will then redirect to Netlify’s confirmation page. But after subsequent submissions, the redirect does not seem to occur. When I go to the dashboard, I see the submissions with the correct input names, but not the data passed in.

I noticed in the Network console there is a 301, but I’m not sure what would cause this at this point. The build process does not produce any related warnings.

Thank you for any assistance!

Hiya, @TylerAPfledderer :wave:

Thanks for reaching out! Sorry to hear that you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Have you already read this and followed the tips? There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide the following information:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form. In case you have a javascript form, we need to literally be linked to the html version you’ve deployed, as mentioned above (look for “ pure javascript form ”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

Hi @hillary !

I did go through the support guide you linked, along with the other option I stated in my initial post.

  1. The public-facing url: https://tylerpweb-nuxt.netlify.app/contact/

  2. What do you mean ‘URL of your deployed HTML form’?

  3. Form name is 'contact-us'

  4. The only errors in the build log are related to Lighthouse Plugin giving html validation errors.

  5. As I have stated previously in my initial post, I have tried an article that walks through setting up an HTML-only form in nuxt for Netlify forms. This has resulted in the form being recognized by the bots, able to submit and see Netlify’s default success page (though only sometimes, otherwise just reloads the page) and shows the submission and input names in the Netlify Form section, just no values that were passed in.

When I do not get the Netlify default success page, I see a 301 Network status for the contact page when I submit.

@hillary I have not received a response.

Hi there, @TylerAPfledderer :wave:

Thanks for your patience and for following up! I have looped in the appropriate folks who will be able to assist you further.

Hi @TylerAPfledderer,

The problem seems to be due to the difference in names of the input. From the build log, it looks like the bots are picking up the form inputs with the names as name, email and message:

image

However, your form has the input names as user-name, user-email and user-message:

image.

I think this is happening due to your HTML only version and the actually rendered version having different input names configured. Would it be possible for you to sync those and let us know how it goes?

2 Likes

Hi @hrishikesh!

Per suggestions with Nuxt, there is an app.html file in the project root before build that contains a template version of the form in question so the bots can properly identify the form. I did indeed provide different name values in this file compared to the form on the contact page, which is what is being recognized in the build log.

I have changed the values in app.html to include the prefix user- as given to the actual form inputs on render, and now the form feature is working as intended.

Thank you for the assistance!

2 Likes