Googleフォームのデザインをカスタマイズしたい
Googleフォームは標準だとあらかじめ用意されたデザインしか使用することができません。
字体も編集はできますが、使えるフォントが4種類しかなくどれも似たようなものばかりです。
そのため、Googleフォームを導入してしまうとサイトによっては雰囲気が大きく変わってしまうということもあるでしょう。
ですが、HTMLを使うことでGoogleフォームを自由にカスタマイズすることができ、導入しているサイトに合わせた見た目・字体に変えることが可能です。
この記事では実例とともに、Googleフォームのデザインをカスタマイズする方法を紹介していますので参考にしてみてください。
Googleフォームのデザインをカスタマイズする方法
GoogleフォームのカスタマイズではHTMLを使用します。アドオンは使用しません。
HTMLが全くわからないという方には少し難しいですが、どうしてもやってみたいという方は頑張ってみてください。
1. Googleフォームを作成する
まずは、基本となるGoogleフォームを作成します。
作成したGoogleフォームと同じ並びでフォームをHTMLで作成します。
作成したら一旦フォームのHTMLを保存します。
![フォームのテキストボックスにカーソル合わせて右クリックして[検証]を選択](http://cdn2.aprico-media.com/production/imgs/images/000/044/369/original.png?1575290677)
すると、デベロッパーモードの画面にカーソルを合わせていたテキストボックスのHTMLがハイライトされた状態で表示されます。
それらのname属性を先ほど作成したHTMLの入力フォームに追加します。
この作業は入力項目の数だけ行うようにしてください。チェックボックスやラジオボタンだった場合も同様です。
探すのが大変と思うかもしれませんが、デベロッパーモードをアクティブにした状態で[Ctrl+F]キーを押し、「method」と調べるとすぐに見つかります。
formタグに書かれているaction属性もHTMLフォームの方に追加します。
また、同時に「method="POST"」もformタグに追加してください。
ここまでできたものが以下のコードになります。
これでGoogleフォームのHTML版完成です。
テキストボックスに何かを入力し、送信ボタンを押したらしっかりGoogleフォームに届きます。
回答完了画面を表示しない
せっかく問い合わせフォームのデザインをカスタマイズできるようにしたのに、回答完了画面がGoogleフォームではあまり意味がないと感じる人もいるでしょう。
続いては回答完了画面を表示しないようにするカスタマイズを進めていきます。
まずはformタグを以下のように書き換えてください。
<form action="https://XXXXXXXXXXXXXXXX" method="POST" name="myForm" target="dummyIframe">
次に、送信ボタンのHTMLを削除して送信ボタンがあった場所に以下のコードを記述してください。
<input type="button" value="送信" onclick="submitForm()"/>
<iframe name="dummyIframe" style="display:none;"></iframe>
最後に、フォームHTMLの末尾に以下のHTMLとJavaScriptを貼り付けます。
<div id="thxMessage" style="display:none;"><p>お問い合わせありがとうございました。</p></div>
<script>
function submitForm(){
document.myForm.submit();
document.getElementById('formWrapper').style.display = 'none';
document.getElementById('thxMessage').style.display = 'block';
}
</script>
ここまで記述した全体のコードが以下のコードです。idやclassも含めて間違っていないか見比べてみてください。
問題なければフォームのHTMLを保存し、もう一度回答・送信ボタンを押してみてください。
先程までとは違ってページが遷移されず、「お問い合わせありがとうございました」のテキストが表示された元ページのままになっているはずです。
こうすることで、一切GoogleフォームのページにアクセスすることなくGoogleフォームをカスタマイズして使うことができます。
埋め込み機能を使うこともないため、ページ読み込み速度の高速化にもつながるでしょう。
CSSで見た目をカスタマイズ
ここまでできたらいよいよデザインのカスタマイズです。
いくつかおすすめの方法を紹介するので参考にしてみてください
Bootstrap
Bootstrapは世界中で使用されているCSSフレームワークです。
Bootstrap用のclassを与えている点に注意してください。
Bootstrapを読み込むコードを追加してもclassを追加しないとCSS反映されないので覚えておきましょう。
そのことさえ覚えておけば、一番おすすめできるCSSフレームワークです。
Materialize
Materializeはモダンなデザインが特徴なCSS フレームワークです。
こちらのフレームワークを使ってデザインした場合、このようになります。
こちらはBootstrapと違って殆どの要素はclassを指定する必要がないため、導入したら即反映されます。ボタンなど一部の要素のみ個別に設定する必要があるので注意してください。
Pure
Pureは軽量なCSSフレームワークです。CSSフレームワークを導入するとページ総容量が気になるという方はこちらのCSSフレームワークを使うといいでしょう。
formタグなど少しだけclassを設定しないといけない箇所があるので、忘れないようにしてください。
このようにイチからCSSを設計しなくてもおしゃれで使いやすいCSSフレームワークが揃っているので、気になる方は使ってみてくださいね。