2018/12/28

Netlify Forms 実装パターンまとめ

はじめに

Netlify Forms の実装パターンについてまとめます。

Netlify Forms の実装パターン

基本パターン

<form name="basic" method="POST" data-netlify="true">
  <label>Your Name: <input type="text" name="name"/></label>
  <button type="submit">Send</button>
</form>

form メソッドにdata-netlify=true属性を追加するだけで Netlify Forms が利用できます。
submit すると form 内で定義された input の値が送信されます。
送信が完了すると Netlify が用意する送信完了ページに遷移します。
Netlify 側でスパム判定を行っていて、怪しいリクエストと判断されると CAPTCHA での認証が求められます。

送信完了ページをカスタムする

<form
  name="custom-success-page"
  method="POST"
  data-netlify="true"
  action="/success.html"
>
  <label>Your Name: <input type="text" name="name"/></label>
  <button type="submit">Send</button>
</form>

用意位した送信完了ページを使用するには、form の action 属性に URL パスを指定します。
この例の場合では、送信完了後に /success.html へ遷移します。

reCAPTCHA を強制する

<form name="explicit-recaptcha" method="POST" data-netlify="true">
  <label>Your Name: <input type="text" name="name"/></label>
  <div data-netlify-recaptcha="true"></div>
  <button type="submit">Send</button>
</form>

form の子要素に data-netlify-recaptcha="true" 属性を持つ DOM を追加すると、reCAPTCHA 2 を埋め込めます。
基本パターンは、submit 後に CAPTCHA 画面が出ますが、こちらは form 自身に reCAPTCHA 2 が埋め込まれるため、遷移数が少なくなります。

reCAPTCHA

ハニーポットを設定する

<form
  name="honeypot"
  method="POST"
  data-netlify="true"
  netlify-honeypot="bot-field"
>
  <p>
    <label>Bot Field: <input name="bot-field"/></label>
  </p>
  <label>Your Name: <input type="text" name="name"/></label>
  <button type="submit">Send</button>
</form>

form に netlify-honeypot="<ハニーポット用フィールド名>" を追加します。form の子要素として name="<ハニーポット用フィールド名>"をもつ input タグを追加します。例ではハニーポット用フィールド名としてbot-fieldを使用しています。
ハニーポット用フィールド名をもつ input に値が設定された状態で submit した場合、その送信情報ををスパムと判定します。スパムと判定されても送信完了画面に遷移しますが、実際に内容は送信されません。
ハニーポット用の input は css や js で画面上から見えないように設定する必要があります。

基本パターン・reCAPTCHA・ハニーポットのどれを使うべきか

ほとんどの場合は基本パターンで問題ないです。
基本パターンのデメリットとして、送信までに CAPTCHA ページへの遷移が 1 つ増えることです。また CAPTCHA ページはカスタマイズできません。"Sorry to Interrapt"と書かれた英語のページが出ます。
サイトを利用するユーザーのリテラシーが低い場合、急に英語の画面が出てきた!と驚かれる可能性があります。その場合は reCAPTCHA を利用するのがベターでしょう。
ハニーポットパターンをあえて使うことはないでしょう。

ドキュメント