公開 ／ 更新

Googleフォームのデザインをカスタマイズする方法！【CSS/字体/ラジオボタン】

Googleフォームのデザインをカスタマイズする方法！【CSS/字体/ラジオボタン】

Googleフォームは誰でも簡単にお問合せフォームなどを作成できるサービスです。とても便利ではありますが、カスタマイズ性にかけており、サイトに馴染むようにカスタマイズするには工夫が必要です。今回はGoogleフォームをカスタマイズする方法を紹介していきます。

目次[非表示]

  1. Googleフォームのデザインをカスタマイズしたい
  2. Googleフォームのデザインをカスタマイズする方法

Googleフォームのデザインをカスタマイズしたい

Googleフォームは標準だとあらかじめ用意されたデザインしか使用することができません。

字体も編集はできますが、使えるフォントが4種類しかなくどれも似たようなものばかりです。

そのため、Googleフォームを導入してしまうとサイトによっては雰囲気が大きく変わってしまうということもあるでしょう。

ですが、HTMLを使うことでGoogleフォームを自由にカスタマイズすることができ、導入しているサイトに合わせた見た目・字体に変えることが可能です。

この記事では実例とともに、Googleフォームのデザインをカスタマイズする方法を紹介していますので参考にしてみてください。

Googleフォームのデザインをカスタマイズする方法

GoogleフォームのカスタマイズではHTMLを使用します。アドオンは使用しません。

HTMLが全くわからないという方には少し難しいですが、どうしてもやってみたいという方は頑張ってみてください。

1. Googleフォームを作成する

まずは、基本となるGoogleフォームを作成します。

Googleフォーム

HTMLのformについてあまり分かっていない場合はこちらと全く同じフォームを作成するようにしてください。

作成したGoogleフォームと同じ並びでフォームをHTMLで作成します。

<form>
  <div>
    <label>お名前</label>
    <input type="text" placeholder="記述式テキスト"/>
  </div>
   <div>
     <label>質問内容</label>
     <textarea placeholder="記述式テキスト"></textarea>
    </div>
    <button type="submit">送信</button>
</form>
結果

作成したら一旦フォームのHTMLを保存します。

Googleフォームの画面に戻り、プレビューする

作成後Googleフォームの画面に戻り、プレビューします。

F12キーを押してデベロッパーモードを起動

プレビューしたらF12キーを押してデベロッパーモードを起動します。

フォームのテキストボックスにカーソル合わせて右クリックして[検証]を選択

デベロッパーモードを起動したら、フォームのテキストボックスにカーソル合わせて右クリックして[検証]を選択します。

すると、デベロッパーモードの画面にカーソルを合わせていたテキストボックスのHTMLがハイライトされた状態で表示されます。

HTMLの「name="entry.XXXXXXXXX"」の箇所

慣れていないと少し大変ですが、「name="entry.XXXXXXXXX"」となっている箇所を見つけてください。

それらのname属性を先ほど作成したHTMLの入力フォームに追加します。

<form>
  <div>
    <label>お名前</label>
    <input type="text" placeholder="記述式テキスト" name="entry.2119822620"/>
  </div>
   <div>
     <label>質問内容</label>
     <textarea placeholder="記述式テキスト" name="entry.1484460912"></textarea>
    </div>
    <button type="submit">送信</button>
</form>
結果

この作業は入力項目の数だけ行うようにしてください。チェックボックスやラジオボタンだった場合も同様です。

formタグのaction属性のURLを探す

次にformタグのaction属性のURLを探したしてください。

探すのが大変と思うかもしれませんが、デベロッパーモードをアクティブにした状態で[Ctrl+F]キーを押し、「method」と調べるとすぐに見つかります。

formタグに書かれているaction属性もHTMLフォームの方に追加します。

また、同時に「method="POST"」もformタグに追加してください。

ここまでできたものが以下のコードになります。

<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe0DBn4KsOF7jV7ceo0uPOktZzSpWTim6CoLviDlZsLxn_4lw/formResponse" method="POST">
  <div>
    <label>お名前</label>
    <input type="text" placeholder="記述式テキスト" name="entry.2119822620"/>
  </div>
   <div>
     <label>質問内容</label>
     <textarea placeholder="記述式テキスト" name="entry.1484460912"></textarea>
    </div>
    <button type="submit">送信</button>
</form>
結果

これでGoogleフォームのHTML版完成です。
テキストボックスに何かを入力し、送信ボタンを押したらしっかりGoogleフォームに届きます。

Googleフォーム

実際に試してみてください。設定が間違っていなければこのように回答完了画面が表示されるはずです。

回答完了画面を表示しない

せっかく問い合わせフォームのデザインをカスタマイズできるようにしたのに、回答完了画面がGoogleフォームではあまり意味がないと感じる人もいるでしょう。

続いては回答完了画面を表示しないようにするカスタマイズを進めていきます。

まずはformタグを以下のように書き換えてください。

<form action="https://XXXXXXXXXXXXXXXX" method="POST" name="myForm" target="dummyIframe">

次に、送信ボタンのHTMLを削除して送信ボタンがあった場所に以下のコードを記述してください。

<input type="button" value="送信" onclick="submitForm()"/>

次に、formタグ全体をdivタグで囲み、iframeタグを追加します。

<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も含めて間違っていないか見比べてみてください。

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="formWrapper">
<form  action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe0DBn4KsOF7jV7ceo0uPOktZzSpWTim6CoLviDlZsLxn_4lw/formResponse" method="POST" name="myForm" target="dummyIframe">
  <div>
    <label>お名前</label>
    <input type="text" placeholder="記述式テキスト" name="entry.2119822620"/>
  </div>
   <div>
     <label>質問内容</label>
     <textarea placeholder="記述式テキスト" name="entry.1484460912"></textarea>
   </div>
   <input type="button" value="送信" onclick="submitForm()"/>
</form>
<iframe name="dummyIframe" style="display:none;"></iframe>
</div>
<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>
結果

問題なければフォームのHTMLを保存し、もう一度回答・送信ボタンを押してみてください。

先程までとは違ってページが遷移されず、「お問い合わせありがとうございました」のテキストが表示された元ページのままになっているはずです。

こうすることで、一切GoogleフォームのページにアクセスすることなくGoogleフォームをカスタマイズして使うことができます。

埋め込み機能を使うこともないため、ページ読み込み速度の高速化にもつながるでしょう。

CSSで見た目をカスタマイズ

ここまでできたらいよいよデザインのカスタマイズです。

いくつかおすすめの方法を紹介するので参考にしてみてください

Bootstrap

Bootstrapは世界中で使用されているCSSフレームワークです。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div id="formWrapper">
  <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe0DBn4KsOF7jV7ceo0uPOktZzSpWTim6CoLviDlZsLxn_4lw/formResponse" method="POST" name="myForm" target="dummyIframe">
    <div class="form-group">
      <label>お名前</label>
      <input class="form-control"  name="entry.2119822620" type="text" placeholder="記述式テキスト" />
    </div>
    <div class="form-group">
      <label>質問内容</label>
      <textarea class="form-control"  name="entry.1484460912" placeholder="記述式テキスト"></textarea>
    </div>
    <input class="btn btn-success" type="button" value="送信" />
  </form>
  <iframe style="display: none;" name="dummyIframe"></iframe>
</div>
<div id="thxMessage" style="display: none;">
お問い合わせありがとうございました。
</div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>
結果

Bootstrap用のclassを与えている点に注意してください。
Bootstrapを読み込むコードを追加してもclassを追加しないとCSS反映されないので覚えておきましょう。

そのことさえ覚えておけば、一番おすすめできるCSSフレームワークです。

Materialize

Materializeはモダンなデザインが特徴なCSS フレームワークです。

こちらのフレームワークを使ってデザインした場合、このようになります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div id="formWrapper">
  <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe0DBn4KsOF7jV7ceo0uPOktZzSpWTim6CoLviDlZsLxn_4lw/formResponse" method="POST" name="myForm" target="dummyIframe">
    <div>
      <label>お名前</label>
      <input name="entry.2119822620" type="text" placeholder="記述式テキスト" />
    </div>
    <div>
      <label>質問内容</label>
      <textarea name="entry.1484460912" placeholder="記述式テキスト"></textarea>
    </div>
    <input class="btn-large waves-effect waves-light blue white-text blue-text text-darken-2"
            type="button" value="送信" />
  </form>
  <iframe style="display: none;" name="dummyIframe"></iframe>
</div>
<div id="thxMessage" style="display: none;">
お問い合わせありがとうございました。
</div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>
結果

こちらはBootstrapと違って殆どの要素はclassを指定する必要がないため、導入したら即反映されます。ボタンなど一部の要素のみ個別に設定する必要があるので注意してください。

Pure

Pureは軽量なCSSフレームワークです。CSSフレームワークを導入するとページ総容量が気になるという方はこちらのCSSフレームワークを使うといいでしょう。


<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">
<div id="formWrapper">
  <form class="pure-form" action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe0DBn4KsOF7jV7ceo0uPOktZzSpWTim6CoLviDlZsLxn_4lw/formResponse" method="POST" name="myForm" target="dummyIframe">
    <div>
      <label>お名前</label>
      <input name="entry.2119822620" type="text" placeholder="記述式テキスト" />
    </div>
    <div>
      <label>質問内容</label>
      <textarea name="entry.1484460912" placeholder="記述式テキスト"></textarea>
    </div>
    <input class="pure-button pure-button-primary" type="button" value="送信" />
  </form>
  <iframe style="display: none;" name="dummyIframe"></iframe>
</div>
<div id="thxMessage" style="display: none;">
お問い合わせありがとうございました。
</div>
<script>
  function submitForm(){
    document.myForm.submit();
    document.getElementById('formWrapper').style.display = 'none';
    document.getElementById('thxMessage').style.display = 'block';
  }
</script>
結果

formタグなど少しだけclassを設定しないといけない箇所があるので、忘れないようにしてください。

このようにイチからCSSを設計しなくてもおしゃれで使いやすいCSSフレームワークが揃っているので、気になる方は使ってみてくださいね。


関連記事

Googleフォーム記事ランキング