August 19, 2019

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

こんにちは。mono(@mono7555e)です。

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

Netlify Formsとは

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>

Netlify Forms以外の選択肢

このブログがGatsbyJS+Netlifyという構成で作られていたのでNetlify Formsを使ってお問い合わせフォームを構築しましたが、Netlifyを使っていない場合や難しく感じた場合はGoogleフォームを使うのが良いと思います。

まとめ

以前からTwitterのDMにてご依頼等いただくことがありましたが、企業さまだと少々お手間だったようなので、お問い合わせフォームを設置することにしました。

Netlify Formsなら簡単に設置できますし、スパムも自動で判別してくれるので管理の手間も少なくオススメです。

参考

公式ドキュメント

ReactアプリにNetlify Formsを入れる方法(公式ブログ)

この投稿を書いた人

mono

ゲーム実況やったりVLOG撮ったりしているガジェット好きIT系の人です