Honmushi blog
NetlifyのFormsを活用してブログに問い合わせを設置2020/01/17

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

このブログは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>

無料の枠でどれくらい

値段については以下ドキュメントに記載されています。

https://www.netlify.com/pricing/

無料なら月100件。ファイルの添付は月10MBまで。 まあ個人のページであれば十分でしょうか?

おわりに

すごく簡単にフォームを設置できました。Gatsbyで作成したブログですのでバックエンドのプログラムがありません。フォームの内容を受け取ったり、どこかに保存したりは通常できませんが、Netlifyなら代わりにやってくれます。 実装もすごく簡単で、formタグに属性を追加するだけです。なんて便利なんだ。

  • このエントリーをはてなブックマークに追加