Googleドライブ(ドキュメント)のフォームを使って、無料でセキュアな問い合わせフォームを作る。
CGIやCMSの機能、Wordpressならプラグインを使って問い合わせフォームを作成することが出来ます、CGIやCMSが使えない環境で問い合わせフォームを使いたい場合にはGoogleドライブのフォームを使うのが操作が簡単で良いかと思います。
またセキュリティ面でもフォームの設定を誤らない限り、ウィルス対策とかそんなのはGoogle側でやってくれます、またGoogle フォームはSSLを利用しているのでセキュア、そして無料！
Google ドライブのフォームを使った問い合わせフォームの特徴
必要なもの
必要な物はGoogleドライブを使うためのアカウント
GoogleのアカウントがあればGoogleドライブの利用が出来ます。
Google フォーム の仕組み
Google ドライブのフォームを使った回答はどこへ行くのか？
メールフォームではないので回答がメールで届くわけではありません
Googleドライブのスプレッドシートに記録がどんどん追加されていきます、その記録から問い合わせを確認できます。
スプレッドシートとは、マイクロソフトオフィスでいう表計算のエクセルです。
フォームが利用された場合に逐一メールで報告を受けとれる
メールで内容は送って来ませんが、逐一メールでフォームが利用されたことを受け取ることが出来ます
これはフォームと連携するスプレッドシートの方で設定を行えば可能です
正規表現を使えば、メールアドレスかどうか、電話番号かどうかをチェックする事が可能
単なるテキスト入力のエリアだけじゃなく、そこに入力されたものが正規表現で一致するかをチェックすることで、正しいメールアドレスの形式なのか、電話番号に数字以外が混ざっていないか等をフィルタリング出来ます
SSL接続
SSLで暗号化されて接続されますのでセキュアです
無料
無料でGoogleドライブが利用できますのでフォームも無料で作成できます
他にもオフィス系のソフトと同じようなものが使えます
複数のGoogleのアカウントから 操作可能
ファイルの編集リストに他のGoogleのアカウントを追加することで共同利用が可能です
Google ドライブのフォームを使ったお問い合わせフォームの作成の手順
STEP 1 フォームの作成
Google ドライブにログインした状態で左上にある作成からフォームを作成する事が出来ます
STEP2 フォームの設定
初期状態では、ラジオボックスがひとつあります
とりあえず消してまっさらな状態に
各項目の簡単な説明
- 1段目 ＝ 現在の進行状況を表す 1ページだけなら不要。
- 2段目 ＝ フォームの様式
- 3段目 ＝ フォーム送信後の動作
主に2段目のところを編集します
フォームの様式の作成
アイテムを追加から好きなタイプのものを追加できます、今回はテキストと多段テキストを使います。多段テキストはお問い合わせの内容に使います
タイトル、質問形式の選択で項目は基本的に追加できます。必須の質問ならチェックをつけ、詳細設定から正規表現でフィルタリング出来ます。完了を押せば項目が追加されます。同じ要領で追加していきます
アイテムを追加していって作るとこのようになります
一番上がページのタイトル・見出し、そのしたにフォームの説明がありますが不要なら何も入力する必要ありません
3段目にはフォームの送信後の設定をするのですが、そこに完了したよというメッセージやおい合わせの返答にかかる時間の目安とかを入れてやると親切です
STEP3 実際に出来たフォームを確認してみる
メニューの右の方にライブフォームを表示というのがあるので、クリックで問い合わせフォームのページが確認できます
こういった感じのフォームに出来上がっています。
デザインは好きなモノを選択することが出来ます、メニュー ＞ 表示 ＞ テーマヘッダで変更可能です
STEP 4 スプレッドシートと連携する
このフォームの結果を保存するスプレッドシートを設定します、すでにあるスプレッドシートに追加していくのか新規に作成したスプレッドシートに追加していくのかを選べます
メニューにある、回答先を選択するが表示されている場合は、これをクリック。これが表示されていない場合はすでに指定済みです、回答から接続の解除で設定し直すことが出来ます
回答先を選択で、新規のスプレッドシートを選択するか、既存のスプレッドシートを選択できます
多くの場合は新規のスプレッドシートで良いでしょう
STEP 5 フォームをテストしてみる
実際にフォームが正しく動くか、テストしてみる必要があります、先ほど確認したフォームのページから実際に使ってみましょう
先ほどのフォームで送信したら、完了の画面が出ます
本当に完了して正しくデータがスプレッドシートに送られたか見てみる
今回は、正規表現も使わずに普通のテキストだけにしたので メールアドレスも電話番号も何を入力しても問題ない状態でテストしました。
タイムスタンプ+作成した項目のデータが並べられ状態で保存されています。
これで正しく、フォームの送信が出来たことが確認できました
STEP 6 フォームをウェブサイトに設置してみる
URLをリンクさせるだけでも可能ですし、ウェブサイトに埋め込むことも可能
フォームの画面で一番下にあるフォームを送信でURLの取得と埋め込みコードの取得が出来ます
共有するリンクを貼り付ければ、先ほどのライブフォームのページが表示されます
埋め込むを押せばiframeのコードが取得できWEBサイトに埋め込むことが出来ます
埋め込みのサイズも自由に変更できます
STEP 7 スプレッドシートの変更をメールで逐一受け取る
フォームが利用されてもメールは届かないので、スプレッドシートの方で利用があった場合にメールが来るようにします、これで常に即座に対応できます。
スプレッドシート ＞ ツール ＞ 通知ルール
通知ルールをユーザーがフォームを送信した時
通知方法をその都度にチェックを付けて保存すればOK
これですべての工程が完了です。
これはお問い合わせとして使いましたが、他にも色々な用途で利用することが可能です
例えばこれを注文票のように使って簡易的なネットショップ的に展開してみるとか、アンケートに使うとか、懸賞の応募とかにするとか。
COMMENT