以前授業でも使ったGoogleフォームですが、設置も簡単でスプレットシートと紐付けする事でお問い合わせ内容をデータベース化する事も簡単に出来てしまう、とても便利なツールですが、唯一の問題が「自分でCSSをいじれない」事です。特にレスポンシブサイトにGoogleフォームを設置する場合「自分でCSSをいじれない」事が大きなデメリットになってしまいます。
しかし、Googleフォームに「自身のcssを適応させる」事でレスポンシブサイトに最適なレイアウトで作る事が出来るため、唯一のデメリットも無くなります。
www.google.com
HTMLで同じ項目のフォームを作成する
Chromeの検証機能を使ってGoogleフォームの「Action」と「name」の値を取得し、HTMLフォームに挿入する
name属性は階層の深い所にあるので「entry.」で検索し、name属性の値を取得しましょう。この時name属性が「name="entry.00001234_sentinel"」のようになっている項目は「entry.00001234」の部分だけ取ってきます。
「input type="hiddin"」を使ってgoogleにデータを送信する
<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フォームのサンクスページに飛んでしまう為、自作のサンクスページにリンク先を変更させます。
サンクスページを作成し、送信ボタンを押した後に自作したサンクスページへ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(){
}
}
});
event.preventDefault();
});
});
※formタグに#g-formを付ける
これでCSSだけでGoogleフォームが自由にカスタマイズ出来るようになります。スニペットなどを使ってリッチなフォームを作ってみましょう。
copypet.jp