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

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

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

Googleフォームを作成する

www.google.com

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google-formのカスタマイズ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>入力画面</h1>
<form action="#" method="POST" id="g-form">
<dl>
<dt>お名前<span>必須</span></dt>
<dd><input type="text" name="#" placeholder="お名前を入力してください" required></dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" name="#" required></dd>
<dt>性別</dt>
<dd>
<input type="radio" name="#" value="男性" id="male"><label for="male">男性</label>
<input type="radio" name="#" value="女性" id="female"><label for="female">女性</label>
</dd>
<dt>お問い合わせ内容<span>必須</span></dt>
<dd>
<textarea name="#"required placeholder="お問い合わせ内容を記入して下さい"></textarea>
</dd>
</dl>
<input type="submit" value="送信">
<input type="reset" value="リセット">
</form>
</body>
</html>

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

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

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

f:id:yachin29:20190830132103p: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

自動返信機能をつける

function sendMailGoogleForm() {
 Logger.log('sendMailGoogleForm() debug start');

 //------------------------------------------------------------
 // 設定エリアここから
 //------------------------------------------------------------

 // 件名、本文、フッター
 var subject = "[お問い合わせありがとうございました]"; 
 var body
 = "お問い合わせありがとうございました。\n\n"
 + "------------------------------------------------------------\n";
 var footer
 = "------------------------------------------------------------\n\n"
 + "以上の内容で承りました。後日、担当よりご連絡させていただきます。";

 // 入力カラム名の指定
 var NAME_COL_NAME = 'お名前';
 var MAIL_COL_NAME = 'メールアドレス';


 // メール送信先
 var admin = "管理者のメールアドレス"; // 管理者（必須）
 var sendername = "管理者の名前";//送信者名（必須）
 var cc = ""; // Cc:
 var bcc = admin; // Bcc:
 var reply = admin; // Reply-To:
 var to = ""; // To: （入力者のアドレスが自動で入ります）


 //------------------------------------------------------------
 // 設定エリアここまで
 //------------------------------------------------------------

 try{
 // スプレッドシートの操作
 var sheet = SpreadsheetApp.getActiveSheet();
 var rows = sheet.getLastRow();
 var cols = sheet.getLastColumn();
 var rg = sheet.getDataRange();
 Logger.log("rows="+rows+" cols="+cols);

 // メール件名・本文作成と送信先メールアドレス取得
 for (var i = 1; i <= cols; i++ ) {
 var col_name = rg.getCell(1, i).getValue(); // カラム名
 var col_value = rg.getCell(rows, i).getValue(); // 入力値

 ////////////タイムスタンプを消す////////////////
if (col_name === "タイムスタンプ"){
	continue;
}

 body += "【"+col_name+"】\n";
 body += col_value + "\n\n";
 if ( col_name === NAME_COL_NAME ) {
 body = col_value+" 様\n\n"+body;
 }
 if ( col_name === MAIL_COL_NAME ) {
 to = col_value;
 }
 }
 body += footer;

 // 送信先オプション
 var options = {name: sendername};
 if ( cc ) options.cc = cc;
 if ( bcc ) options.bcc = bcc;
 if ( reply ) options.replyTo = reply;

 // メール送信
 if ( to ) {
 MailApp.sendEmail(to, subject, body, options);
 }else{
 MailApp.sendEmail(admin, "【失敗】Googleフォームにメールアドレスが指定されていません", body);
 }
 }catch(e){
 MailApp.sendEmail(admin, "【失敗】Googleフォームからメール送信中にエラーが発生", e.message);
 } 
}