静的Webホスティングで利用できるお問い合わせフォームサービスをまとめてみた

Goyahn
Page content

こんにちは。

ホームページやコーポレートサイトの運営において、 サイトを訪問してきたユーザさんからの問い合わせを受け付ける、 所謂「お問い合わせフォーム」の設置は必須だと思います。

私のブログサイトにも、将来的には副業的なお仕事の依頼がくると嬉しいなという願望から お問い合わせフォームの設置を検討しています。 今回は、CloudFlare Pagesなどのサーバ側でのプログラム設置が不可能な状況下での お問い合わせフォームの実現方法についてのお話です。

静的Webサイトホスティングにおけるお問い合わせ機能実装の課題

通常、お問い合わせフォーム機能の実現には、入力フォームから送信されたデータを受け取り、 データを永続的に保存するためのサーバ側でのプログラムやデータストアが必要になります。

エックスサーバー 、さくらのレンタルサーバ などのレンタルサーバサービスや専用サーバサービスであれば、プログラム(PHP, Pythonなど)やデータストア(MySQL, mongo DBなど)の導入は容易におこなえます。

しかし、私のブログサイトを公開しているCloudFlare Pagesは、 HTMLファイルや画像データといった静的なデータの配信に特化したサービスです。 レンタルサーバなどで利用可能なプログラムの実行やデータストアによるデータの永続化をおこなうことはできません。

そのため、CloudFlare Pagesではない、外部のサービスと連携することでお問い合わせフォームを実現する必要があります。

お問い合わせフォーム機能の構成要素について

お問い合わせフォームサービスの紹介の前に、お問い合わせフォーム機能の実現に必要な構成要素について簡単にまとめます。 お問い合わせフォームは大きく分けて、以下の要素から構成されています。

  1. 名前や連絡先、問い合わせ内容などのユーザからの入力を受け付ける画面である「入力フォーム」
  2. 入力フォームに記入されたデータを登録、結果をユーザに返すための「サーバプログラム」
  3. 入力データを保存するための「データストア」

ユーザ(ブラウザ)とサーバ、プログラム、データストア間での入力データの受け渡しの流れを図示すると、以下の図のようになります。

お問い合わせフォームにおけるデータの流れ

自前でサーバを用意してウェブサイトを運用している場合、すべての構成要素を自サーバ上に構築することができます。 しかし、CloudFlare Pagesなどの静的Webホスティングサービスでは、単独では 1 の入力フォームの設置までしかおこなうことはできません。 2のサーバプログラム、3のデータストアについては、外部のサービスを利用する必要があります。 多くのお問い合わせフォームサービスでは、1～3までのすべての機能をまとめて提供してくれるものがほとんどです。

また、シンプルなお問い合わせフォーム機能については、上記の要素があればいいですが、 実際はお問い合わせ後のコミュニケーションや問い合わせ対応管理などの機能があれば、よりスムーズにユーザとのインタラクションが実現できます。 「お問い合わせフォーム サービス」などのキーワードで検索してもらえば、 2, 3 (1も含む場合も多数)の機能をもったサービスがいくつも提供されていることが分かるかと思います。

静的ホスティング環境下でのお問い合わせフォームの実装パターン

外部のサービスと連携したお問い合わせフォームの実装パターンは大きく分けて以下の3つかと思います。

  1. iframe(インラインフレーム)を用いて自サイト内のページに外部のお問い合わせフォームを埋め込む
  2. 入力画面を自前で作成し、APIなどを経由して入力データを外部のサービスに送信・保存する
  3. 直接外部のお問い合わせフォームサービスに遷移させる

1の方法は、外部のお問い合わせフォーム作成サービス上に作成した入力フォーム画面を自サイト内に埋め込む方式です。 今回調査したお問い合わせフォームサービスのほぼすべてのサービスこの方式を採用しています。

どういった方式なのか簡単に説明すると、お問い合わせフォームサービスで作成した入力フォーム画面を表示するページを iframe に埋め込むことで外部サーバで生成された入力フォームをさも自分のページ内にあるように表示させることができるというものです。 一般的に、お問い合わせフォームサービスでは、フォームに名前や電話番号など、どういった項目をユーザに入力させたいかを定義し、入力フォーム画面を作成します。 前述したお問い合わせフォームにおけるデータの流れを示した図を見ればわかるように、入力フォームとそれを受け取るサーバプログラム、データストアは密接な関係にあるため、これらの要素をすべて一貫して提供したほうが、実装・運用の面でも非常に楽となります。 (実際は、後述するAPI方式の場合は、正規ルートではないフォーム投稿を弾くための仕組みをサーバ側で用意する必要があるため、ASPでの提供が難しいのかもしれません。)

2の方法は、お問い合わせフォームサービス側では、フォームで使用する項目名データ型、バリデーションなどの定義だけをおこない、入力フォームはサイト管理者側で自由に作成する方式です。 サービス側では、入力を受け取るためのAPIエンドポイントやフォームの骨組みだけを提供し、 サイト管理者側で入力フォームのデザインを自由にカスタマイズできるメリットがあります。 一方で、前述したように悪意ある第三者による不正な経路でのフォーム送信を防ぐ必要があるため、 サービス側での高いセキュリティ対応が要求されます。

3の方法は、1の方法で iframe を使わず、お問い合わせフォームサービス側のページに直接遷移する方法です。 サイトの移動が発生するため、あまり望ましいものではありません。

お問い合わせフォームサービスの紹介

前述したとおり、静的Webサイトのホスティングにおいて、お問い合わせフォームなどの 動的機能の実現には外部サービスとの連携が必要不可欠です。

そのため、有償・無償含めていろいろなサービスが展開されています。 お問い合わせフォームサービスでは、下記のようなサービスが挙げられることが多いようです。

サービスごとの機能比較

各サービスの機能・料金ページを参考にサービスごとの私の感じた特徴をまとめました。 三者三様に微妙に対象としている領域に違いが出ているようです。

formrun

  • 無料プランだとフォームの設置数は1つ、自動返信メール機能は使えない(有料プランのみ)
  • iframe形式(HTMLスクリプト埋め込みによるデザインカスタマイズは可能)
  • 回答データ数に制限はない
  • 一番安い有料プラン(3,880円/月)だとフォーム設置数は5つ
  • 自動返信、個別返信メールに独自ドメインのメールアドレスを設定するためには最上位プランの契約が必要
  • Google reCAPTCHA対応

⇒ 無料プランでも埋め込みフォームのデザインがカスタマイズできるため、デザインの統一が可能。

Tayori

  • 無料プランは、フォーム設置数が１つ、フォームにクレジットが表示される、自動応答メール設定不可
  • iframe形式
  • 回答保持数・期間については不明
  • 一番安い有料プラン(3,400円/月)だとフォーム設置数は3つ
  • フォーム以外に、FAQ、アンケート、チャット(有料のみ)などの機能が一緒についてくる
  • Google reCAPTCHA　未対応？(記載なし)

⇒ 有料プランによるチーム(3人～)によるフォームへのメール対応、チャットによる双方向コミュニケーションが可能

Qubo Request

  • 無料プランがない(14日間の評価期間のみ)
  • iframe形式
  • 一番安い有料プラン(2,750円/月)だとフォーム設置数は1つ、また、ファイル添付ができない
  • 自動返信メールのアドレスに独自ドメインを設定可能。ただしGmailアドレスの場合は送信不可
  • 最上位プランのみユーザ管理機能がつく
  • Google reCAPTCHA対応

⇒ 専門知識が不要な直観的なUIを売りにしているとのこと。多言語フォームの作成などの特徴もあるが有料プランでのフォーム設置数などの上限が低い印象を受ける

フォームズ

  • 無料プランは広告表示あり、フォーム設置数の制限はなし、1フォームあたり100件の回答を保持
  • 一番安い有料プラン(1,900円/3カ月)だとフォーム設置数は100、1フォームあたり500件の回答を保持
  • 申込件数の制限設定やPayPalによるクレジット決済など注文・予約などの用途にも使用できそう
  • Google reCAPTCHA対応

⇒ 無料プランだと広告表示があるため、コーポレートサイトには不適。回答保持件数の上限があるため、別途データを保存しておく仕組みが必要。有料プランが最安。

Google Forms

  • 無料
  • iframeだけでなく、自身のサイトに設置した入力フォームから送信が可能 (問題点あり)
  • Google Spread Sheet, GASによる連携が可能
  • 作りこみによっては、自動返信を含めいろいろな機能の実現が可能
  • Google reCAPTCHA 非対応？ (昔は、メールアドレスなどの入力の場合はreCAPTCHAが自動で適用されていたとのこと)

サービス選定の指標

では、実際はどのフォームサービスを使用すれば良さそうでしょうか。 当然ですが、フォームサービスに掛けられる予算で無料／有料プランに分岐します。

無料でフォームサービスを利用したい場合

フォームサービスにお金をかけられない場合は、「formrun」、「Google Forms」のどちらかが良いと思います。 formrunは自動返信メールがないことを除けば、広告表示なく、フォームの見た目もカスタマイズが可能なサービスであるからです。 ただし、フォームの設置数の上限が1であるため、複数サイトの運用には向きません。 サイトごとにアカウントの作成、送信メールアドレスの管理など煩雑になります。

Google Formsについては、前述したように他のGoogleサービスとの連携がしやすいメリットが挙げられます。 作りこみこそ必要なものの、Google Spread Sheetへの自動反映やそこから自動返信メールを送る、などのサンプルがいくつか見受けられました。 反面、現在いくつか検証をおこなっているのですが、iframeを用いない独自の入力フォームと連携させる場合、セキュリティの面からいくつか注意が必要そうです。

有料でフォームサービスを利用したい場合

有料プランについてですが、問い合わせをおこなってきたユーザさんに対して送信されるメールアドレスにこだわるかどうかが、重要な選定基準になると思います。 というのも、どのサービスも送信メールアドレスを独自ドメインにしようとした場合、上位のプランを契約する必要があるからです。 当然、上位プランになるほど費用は高くなり、formrunについては、他のサービスに比べて割高な印象を受けました。(それ以外の機能が多くあるので単純な比較はできませんが。。。)

バランスが良さそうなのは、Tayori、Qubo Requestのどちらかでしょうか。 Quboについては、Gmailアドレスからの送信の問題が気になるところです。 複数人での運用やフォーム以外のFAQやチャットといった機能も付帯してくるので、これらを有効活用できればお得だと思います。

私は費用を可能な限り抑えたいので・・・

Google Formsで頑張ってみることにしました。 調査した限り、Google Formsも多くのお問い合わせフォームサービスと同様に iframeによる埋め込み、もしくはGoogle Formsページへの遷移を基本としています。 しかし、サイト間での移動の発生や iframe 埋め込みによるデザインのミスマッチが発生してしまいます。 そのため、最終的にはGoogle Formsに加えていくつかの仕組みを連携させて2の方法での実現を目指すことにしました。