お問い合わせフォームを作るならNetlify Formsがオススメ！

Netlify

オリジナルの記事はこちら

こんにちは。mono（@mono7555e）です。

今回は私のブログのお問い合わせフォームにも使っているNetlify Formsのご紹介です。
ブログやサイトにお問い合わせフォームを設置したい時に簡単に使えるのでオススメです。

Netlify Formsとは

Netlifyについては以前ご紹介していますのでそちらをご覧ください。

https://www.mono7555e.com/gatsbyjs-and-netlify/

そのNetlifyのサービスの1つで「Forms」というフォームの送信内容を受け取ってくれるサービスがあります。

利用方法は簡単で、<form>タグにnetlifyまたはdata-netlify="true"要素を追加して、Netlifyに反映するだけです。

以下、公式ドキュメントのサンプルです。

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>Your Name: <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Your Email: <input type="email" name="email" /></label>
  </p>
  <p>
    <label>Your Role: <select name="role[]" multiple>
      <option value="leader">Leader</option>
      <option value="follower">Follower</option>
    </select></label>
  </p>
  <p>
    <label>Message: <textarea name="message"></textarea></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

<form>タグのdata-netlify="true"以外は普通のフォームなのが分かると思います。

<form>タグにdata-netlify="true"をつける以外に制約はないので、フォームの見た目などのカスタマイズは自由です。

価格

月に100件、アップロードデータサイズ10MBまでは無料で使えます。

それ以上になると、19ドル/月の費用がかかります。詳しくは公式サイトをご覧ください。

主な機能

ファイル添付

type="file"のフィールドを追加すれば、それだけでファイルもアップロードできるようになります。

<form name="contact" method="post" data-netlify="true">
  ...
  <input type="file" name="screenshot" />
  ...
</form>

スパムフィルタリング

送信された内容はAkismetを使ってフィルタリングされます。

フィルタリングされたものはダッシュボード画面から確認出来るので、誤ってスパム判定されて確認できないということはないです。

メールアドレスの形式が間違っている場合などもフィルタリングされて弾かれるみたいです。

さらに、「reCAPTCHA 2」などを使ってフォームを保護することができるので必要であれば使ってみると良さそうです。

詳しくは公式ドキュメントをご覧ください。

エクスポート

送られてきた内容は基本的にはNetlifyのダッシュボード画面から確認することになりますが、CSV形式でのエクスポート機能もあります。

ダウンロードできるのはスパム判定されていないもののみです。

通知

メールやSlackで通知を飛ばすことができます。

name="subject"の要素をフォームに追加しておけば、通知のタイトルに入力された内容が使われるようになるのでオススメです。

<form name="contact" method="post" data-netlify="true">
  ...
  <input type="input" name="subject" />
  ...
</form>

こちらもエクスポートと同様、スパム判定されていない場合のみ通知されます。

サンクスページ

サンクスページを用意して<form>タグのactionにサンクスページのパスを設定するだけでOKです。

<form name="contact" method="post" action="/success.html" data-netlify="true">
  ...
  <input type="input" name="subject" />
  ...
</form>

何も設定していない場合はNetlifyが用意した画面が表示されます。

カスタマイズ等はできないので自前で用意する方が良いでしょう。

GatsbyJSで利用する場合の注意点

GatsbyJSやその他静的サイトジェネレーターからも利用可能ですが、サンプルのままだと動かないので一部コードの追加が必要になります。

以下のようなコードを<form>に追加します。

<input type="hidden" name="form-name" value="contact" />

valueの内容は<form>タグのname属性に合わせて変更してください。

サンプル

<form name="contact" method="post" data-netlify="true" data-netlify-honeypot="bot-field">
  {/* 以下のコードを追加 */}
  <input type="hidden" name="form-name" value="contact" />
  ...
</form>