netlify - 我怎样才能让我的第二个表格出现在 netlify 上?
问题描述
我一直在为网站制作一个新表单,但它没有显示在 netlify 表单上,并且在提交时我看到 404 错误。我不确定为什么会这样。我也有一个联系表格,但那个工作正常。我还记录了我的状态,并从所有字段中获取了要声明的所有值。
这些是与表单相关的代码。
function encode(data) {
return Object.keys(data)
.map(
(key) =>
encodeURIComponent(key) + '=' + encodeURIComponent(data[key])
)
.join('&')
}
const [state, setState] = useState({})
const handleChange = (e) => {
setState({ ...state, [e.target.name]: e.target.value })
}
const handleSubmit = (e) => {
e.preventDefault()
const form = e.target
fetch('/', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: encode({
'form-name': form.getAttribute('name'),
...state,
}),
})
.then(() => navigate(form.getAttribute('action')))
.catch((error) => alert(error))
}
<form
className={'formStyle'}
name="full-stack-applications"
method="post"
action={
locale === 'en'
? '/thankYouForYourApplication/'
: '/fi/thankYouForYourApplication/'
}
data-netlify="true"
data-netlify-honeypot="bot-field"
onSubmit={handleSubmit}
>
{/* The `form-name` hidden field is required to support form submissions without JavaScript */}
<input
type="hidden"
name="form-name"
value="full-stack-applications"
/>
<p hidden>
<label>
Don’t fill this out:
<input
name="bot-field"
onChange={handleChange}
/>
</label>
</p>
解决方案
推荐阅读
- twitter-bootstrap - Bootstrap 3.4.0 包含重大更改?
- typescript - 尝试测试脚本 spec.ts 失败,因为期望(如返回)在创建响应到来之前执行并在控制台中显示未定义
- flutter - 如何在 Flutter 中将数组分配给 fl_chart 中的点
- jquery - Laravel ajax 回调请求响应
- c++ - lambda 捕获列表和 std::queue 中的 weak_ptr、shared_ptr
::就位 - python - 熊猫从列表中获取价值并创建新列表
- wcf - 如何在远程服务器 plesk 面板上将我的 WCF 服务发布到我的网站
- android - 应用程序在主活动中单击按钮时自动关闭
- c# - 即使目录存在,使用 DirectoryInfo.Exists 也是错误的
- excel - 查找空白单元格,插入包含上方单元格范围的公式