Using hidden inputs in Netlify forms with Nuxt

Support
, , ,
#1

PLEASE help us help you by writing a good post!

I have a form in the “/panier” route I have a form that looks like this:

  <form
        name="panier"
        data-netlify="true"
        data-netlify-honeypot="bot-field"
        method="POST"
        class="p-5"
        action="/merci"
      >
        <input type="hidden" name="form-name" value="panier" />

        <input
          v-for="(product, index) in products"
          :key="index"
          type="hidden"
          :name="`Commande_${index + 1}`"
          :value="`${product.quantity || 1}-${product.title}`"
        />

        <div v-if="showForm" class="grid grid-cols-8 gap-6">
          <div class="col-span-12">
            <h2 class="text-xl font-bold my-1">Confirmation de la commande</h2>
          </div>
          <div class="col-span-8">
            <label for="Nom" class="block font-medium">Nom</label>
            <input
              type="text"
              name="Nom"
              id="Nom"
              v-model="commandeInfo.nom"
              autocomplete="off"
              class="
                mt-1
                focus:ring-indigo-500 focus:border-indigo-500
                block
                w-full
                shadow-sm
                border border-gray-300
                rounded-md
              "
              required
            />
          </div>

          <div class="col-span-8">
            <label for="contact_info" class="block font-medium"
              >Coordonées (email ou numéro de téléphone )</label
            >
            <input
              type="text"
              name="contact_info"
              id="contact_info"
              autocomplete="off"
              v-model="commandeInfo.contact_info"
              class="
                mt-1
                focus:ring-indigo-500 focus:border-indigo-500
                block
                w-full
                shadow-sm
                border border-gray-300
                rounded-md
              "
            />
          </div>
          <div class="col-span-8">
            <label class="block font-medium">Confirmer vos coordonées</label>
            <input
              type="text"
              v-model="confirm_contact_info"
              autocomplete="off"
              :class="
                commandeInfo.contact_info.toLowerCase().replace(/\s/g, '') !==
                confirm_contact_info.toLowerCase().replace(/\s/g, '')
                  ? 'error-input'
                  : ''
              "
              class="
                mt-1
                focus:ring-indigo-500 focus:border-indigo-500
                block
                w-full
                shadow-sm
                border border-gray-300
                rounded-md
              "
              required
            />
            <p
              class="text-danger pl-1 text-sm my-1"
              v-if="
                confirm_contact_info.toLowerCase().replace(/\s/g, '') !==
                commandeInfo.contact_info.toLowerCase().replace(/\s/g, '')
              "
            >
              Ces données ne sont pas identiques à vos coordonées
            </p>
          </div>
          <div class="col-span-8">
            <label for="message" class="block font-medium">
              Message <span>(Facultatif)</span>
            </label>
            <div class="mt-1">
              <textarea
                id="message"
                name="message"
                v-model="commandeInfo.message"
                rows="3"
                class="
                  shadow-sm
                  focus:ring-indigo-500 focus:border-indigo-500
                  mt-1
                  block
                  w-full
                  sm:
                  border border-gray-300
                  rounded-md
                  p-4
                "
                placeholder="Entrez votre message"
              ></textarea>
            </div>
          </div>
          <div class="col-span-8">
            <div class="flex justify-end items-end flex-col gap-3">
              <p class="text-lg">
                <span class="font-bold">Total: </span>{{ price }}
              </p>

              <div class="my-5">
                <div data-netlify-recaptcha="true"></div>
              </div>
              <button
                class="primary"
                @click="clearStorage"
                type="submit"
                :disabled="
                  commandeInfo.contact_info.toLowerCase().replace(/\s/g, '') !==
                  confirm_contact_info.toLowerCase().replace(/\s/g, '')
                "
              >
                Commander
              </button>
            </div>
          </div>
        </div>
      </form>

      <div v-if="!showForm">
        <div class="flex justify-end items-end flex-col gap-3">
          <p class="text-lg">
            <span class="font-bold">Total: </span>{{ price }}
          </p>
          <button class="primary" @click="toggleForm" type="submit">
            Confirmer la commander
          </button>
        </div>
      </div>

I want to send in the form the product names and other related data as hidden inputs but I haven’t managed to do it.
Any help is very welcome.

Thank you :slight_smile:

#2

Hey @nezlicodes

It is not possible to add extra fields to a form client-side. The form rendered on the page and submitted needs to match the placeholder form that Netlify detects during build. This is why the product list doesn’t come through.

A couple of options as alternatives

  1. You could switch from using Netlify forms to using a Serverless function which sends the form to you as an email.

  2. You could (this is untested) add another <textarea> to the placeholder form for products, then in the front end form, loop through the products inside the textarea (as the value; like the message body) instead of listing each product in individual inputs.

1 Like
#3

Thank you so much for your help. :pray:t2:
Will try using a Serverless function.

1 Like