更新日:
Googleフォームをカスタマイズして無料でお問合せフォームを作成しよう
この記事では、「Googleフォーム」を活用しながら、無料で使える簡単な問い合わせフォームを作成し、HTMLやCSSでデザインをカスタマイズする方法を詳しく解説していきます。この記事を読めば、以下のことができるようになります。
- Googleフォームの基本的な使い方を理解
- HTML/CSSを活用したオリジナルデザインの実現
- サンクスページの設定でユーザー体験を向上
- 無料でお問合せフォームを作成
対象読者は、ウェブ制作初心者や費用をかけずにフォームを作成したい方、そして既存のGoogleフォームのデザインに満足できない方です。本記事を通じて、誰でも簡単にカスタマイズ可能なフォームの作成スキルを身につけましょう！
お問合せフォームとは
WEBサイトにおけるお問合せフォームは、ビジネスや個人活動を行う上で欠かせないものです。お客様や読者とのコミュニケーションを円滑にし、意見や質問、リクエストを受け取るための重要な窓口となります。しかし、フォームを自作するにはPHPやJavaScriptといった知識が必要になるため、初心者にとってはハードルが高いと感じられることが少なくありません。
プログラミングができない方はWordPressなどのCMSのプラグインを使う方法もありますが、サーバー代がかかってしまうなどのデメリットがあります。そのため、無料でお問合せフォームを提供してくれるサービスを使うといった方法もありますが、無料プランだと一ヶ月に受け取れる件数に制限があったりするので使用するのに躊躇される方もいらっしゃるかと思います。
そこで登場するのが「Googleフォーム」です。Googleフォームは、Googleが提供する無料のフォーム作成ツールで、初心者でも簡単にフォームを作成できます。
Googleフォームとは
Googleフォームは以下のような理由から、多くのユーザーに選ばれています。
- 完全無料で利用可能
- Googleアカウントがあればすぐに利用可能
- ドラッグ＆ドロップで直感的にフォーム作成が可能
- 自動的に集計された結果をスプレッドシートで確認可能
ただし、そのまま利用すると、デザインの自由度が低く、ウェブサイトのデザインと調和しないことがあります。特に、企業サイトに埋め込む場合、統一感のあるデザインが求められるため、以下の画像のようにGoogleフォームの標準デザインでは「味気ない」と感じるユーザーもいるかもしれません。
また、Googleフォームを利用していることが外部からすぐにわかるため、企業のブランドイメージが損なわれる可能性も懸念されます。
本記事では、HTMLとCSSを用いてGoogleフォームのデザインを自由にカスタマイズする方法を詳しく解説します。以下の画像は、HTMLとCSSを使ってGoogleフォームのデザインをカスタマイズした例です。
HTMLとCSSを活用したカスタマイズにより、Googleフォームを活用していても、ウェブサイトのデザインに調和し、違和感のないフォームを作成できます。
Googleフォームの基本的な使い方
Googleフォームを作成するにはGoogleアカウントにログインし、ユーザーアイコン左の「Google アプリ」をクリックすると表示されるメニューから「フォーム」を選択します。
次に、「新しいフォームを作成」から「空白のフォーム」を選択します。
するとフォームの作成画面になります。
「無題のフォーム」を選択するとフォームの名前を入力することができます。「無題の質問」には入力する項目名を記述します。「必須」の部分にチェックを入れると入力必須の項目にすることができます。
「ラジオボタン」が表示されている箇所をクリックするとフォームの型を選択することができます。
新たな項目を追加するには右のメニューから「+」をクリックします。
今回は、「お名前」、「メールアドレス」を「記述式（短文）」で、お問合せ内容を「段落」で作成しました。
作成したフォームは右上の「プレビュー」アイコンをクリックすると確認することができます。試しに送信してみましょう。
フォームの回答は「回答」をクリックすると確認ができます。
オリジナルフォームを作成しよう
Googleフォームで作成したお問い合わせフォームをカスタマイズし、ウェブサイトに独自の問い合わせフォームとして実装していきます。
必要な情報を抽出しよう
まずはGoogleフォームから必要な情報を抽出する必要があります。抽出するものは以下の2つです。
- GoogleフォームのURL
- 各入力フォームのname属性の値
GoogleフォームのURL
まずは、作成したGoogleフォームのURLを取得します。フォームの「プレビュー」をクリックして、作成したGoogleフォームを表示させます。次に、ブラウザの開発者ツールを開きます。右クリックをして「検証」を選ぶか、またはキーボードショートカット（WindowsはCtrl+Shift+I、Macはcommand+option+I）を使う方法が一般的です。
開発者ツールを開き、表示されたソースコードにカーソルを当てた状態でcommandキーを押しながらFキーを押して検索ウィンドウを表示させます。<formというワードで検索を行うと以下のコードが確認できます。
このformタグのaction属性の値がフォームのURLになるのでコピーして保存しておきます。
この例であればhttps://docs.google.com/forms/u/0/d/e/1FAIpQLSc6m6-Bg3vYFAfO2Stuuco2WWmDmc4vyow7NS09R-q_I02YmQ/formResponseになります。
各入力フォームのname属性の値
次に各入力フォームのname属性の値を取得します。同じように検索ウィンドウにjsmodelと入力します。検索ウィンドウ右の下矢印をクリックして2番目のものを表示させます。
左のビューで取得するフォームにフォーカスが当たっているか確認をし、下画像の1793592547の部分をコピーして保存しておきます。最初の1366930475ではないので間違えないようにしましょう。
同じようにして残りの2つのname属性の値も取得します。
これで準備は完了です。
問い合わせフォームに反映させよう
次に自作のHTMLにGoogleフォームの情報を反映させます。
今回は以下のようなシンプルなフォームを使って解説していきます。
以下がソースコードです。今回は全て入力必須に設定したので、全てのinputタグにrequiredを定義し、ブラウザでバリデーションを行うようにしています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-form">
<h2>お問い合わせ</h2>
<form action="/submit" method="post">
<label for="name">お名前 <span>*</span></label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス <span>*</span></label>
<input type="email" id="email" name="email" required>
<label for="message">お問合せ内容 <span>*</span></label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">送信</button>
</form>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.contact-form {
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 600px;
margin: 0 20px;
}
.contact-form h2 {
margin-bottom: 15px;
}
.contact-form label {
display: block;
margin-bottom: 5px;
}
.contact-form label span {
color: red;
}
.contact-form input, .contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.contact-form button {
width: 100%;
padding: 10px;
background: #007BFF;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
.contact-form button:hover {
background: #0056b3;
}
まずはformタグのaction属性の値を保存しておいたものに差し替えます。action属性はフォームの送信先URLを指定するものなので、ここをGoogleフォームのアドレスにすることで、Googleフォームに送信をすることができます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-form">
<h2>お問い合わせ</h2>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc6m6-Bg3vYFAfO2Stuuco2WWmDmc4vyow7NS09R-q_I02YmQ/formResponse" method="post">
<label for="name">お名前 <span>*</span></label>
<input type="text" id="name" name="name" required>
<label for="email">メールアドレス <span>*</span></label>
<input type="email" id="email" name="email" required>
<label for="message">お問合せ内容 <span>*</span></label>
<textarea id="message" name="message" rows="4" required></textarea>
<button type="submit">送信</button>
</form>
</div>
</body>
</html>
次に各inputタグのname属性も同じようにして差し替えます。この時、取得した数字の前に「entry.」をつけるのがポイントです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>お問い合わせフォーム</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contact-form">
<h2>お問い合わせ</h2>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc6m6-Bg3vYFAfO2Stuuco2WWmDmc4vyow7NS09R-q_I02YmQ/formResponse" method="post">
<label for="name">お名前 <span>*</span></label>
<input type="text" id="name" name="entry.1793592547" required>
<label for="email">メールアドレス <span>*</span></label>
<input type="email" id="email" name="entry.1247307421" required>
<label for="message">お問合せ内容 <span>*</span></label>
<textarea id="message" name="entry.861021951" rows="4" required></textarea>
<button type="submit">送信</button>
</form>
</div>
</body>
</html>
これで完成です。
実際にフォームを送信して、回答が届くか確認してみましょう。
Googleフォームの作成画面の「回答」を確認すると、以下のようにしっかりと送信されていることがわかります。
うまく送れない場合は、name属性の数字が合っているか、もしくはentry.を数字の前につけているか確認してみましょう。
送信後のページを表示させよう
送信が完了すると以下のようにGoogleフォームのお問合せ完了ページが表示されてしまいます。
これではせっかくお問合せフォームを自作したのに、Googleフォームを使っていることがわかってしまいます。ですので、このページも自作し、フォーム送信後はこのページを表示させるよう変更します。
まずはフォームが送信された時に、Googleフォームのページを表示させないようformタグの部分を以下のように修正します。
1
2
3
4
5
6
7
8
<!-- 省略〜 -->
<form
action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc6m6-Bg3vYFAfO2Stuuco2WWmDmc4vyow7NS09R-q_I02YmQ/formResponse"
method="post"
target="thanks"
onsubmit="submitted=true"
>
<!-- 省略〜 -->
次にJavaScriptをコードに追加します。HTMLのbodyタグの最後に以下のコードを記述します。今回はiframeを使い、thanks.htmlというファイルを表示させるようにします。ファイル名はご自身で作成したファイル名を記述しましょう。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 省略〜 -->
<button type="submit">送信</button>
</form>
</div>
<script type="text/javascript">
let submitted = false;
</script>
<iframe
name="thanks"
id="thanks"
style="display: none"
onload="if(submitted){window.location='thanks.html';}"
></iframe>
</body>
</html>
これでフォーム送信後に作成したthanks.htmlが表示されるようになります。実際に送信し、確認をしてみましょう。
これで完成です。
無料で公開しよう
このようにして、Googleフォームを利用することで、無料でオリジナルのお問い合わせフォームを作成することができました。ここまで無料で作成したので、フォームを公開して利用する際も無料で行いたいですよね。通常であればレンタルサーバーを利用してサイトを公開しますが、GitHub Pagesというサービスを活用すれば、静的なサイトであれば無料で公開することが可能です。
興味のある方は、ぜひこちらの記事を参考にして実装してみてください。
まとめ
このように、Googleフォームを活用すれば、無料で簡単に、オリジナルお問い合わせフォームを作成できます。これまでフォーム作成に悩んでいた方も、この記事を読めば、初心者でも簡単にお問い合わせフォームを実装することができます。
ぜひ、あなたのウェブサイトに合ったお問い合わせフォームを作成し、ユーザーとのコミュニケーションを円滑に進めていきましょう。
この記事のまとめ
- Googleフォームは無料で使えるフォームです。
- 必要な情報を抽出することで、独自に作成したスタイルで使えるようになります。
