自社のアンケートや問い合わせなどにGoogleフォームを使用することは多いと思います。Googleフォームを使用する中で、「もっと良いデザインにしたい」「機能を追加して使いやすくしたい」と感じる人も多いでしょう。
HTMLやCSSの知識があれば、Googleフォームでもデザインを自由にカスタマイズできますが、知識が無くても一部デザインのカスタマイズや機能の追加ができます。
そこで本記事では、PCが苦手、Googleフォームを初めて作るという人に対して、Googleフォームを簡単にカスタマイズする方法を解説します。プログラミング知識がなくても、デザイン性の高いフォームを作成できるツールも紹介するので参考にしてください。
目次
Googleフォームをカスタマイズする方法2つ
Googleフォームをカスタマイズする方法は2つあります。「管理画面上で変更する」方法と、「プログラム言語を使ってカスタマイズする」方法です。
それぞれの方法について解説します。
プログラミングなしで管理画面上で変更する
プログラミングの知識がなくても、Googleフォームの管理画面からデザインの変更や機能の追加ができます。
たとえばフォーム全体のカラーやフォントなどの変更が可能で、「メールの自動返信」「Googleスプレッドシートとの連携」といった機能の追加も可能です。クリック操作やコピー&ペーストの操作だけで完結するため、簡単にカスタマイズできるのがメリットです。
専門的な知識は不要ですが、カスタマイズできる範囲は限られてしまいますので「とにかく手軽にカスタマイズしたい」という方におすすめできます。具体的なカスタマイズ手順は、次の章で詳しく解説します。
プログラム言語でカスタマイズする
プログラム言語を使って、Googleフォームをカスタマイズする方法もあります。
HTMLやCSSを利用することで、フォーム全体のデザインや問い合わせ完了ページの変更など、管理画面上からのカスタマイズよりも細かい変更が可能です。
このようなプログラム言語に慣れている人でなくては難しかったりするので、「パソコンが苦手」「プログラミングの知識がない」という方にはおすすめできません。
Googleフォームを使い始めるという方はもちろん、Googleフォームを利用中で使い方が分からないという方は、こちらの記事でGoogleフォームの使い方について徹底解説しています。
Googleフォームをプログラミングなしでカスタマイズする10の手法
プログラミングの知識がなくても、Googleフォームをカスタマイズして理想のフォームを作る方法を10個紹介します。
1.フォントの変更
Googleフォームの管理画面から、フォーム全体のフォントを変更できます。
フォントを変更するためには、まずGoogleフォーム作成画面の右上にある、パレットのようなアイコン（テーマをカスタマイズ）をクリックしてください。
テーマオプションが開きますので、画面右下に表示されている「フォントスタイル」のプルダウンから任意のフォントを選択すれば、フォントの変更は完了です。
掲載サイト全体の統一感を出すために、企業やサイトのイメージに合ったフォントを選びましょう。
2.テーマ画像の変更
Googleフォームのテーマ画像変更する際も、画面右上にあるパレットのようなアイコンをクリックしてテーマオプションを開きます。
次にヘッダーの「画像を選択」をクリックし、「ヘッダーの選択」画面を表示します。
Googleフォーム側であらかじめ用意されているテーマ画像か、自分でアップロードした画像を選択し「挿入」もしくは「完了」をクリックしてください。これで選択したテーマ画像が、Googleフォーム全ページのトップに表示されます。
3.Googleフォーム全体のカラー変更
Googleフォーム全体のカラーを変更する際も、パレットのようなアイコンをクリックしてテーマオプションを開きます。
「テーマの色」から任意のカラーを選択すると、フォームの背景や各セクションに色が反映されます。
あらかじめ用意されているカラー以外にも、「テーマの色」に表示されている「+」ボタンをクリックすることで、自分でカスタムしたカラーに変更することが可能です。
4.質問・回答への画像挿入（動画の挿入も可能）
Googleフォームでは、質問や回答に画像を挿入することも可能です。
質問に画像を挿入するには、質問の右に表示されている「画像を追加」アイコンを選択してください。「画像の挿入」画面が開きますので、画像をアップロードするか、自分のGoogleドライブに保存されている画像を選択して「挿入」をクリックます。
これで質問の下に、選択した画像が挿入されます。
また、回答へ画像を挿入する際も同じように「画像を追加」アイコンをクリックして、差し込みたい画像を選択してください。
さらにGoogleフォーム内に動画を挿入したい場合は、セクションの右に表示されている、アイコンが縦並びになっているタスクバーから「動画を追加」を選択します。「動画を選択」画面が開きますので、挿入したい動画を選び「選択」をクリックしてください。
5.フォームの進捗状況表示
入力項目が多く、長めのフォームを作成しているなら、以下画像のような進捗状況を表示するバーを設置するとユーザーに親切です。
進捗状況を表示するには、まずフォーム作成画面の右上にある歯車のアイコンをクリックし、設定画面を開いてください。
次に「プレゼンテーション」タブを選択し「進行状況バーを表示」にチェックを入れます。画面右下の「保存」をクリックすると、Googleフォームの下部に進捗状況のバーが表示されるようになります。
6.質問内容の条件分岐
Googleフォームでは、質問の回答内容に応じて別の質問に自動で誘導できる「条件分岐」が可能です。
条件分岐を設定するためには、まず「ラジオボタン」または「プルダウン」で質問を作成します。
次に質問の右に表示されている、アイコンが縦並びになっているメニューバーから「セクションを追加」を選択します。セクションが新しく追加されますので、タイトルや質問内容を編集しましょう。
新しいセクションを編集したら最初に作成したセクションに戻り、右下の点が縦に3つ並んでいるボタンをクリックし、「回答に応じてセクションに移動」を選択します。
それぞれの質問にプルダウンが表示されますので、誘導したいセクションを選択してください。これで条件分岐の設定が完了し、ユーザーの回答内容に応じて次の質問が表示されるようになります。
7.メールの自動返信
Googleフォームでは、回答者に対して自動でメールを送る「自動返信メール」を設定することもできます。しかし、標準では自動返信メールの機能が実装されていないため、アプリに機能を追加するプログラムである「アドオン」を使用する必要があります。
以下記事にて「アドオン」を使った自動返信メールの設定方法を解説しますので、ぜひ参考にしてください。
8.Googleスプレッドシートとの連携
GoogleフォームとGoogleスプレッドシートを連携することで、回答内容の情報をスプレッドシートに集計することができます。回答があった日時や、質問に対する回答内容が一覧で確認できるため、問い合わせ管理や顧客管理を行う際に役立つでしょう。
Googleスプレッドシートと連携するためには、まず「回答」タブをクリックします。次に緑色のGoogleスプレッドシートアイコンをクリックし、「新規」と「既存」2つの中から、連携したいスプレッドシートを選択してください。
以上で、Googleフォームでの回答内容がスプレッドシートに連携されるようになります。
9.Googleフォームに回答があった際のメール通知
Googleフォームに回答があった際に、フォーム作成者はメール通知を受け取ることができます。メール通知を設定することで顧客からのアクションに素早く気づけるため、対応スピードの向上や、クレーム対応のクオリティアップができるでしょう。
フォーム作成者にメール通知が届くよう設定するには、「回答」タブを選択します。次にGoogleスプレッドシートアイコンの右にある、点が縦に3つ並んでいるボタンをクリックしてください。
表示されたメニューの中から「新しい回答についてのメール通知を受け取る」を選択すれば、フォーム作成者のアカウントに、通知メールが届くようになります。
また以下の記事では、作成者以外のフォーム運用メンバーにもメール通知を設定する方法を解説していますので、ぜひ参考にしてください。
10.Googleフォームを自社サイトに埋め込むことも可能
プログラミングの知識がなくても、クリックとコピー&ペーストの操作だけで、作成したGoogleフォームを自社サイトに埋め込むことが可能です。
Googleフォームを埋め込むには、画面右上に表示されている「送信」ボタンをクリックしてください。
「フォームを送信」画面が表示されたら、「< >」のタブを選択し、右下の「コピー」をクリックします。これでフォームを埋め込むためのコードがコピーされますので、自社サイトのHTMLファイル内に貼り付けてください。
補足として、「フォームを送信」画面にて「幅」や「高さ」を調整することで、表示されるGoogleフォームの大きさを変更できます。
Googleフォームを理想のデザインにカスタマイズするには？
Googleフォームを理想のデザインにカスタマイズする方法は、「自分でHTMLやCSSを編集する」方法と「プログラミングの知識がある人に依頼する」方法の2つです。
それぞれどのような方法なのかを解説します。
HTMLやCSSを編集する
HTMLやCSSを編集する方法は、ある程度のプログラミング知識を持っている人向けの方法です。カスタマイズの自由度が高く、細かいデザインの変更や、回答完了・問い合わせ完了ページのカスタマイズなどができます。
HTML/CSSを編集する際は、具体的に以下のような作業を行います。
- HTML/CSSを使って独自のフォームを作成する
- Googleフォームを作成する
- 作成したGoogleフォームのHTMLソースをもとに、自作したフォームのHTMLを編集する
- 正しく動作するかをテストする
専門知識が必要なため難易度は高いものの、外注するためのコストがかからない点がメリットです。
プログラミングの知識がある人に依頼する
Googleフォームを理想のデザインにカスタマイズしたいと考えつつも「プログラミングの知識がない」という場合は、知識がある人に依頼するのも一つの手段です。
クラウドソーシングやココナラなどのサービスを通じて依頼すれば、自分でプログラミングを行う必要がありません。カスタマイズする範囲にもよりますが、クラウドソーシングで依頼する場合の費用目安は5,000円ほどです。
外注するためには費用がかかるため、予算に余裕がある場合におすすめできる方法です。
Googleフォームをカスタマイズするときの注意点
自分でGoogleフォームをカスタマイズすることは可能ですが、ユーザーの離脱を防ぎつつ回答率を上げるためには、いくつか注意すべき点があります。
Googleフォームをカスタマイズする際は、以下の3点に注意してください。
入力項目は少なくする
Googleフォームをカスタマイズする際は、入力項目はできる限り少なくすることが重要です。入力項目が多いとユーザーに負担がかかってしまい、「入力するのが面倒」という理由で離脱していまう可能性があります。
実際に株式会社WACULが行った「B2Bサイトのフォームにおけるベストプラクティス研究」という調査によると、入力項目を1つ減らすごとにフォーム通過率が2%ほど向上したという結果が出ています。
どうしても入力項目が増えてしまう場合は、カスタマイズをする前に項目の必要性を一度見直すと良いでしょう。
参考：B2Bサイトのフォームにおけるベストプラクティス研究 | WACULテクノロジー＆マーケティングラボ
掲載サイトとデザインテイストは合わせる
Googleフォームのデザインを変更する際は、掲載サイトとのデザインテイストは合わせるようにしましょう。サイト内のデザインが統一されていないと、ユーザーが「外部のサイトに誘導されたのでは？」と勘違いしてしまい、不信感を抱く可能性があります。
ユーザーに不信感を与えてしまうと、フォームから離脱してしまうだけではなく、会社全体の信用が低下してしまうおそれがあります。
そのため掲載サイトと大きく異なるデザインや、ひと目で「Googleフォームだ」とわかるようなデザインは避けたほうが良いでしょう。
Googleフォームの仕様が変更される可能性も
手間をかけてGoogleフォームをカスタマイズしても、今後予告なく仕様が変更される可能性があります。
仕様が変更されると画面やソースコードの構造も変わるため、「どのボタンからカスタマイズしたらいいかわからない」「編集していたタグが見つからない」となってしまうリスクがありますので注意してください。
また、仕様が変わるたびに新しいカスタマイズ方法を調べて対応しなければならないので、手間もかかってしまうでしょう。
「formrun（フォームラン）」なら手軽にフォームをカスタマイズできる
Googleフォームのデザインを自由にカスタマイズすることは可能ですが、HTMLやCSSの知識が必要です。またプログラミングの知識がない場合も、Googleフォームの管理画面からカスタマイズすることはできますが、変更できる範囲は限られてしまいます。
手軽にカスタマイズできるフォームを作成したいなら、フォーム作成ツール「formrun（フォームラン）」がおすすめです。formrunなら、専門知識がなくてもデザイン性の高いフォームを作成できます。
デザインのテンプレートが豊富に用意されており、クリック操作だけでフォーム作成・デザインのカスタマイズができるため、手間がかかりません。Googleフォームと同じく、formrunで作成したフォームは簡単に自社サイトへ埋め込めるので、すぐに運用を始められるでしょう。
formrunやフォーム作成や顧客管理に関する情報を発信しております。
EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。
