Googleドライブ(ドキュメント)のフォームを使って、無料でセキュアな問い合わせフォームを作る。

電話をするジェスチャーをする女性の写真
このエントリーをはてなブックマークに追加
PR

CGIやCMSの機能、Wordpressならプラグインを使って問い合わせフォームを作成することが出来ます、CGIやCMSが使えない環境で問い合わせフォームを使いたい場合にはGoogleドライブのフォームを使うのが操作が簡単で良いかと思います。

 

またセキュリティ面でもフォームの設定を誤らない限り、ウィルス対策とかそんなのはGoogle側でやってくれます、またGoogle フォームはSSLを利用しているのでセキュア、そして無料!

 

 

Google ドライブのフォームを使った問い合わせフォームの特徴

必要なもの

必要な物はGoogleドライブを使うためのアカウント

GoogleのアカウントがあればGoogleドライブの利用が出来ます。

 

 

Google フォーム の仕組み

Google ドライブのフォームを使った回答はどこへ行くのか?
メールフォームではないので回答がメールで届くわけではありません

Googleドライブのスプレッドシートに記録がどんどん追加されていきます、その記録から問い合わせを確認できます。
スプレッドシートとは、マイクロソフトオフィスでいう表計算のエクセルです。

 

 

フォームが利用された場合に逐一メールで報告を受けとれる

メールで内容は送って来ませんが、逐一メールでフォームが利用されたことを受け取ることが出来ます
これはフォームと連携するスプレッドシートの方で設定を行えば可能です

 

 

正規表現を使えば、メールアドレスかどうか、電話番号かどうかをチェックする事が可能

単なるテキスト入力のエリアだけじゃなく、そこに入力されたものが正規表現で一致するかをチェックすることで、正しいメールアドレスの形式なのか、電話番号に数字以外が混ざっていないか等をフィルタリング出来ます

 

 

SSL接続

SSLで暗号化されて接続されますのでセキュアです

 

 

無料

無料でGoogleドライブが利用できますのでフォームも無料で作成できます
他にもオフィス系のソフトと同じようなものが使えます

 

 

複数のGoogleのアカウントから 操作可能

ファイルの編集リストに他のGoogleのアカウントを追加することで共同利用が可能です

 

 

 

Google ドライブのフォームを使ったお問い合わせフォームの作成の手順

 

STEP 1 フォームの作成

WS002806

Google ドライブにログインした状態で左上にある作成からフォームを作成する事が出来ます

 

 

STEP2 フォームの設定

初期状態では、ラジオボックスがひとつあります

とりあえず消してまっさらな状態に

WS002808

 

各項目の簡単な説明

  • 1段目 = 現在の進行状況を表す 1ページだけなら不要。
  • 2段目 = フォームの様式
  • 3段目 = フォーム送信後の動作

主に2段目のところを編集します

 

フォームの様式の作成

アイテムを追加から好きなタイプのものを追加できます、今回はテキストと多段テキストを使います。多段テキストはお問い合わせの内容に使います

WS002809

タイトル、質問形式の選択で項目は基本的に追加できます。必須の質問ならチェックをつけ、詳細設定から正規表現でフィルタリング出来ます。完了を押せば項目が追加されます。同じ要領で追加していきます

 

アイテムを追加していって作るとこのようになります

WS002807

一番上がページのタイトル・見出し、そのしたにフォームの説明がありますが不要なら何も入力する必要ありません

 

 

3段目にはフォームの送信後の設定をするのですが、そこに完了したよというメッセージやおい合わせの返答にかかる時間の目安とかを入れてやると親切です

WS002810

 

 

STEP3 実際に出来たフォームを確認してみる

WS002811

メニューの右の方にライブフォームを表示というのがあるので、クリックで問い合わせフォームのページが確認できます

 

こういった感じのフォームに出来上がっています。
デザインは好きなモノを選択することが出来ます、メニュー > 表示 > テーマヘッダで変更可能です

WS002805

 

STEP 4 スプレッドシートと連携する

このフォームの結果を保存するスプレッドシートを設定します、すでにあるスプレッドシートに追加していくのか新規に作成したスプレッドシートに追加していくのかを選べます

WS002812

メニューにある、回答先を選択するが表示されている場合は、これをクリック。これが表示されていない場合はすでに指定済みです、回答から接続の解除で設定し直すことが出来ます

 

回答先を選択で、新規のスプレッドシートを選択するか、既存のスプレッドシートを選択できます
多くの場合は新規のスプレッドシートで良いでしょう

WS002804

 

STEP 5 フォームをテストしてみる

実際にフォームが正しく動くか、テストしてみる必要があります、先ほど確認したフォームのページから実際に使ってみましょう

先ほどのフォームで送信したら、完了の画面が出ます

WS002813

 

本当に完了して正しくデータがスプレッドシートに送られたか見てみる

今回は、正規表現も使わずに普通のテキストだけにしたので メールアドレスも電話番号も何を入力しても問題ない状態でテストしました。

WS002814

タイムスタンプ+作成した項目のデータが並べられ状態で保存されています。

これで正しく、フォームの送信が出来たことが確認できました

 

 

STEP 6 フォームをウェブサイトに設置してみる

URLをリンクさせるだけでも可能ですし、ウェブサイトに埋め込むことも可能

フォームの画面で一番下にあるフォームを送信でURLの取得と埋め込みコードの取得が出来ます

WS002815

 

共有するリンクを貼り付ければ、先ほどのライブフォームのページが表示されます

WS002816

 

埋め込むを押せばiframeのコードが取得できWEBサイトに埋め込むことが出来ます

WS002817

埋め込みのサイズも自由に変更できます

 

 

STEP 7 スプレッドシートの変更をメールで逐一受け取る

フォームが利用されてもメールは届かないので、スプレッドシートの方で利用があった場合にメールが来るようにします、これで常に即座に対応できます。

スプレッドシート > ツール > 通知ルール

WS002818

 

通知ルールをユーザーがフォームを送信した時
通知方法をその都度にチェックを付けて保存すればOK

WS002819

 

 

これですべての工程が完了です。

これはお問い合わせとして使いましたが、他にも色々な用途で利用することが可能です

例えばこれを注文票のように使って簡易的なネットショップ的に展開してみるとか、アンケートに使うとか、懸賞の応募とかにするとか。

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)