Netlify input misses an attribute on deploy

Hi there,

on my website https://fikasfest.netlify.app/ I have 2 forms, one on the contact page, one for the newsletter, appearing after clicking on the footer button. Both forms are functional and I can retrieve the data in my dashboard.

the problem I have is that on the newsletter form, some fields are losing attributes after deploying.
on my localhost and code, both input have a type=“text” attribute, that I also use for CSS styles.

<input data-v-028a4ef8="" type="text" name="FirstName:" placeholder="Prénom">
<input data-v-028a4ef8="" type="text" name="LastName:" placeholder="Nom*" required="required">

after deploying, both fields looks ends up like this and styles are broken. also the required attribute for the second field disappear.
<input name="FirstName:" placeholder="Prénom" data-v-511a3e9c="">
<input name="LastName:" placeholder="Nom*" required="" data-v-511a3e9c="">

if I edit my html in my deploy preview and add the missing tags, everything is back to normal.
Is there something I’m missing ? here is the full form for information, I’m using Nuxt
<form method="post" name="newsletter-form" data-netlify="true" data-netlify-honeypot="bot-field"> <input type="hidden" name="form-name" value="newsletter-form" /> <input type="hidden" name="bot-field" /> <input type="text" name="FirstName:" :placeholder="$t('contact.first')" /> <input type="text" name="LastName:" :placeholder="$t('contact.last')" required /> <input type="email" name="Email:" :placeholder="$t('contact.email')" required /> <input type="submit" :value="$t('contact.submit')" /> </form>

Hiya, sorry you are having trouble getting forms to work.

This Support Guide is the first port of call to debug any forms issues. 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 more information such as what you have already tried, the form name, and a link to your live form. :slight_smile:

Hi Luke,

thanks for your answer. here are the different things I’ve tried but I still have the same error

  • checked through the support guides
  • checked with similar bugs in the forum with FORM tag
  • added a html clone form on my site with the same inputs
  • removed and reinstall the honeypot field
  • change input field names

the form called newsletter-form can be seen at https://deploy-preview-78--fikasfest.netlify.app/ and the html clone at https://deploy-preview-78--fikasfest.netlify.app/netlifyform

the first 2 input fields are missing the type attribute type="text", and the first one is having an added style attribute that should not be there.

here is the original form in Nuxt

   <form
      method="post"
      name="newsletter-form"
      data-netlify="true"
      data-netlify-honeypot="bot-field"
    >
      <input type="hidden" name="form-name" value="newsletter-form" />
      <input type="hidden" name="bot-field" />
      <input type="text" name="FirstName:" :placeholder="$t('contact.first')" />
      <input
        type="text"
        name="LastName:"
        :placeholder="$t('contact.last')"
        required
      />
      <input
        type="email"
        name="Email:"
        :placeholder="$t('contact.email')"
        required
      />
      <input type="submit" :value="$t('contact.submit')" />
    </form>

Keep in mind that the form is working as I can see my submissions in my dashboard. It’s only the markup that is changing on deploy.

For information, the other form contact-form on the website at https://deploy-preview-78--fikasfest.netlify.app/contact is working well and don’t have any issues, expect for that style tag that is added.

thanks

Hi, @aurelienroux, the repo this site uses is public so I ran a git clone, checked out the same commit, ran npm install and the build command:

My local build has this form:

<form method="post" name="newsletter-form" data-netlify="true" data-netlify-honeypot="bot-field" data-v-511a3e9c><input type="hidden" name="form-name" value="newsletter-form" data-v-511a3e9c> <input type="hidden" name="bot-field"
    data-v-511a3e9c> <input name="FirstName:" placeholder="Prénom" data-v-511a3e9c> <input name="LastName:" placeholder="Nom*" required data-v-511a3e9c> <input type="email" name="Email:" placeholder="Courriel*" required data-v-511a3e9c>
  <input type="submit" value="Envoyer" data-v-511a3e9c></form>

The form on the deploys site is:

<form method="post" name="newsletter-form" data-netlify="true" data-netlify-honeypot="bot-field" data-v-511a3e9c><input type="hidden" name="form-name" value="newsletter-form" data-v-511a3e9c> <input type="hidden" name="bot-field"
    data-v-511a3e9c> <input name="FirstName:" placeholder="Prénom" data-v-511a3e9c> <input name="LastName:" placeholder="Nom*" required data-v-511a3e9c> <input type="email" name="Email:" placeholder="Courriel*" required data-v-511a3e9c>
  <input type="submit" value="Envoyer" data-v-511a3e9c></form>

This is the same form at Netlify as I get locally when building.

I’m not sure what is happening but it is something in the site build itself. Our support team can troubleshoot issues involving our services. However, as this build issue happens outside of Netlify as well it isn’t Netlify related.

Questions like this are welcome on our community site but our scope of support means our support team won’t be able to answer this question.

Someone else here might have an answer and, if so, other people are welcome to add posts here anytime. If there are Netlify specific questions or if there are any questions about our support scope, please reply here anytime.

hi @luke

thanks for pointing me in the right direction :+1:

Indeed, it was coming from the Nuxt generate command at build. Nuxt uses a html-minifier that will remove all redundant attributs like type="text" on markup.

nuxt generate use the html-minifier lib to minify the *.vue pages ( cf. generator.js script)
It’s not an issue, but a compression feature call removeRedundantAttributes .
type=text is remove because it’s already the default value of type, so it’s like redundant.

here is a link to the github topic https://github.com/nuxt/nuxt.js/issues/1760

thanks again for your help