Netlifyフォーム+ギャツビーに問題があります。Netlifyダッシュボードにフォームが表示されません。
私のフォームは、デフォルトでは表示されないが、クリックするだけで開くドロワーコンポーネントにあります。
初期化に必要なすべてのフィールドをすでに追加しましたが、何も起こりません
<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">...</form>
私の現在の送信機能:
const onSubmitHandler = 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"),
...formData,
}),
})
.then(() => {
dispatch(clearCart())
setFormData(initialFormData)
dispatch(setCartStage("complete"))
})
.catch(error => console.log(error))
}
フォームをダッシュボードに表示するのと同じhidden
入力を提供する必要があります。name="form-name"
value
<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
{/* You still need to add the hidden input with the form name to your JSX form */}
<input type="hidden" name="form-name" value="contact" />
...
</form>
hidden
form-name
フィールドを繰り返すことは絶対に必要です。このフィールドを省略したり、名前を誤って入力したりすると、Netlifyがこのリクエストをフォームと照合する方法を知らないため、エントリはエラーをスローするか、失われます。
さらに、POST
リクエストにはこのフィールドを本文に含める必要があります。理想的な送信は次のようになります。
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, // your fields paired with key: name
}),
})
.then(() => navigate(form.getAttribute('action')))
.catch((error) => alert(error))
}
詳細情報はこの記事(Netlifyが提供)にあり、ライブの例とソースコードはこのGitHubリポジトリにあります。
送信時に404を受け取ります
あなたの原点経路は間違っていると思います。フォームは見栄えが良くなりましたが、NetlifyはリクエストされたURLを見つけることができません。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加