Googleフォームに自作のCSSをあてカスタマイズする

以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。

しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。

Googleフォームを作成する

www.google.com

HTMLで同じ項目のフォームを作成する

Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する

name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。

「input type="hiddin"」を使ってgoogleにデータを送信する
<!-- まとめて値をgoogle formに送る -->
<input type="hidden" name="" value="<?php echo $name ?>">
<input type="hidden" name="" value="<?php echo $email ?>">
<input type="hidden" name="" value="<?php echo $gender ?>">
<input type="hidden" name="" value="<?php echo $area ?>">
<input type="hidden" name="" value="<?php echo $message ?>">

 

以上で動かすことは可能ですが、Googleフォームは「送信ボタン」を押すとGoogleフォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。

f:id:CHOCOtan:20220312124210p:plain

サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへajaxでページ遷移させましょう。

$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
$.ajax({
  url: "google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });
//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});

※formタグに#g-formを付ける




これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。

copypet.jp