我一直在为网站制作一个新表单,但它没有显示在 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>