BETA

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

投稿日:2019-10-08
最終更新:2019-10-08
※この記事は外部サイト(https://www.mono7555e.com/netlify-forms/)からのクロス投稿です

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


こんにちは。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>  

Netlify Forms以外の選択肢

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

まとめ

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

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

参考

公式ドキュメント

https://www.netlify.com/docs/form-handling/

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

https://www.netlify.com/blog/2017/07/20/how-to-integrate-netlifys-form-handling-in-a-react-app/

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

monoの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!