🧸

なぜ「問い合わせフォームSaaS」が広く使われているのか? - 便利な「問い合わせフォームSaaS」まとめ

2022/06/16に公開

Google FormsやNetlify Formのような問い合わせフォームSaaSは、わりと広く使われています。

問い合わせフォームぐらい、自分で実装しても大した手間じゃなさそうなのに、なぜ問い合わせフォームSaaSを使う人がいるのでしょうか。

この記事では、その理由を解説します。
また、問い合わせフォームSaaSをいくつか紹介し、そのメリット・デメリットについて書きます。

最後に、わたしたちの会社で開発した問い合わせフォームSaaSも紹介します。

問い合わせフォーム実装の大変なところ

問い合わせフォームを全て自前で実装するのは、そこそこ大変です。
具体的にどこに工数がかかるのか、以下にリストアップしてみました。

スパム対策

認証のないページに無防備な問い合わせフォームを設置すると、スパムの問い合わせがたくさんきます。

過去に適当にフォームを設置したときには、さほどアクセスがない状態でも、海外のbotから英語やロシア語で問い合わせがきました。

そしてしばらく経つと、人間から日本語で営業のような問い合わせが大量に来るようになりました。

予想ですが、botでURL等の情報が収集されて、そこから作られた営業リストが販売され、人が問い合わせてくる仕組みになっている気がします。

対応方法

  • reCAPTCHAを設置する
    • 一番メジャーな対策方法で、効果も高い
    • 設置にはGoogleアカウントが必要なので、クライアントに納品するサイトだと、アカウント周りのやり取りがやや面倒
  • honeypotを設置する
    • checkboxを設置してそれをCSSで隠す。そこにチェックが入っていたら、botが送信したと判断する手法
    • 過去にNetlify Formで設置したときには、わりと簡単に突破されたので、効果は弱めかも

メール送信

問い合わせを行ったユーザーへの自動返信メールや、管理者への通知メール。

すでにメール送信機能があるwebアプリならさほど手間になりませんが、0から作る場合は、そこそこ工数がかかります。

対応方法

  • SendGrid等のメール送信サービスを使う
  • 各言語のメール送信ライブラリなどを使って実装する
    • この場合IPレピュテーションとかバウンスメールとか諸々の考慮が必要

ファイルアップロード周りのセキュリティ対策

問い合わせフォームでファイルアップロードを受け付ける場合には、適当に実装するとセキュリティホールになります。

対応方法

  • ClamAVなどアンチウイルスソフトウェアによるスキャンを行う

アップロードされたファイルをアンチウイルスソフトウェアでスキャンして、問題がないものだけを保存するようにします。スキャンは、アプリケーションサーバーとは別のサーバーで実行できるとより望ましいです。

サーバー管理

VercelやS3、GitHub Pagesなどの静的ホスティングサービス上のサイトに問い合わせフォームを設置する場合には、問い合わせ管理のためのサーバーを別で用意する必要があります。

対応方法

  • サーバーを借りる/たてる

デザイン

自前で実装する場合、CSSでデザインを当てる必要があります。

対応方法

  • デザイナーに依頼する
  • 自分でデザインする
  • codepenなどのサンプルを参考にしながら実装する

その他もろもろ

Slackへの通知、スプレッドシートへの記録などの機能を追加する場合、それらのためのコードを書く必要があります。

対応方法

  • コードを書く
    • 状況に応じて、GoogleAppScriptやIFTTTなどを活用する

便利な問い合わせフォームSaaS一覧

問い合わせフォームSaaSを使うことで、上記の面倒なポイントを回避することができます。

(ただしSaaSを導入することで課題や手間が新たに発生することもあるので、その点も含めて検討しましょう)

使えそうなサービスと、それぞれのメリット、デメリット、ユースケースを(独断と偏見で)まとめてみました。

Google Forms

メリット

  • Googleという超大手企業が運営していて、安心感がある
  • 無料で使える
  • 技術者でなくても比較的簡単に問い合わせフォームを作れる
  • フォーム用のページのホスティングをしてくれる
  • iframeを使って、自社サイト内に埋め込むこともできる

デメリット

  • デザインなどのカスタマイズ性が低い
    • Googleフォームを使っていることがすぐにバレる
  • フォーム送信後のリダイレクト先の設定ができない
  • メール通知を1人にしか送信できない
  • 問い合わせをするユーザーがGoogleアカウントを持っていないと、ファイルの添付ができない
  • Slackとの連携が単体ではできない

ユースケース

「デザインや問い合わせ管理方法にはあまりこだわらないから、とりあえず手っ取り早くフォームを作りたい」という時の最有力候補。

https://www.google.com/intl/ja_jp/forms/about/

WordPressのプラグイン(ContactForm 7など)

メリット

  • 無料で使える
  • WordPressが使えれば、設置や設定が比較的簡単

デメリット

  • WordPress環境じゃないと使えない
  • 迷惑メールの対策に、やや手間がかかる
  • 定期的にアップデートする必要がある

ユースケース

WordPress製のサイトに問い合わせフォームを設置する場合、まず頭に浮かぶのがこれ。

https://ja.wordpress.org/plugins/contact-form-7/

Netlify Form

メリット

  • 100問い合わせ/月 までは無料で使える
  • formタグにdata-netlify=trueをつけるだけで手軽に使える
  • フォームのデザインなどの自由度が高い
  • <input type="hidden">を使ってデータを送信することができる

デメリット

  • Netlifyでwebサイトをホスティングしているときじゃないと使えない

ユースケース

Netlifyでサイトをホスティングしている場合には、かなり便利に使えるのでおすすめ。

https://docs.netlify.com/forms/setup/

Formrun

メリット

  • 問い合わせをチームで効率よく管理するための機能が豊富
    • Formrunの管理画面からのメール送信
    • 問い合わせのカンバン管理
  • 顧客管理など、マーケティング寄りの機能が豊富
    • 問い合わせデータをもとに顧客リストを作ったり、メルマガを配信したりできる
  • GUIでデザインをカスタマイズできるので、エンジニア以外のメンバーでもオリジナルのデザインのフォームを作ることができる
  • Googleフォームのように、フォーム専用のページを作ることも、自分のサイトにiframe等で埋め込むこともできる

デメリット

  • 有料
  • 機能がたくさんあるぶん、シンプルに問い合わせ管理をしたいだけの人にとっては、管理画面に不要な設定項目が多くて使いにくいかも

ユースケース

単に問い合わせを受け付けるだけでなく、メルマガを送るなど、問い合わせフォームを起点に得た顧客情報をアクティブに活用していきたいようなケースで、特に力を発揮しそう。

問い合わせ担当者がたくさんいる場合や、エンジニアの手をかけずにフォームを作りたい場合にも便利。

https://form.run/home

HyperForm

最後に、わたしたちの会社で開発したサービスも紹介させてください🙏

メリット

  • formタグのaction属性にURLをセットするだけで手軽に使える
  • デザインの自由度が高い
  • reCAPCHAによるスパムブロックが標準搭載されている
  • 自動返信メールの文面や、reply_toの値などをカスタマイズできる
  • フォーム送信後のリダイレクト先URLを自由に設定できる
  • Slackやスプレッドシートとの連携が楽
  • <input type="hidden">を使ってデータを送信することができる

デメリット

ユースケース

formタグのaction属性にURLをセットするだけで実装でき、Netlify Formのように使っているサーバーに依存することもないので、

「スパム対策や自動返信メール、Slack通知などの実装は面倒だけど、ツールの決まりごとにはなるべく縛られたくない」

というときに便利です。

また<input type="hidden">を使ってデータを送信できるので、

  • ログイン中のユーザーのメールアドレスを送信する
  • 問い合わせを行ったページのURLを送信する
    • 全ページの右下に、チャットボットのような形でフォームを設置する場合などに便利
  • 404や500などのエラーページに問い合わせフォームを設置して、問い合わせ内容と一緒にエラーコードやエラーメッセージを送信する

などの使い方ができます。

https://hyperform.jp/

Discussion