NetlifyのFormsを活用してブログに問い合わせを設置

Netlify

ブログ

このブログはNetlifyで配信しています。ブログのソースはGatsbyで生成しているため静的コンテンツなのですが、Netlifyの機能でフォームを設置してデータを受け取ることができるそうです。

以前からこの機能は知っていたのですが、めんどくさそうでしたので避けていました。いい機会だと思うので、ブログにお問い合わせフォームを作ろうと思います。

その手順や情報を記載しておきます。

概要

ドキュメント
手順
送信を確認
recapthaも簡単に設置
無料の枠でどれくらい

ドキュメント

https://docs.netlify.com/forms/setup/#html-forms

手順

驚くほど簡単です。

Formタグを配置して必要な入力と決定ボタンを設置。Formタグにdata-netlify="true"またはnetlify属性を加えれば、サブミットしたときのデータをNetlifyが受け取り管理画面で表示してくれるそうです。

<form name="contact" method="POST" data-netlify="true">

    ~~~~~~
    ~~~~~~
    ~~~~~~

</form>

action属性が未設定の場合はそのフォームに送信受付のメッセージが出るそうです。action属性に任意のURLを指定すれば完了画面として表示してくれるそうです。

送信を確認

recapthaも簡単に設置

スパムなどを防ぐための仕組みも簡単に利用できます。recapthaを設置してみます。

formタグに属性を追加してform内に特定の属性を持つ空のdivを設置すれば、その場所に表示されます。こちらも簡単。

<form name="contact" method="POST" data-netlify-recaptcha="true" data-netlify="true">
  <p>
    <label>Email: <input type="text" name="name" /></label>
  </p>
  <div data-netlify-recaptcha="true"></div>
  <p>
    <button type="submit">Send</button>
  </p>
</form>