Use netlify form to get 404 (VueJs 3 + Vite + VueRouter + Netlify)
P粉564301782
2023-09-02 15:59:41
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
vite.config.tspages/successpage in mybuild: { ..., rollupOptions: { input: { main: resolve(root, 'index.html'), success: resolve(root, 'pages', 'success', 'index.html'), }, }