Googleフォームを編集画面からカスタマイズする方法とは？注意点も紹介！

更新日: 2021年08月16日

フォーム作成

Googleフォームは無料で簡単にフォームを作成できるので、自社サイトに利用している人も多いと思います。しかし、Googleフォームはデザインに制限があるため、ブランディングやオリジナリティを重視したい企業は、デザインをカスタマイズする必要があります。
そこで本記事では、自社サイトのデザインテイストを合わせたフォームを設置したい企業に向けて、Googleフォームをカスタマイズする方法を解説します。

HTMLやCSSなどのプログラミングなしで編集画面からGoogleフォームをカスタマイズする方法を紹介しますので、プログラミングの知識がない場合は必見です。

さらに、カスタマイズする際の注意点やおすすめのフォーム作成ツールも紹介するので、ぜひ参考にしてください。

Googleフォームを作る方法は、以下で解説しているので参考にしてください。

Google（グーグル）フォームは簡単に作れる！使い方を徹底解説

今回は、さらに使いやすくなったGoogleフォームの使用方法と、アンケートを作成する際に最低限おさえておきたいポイント3つを紹介します。一度操作方法を覚えてしまえばすぐに使いこなせるようになりますので、本記事を参考にフォームの作成方法をマスターしてみてはいかがでしょうか。

【ノーコードで編集可】専門知識がなしで手軽にカスタマイズ！デザイン性も高いフォーム作成ツール「formrun」はこちら！

Webサイトへの埋め込みや回答の自動集計、住所の自動入力にも対応！無料でも利用できるのでまずはお試しください。

Googleフォームをカスタマイズする目的とは
Googleフォームをカスタマイズする方法
GoogleフォームをHTMLやCSSでカスタマイズする方法
Googleフォームをカスタマイズする際の注意点
手軽にカスタマイズできるフォーム作成ツールなら「formrun」

Googleフォームをカスタマイズする目的とは

Googleフォームをカスタマイズする目的は、フォームを自社サイトのデザインと合わせることやユーザーの利便性を高めることです。

Googleフォームで作成できるフォームはデザインの幅が限られており、ひと目でGoogleフォームとわかってしまいます。フォームとサイトのデザインが合っていないと、ユーザーに違和感を与えてしまい離脱を招いてしまう可能性があります。カスタマイズすることで、サイトのデザインと合わせるのが重要なのです。

また、フォームが使いづらいとユーザーは離脱してしまいます。カスタマイズによってユーザーが見やすく使いやすいフォームにしなくてはなりません。

以下ではGoogleフォームをカスタマイズする方法を解説していきます。

Googleフォームをカスタマイズする方法

Googleフォームをカスタマイズする方法は、主に以下の2種類に分けられます。

編集画面から変更する
HTMLやCSSを利用する

それぞれの方法を詳しく確認していきましょう。

編集画面からカスタマイズする

プログラミングの知識がない場合でも、Googleフォームの編集画面からデザインの一部を変更できます。例えば、フォントや全体のカラー変更、画像の挿入などのカスタマイズが可能です。

さらに、アドオン（拡張機能）を追加することでメールの自動返信や回答期限・先着優先などの設定もできます。

編集画面上でのマウス操作やドラッグ＆ドロップ操作だけでカスタマイズできるので、特別な知識が必要ありません。

しかし、編集画面から変更できるデザインには制限があり、理想に適ったフォームを作成できない可能性があるため、注意が必要です。

HTMLやCSSでカスタマイズする

行えます。各項目のスタイルや幅や装飾、送信完了画面のカスタマイズなどが可能です。

編集画面上からデザインを調整する場合は、変更できる範囲に制限がありますが、プログラミングでカスタマイズすれば、デザインの自由度が高いフォームを作成できます。

しかし、HTMLやCSSでカスタマイズする場合は時間や手間がかかるだけではなく、専門知識を有する人がいないと実行することができません。

Googleフォームを編集画面からカスタマイズする方法

専門知識がない場合、Googleフォームのデザインはどのように変更できるのでしょうか。
Googleフォームを編集画面からカスタマイズする方法を紹介します。

1.テーマオプションを設定する

Googleフォームの編集画面は「質問」と「回答」のタブに分けられますが、基本的にフォームのデザインや機能の設定は「質問」タブから行います。「回答」タブでは、フォームの回答結果が表示され、データのダウンロードが行えます。

質問タブのページ右上にあるパレットのアイコンをクリックすると、テーマオプションのメニューが表示されます。

テーマオプションでカスタマイズできる項目は以下の通りです。

ヘッダー画像
テーマの色（フォーム全体の色）
背景色
フォントスタイル

それぞれのカスタマイズ方法を、以下で解説します。

ヘッダー画像

ヘッダー画像とは、フォームのコンテンツよりも上部に表示される画像のことです。サイトのイメージを強調する役割があるので、企業イメージに合った画像を設置すると良いでしょう。

「画像を選択」をクリックすると、ポップアップが表示されます。「テーマ」タブでは、仕事、学校、イラスト、誕生日、ウェディングなどのシーン別にイメージ画像があらかじめ用意されています。

「アップロード」や「写真」のタブからは、Googleアカウントに保存されている画像を使用したり、好きな画像をアップロードしてカスタマイズすることも可能です。自社のロゴを設置するのもよいでしょう。

テーマの色・背景色

「テーマの色」と「背景色」からは、フォームのカラーを変更できます。

テーマの色を変更すると、ページの全体カラーが変更されます。カラーは元から用意されている色以外にも、「+」ボタンからお好みの色を追加することも可能です。また、背景色ではカラーの濃淡が選択できます。

コーポレートカラーなど、企業のイメージに合わせたカラーに調整しましょう。

フォントスタイル

フォームのフォントを変更したい場合は、「フォントスタイル」を設定してください。ここでカスタマイズしたフォントスタイルがページのタイトルや、フォームのテキストに反映されます。

フォントスタイルは以下の4種類から選択可能です。

ベーシック
デコラティブ
フォーマル
プレイフル

自社サイトにフォームを埋め込む場合は、ページのテキストと合わせたフォントスタイルを選びましょう。

2.質問項目を設定する

質問タブを開いて、質問項目の詳細をカスタマイズしていきましょう。主に以下の設定を行っていきます。

回答形式の選択
テキストの入力
画像や動画の追加
必須設定

それぞれのカスタマイズ方法について、以下で紹介していきます。

回答形式の選択

まず、フォームの回答形式を選択していきますが、質問に合わせた最適な形式を選ぶことが大切です。選択できる回答形式は以下の通りです。

記述式（短文回答）
段落（長文回答）
ラジオボタン
チェックボックス
プルダウン
ファイルのアップロード
均等目盛
選択式（グリッド）
チェックボックス（グリッド）
日付
時刻

例えば、問い合わせ内容や文章を記載してもらう場合には「段落」を使い、複数の選択肢から選ぶような質問には、「ラジオボタン」や「チェックボックス」を使用すると良いでしょう。

また、「ファイルのアップロード」を設置することで、回答者に画像を添付してもらうことが可能となります。しかしアップロードしてもらうには回答者がGoogleアカウントにログインする必要があるので、Googleユーザーのみが対象になることを覚えておきましょう。

テキストの入力

続いて、質問や選択肢を設定します。「無題の質問」や「オプション1」と表示されている部分をクリックし、質問や選択肢を入力しましょう。
質問や選択肢を入力した後は、誤字脱字がないか再度確認することが大切です。ユーザーが読んで分かりやすい文章になっているか、趣旨が伝わりやすいかなど、回答者の視点に立って確認するようにしてください。

画像や動画の追加

質問や選択肢、回答には画像を利用できます。画像を追加するカスタマイズでは、質問と回答のそれぞれ右に表示されているアイコンから追加します。質問や選択肢をよりわかりやすくするために利用するのがよいでしょう。

動画を追加したい場合は、セクションの右側あるタスクバーから「動画を追加」をクリックします。

「動画を選択」画面が表示されるため、YouTubeから検索するか、URLから動画を検索し追加しましょう。

必須設定

ユーザーが入力する際の負担を減らすため、必須項目の設定を行いましょう。必須の設定をするためには、セクションの右下に表示されている「必須」のスイッチをクリックします。

クリックすると色が切り替わるので、フォームのテーマカラーに近い色に切り替わっていれば、必須の設定は完了です。

3.詳細設定を行う

編集画面の右上にある歯車アイコンをクリックすると、以下の詳細項目をカスタマイズできます。これらはメールアドレスの収集や回答者の操作、進捗状況の表示、テストなどについてカスタマイズする部分です。

全般
プレゼンテーション
テスト

それぞれの設定項目について確認していきましょう。

全般

「全般」では、回答に関する詳細設定が可能です。

メールアドレスを収集する（回答のコピーを送信する）
回答を1回に制限する
回答者が行える操作

回答者のメールアドレスを集めたい場合は、「メールアドレスを収集する」にチェックを入れましょう。「回答のコピーを送信」にチェックを入れると、回答者に対して回答のコピーを送信するよう設定できます。

また、回答者がGoogleにログインする必要はありますが、1人につきの回答を1回までに制限することも可能です。必要に応じて、回答者が行える操作の設定も行いましょう。

プレゼンテーション

「プレゼンテーション」からは、フォームの表示に関する設定ができます。

「進行状況バーの表示」にチェックを入れると、質問項目の下に進捗が確認できるバーが表示されるようになります。

「質問の順序をシャッフルする」にチェックを入れた場合は、回答者がフォームを開くたびに質問の順番をシャッフルするようにカスタマイズすることが可能です。

「別の回答を送信するためのリンクを表示」にチェックすると、フォームの入力完了画面に、「別の回答を送信」というリンクが表示されるようになります。1度フォーム入力を完了したユーザーでも、再度新しくフォームを入力できるようになります。

テスト

「テスト」は、テスト形式のフォームを作成する場合に使用します。「テストにする」のスイッチをクリックするとテスト形式のフォームに切り替わるので、回答内容に応じて採点を行う必要がある場合などに利用しましょう。

4.アドオンを利用

アドオンとは拡張機能のことを指し、インストールすることでGoogleフォームに機能を追加できます。

例えば、自動返信メールや回答期限の設定、先着優先などの設定ができるアドオンが用意されているため、必要な機能をカスタマイズしましょう。

アドオンを追加するためには、まず「送信」ボタンの右に表示されている「その他」ボタン（点が縦に3つ並んでいるボタン）をクリックします。

表示されたメニューの中から「アドオン」をクリックすれば、ポップアップでアドオンの検索ページが表示されるので、追加したいものを選んでください。

GoogleフォームをHTMLやCSSでカスタマイズする方法

Googleフォームを編集画面からカスタマイズする場合は、変更できる範囲が限られているため、どうしてもフォームのデザインカスタマイズに限界があります。

フォームのデザインを自由にカスタマイズするためには、HTMLやCSSでカスタマイズする必要があります。ここでは、GoogleフォームをHTMLやCSSでカスタマイズする方法を解説します。

HTMLやCSSでのカスタマイズ方法

社内にエンジニアやプログラミングの知識がある人がいる場合は、HTMLやCSSでGoogleフォームをカスタマイズすることも可能です。細かいデザインの変更や回答完了ページのカスタマイズができるなど、自由度が高い方法です。

コーディングによってフォームをカスタマイズする場合は、以下のような流れとなります。

独自のフォーム作成
Googleフォーム作成
Googleフォームとの紐づけ
テスト

まず、HTMLやCSSで実現したいフォームを作成します。そのあとに、Googleフォームで同じ項目のフォームを作成します。

作成したGoogleフォームのHTMLソースを開きます。そのあと、各項目のnameを取得し、自分で作ったフォームに反映します。それによって、Googleフォームと自分で作ったフォームを紐づけることができます。

この方法はカスタマイズの自由度が高い分、難易度も高いため、デザインやユーザビリティに優れたフォームを作成するには、十分な専門知識が必要です。

外注する

社内にプログラミング知識を持つ人がいない場合は、アウトソーシングすることもできます。クラウドサービス上でフォーム作成の案件を掲載するか、Web制作会社に依頼するのが一般的です。

しかし、HTMLやCSSを使って自社でカスタマイズする方法よりもコストがかかります。また、外注先を探してやり取りを行い、フォームを納品してもらうまでには時間がかかることもあります。

そのためフォームに予算をかけられない場合や、すぐにフォームを作成したい場合には、アウトソーシングは向かないかもしれません。そのような方は、フォーム作成ツールを利用するのがおすすめです。

Googleフォームをカスタマイズする際の注意点

Googleフォームをカスタマイズする際には、以下4つのポイントに注意しましょう。

スパム対策を行う

問い合わせフォームからスパムメールが大量に送信される可能性があるため、スパム対策を行うことが重要です。スパム対策を行わないと、悪意のあるメールを開いたりリンクをクリックすることで、ウイルスに感染する可能性があります。

スパム対策を行うには、Googleが提供する「reCAPTCHA（リキャプチャ）」も導入すると良いでしょう。

reCAPTCHAとは、フォーム内に「私はロボットではありません」というチェックボックスを表示させる仕組みで、botによる機械的なスパムメールの送信を防ぐことができます。

Googleスプレッドシートと連携

Googleフォームをカスタマイズする際は、Googleスプレッドシートと連携させておくと良いです。連携させることでフォームからの回答内容をスプレッドシートに自動で集計できるため、回答の分析や集計を行う際に便利です。

Googleフォームとスプレッドシートを連携させるためには、まず編集画面の「回答」タブを選択します。画面の右上に表示されているGoogleスプレッドシートアイコンをクリックすれば連携できます。新規スプレッドシートか、既存スプレッドシートかを選択できるので、連携先のシートを選択しましょう。

EFO（入力フォーム最適化）を意識する

Googleフォームをカスタマイズする際は、EFO（入力フォーム最適化）を意識しましょう。

EFOとは、ユーザビリティに優れたフォームデザインを実現するための施策です。項目を最小限にしたり、入力エラーを表示させたり、入力しやすいレイアウトにするなど、EFOを意識したフォームを作成することで、ユーザーの離脱率を防ぐことができます。

また、自社サイトに馴染むようなフォームデザインを心がけることも大切です。自社サイトに合わせたデザインにすることでユーザーは安心して入力できるため離脱率を下げられる可能性があります。

郵便番号自動入力に対応していない

Googleフォームは住所の自動入力には対応していないため注意が必要です。

郵便番号による住所自動入力機能がないと、ユーザーはすべての住所を手動で入力しなければなりません。住所を入力する手間があるとユーザーに負担がかかるため、離脱する可能性が高まります。
。

Googleフォームで郵便番号自動入力を設置するためには、コーディングによるカスタマイズが必要です。インターネットで配布されているスクリプトを利用すれば簡単に実装できる場合もありますが、単純に配布されているコードをコピー＆ペーストしただけでは正常に動作しないことも多いです。

専門知識がない場合は、フォーム作成ツールの利用をおすすめします。郵便番号自動入力機能が備わっているツールも多いため、手軽に機能を実装できます。

プログラミングなどの専門知識がなく、手軽にフォームをカスタマイズしたいなら、弊社が提供するフォーム作成ツール「formrun」がおすすめです。

手軽にカスタマイズできるフォーム作成ツールなら「formrun」

formrunとGoogleフォームの違いを確認する

formrunはフォーム作成から問い合わせ対応、顧客管理までをワンストップで行えるフォーム作成ツールです。操作性やデザイン、コンセプトを評価され、2018年度にはグッドデザイン賞にも選ばれています。

目的別のテンプレートも多数用意されており、専門知識不要で直感的な操作のみでフォームを作成可能です。フォームは単体ページでも、サイト埋め込みでも運用できます。

また、データはCSVやGoogleスプレッドシートにエクスポートできるだけでなく、SalesforceやPardot、MailChimpなどのツールに連携できます。問い合わせ管理にも便利です。Googleフォームにはない住所の自動入力機能も、マウス操作だけで簡単に実装できます。

「フォームの作成からデータ管理まで一貫させたい」「自社のデザインに合わせたフォームをノーコードで作りたい」という場合は、formrunを利用することをおすすめします。

Googleフォームをカスタマイズして自社に合ったフォームに

Googleフォームは、無料で簡単にフォームを作成できるツールで、ビジネスシーン問わず、様々な場面で利用されているサービスです。簡単なデザインのカスタマイズであれば、編集画面から変更できます。
しかし、Googleフォームはデザインの幅に制限があるため、自社サイトとデザインを合わせるためには、HTMLやCSSでコーディングを行う必要があります。

プログラミングの専門知識がない場合は、フォーム作成ツールを利用すると良いでしょう。

formrunは、最短30秒でフォームが完成します。ノーコードで直感的にカスタマイズできるだけでなく、デザイン性に優れたフォームを作成できます。

無料でも利用できるので、手軽にカスタマイズできるフォームを作成したい場合は、ぜひお試しください。