GoogleフォームをHTML/CSSでオリジナルデザインにする方法。できることと注意点
Googleフォームをそのまま埋め込むと、企業サイトやLPの見た目に合わないことがあります。HTML/CSSで近づける方法、できないこと、実務で見落としやすい保守リスクを扱います。
Googleフォームは、回答をスプレッドシートにためて社内共有するところまでが速いツールです。ただ、企業サイトやLPにそのまま貼ると、急にGoogleフォームの画面だけが現れて、ページの空気が少し変わります。もう少しサイトになじませたい、でも回答管理はGoogleフォームのまま使いたい。そんなときに出てくるのが、HTML/CSSで見た目を作る方法です。
目次
標準の埋め込みはiframe。早いけれど中身は触りにくい
Google公式が案内しているWebサイトへの埋め込み方法は、フォームの埋め込みHTMLをコピーして貼るやり方です。実体はiframeなので、設置自体はとても簡単です。WordPressならカスタムHTMLブロックに貼るだけで表示できます。
たとえば社内イベント後の簡単な満足度アンケートを記事ページに置くだけなら、iframeの見た目でも大きな問題にならないことがあります。回答数を集めることが目的で、ブランド体験より設置の早さを優先するなら、標準埋め込みで十分です。
たとえば社内向けの研修アンケートや既存顧客だけに送る確認フォームなら、多少Googleフォームらしい見た目でも回答者は迷いにくいです。逆に広告LPのファーストビュー直下に置く資料請求フォームでは、フォームだけ別サービスの画面に見えると、ページ全体の信頼感を下げることがあります。
ただし、iframeの中身はGoogleフォーム側の画面です。外側の余白や幅はCSSで調整できますが、入力欄やラベル、ボタンの細かい見た目を自社サイトのCSSで自由に変えることは基本的にできません。早く置くならiframe、見た目まで合わせたいなら別の工夫が必要になります。
- まずはiframeで足りるか確認する
- スマートフォンで高さや余白が崩れないか見る
- フォームだけ外部サービス感が出ても問題ないページか考える
HTML/CSSで作る場合は、送信先だけGoogleフォームにする
オリジナルデザインに寄せる方法として、入力画面は自分でHTML/CSSを書き、送信先をGoogleフォームの回答受付URLにするやり方があります。Googleフォームの公開ページから、送信先のURLと各項目に対応するentry番号を調べ、自作フォームのinputやtextareaに割り当てます。
たとえば氏名、会社名、メールアドレス、問い合わせ内容だけのシンプルなフォームなら、自作HTMLで見た目を整え、回答だけGoogleフォームに送る構成を試しやすいです。LPのボタン色や入力欄の角丸、余白をサイト側のデザインに合わせられるので、見た目の一体感は出しやすくなります。
考え方としては、見た目は自社サイト側で作り、回答の保存だけGoogleフォームに任せる形です。名前、メールアドレス、問い合わせ内容のようなシンプルなテキスト項目なら試しやすいです。送信後にGoogleフォームの完了画面へ飛ばしたくない場合は、hidden iframeやサンクスページを組み合わせて処理する実装もあります。
きれいに見えても、公式のフォーム作成機能とは別物
ここで注意したいのは、この方法がGoogleフォームの通常の埋め込み機能そのものではないことです。Googleフォーム側のHTML構造やentry番号を見て合わせるため、フォーム項目を追加したり並び替えたりしたときに、自作HTML側のname属性も見直す必要があります。
たとえば資料請求フォームにあとから「従業員数」や「導入予定時期」を追加した場合、Googleフォーム側だけ直しても自作HTMLには反映されません。entry番号の対応を見直し、必須チェックや送信テストまでやり直す必要があります。
たとえば制作後にクライアントがGoogleフォーム側で質問名を変えたり選択肢を増やしたりすると、サイト側の見た目と回答シートの意味がズレることがあります。管理画面で簡単に直せるように見えても、自作HTML側も同時に直す前提だと説明しておかないと、公開後の小さな改修が事故になりやすいです。
必須チェック、メールアドレス形式の確認、選択肢、ファイルアップロード、ログイン制限、スパム対策なども、Googleフォームの画面をそのまま使う場合と同じ感覚では扱えません。制作案件で使うなら、納品後に誰が直すのかまで決めておいたほうがいいです。
- entry番号を変更時に追いかけられる人がいるか
- 必須チェックをHTML側でも用意するか決める
- ファイルアップロードやログイン必須フォームには使わない
WordPressでは、貼るだけか自作するかを分ける
WordPressに入れるだけなら、GoogleフォームのiframeをカスタムHTMLブロックに貼るのが一番早いです。記事下のアンケート、社内向けの簡単な受付、デザインの一体感をそこまで求めないページなら、この方法で十分なこともあります。
たとえば広告LPの資料請求フォームでは、見出し、入力欄、ボタンの余白や色がLP全体と合っていないだけで、急に外部ページのように見えることがあります。広告費をかけて流入を集めるフォームなら、設置の早さだけでなく送信前の違和感も見ます。
たとえばWordPressの固定ページ内に自作HTMLフォームを置く場合、テーマ変更やCSS改修の影響も受けます。フォーム単体では動いていても、LP側の幅や余白が変わったときに入力欄が窮屈になったり、スマートフォンで送信ボタンが見切れたりするため、サイト改修時の確認項目に入れておきます。
一方で、コーポレートサイトの問い合わせや広告LPの資料請求フォームでは、フォームだけ見た目が浮くと気になります。自作HTMLで寄せることはできますが、保守の手間は増えます。短期キャンペーンなのか、長く使う会社サイトのフォームなのかで判断したいところです。
長く使うフォームなら、最初から埋め込み前提のツールも見る
GoogleフォームをHTML/CSSで整える方法は、軽いフォームには便利です。ただ、確認画面、完了画面、回答管理、CSV出力、クライアントによる項目変更まで必要になると、自作部分の説明がだんだん増えていきます。
Formieは公開URLとiframeコードを発行できるので、サイト側にはフォーム部分だけを埋め込めます。確認画面つきの流れ、回答管理、CSV出力をフォーム作成ツール側で扱えるため、Googleフォームを無理に改造するより、運用が分かりやすい場合があります。
