Getting 404 with netlify form (VueJs 3 + Vite + VueRouter + Netlify)

Question

Getting 404 with netlify form (VueJs 3 + Vite + VueRouter + Netlify)

200 Views Asked by Scheggia At 28 March 2023 at 08:13

I have this form in my ContactView.vue page src/views/ContactView.vue : and I want to redirect to a custom page thanking for the message src/views/SuccessView.vue

            <form name="contact-form" action="/success" method="POST" data-netlify="true" data-netlify-honeypot="bot-field">
              <input type="hidden" name="contact-form" value="contact-form" />
              <div class="grid md:grid-cols-2 md:gap-6">
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="first_name" id="floating_first_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="first_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">First name</label>
                </div>
                <div class="relative z-0 w-full mb-6 group">
                    <input type="text" name="last_name" id="floating_last_name" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                    <label for="last_name" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Last name</label>
                </div>
              </div>
              <div class="relative z-0 w-full mb-6 group">
                  <input type="email" name="email" id="floating_email" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="email" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Email address</label>
              </div>

              <div class="relative z-0 w-full mb-6 group">
                  <textarea type="text" name="textarea" id="floating_ext_area" class="block py-2.5 px-0 w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 border-pine appearance-none focus:outline-none focus:ring-0 focus:border-bubblegum peer" placeholder=" " required />
                  <label for="textarea" class="peer-focus:font-medium absolute text-sm text-gray-500 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0 peer-focus:text-bubblegum  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Your Message</label>
              </div>

              <button type="submit" class="text-white bg-bubblegum hover:bg-cherry focus:ring-4 focus:outline-none focus:ring-cotton-candy font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center">Submit</button>
            </form>

I followed every guide on there and on the related forum but none ot the asnwers could help me.

i read about this post but seems it does not work for me.

Most of the guides and tutorial refers to having and exact HTML clone as a skeleton in the "public" HTML so in the index.html I've done sometinh similar

<body>
    <form netlify netlify-honeypot="bot-field" hidden name="contact-form" value="contact-form" method="POST" action="/success" >
      <input type="text" name="first_name" />
      <input type="text" name="last_name" />
      <input type="email" name="email" />
      <textarea name="textarea"></textarea>
      <button type="submit"></button>
    </form>
    <div id="app"></div>

    <script type="module" src="/src/main.js"></script>
  </body>

When I try to fill out my form in the random-netlify-name-784120.netlify.app as soon as I fill out the form, I get a black screen with this respone.

How can I make averything work?

Original Q&A

There are 1 best solutions below

**KHB** · Answer 1 · 2023-05-16T20:03:47.393000

did you get this working? I had similar issue and only resolved by removing action='/success/' parameter and let Netlify redirect to it's own page...

custom ajax isn't working either because the fetch to '/' returns 404...

still trucking away at either a custom page or a custom handler... i'll post back if I find something.

(I'm using Vite + React + Netlify) w/ no router package... I was able to get a pages/success page with this in my vite.config.ts

build: {
    ...,
    rollupOptions: {
      input: {
        main: resolve(root, 'index.html'),
        success: resolve(root, 'pages', 'success', 'index.html'),
      },
    }

Getting 404 with netlify form (VueJs 3 + Vite + VueRouter + Netlify)

There are 1 best solutions below

Related Questions in VUE.JS

Related Questions in VUEJS3

Related Questions in NETLIFY

Related Questions in NETLIFY-FORM

Trending Questions

Popular # Hahtags

Popular Questions