我在ContactView.vue页面src/views/ContactView.vue中有这个表单：我想重定向到一个自定义页面，感谢消息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>
我遵循了那里和相关论坛上的每一个指南，但没有一个asnwers可以帮助我。
我读了this post，但似乎它不适合我。
大多数的指南和教程都提到在“公共”HTML中有一个确切的HTML克隆作为 backbone ，所以在index.html中我做了一些类似的事情
<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>当我尝试在random-netlify-name-784120.netlify.app中填写表格时，我一填写表格，就得到了一个黑屏与此响应。
我怎么才能让一切都正常工作？
1条答案
按热度按时间crcmnpdw1#
你修好了吗我有类似的问题，只有通过删除
action='/success/'参数并让Netlify重定向到它自己的页面来解决。自定义 AJAX 也不起作用，因为对
'/'的获取返回404...仍然在寻找自定义页面或自定义处理程序...我会回来，如果我发现一些东西。
（我使用Vite + React + Netlify）w/ no router package...我可以在我的
vite.config.ts中得到一个pages/success页面