Form is not being recognised

[j4vmc]

Hello,

I’ve already got 4 forms collecting data successfully on my website. I was going to add a fifth one, which is a clone of the main contact form, but it’s not being recognised on your dashboard. The form renders successfully on Nuxt 2.14.7 in full static and universal mode and we can fill it in without issues. When we submit the form, it says that the “thank you” page it’s not found. If I change to the main contact form, everything works fine.

The code for the form that doesn’t work is this:

`<template>
  <v-form
  name="video"
  method="post"
  action="/thankyou-video-campaign-2020/"
  data-netlify="true"
  data-netlify-honeypot="bot-field"
  >
<input type="hidden" name="form-name" value="video" />
<v-row>
  <v-col cols="12" md="6" class="pt-0">
    <v-text-field
      v-model.trim="$v.name.$model"
      :error-messages="nameErrors"
      label="Name"
      name="name"
      required
      filled
      @input="$v.name.$touch()"
      @blur="$v.name.$touch()"
    ></v-text-field>
  </v-col>
  <v-col cols="12" md="6" class="pt-0">
    <v-text-field
      v-model.trim="$v.surname.$model"
      :error-messages="surnameErrors"
      label="Surname"
      name="surname"
      required
      filled
      @input="$v.surname.$touch()"
      @blur="$v.surname.$touch()"
    ></v-text-field>
  </v-col>
  <v-col cols="12">
    <v-text-field
      v-model.trim.lazy="$v.company.$model"
      :error-messages="companyErrors"
      label="Company"
      name="company"
      required
      filled
      @input="$v.company.$touch()"
      @blur="$v.company.$touch()"
    ></v-text-field>
  </v-col>
  <v-col cols="12" md="6">
    <v-text-field
      v-model.trim="$v.phone.$model"
      :error-messages="phoneErrors"
      label="Phone number"
      name="phonenumber"
      required
      filled
      @input="$v.phone.$touch()"
      @blur="$v.phone.$touch()"
    ></v-text-field>
  </v-col>
  <v-col cols="12" md="6">
    <v-text-field
      v-model.trim="email"
      :error-messages="emailErrors"
      required
      label="Email"
      name="email"
      filled
      @input="$v.email.$touch()"
      @blur="$v.email.$touch()"
    ></v-text-field>
  </v-col>
  <v-col cols="12">
    <v-textarea
      v-model.trim="$v.message.$model"
      :counter="0"
      :error-messages="messageErrors"
      filled
      name="message"
      required
      label="Message"
      @change="$v.message.$touch()"
      @blur="$v.message.$touch()"
    ></v-textarea>
  </v-col>
</v-row>
<v-row>
  <v-col cols="12">
    <v-switch
      v-model="$v.checkbox.$model"
      :error-messages="checkboxErrors"
      required
      @change="$v.checkbox.$touch()"
      @blur="$v.checkbox.$touch()"
    >
      <template v-slot:label>
        <div>
          I agree to the
          <v-tooltip bottom>
            <template v-slot:activator="{ on }">
              <a
                target="_blank"
                href="/privacy"
                class="white--text"
                @click.stop
                v-on="on"
              >
                Privacy Policy
              </a>
            </template>
            Opens in new window
          </v-tooltip>
          .
        </div>
      </template>
    </v-switch>
  </v-col>
  <v-col cols="12">
    <v-btn
      :disabled="$v.$invalid || $v.checkbox.$model === false"
      type="submit"
      tile
      block
      x-large
      color="success"
      ><span class="font-weight-bold">{{ buttonText }}</span></v-btn
    >
  </v-col>
</v-row>
  </v-form>
</template>`

And the code of the form that works without issues is this:

`<template>
  <v-form
    name="svl-contact"
    action="/thankyou/"
    method="post"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
  >
    <input type="hidden" name="form-name" value="svl-contact" />
    <v-row>
      <v-col cols="12" md="6" class="pt-0">
        <v-text-field
          v-model.trim="$v.name.$model"
          :error-messages="nameErrors"
          label="Name"
          name="name"
          required
          filled
          @input="$v.name.$touch()"
          @blur="$v.name.$touch()"
        ></v-text-field>
      </v-col>
      <v-col cols="12" md="6" class="pt-0">
        <v-text-field
          v-model.trim="$v.surname.$model"
          :error-messages="surnameErrors"
          label="Surname"
          name="surname"
          required
          filled
          @input="$v.surname.$touch()"
          @blur="$v.surname.$touch()"
        ></v-text-field>
      </v-col>
      <v-col cols="12">
        <v-text-field
          v-model.trim.lazy="$v.company.$model"
          :error-messages="companyErrors"
          label="Company"
          name="company"
          required
          filled
          @input="$v.company.$touch()"
          @blur="$v.company.$touch()"
        ></v-text-field>
      </v-col>
      <v-col cols="12" md="6">
        <v-text-field
          v-model.trim="$v.phone.$model"
          :error-messages="phoneErrors"
          label="Phone number"
          name="phonenumber"
          required
          filled
          @input="$v.phone.$touch()"
          @blur="$v.phone.$touch()"
        ></v-text-field>
      </v-col>
      <v-col cols="12" md="6">
        <v-text-field
          v-model.trim="email"
          :error-messages="emailErrors"
          required
          label="Email"
          name="email"
          filled
          @input="$v.email.$touch()"
          @blur="$v.email.$touch()"
        ></v-text-field>
      </v-col>
      <v-col cols="12">
        <v-textarea
          v-model.trim="$v.message.$model"
          :counter="0"
          :error-messages="messageErrors"
          filled
          name="message"
          required
          label="Message"
          @change="$v.message.$touch()"
          @blur="$v.message.$touch()"
        ></v-textarea>
      </v-col>
    </v-row>
    <v-row>
      <v-col cols="12">
        <v-switch
          v-model="$v.checkbox.$model"
          :error-messages="checkboxErrors"
          required
          @change="$v.checkbox.$touch()"
          @blur="$v.checkbox.$touch()"
        >
          <template v-slot:label>
            <div>
              I agree to the
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <a
                    target="_blank"
                    href="/privacy"
                    class="white--text"
                    @click.stop
                    v-on="on"
                  >
                    Privacy Policy
                  </a>
                </template>
                Opens in new window
              </v-tooltip>
              .
            </div>
          </template>
        </v-switch>
      </v-col>
      <v-col cols="12">
        <v-btn
          :disabled="$v.$invalid || $v.checkbox.$model === false"
          type="submit"
          tile
          block
          x-large
          color="success"
          ><span class="font-weight-bold">{{ buttonText }}</span></v-btn
        >
      </v-col>
    </v-row>
  </v-form>
</template>`

Other than the form-name, there’s no difference, so I truly don’t understand why this fifth form isn’t being recognised. I cannot provide a link to this issue as the form is obviously not live, I can’t have my clients submitting via a faulty form.

Is there a limit on the number of forms that we can have? I’m certainly well below the number of monthly submissions. Is this the expected behaviour of your platform?

Thanks.

[luke]

Hi, @j4vmc. I do understand you cannot have a faulty form deployed on the production site. That being said, this form was deployed, correct?

If so, what is the deploy id for the deploy with this form and what is the path (the path portion of the URL) where the form HTML can be found?

Our troubleshooting guide for forms is here:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

The two “must haves” for form troubleshooting are:

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 ”)

If you send us the deploy id for the deploy in question plus the path to the form, we can piece together the URL. You can also send us the site subdomain (or API key) plus the day/time/timezone of the deploy to identify the deploy if you don’t have the deploy id handy.

We look forward to testing the form and if there are other questions for us, please let us know.