GoogleフォームをHTML/CSSでオリジナルデザインにする方法。できることと注意点

Google公式が案内しているWebサイトへの埋め込み方法は、フォームの埋め込みHTMLをコピーして貼るやり方です。実体はiframeなので、設置自体はとても簡単です。WordPressならカスタムHTMLブロックに貼るだけで表示できます。

ただし、iframeの中身はGoogleフォーム側の画面です。外側の余白や幅はCSSで調整できますが、入力欄やラベル、ボタンの細かい見た目を自社サイトのCSSで自由に変えることは基本的にできません。早く置くならiframe、見た目まで合わせたいなら別の工夫が必要になります。

オリジナルデザインに寄せる方法として、入力画面は自分でHTML/CSSを書き、送信先をGoogleフォームの回答受付URLにするやり方があります。Googleフォームの公開ページから、送信先のURLと各項目に対応するentry番号を調べ、自作フォームのinputやtextareaに割り当てます。

考え方としては、見た目は自社サイト側で作り、回答の保存だけGoogleフォームに任せる形です。名前、メールアドレス、問い合わせ内容のようなシンプルなテキスト項目なら試しやすいです。送信後にGoogleフォームの完了画面へ飛ばしたくない場合は、hidden iframeやサンクスページを組み合わせて処理する実装もあります。

ここで注意したいのは、この方法がGoogleフォームの通常の埋め込み機能そのものではないことです。Googleフォーム側のHTML構造やentry番号を見て合わせるため、フォーム項目を追加したり並び替えたりしたときに、自作HTML側のname属性も見直す必要があります。

必須チェック、メールアドレス形式の確認、選択肢、ファイルアップロード、ログイン制限、スパム対策なども、Googleフォームの画面をそのまま使う場合と同じ感覚では扱えません。制作案件で使うなら、納品後に誰が直すのかまで決めておいたほうがいいです。

WordPressに入れるだけなら、GoogleフォームのiframeをカスタムHTMLブロックに貼るのが一番早いです。記事下のアンケート、社内向けの簡単な受付、デザインの一体感をそこまで求めないページなら、この方法で十分なこともあります。

一方で、コーポレートサイトの問い合わせや広告LPの資料請求フォームでは、フォームだけ見た目が浮くと気になります。自作HTMLで寄せることはできますが、保守の手間は増えます。短期キャンペーンなのか、長く使う会社サイトのフォームなのかで判断したいところです。

GoogleフォームをHTML/CSSで整える方法は、軽いフォームには便利です。ただ、確認画面、完了画面、回答管理、CSV出力、クライアントによる項目変更まで必要になると、自作部分の説明がだんだん増えていきます。

Formieは公開URLとiframeコードを発行できるので、サイト側にはフォーム部分だけを埋め込めます。確認画面つきの流れ、回答管理、CSV出力をフォーム作成ツール側で扱えるため、Googleフォームを無理に改造するより、運用が分かりやすい場合があります。