、およびフィールドを含む基本的な Netlify フォーム (このガイドに基づく) があります。次の送信機能を使用します。name
email
message
const handleSubmit = event => {
event.preventDefault();
const data = {};
const scopedForm = [...formState];
let isValidForm = validateForm(scopedForm);
setFormState([...scopedForm]);
if (!isValidForm) return false;
formInputs.forEach(input => data[input.name] = input.value);
fetch(`/`, {
method: `POST`,
headers: {
'Accept': `application/x-www-form-urlencoded;charset=UTF-8`,
'Content-Type': `application/x-www-form-urlencoded`,
},
body: encode({
'form-name': `Contact Form`,
...data,
}),
})
.then(() => console.log(`OK`))
.catch(error => alert(error));
};
const encode = data => {
return Object.keys(data)
.map(key => encodeURIComponent(key) + `=` + encodeURIComponent(data[key]))
.join(`&`);
};
非常に単純です。検証の他に、data
オブジェクトを作成し、それを のペアで埋めます data[input.name] = input.value
。すべてがローカルでもモードでも期待どおりに機能しdevelop
ますbuild
。リクエストを見ることができますがPOST
、本番環境では次のようになりますGET
。
組み込みをに変更しようとしましfetch
たaxios
が、結果は同じです。サーバーにカスタム構成を追加する必要があるかどうか、またはこれをバイパスする方法がわかりません。
私の結果のHTML構造は次のとおりです。
<form name="Contact Form" method="POST" action="/" data-netlify="true" data-netlify-honeypot="bot-field" data-netlify-recaptcha="true">
<div><label for="form-name"><input type="hidden" name="form-name" value="Contact Form"></label></div>
<div><label for="bot-field"><input type="hidden" name="bot-field" value=""></label></div>
<div><label for="name">Name:<input type="text" name="name" value="Chancellor Lawson"></label></div>
<div><label for="email">Email:<input type="text" name="email" value="fivyhohy@mailinator.com"></label></div>
<div><label for="message">Message:<textarea name="message">Ea quisquam ea vel e</textarea></label></div>
<button type="submit">Send</button>
</form>
同様の問題、記事、ガイドをたくさん読みましたが、役に立ちませんでした。