Home
Support Forums

Missing Form Submissions & Attributes Disappear on Refresh (Nuxt/nuxt-content)

My Netlify site is here (no domain at this point, just testing things): https://elated-kalam-5f5e96.netlify.app

This is built using Nuxt and nuxt-content specifically.

My issue started out with trying to get the form to work on this contact page. I was able to get form detection to work, so I see the form on the dashboard, but don’t see test submissions either in spam or valid submissions.

Then I realized there’s also an issue where, if I go to the contact page and refresh, the styles of the form actually disappear! This seems to be because attributes on the form input elements are disappearing when I refresh. The inputs all have type="text" initially; after refresh, those attributes go away. This only happens on the deployed site, no issues when running nuxt locally. I will note, I didn’t include the type="text" attribute the first time I deployed this form, but that was many commits ago at this point. I’ve used the β€œclear cache and deploy site” button many times since, cleared my browser caches, etc. Same issue.

Initially, the page was adding a trailing slash on refresh (changing /contact to /contact/) and I was seeing this error in the console: TypeError: e.page is undefined. I found one possibly related issue on the nuxt-content github here. I disabled Asset Optimization from the Netlify dashboard, including the β€œPretty URLs” option. I’m no longer seeing trailing slashes on refresh, nor am I seeing that console error. But still have disappearing attributes on the input fields, and form submissions still not working. No idea if these two issues are related, but I’m bewildered at this point. Any advice would be much appreciated!

Here’s the code rendered on the page for the form, before refresh:

<form
	data-v-3342cf0e=""
	name="contact"
	method="POST"
	data-netlify="true"
	action="/thanks"
	id="contact-form"
>
	<input
		data-v-3342cf0e=""
		type="hidden"
		name="form-name"
		value="contactform"
	/>
	<div data-v-3342cf0e="" class="form-field-wrap">
		<label data-v-3342cf0e="" for="name">Name: </label>
		<input data-v-3342cf0e="" type="text" name="name" id="name" />
	</div>
	<div data-v-3342cf0e="" class="form-field-wrap">
		<label data-v-3342cf0e="" for="email">Email: </label>
		<input data-v-3342cf0e="" type="text" name="email" id="email" />
	</div>
	<div data-v-3342cf0e="" class="form-field-wrap">
		<label data-v-3342cf0e="" for="message">Message: </label>
		<textarea data-v-3342cf0e="" name="message" id="message"></textarea>
	</div>
	<button data-v-3342cf0e="" type="submit">Submit</button>
</form>

vs after refresh (I noticed the data-netlify attribute also disappears, but is that even supposed to render on the page in the first place?):

<form
	name="contact"
	method="POST"
	action="/thanks"
	id="contact-form"
	data-v-3342cf0e=""
>
	<input
		type="hidden"
		name="form-name"
		value="contactform"
		data-v-3342cf0e=""
	/>
	<div class="form-field-wrap" data-v-3342cf0e="">
		<label for="name" data-v-3342cf0e="">Name: </label>
		<input name="name" id="name" data-v-3342cf0e="" />
	</div>
	<div class="form-field-wrap" data-v-3342cf0e="">
		<label for="email" data-v-3342cf0e="">Email: </label>
		<input name="email" id="email" data-v-3342cf0e="" />
	</div>
	<div class="form-field-wrap" data-v-3342cf0e="">
		<label for="message" data-v-3342cf0e="">Message: </label>
		<textarea name="message" id="message" data-v-3342cf0e=""></textarea>
	</div>
	<button type="submit" data-v-3342cf0e="">Submit</button>
</form>

Here is a screenshot of my deploy settings:

And here is the log from my most recent deploy:

3:46:05 PM: Build ready to start
3:46:08 PM: build-image version: c6001ed68662a13e5deb24abec2b46058c58248a
3:46:08 PM: build-image tag: v3.9.0
3:46:08 PM: buildbot version: cf5e043aa2042f885b3ec4c152fb434068ebe66a
3:46:08 PM: Fetching cached dependencies
3:46:08 PM: Starting to download cache of 122.2MB
3:46:09 PM: Finished downloading cache in 871.443472ms
3:46:09 PM: Starting to extract cache
3:46:13 PM: Finished extracting cache in 4.548004721s
3:46:13 PM: Finished fetching cache in 5.479622269s
3:46:13 PM: Starting to prepare the repo for build
3:46:14 PM: Preparing Git Reference refs/heads/master
3:46:15 PM: Parsing package.json dependencies
3:46:15 PM: Starting build script
3:46:15 PM: Installing dependencies
3:46:15 PM: Python version set to 2.7
3:46:16 PM: Started restoring cached node version
3:46:19 PM: Finished restoring cached node version
3:46:20 PM: v12.18.0 is already installed.
3:46:20 PM: Now using node v12.18.0 (npm v6.14.4)
3:46:20 PM: Started restoring cached build plugins
3:46:20 PM: Finished restoring cached build plugins
3:46:21 PM: Attempting ruby version 2.7.2, read from environment
3:46:22 PM: Using ruby version 2.7.2
3:46:23 PM: Using PHP version 5.6
3:46:23 PM: Started restoring cached node modules
3:46:23 PM: Finished restoring cached node modules
3:46:23 PM: Started restoring cached go cache
3:46:23 PM: Finished restoring cached go cache
3:46:23 PM: go version go1.14.4 linux/amd64
3:46:23 PM: go version go1.14.4 linux/amd64
3:46:23 PM: Installing missing commands
3:46:23 PM: Verify run directory
3:46:24 PM: ​
3:46:24 PM: ────────────────────────────────────────────────────────────────
3:46:24 PM:   Netlify Build                                                 
3:46:24 PM: ────────────────────────────────────────────────────────────────
3:46:24 PM: ​
3:46:24 PM: ❯ Version
3:46:24 PM:   @netlify/build 18.2.7
3:46:24 PM: ​
3:46:24 PM: ❯ Flags
3:46:24 PM:   baseRelDir: true
3:46:24 PM:   deployId: 6116cbfddd1ece0008ae4c08
3:46:24 PM: ​
3:46:24 PM: ❯ Current directory
3:46:24 PM:   /opt/build/repo
3:46:24 PM: ​
3:46:24 PM: ❯ Config file
3:46:24 PM:   No config file was defined: using default values.
3:46:24 PM: ​
3:46:24 PM: ❯ Context
3:46:24 PM:   production
3:46:24 PM: ​
3:46:24 PM: ────────────────────────────────────────────────────────────────
3:46:24 PM:   1. Build command from Netlify app                             
3:46:24 PM: ────────────────────────────────────────────────────────────────
3:46:24 PM: ​
3:46:24 PM: $ npm run generate
3:46:24 PM: > orrbitt-nuxt-forestry@1.0.0 generate /opt/build/repo
3:46:24 PM: > nuxt generate
3:46:53 PM: ​
3:46:53 PM: (build.command completed in 29.5s)
3:46:53 PM: ​
3:46:53 PM: ────────────────────────────────────────────────────────────────
3:46:53 PM:   2. Deploy site                                                
3:46:53 PM: ────────────────────────────────────────────────────────────────
3:46:53 PM: ​
3:46:53 PM: Starting to deploy site from 'dist'
3:46:53 PM: Creating deploy tree 
3:46:53 PM: Creating deploy upload records
3:46:53 PM: 47 new files to upload
3:46:53 PM: 0 new functions to upload
3:46:55 PM: Site deploy was successfully initiated
3:46:55 PM: ​
3:46:55 PM: (Deploy site completed in 1.5s)
3:46:55 PM: ​
3:46:55 PM: ────────────────────────────────────────────────────────────────
3:46:55 PM:   Netlify Build Complete                                        
3:46:55 PM: ────────────────────────────────────────────────────────────────
3:46:55 PM: ​
3:46:55 PM: (Netlify Build completed in 31.1s)
3:46:55 PM: Starting post processing
3:46:55 PM: Post processing - HTML
3:46:55 PM: Caching artifacts
3:46:55 PM: Started saving node modules
3:46:55 PM: Finished saving node modules
3:46:55 PM: Started saving build plugins
3:46:55 PM: Finished saving build plugins
3:46:55 PM: Started saving pip cache
3:46:55 PM: Finished saving pip cache
3:46:55 PM: Started saving emacs cask dependencies
3:46:55 PM: Finished saving emacs cask dependencies
3:46:55 PM: Started saving maven dependencies
3:46:55 PM: Finished saving maven dependencies
3:46:55 PM: Started saving boot dependencies
3:46:55 PM: Finished saving boot dependencies
3:46:55 PM: Started saving rust rustup cache
3:46:55 PM: Finished saving rust rustup cache
3:46:55 PM: Started saving go dependencies
3:46:55 PM: Finished saving go dependencies
3:46:55 PM: Build script success
3:46:56 PM: Processing form - contact
3:46:56 PM: Detected form fields:
3:46:56 PM:  - name
3:46:56 PM:  - email
3:46:56 PM:  - message
3:46:56 PM: Post processing - header rules
3:46:56 PM: Post processing - redirect rules
3:46:56 PM: Post processing done
3:46:56 PM: Site is live ✨
3:47:13 PM: Finished processing build request in 1m5.51640853s

Welcome to the forums @crankysparrow

Great detail in your post.

This is intended a per docs

automatically strip the data-netlify="true" or netlify attribute from the <form> tag and inject a hidden input named form-name

And here-in in possibly part of your issue as the rendered for has a different <form name=""> value vs the <input value=""> value.

<form name="contact" method="POST" action="/thanks" id="contact-form" data-v-3342cf0e="">
  <input type="hidden" name="form-name" value="contactform" data-v-3342cf0e=""> 

As you are using NuxtJS which is statically generated pages you do not need to include the hidden form element. If using a Javascript-rendered form you would. So my first suggestion is to remove the <input data-v-3342cf0e="" type="hidden" name="form-name" value="contactform"/> element from your HTML.

@coelmay thank you for the response! okay - I removed the hidden form input and I think I’m a little closer but things are still not working 100% correctly.

So, if I open a new window and go directly to the contact page the submission shows up in my Netlify back-end. So something is working!

BUT if I open the homepage of the site and just navigate to the contact page within the Nuxt app, it doesn’t work. When I navigate to the page this way the form loads with data-netlify="true" in the form tag, and no hidden input. If I then reload the page, that attribute disappears and hidden input appears in its place.

It seems like Netlify isn’t recognizing or parsing the form until there’s a page load directly on that contact page… because the site is still functioning like a SPA, an entire reload of the page isn’t being triggered if I just navigate there from another page on the site.

As a side note, the type="text" attribute on the two text input fields also disappear once Netlify registers the form and adds that hidden input, which still seems like a quite bizarre side effect of…something?

It seems even though NuxtJS generates static pages, the JS is still there. If you run yarn generate (or npm run generate) and look through the resulting dist/_nuxt/**.js you will find your form. So it would seem there are instances when the form is generated from the JS and others when the HTML rendered version shows.

I have replicated this using the NuxtJS boilerplate @coelmay/nuxt-contact-test. The contact us page fails either way. The contact page work fine either way. The difference, other than form name, is contact has the hidden element

<input type="hidden" name="form-name" value="contactme" />

On the production site where I have used NuxtJS I have the form in the footer of every page, so had no noticed this behaviour previously (the form just works.)

Aha…adding the hidden input back in with the correct form name seems to be working now regardless of how the form is loading. Thank you so much for your time helping me work this out!

Any ideas why the type="text" attribute on the inputs still disappear? This isn’t a dealbreaker really, just seems really strange.

1 Like

Agreed it is strange. Sadly I don’t have an answer to that. Am going to do a little more digging and see what I can find out. Currently all I know is type="email" doesn’t get removed :thinking:

1 Like