Googleフォームを利用してお問い合わせフォームを設置する

  Web  




少しずつブログの体裁も整えていきたいと思いコンタクトフォームを設置することにしました。

WordPressなどのCMS1を使っているとプラグインで手間なく実装できるのですが、静的なサイトだとコメントや問い合わせフォームなどの動的なサービスに弱いのが玉に瑕です。

そこで問い合わせフォームの実装方法を検討した結果、導入が簡単そうなGoogleフォームを使ってみることにしました。今回はGoogleフォームを使ったコンタクトフォームの設置についてまとめてみます。

Googleフォーム(Forms)とは

グーグルが公開している誰でも簡単に公開可能なアンケートや問い合わせフォームが作成できるサービスになります。

色やフォントを変更して見た目を変えたり、アンケートの結果をスプレッドシートで集計したりもできるようです。

公式サイトの使い方はこちらです。
Google フォーム - ドキュメント エディタ ヘルプ

問い合わせフォームの作成

見た目のカスタマイズなど深く掘り下げることはせず、シンプルな問い合わせフォームを作成していきます。

新しいフォームを作成する

まずは、Googleフォームに移動しましょう。

サイトが開いたら、画面中央にあるGoogle フォームを使うというボタンをクリックします。

Googleフォームに移動した後画面中央にあるGoogleフォームを使うというボタンを押します

テンプレートからも選べますが空白のものを選択し、新しいフォームを作成しましょう。

Googleフォームを利用してサイトに設置する新しいフォームを作成します

初期のフォームはこのような状態です。

作ったばかりの初期状態のフォームです。ここから自分好みの内容に変更していきます。

フォームの内容を修正する

フォームのタイトル、質問、ラジオボタンを変更しました。

  • 無題のフォーム → 問い合わせフォーム
  • 無題の質問 → お名前
  • ラジオボタン → 記述式

タイトルとセクションの名前を変更しました。ラジオボタンも使わないので記述式という短文を記述するためのパーツに変更します。

入力を必須にする

右下の必須という部分をチェックして、質問への回答を必須にしておきます。

質問に対する回答が記述されていないのに送信されることがないように、質問への回答を必須にしておく。

このチェックをしておかないと、名前を入力することなく問い合わせができるようになってしまいます。メールアドレスで設定が漏れると、返信すらできなくなるので注意しましょう

質問を追加する

右側に表示されているボタンの一番上を押して、必要な分だけ質問を追加します。

初期フォームの修正が終わったので必要な分質問を追加します。右側にある質問の追加ボタンを押すと下に質問が追加されていきます。

メールアドレス、お問い合わせ内容という質問を追加し、最終的にこのようになりました。

必要な分だけ質問を追加し最終的にお名前、メールアドレス、お問い合わせ内容という3つの質問の問い合わせフォームが完成した。

なお、お問い合わせ内容のみ長文回答用の「段落」を設定しています。

記述式は短文回答のためのもので、長文回答は段落を選択する必要があります。

お問い合わせ内容は長文の入力が必要になるので、他の質問のように短文用の記述式ではなく、長文記述用の段落を設定する。

Google フォームの保存

Google フォームはリアルタイムで保存されるため、保存するという処理は必要ありません。

フォームになにか修正を加えると、ヘッダーの部分に保存した旨のメッセージが表示されます。

フォームの内容を修正したり質問を追加すると、そのたびにフォームが自動で保存されます。自分で保存するという手間はありません。

保存先はGoogle ドライブになります。

サイトにフォームを貼り付ける

サイトにフォームを貼り付けるため、埋め込み用のHTMLを取得します。

まずは、右上にある送信ボタンをクリックしてください。

完成したフォームをサイトに貼り付けるために埋め込み用のHTMLを取得したいので、送信ボタンを押してポップアップウィンドウを開きます。

フォームを送信というポップアップウィンドウが開きますので、送信方法の横にある<>という箇所をクリックして、埋め込み用のHTMLを表示させます。

幅、高さはフォームを表示させたいサイトに合わせて適宜修正してください。

送信方法で<>というものを選び、埋め込みようのHTMLを表示させます。この時、フォームを貼り付けたいサイトに合わせて幅と高さの数値を変更しておきます。

コピーという箇所をクリックするとHTMLがコピーできるので、自分のサイトに貼り付ければ作業完了です。

フォームの名前を変更する

フォームの作成が終わったら前の画面に戻り、フォームの名前を変更しておきましょう。

右下にある ︙(縦の三点リーダ)をクリックして、名前を変更します。

あとで見た時にわからなくならないようフォームの名前を修正します。初期値の無題のフォームから好きな名前をつけておきます。

わかりやすい名前をつけておくと後々迷うことがなくなります。サイト名をつけておいてもいいかもしれません。

問い合わせフォームという名前に変えておきました。他のサイトを作ったときにこれだと少しわかりづらいかもしれませんが、今はこのままにしておきます。

実際に問い合わせフォームを使ってみる

実運用の前に、まずはテストをしておきます。

サイトに表示させた問い合わせフォームから、テストメッセージを送信してみましょう。

他の人にメッセージが届くことは無いと思いますが、念の為見られてもいいメッセージにしておきます。

本番に載せる前に検証しておくことが大事です。自分のサイトからテストメッセージを送信してきちんと届くかテストしてみます。

送信がうまくいくと、少し遅れてgmailに通知が届きます

メッセージを送信した直後には反応がないので、少し待ってからgmailを確認します。待つと言っても数秒程度のことです。

メールを開いて概要を表示というボタンをクリックすると、Google フォームに移動して問い合わせの内容を確認することができます。

メールが届いたら中身を確認します。Googleフォームへのリンクがありますので、そこから確認用ページに飛ぶことができます。飛んだ先でメッセージを確認しましょう。

確認できる内容は、送信した内容がそのままですので割愛します。

あとがき

とても簡単に問合せフォームを設置することができました。他にもアンケートなども作ることができるので、機会があったら使ってみたいと思います。

ちなみに、問い合わせフォームを設置した箇所はフッターの部分になります。何かありましたらメッセージをお願いします。

サイトのヘッダー部分に問い合わせ用のリンクを追加しました。表示名はContactになっています。


  1. コンテンツ管理システム [return]