Googleフォームを自由にデザインカスタマイズする方法
Google フォームはGoogleが提供するフォーム作成サービスです。ちょっとしたアンケートやお問い合わせフォームもGUIで簡単に作成することができます。
非常に便利なサービスなので利用したことがある方も多いのではないでしょうか。また回答結果をGoogle スプレッドシートと連携できる為、データ分析・加工までを全てWeb上で行うことができるというのも強みです。
ただ、Googleフォームを利用する上で妥協しなくてはいけない点がいくつかあります。特にGUIで自由に質問項目をカスタマイズできる分、デザイン面ではかなり制限されてしまいます。
そこで本記事ではGoogleフォームの機能を利用しつつフロント部分だけ独自のHTMLとCSSを適用する方法を紹介したいと思います。
以下がGoogleフォームをカスタマイズしたデモサイトになります。
1. Googleフォームの作成
まずは次のようにGoogleフォームで質問項目を作成します。ここでは、問い合わせ内容のセレクトボックス、名前とメールアドレスのテキスト入力項目、依頼内容を入力するテキスト入力エリアをそれぞれ用意しました。
質問項目が完成したら、右上の「送信」を押下します。すると送信方法が選択できるポップアップが開きますのでリンクアイコンからフォームURLを取得します。
取得したURLをブラウザで展開すると先ほど作成したフォームが確認できるはずです。
2. オリジナルフォームの作成
ここまでできたら一旦Googleフォームでの作業を止めてHTMLファイルを用意し、フォームを作成していきましょう。フォームの項目はGoogleフォームで作成した内容に合わせてマークアップしてください。CSSによるデザイン調整は適宜行ってください。
フォームのマークアップが完了したら作成したGoogleフォームに戻ります。開発者ツールを開いてformタグを探します。formタグのaction属性値をコピーして作成したHTMLファイルのformタグのaction属性へ貼り付けます。
<form class="p-form" action="ここに入れる">
<!-- 中略 -->
</form>＊GoogleフォームのHTML構造が記事作成時と変更があります。
特に以下の仕様が大きく変わっています。2021/03/01時点ではname属性値がscriptタグ内に記述されるようになっています。
次にGoogleフォームの項目で利用されているinputタグを探します。name属性に次のような値が設定されているのでそのままコピーして、オリジナルフォームのinputタグのname属性へ貼り付けます。
name=“entry.12345678”
プルダウンメニューや複数選択項目はinputタグが項目下部に設置されており、typeもhiddenになっているので少し探しにくくなっています。
ここまでできればフォームとしての機能は完成ですので実際にブラウザを立ち上げて試してみましょう。次のように回答が送信されていればOKです。
ただ、この状態だとフォーム登録完了時にGoogleフォームドメインへ飛ばされてしまいます。その対応としてAjax処理する方法と任意のURLへリダイレクトさせる方法が考えられます。Ajaxでの対応方法は以下記事を参照してみてください。
本記事ではフォーム入力完了時、任意のURLへリダイレクトさせる方法を見ていきたいと思います。まずは入力完了時に遷移させるHTMLファイルを新たに用意します。ここでは “thanks.html” とします。
次に先程用意したformの記述を以下のように変更します。リダイレクト用のiframeを設置し、フォームの内容が送信されたらsubmitted変数を真にしてリダイレクト処理を実行します。ここでは thanks.html をリダイレクト先に指定しています。
<script type="text/javascript">
var submitted = false;
var currentURL = window.location.href;
</script><iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location=currentURL + 'thanks.html';}"></iframe><form class="p-form" action="https://docs.google.com/forms/(Googleフォームからコピペしてください)" target="hidden_iframe" onsubmit="submitted=true;">
まとめ
Googleフォームを実案件内で利用するケースはあまりないかもしれません。ただ、コストをかけられない個人開発やハッカソンといった短期開発が必要なケースでは今回のように外部サービスを上手く活用することで大幅な工数削減をすることができます。
無料で簡単にフォーム作成できる分、セキュリティ面で保証サポートを受けることが難しいかと思います。実際に利用される際は扱う情報の内容などを鑑みて慎重にご検討ください。
追記
GoogleフォームのHTML構造が2020年にアップデートされました。本記事で紹介している手法は公式にアナウンスされているものではないため、今後もアップデートがあれば順次対応が迫られるケースがあるため注意が必要です。
