🧊

NetlifyのFormsについて

Forms setup | Netlify Docs

個人的に忘れないようにメモ。

ユースケースたち

だいたいこの2つなはず。

  • ホスティングしてるHTMLに直接`form`要素を置くパターン
  • ReactとかからJSで描画するパターン

前者はほんとに簡単で、`data-netlify="true"`をつけた`form`を用意するだけ。

後者ももちろん対応されてるけど、ひと手間が必要だった。

JavaScriptでフォームを作る

How to Integrate Netlify’s Form Handling in a React App | Netlify

このパターンでやるべきステップは2段階ある。

  • 有効化
  • 設置

この2つ。

有効化

Netlifyのホスティングの中に、ダミーのフォームだけを定義したHTMLを置く。

<form name="feedback" netlify hidden>
  <input type="hidden" name="ua" />
  <textarea name="message"></textarea>
</form>

こういうやつ。

描画目的ではないので`hidden`属性をつけてあればよく、中身も送信したいフォームの中身だけでよい。

フォーマットはHTMLではあるものの、いわゆるスキーマみたいなイメージ。
ここで定義してないフィールドは送信しても無視される。

それぞれの`name`属性が設置するときにも必要になるので注意。

一度でもこのファイルを使ったビルドが完了したら、このHTMLは消してしまっても問題ない模様。
ただフォームのフィールドを変更したい場合は、また改めて必要になる・・・。

GUIから設定できるようにしてほしい・・。

設置

フォームを描画するのはいつものとおりに。

const FeedbackForm = () => (
  <form name="feedback" method="POST">
    <input type="hidden" name="form-name" value="feedback" />
    <input type="hidden" name="ua" value={navigator.userAgent} />
    <label>
      Message: <textarea name="message"></textarea>
    </label>
    <button type="submit">Send</button>
  </form>
);

さっき置いたダミーのフォームと同じ`name`を使う。

`form-name`ってやつが特別に必要で、`value`はこのフォームの`name`にする。

Ajaxで送信する場合は、同じ内容の`FormData`を作って`/`に向けてPOSTすればいいだけ。

個人的なFAQ

ホスティングは違うところで、フォームだけNetlify

できない。

フォームの送信先のURLが払い出されるわけではないし、CORSの設定でブロックされる。

localhostでデバッグ

できない。

プレビュービルドの機能とか使って確認するしかなさそう。

有効化したフォームの削除

できない。

サポートフォーラムで依頼すれば消してくれる・・！

How to delete a form from the Netlify dashboard? - Support - Netlify Community