【無料】ホームページ・お問い合わせフォームの作り方

ホームページを作る時に欠かせないのが「お問い合わせフォーム」ですが、予算的に設置するのが難しかったり、自分自身で作成しようとしてもPHP等のプログラム知識が必要なため断念してしまう場合があります。

そんな方のために、今回は無料でお問い合わせフォームが作成できる「Googleフォーム」の使い方を図解入りで解説します。

無料で使える「Googleフォーム」とは？

今回ご紹介する「Googleフォーム」とは、無料でお問い合わせフォームやアンケートフォームなどが作成できるツールです。

通常、お問い合わせフォームなどを設ける場合は、専門的な知識が必要なため初心者の方だと中々作ることができませんが、このGoogleフォームを活用することで、専門的な知識が一切なくても簡単にお問い合わせフォームが作成できます。

※Googleフォームを使用するには、Googleアカウントが必要です。

Googleフォームの使い方

まずは、Googleにログインします。
（アカウントが無い場合は、あらかじめ作成しておきます）

ログイン後、アイコンをクリックし、表示されるメニューから「ドライブ」を選択します。

次に、【１】新規ボタンを押し、「【２】その他→【３】Googleフォーム」をクリックします。

タイトル・説明文を入力する

無題のフォーム画面が表示されるので、まずは「無題のフォーム」と書かれている部分をクリックして選択後、任意のタイトルを入力します。

フォームに関する説明文を入力します。（任意）

質問を入力・追加する

【１】「無題の質問」と書かれている入力欄をクリックして選択し、質問のタイトルを入力します。

【２】質問の形式を選択します。ここでは名前を入力してもらうため「記述式」を選択します。

【３】必須項目の場合はクリックして、スイッチを入れます。

質問を追加する

「＋」のアイコンをクリックすると、質問を追加することができます。

前述の【１】【２】【３】と同じ流れで、他の質問も設定しましょう。
（今回は、メールアドレスとお問い合わせ内容を追加しています）

お問い合わせ内容の形式は、「段落」になっていることを確認してください。

これで簡単にお問い合わせフォームの完成です。

フォームの確認とテスト送信

「目のアイコン」クリックすると、作成したフォームが確認できます。

フォームがちゃんと機能するか、テスト送信も行っておきましょう。

フォームに送信された内容を確認する

フォームに回答があると、Googleフォーム管理画面の「回答」に件数が表示されます。
回答をクリックすると、フォームから送信された内容を確認することができます。

回答先にスプレッドシートを指定する

フォームに送信された内容を、Googleスプレッドシートで管理することもできます。

緑のアイコンをクリックします。

次に、「新しいスプレッドシートを作成」で、スプレッドシートの名前を入力し「作成」をクリックします。

スプレッドシートが表示されます。

ホームページにフォームを設置する方法

Googleフォームをホームページに設置する方法は、主に以下の２種類があります。

Googleフォーム管理画面の上部エリアにある「送信」ボタンをクリックします。

次のステップについては、以降でそれぞれ解説します。

リンクで設置する方法

比較的簡単なのは、「リンクで設置」する方法になると思います。

下図のように、【１】リンクのアイコンをクリックし、【２】リンクを選択後、【３】コピーを押します。

コピーしたリンクを例えば、ホームページのHTMLファイル内に以下のようなHTMLタグと一緒に記述します。

<a href="コピーしたリンクURL">お問い合わせフォームはこちら</a>

これで、Googleフォームに飛ぶためのリンクが貼られます。

HTMLを埋め込む方法

Googleフォーム自体を「iframe」を使って埋め込む方法です。

下図のように、【１】コードのアイコンをクリックし、【２】コードを選択後、【３】コピーを押します。

後は、任意のHTMLファイル等に、コピーしたコードを貼り付けます。

簡易レスポンシブ化

コードをそのまま貼り付けると、スマートフォン上で上手く表示されない場合があります。
そんなときは、「width=”640″」の部分を「width=”100%”」に変更します。

以下は例として変更後のコードを記述しています。

<iframe src="https://docs.google.com/forms/d/e/xxxxxx/viewform?embedded=true" width="100%" height="899" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>

これで、スマートフォンでも見やすいフォームになります。

回答があった場合にメールで通知を送る方法

Googleフォームに回答があった場合に、メールで通知を送る設定方法があります。
通知方法は、主に以下の２通りの方法があります。

Googleフォームからメール通知する設定方法

Googleフォーム管理画面の「回答」をクリックします。

次に「︙（３点部分）」をクリックします。

「新しい回答についてのメール通知を受け取る」を選択します。

これで、回答があった場合にメールで通知を受け取ることができます。

以下のような通知がメールで届きます。

Googleスプレッドシートからメール通知する設定方法

緑のアイコンをクリックします。

スプレッドシートが開かれると思うので、上部メニューの「ツール」から「通知ルール」をクリックします。

次の場合に～：「ユーザーがフォームを送信したとき」
通知方法…：「メール その都度」

にチェックを入れて「保存」ボタンを押します。

通知ルールの設定を確認し、「完了」ボタンをクリックします。

Googleスプレッドシートでの通知は、下図のようにメールが届きます。

フォームのデザインを変更する場合

Googleフォームのデザインを簡易的なものですが、変更することができます。

上部にある「パレットのアイコン」をクリックします。

すると、右側から「テーマオプション」というエリアが表示されるので、ここからテーマの色を選ぶことができます。
（下図では、緑を選択中）

ヘッダーから「画像を選択」をクリックすると、

ヘッダーの選択ができます。
（ヘッダーとは上部エリアの部分です）

下図は、適当にヘッダー画像を選択した場合のイメージになります。

ちょっと見栄えの良いフォームが簡単にできました。

回答内容（控え）を回答者に送る方法

Googleフォームでは、お問い合わせ内容（回答内容）をユーザー（回答者）に控えとして送ることもできます。

上部エリアにある「歯車のアイコン」をクリックします。

設定画面が表示されるので、全般タブになっていることを確認後、「メールアドレスを収集する」にチェックを入れて、「回答のコピーを送信」にチェックし、「保存」をクリックします。

保存をクリックすると、下図のように「メールアドレス」の質問エリアが最上部に追加されます。

設定後に、お問い合わせフォームを確認すると、下図のように「回答のコピーを自分宛に送信する」という表示が確認できます。

これにチェックを入れた回答者は、控えを受け取ることができます。

下図が回答コピーの参考メールです。
このような形で控えメールを受け取ることができます。

まとめ

今回は「【無料】ホームページ・お問い合わせフォームの作り方」ということで、Googleフォームをご紹介させて頂きました。

Googleアカウントを持っているだけで、気軽に使えますし、簡単なお問い合わせフォームなら活用できる便利なツールかと思います。

また、フォーム自体もスマホでも見やすいように基本「レスポンシブデザイン」になっているので、回答者がパソコンでもスマホでもストレスなく使うことができます。