简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Q&A  >  body text

Use netlify form to get 404 (VueJs 3 + Vite + VueRouter + Netlify)

<p>I have this form in my ContactView.vue page <code>src/views/ContactView.vue</code> : I want to redirect to custom page with thank you message <code>src/views/SuccessView.vue</code></p> <pre class="brush:php;toolbar:false;"><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></pre> <p>I followed all the guides there and on related forums but no one could help me. </p> <p>I read this article but it doesn't seem to work for me. </p> <p>Most guides and tutorials mention exact HTML clones as skeletons in the "public" HTML, so in index.html I did something similar</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>When I try to fill out the form in <code>random-netlify-name-784120.netlify.app</code> immediately after filling it out, I see a black screen with this response. < /p> <p>How can I make everything run smoothly? </p>
P粉564301782P粉564301782412 days ago427

reply all(1)I'll reply

  • P粉470645222

    P粉4706452222023-09-03 10:33:53

    Did you succeed? I had a similar problem and could only solve it by removing the action='/success/' parameter and letting Netlify redirect to it's own page...

    Custom ajax doesn't work either because the fetch of '/' returns 404...

    Still running on a custom page or custom handler... I'll post back if I find something.

    (I'm using Vite React Netlify) There is no router package... I am able to get a pages/success page in my

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

    reply
    0
  • Cancelreply