我们实现了一个简单的带有基本表单的nuxt应用程序,并将其部署到netlify上。当按下表单的“提交”按钮时,我们收到一个404。
您可以在此处找到已部署netlify应用的链接:
编辑-〉删除链接
在浏览了故障排除指南之后,他们列出了如果netlify识别了您的表单,则添加的“netlify”或“data-netlify=“true”属性应该不可见,但是它们是可见的。
另外,在netlify后端的“form”配置选项卡中找不到表单。
新配置:
SPA
顺风
我们尝试为netlify添加必要的属性:网络化或数据-网络化=“真”&网络生命-蜜罐=“僵尸-字段”
我们还添加了一个名为prerender-spa-plugin的“预渲染”库。
在这里你可以找到contact.vue页面的内容。简单的表单和根据netlify文档设置的“name”属性。
<template>
<div>
<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
<p class="hidden">
<label
>Don’t fill this out if you're human: <input name="bot-field"
/></label>
</p>
<p>
<label
>Name
<input
type="text"
name="name"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<label
>Email
<input
type="email"
name="email"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white;"
/></label>
</p>
<p>
<button
type="submit"
name="submit"
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
>
Send
</button>
</p>
</form>
</div>
</template>
<script>
export default {};
</script>
<style>
.hidden {
display: none;
}
</style>
如果我们能设法解决这个问题,让netlify最终识别我们的形式,那就太好了。
2条答案
按热度按时间vfh0ocws1#
Netlify自带内置表单处理功能,我们的构建机器人在部署时直接解析HTML文件,因此您无需调用API或在网站上添加额外的JavaScript。
部署时,表单必须位于呈现的文件中。SPA模式的问题是,没有一个页面实际呈现为HTML。您可以通过右键单击页面,然后单击“查看页面源”来检查此问题。您将无法找到表单。
Netlify在他们的文档中解决了这个问题。
他们有一个专门的帖子来修复Vue应用程序here的这个问题
在这个问题上再深入一点,我们在这里找到了一个Nuxt解决方案:
将以下内容放入
static/form-dummy/index.html
中:将以下内容放入
pages/form/index.vue
中(或在您命名Vue文件时)来自帖子:
您只需要确保将其隐藏在Vue组件中,以便Netlify将表单提交识别为与名为MYFORM的表单相关联。我认为您还需要确保您希望接收数据的所有输入都在这两个表单上。
yc0p9oo02#
为了补充@hmilbradt的回答,动态表单的动作路径应该与静态表单的路径匹配。如果静态表单的路径是
/form/contact.html
,那么动态表单中的动作或路径也应该是/form/contact.html
。我花了很多时间来解决这个问题。在我的例子中,我发送了一个 AJAX 请求: