Netlify Form 404 after Divya Guide for Vue

Support
1

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.

2

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

3

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.

4

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.

5

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
6

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!