2

、およびフィールドを含む基本的な Netlify フォーム (このガイドに基づく) があります。次の送信機能を使用します。nameemailmessage

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

本番環境でリクエストをフェッチ

組み込みをに変更しようとしましfetchaxiosが、結果は同じです。サーバーにカスタム構成を追加する必要があるかどうか、またはこれをバイパスする方法がわかりません。

私の結果の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>

同様の問題、記事、ガイドをたくさん読みましたが、役に立ちませんでした。

4

1 に答える 1