Google FormsのスタイルをCSSで変更する方法

"スペースを節約するために、2つ以上の項目を同じ行に置けるようにする"- Google Docs Editors Community

組織のデザインに合わせたフォームを作るよう頼まれたのに、Google Formsのテーマのオプションでできることには限りがあります。ヘッダー画像、色、フォントは変えられますが、質問は1列のままで、タイトルバーや余白はGoogleが決めたままです。フォームをWebサイトに埋め込んでも解決しません。サイトのCSSはiframeの中まで届かないからです。Formfacadeなら、フォームを2列に切り替え、色を設定し、残りは独自のCSSを追加して調整できます。

Google Formの見た目を変える3つの方法と、それぞれの足りない点を紹介します。

必要だったこと：

COVID-19の危機の中、Centre of Small & Medium Enterprisesは、事業を再開するときの安全対策に中小企業とその従業員が備えられるよう、オンラインで定期的に研修プログラムを開いています。このセンターは、次のようなすっきりとシンプルな研修の申し込みフォームを思い描いていました。

センターが求めていたサンプルの研修申し込みフォーム。ティール色の背景で2列になっています

1. Google Formsでテーマをカスタマイズする

Google Formsでは、ヘッダー画像、テーマの色、背景色、フォントを選べます。足りない点：質問は1列のままで、タイトルバー、余白、ボタンだけを変えることはできません。フォームをWebサイトに埋め込んでも、サイトのCSSはiframeの中まで届きません。

2. 独自のHTMLフォームを作る

Webサイトに、各質問のentry IDを使って、それぞれの回答をGoogle Formに送るHTMLフォームを書きます。

足りない点：すべてのentry IDを調べ、フォームが変わるたびにコードを更新し、エラーにも自分で対応しなければなりません。

3. Formfacadeと独自のCSSを使う

Formfacadeは、上のGoogle Formを思い描いたとおりの見た目にデザインする手助けをしています。

詳しいステップごとのガイドで、フォームの変身を順を追って説明します。一緒にフォームの要素をカスタマイズし、CSSを追加してスタイルを合わせていきましょう。

ステップ1：カスタマイズに向けてフォームを準備する

フォームを作成をクリックし、フォームに名前を付けて、Build formをクリックし、Proceedをクリックします。
「Preview」タブをクリックします

2. サイドバーの「LAYOUT」タブをクリックし、「Comfortable」を選択してレイアウトを2列に変えます。「Apply to this form」をクリックします。

3. 同じサイドバーで「THEME」タブをクリックし、フォームの色を変えます。「Apply to all forms」ボタンを使うと、その色がすべてのフォームに適用されます。

4. Formfacadeでフォームが生まれ変わる様子を見て、サンプルのフォームと比べてみましょう。

もう少しですよね？でも、ちょっと待ってください！

タイトルにはまだ細かい調整がいくつか必要です

- タイトルはクリムゾンレッド（16進コード #DC143C または rgb(220,20,60)）にする

- タイトルには白い帯の背景を付け、端から端まで伸ばす。

- 説明は黒のままにする。そして中央揃えにする。

- 全体の余白を調整する。

5. 「Inspect element」で、どんなCSSが合うか見てみましょう。

6. 「Inspect element」でこれらの調整を行い、下のCSSコードにたどり着きました。

.ff-title {
color:#DC143C !important;
padding: 20px !important;
background-color: white;
position: relative;
transform: translateX(-4%);
width: 109%;
}
.ff-description {
padding-top: 20px !important;
align: center !important;
}
.ff-form {
padding: 0px 30px !important;
}
.ff-compose {
padding: 0px !important;
background: none !important
}
.ff-section {
padding-top: 0px !important;
}

7. では、このコードをフォームに追加しましょう。「EDIT」をクリックし、フォームのタイトル、⚙️アイコンの順にクリックして、「Advanced」タブをクリックし、「Custom CSS」に追加します。「Save」をクリックします。

8. 下の動画で、コードを1つずつ追加するにつれてフォームがどう変わるかをご覧ください。

そして、これが完成したフォームです。すごくいい感じですよね？

このようなカスタマイズはいかがですか？あなたのデザインを見せてください。support@formfacade.comまでご連絡ください。

おまけ！

Google FormsとFormfacadeでできるカスタマイズを比べた表はこちらです。

1. この表から、フォームや項目に必要なカスタマイズを見つけます。

2. リンク先の記事をクリックすると、目的のデザインを実現するための詳しいステップごとのチュートリアルを読めます。

Google FormをWebサイトで見栄えよくしましょう。デザインを楽しんでください！

フォーム	Google Forms	Formfacade
レイアウト	標準の1列	複数列
背景/テーマの色	はい	はい
ボタンの色	いいえ	はい
フォームの項目	いいえ	はい
フォント設定の変更
フォントの色	?	いいえ
フォントのスタイル	はい	はい
高度なCSSスタイル	いいえ	はい
項目
プレースホルダーテキストの変更	いいえ	はい
表示（非表示/読み取り専用）	いいえ	はい
質問名の変更	いいえ	はい
事前入力	はい	はい
計算フィールド	いいえ	はい
高度なカスタマイズ（テキストの書式：太字、斜体）	いいえ	はい
コンバージョントラッキング	いいえ	はい
Hotjar連携	いいえ	はい
ファイルアップロード	Drive、ログインが必要	はい

まとめ

Google Formsのテーマで変えられるのは色とフォントだけで、レイアウトや余白は変えられず、WebサイトのCSSはiframeのフォームまで届きません。Formfacadeなら、レイアウトと色を変え、独自のCSSを追加して残りを調整できます。フォームを作成して、上の手順を進めてください。ご不明な点があれば、サポートまでご連絡ください。

最終更新： 11/6/2026