Home
Support Forums

Netlify Form 404 after Divya Guide for Vue

Dear Netlify Community,

I just deployed my Vue project on Netlify (https://growthlabs.netlify.app/) and the contact form on the /contact page returns an error 404 on submission. I followed Divya’s tutorial on how to get forms to work - however I cannot understand why I do keep getting a 404.

FYI: I see the form in the Forms section of my account.

Do you have any suggestions on what shall I be looking at to find the fix to this problem?

Here is my form:

<b-form name="contact" method="POST" data-netlify="true" data-netlify-honeypot="bot-field" @submit.prevent="handleSubmit">
      <input type="hidden" name="form-name" value="contact" />
      <b-form-group id="input-group-1" label="Your first name:" label-for="input-1">
        <b-form-input
            id="input-1"
            v-model="form.firstname"
            required
            placeholder="Enter name"
        >
        </b-form-input>
      </b-form-group>
      <b-form-group id="input-group-2" label="Your last name:" label-for="input-2">
        <b-form-input
            id="input-2"
            v-model="form.lastname"
            required
            placeholder="Enter surname"
        >
        </b-form-input>
      </b-form-group>
        <b-form-group
            id="input-group-3"
            label="Email address:"
            label-for="input-3"
            description="We'll never share your email."
        >
          <b-form-input
              id="input-3"
              v-model="form.email"
              type="email"
              required
              placeholder="Enter email"
          >
          </b-form-input>
        </b-form-group>
        <b-form-group
            id="input-group-4"
            label="Phone number:"
            label-for="input-4"
            description="Don't forget the country code ;)"
        >
          <b-form-input
              id="input-4"
              v-model="form.phone"
              type="text"
              placeholder="Enter phone"
          >
          </b-form-input>
        </b-form-group>
      <b-row>

      </b-row>

      <b-form-group
          label="How should we get in touch?"
      >
        <b-form-radio inline v-model="selected" name="contact-radios" value="email">Email</b-form-radio>
        <b-form-radio inline v-model="selected" name="contact-radios" value="phone">Phone</b-form-radio>
      </b-form-group>
      <b-form-textarea
          id="textarea"
          v-model="form.message"
          placeholder="Your message ..."
          rows="5"
          max-rows="7"
      ></b-form-textarea>
      <b-button variant="primary" type="submit" class="mt-3">Submit</b-button>
  </b-form>

Here are the methods for the form:

encode (data) {
      return Object.keys(data)
          .map(
              key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
          )
          .join("&");
    },
    handleSubmit () {
      const axiosConfig = {
        header: { "Content-Type": "application/x-www-form-urlencoded" }
      };
      axios.post(
          "/",
          this.encode({
            "form-name": "contact",
            ...this.form
          }),
          axiosConfig
      );
    }

I left Vue dev tools available in production for your reference.

Hey! Have you read through this support guide regarding forms? :slight_smile:

Hi Aaron,

I checked the documentation and other community posts before publishing my query here. However, I did not come across anything that would have answered my question or fix my issue.

Hi, @alexandruana. Our support team is happy to troubleshoot but we need the real form to test. In other words, the following two details are a requirement for us to assist:

  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 would please send us those details, we will be happy to research what is happening with that form.

Hello everybody, many thanks for the support so far.

I managed to get the form to work! apparently - it was not working because I did not have HTML file with the form inputs added to the /public folder.

Would you know if there is a work around so form submissions are valid without having this additional HTML file? My understanding was that by having the methods previously mentioned in my original post - i should be able to submit the form without additional HTML file.

1 Like

hey @alexandruana! glad you got it to work. While we do have some work on forms in the pipeline, I am not sure as to whether we’ll be changing things to remove the plain html that gets read at build & deploy time. If we do make a change like that, we’ll be sure to announce it here in the forums!