コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

Googleフォームってデザインいじれたんですね

Google
ぼかぁてっきりアレって埋め込んで使うしかできないものとばかり思ってました

はい、僕です。先日、インターネットを漁ってたらGoogleフォームをカスタマイズして、違和感ないデザインにしているサイトなど見つけたのでそれを作ってみようと思ったのでした。あれって元からあるテンプレートのデザイン埋め込んで使うしかできないものだと思ってたんですけど、下みたいな感じでカスタマイズできるらしいですよ。これが普通に実装できることを知ってしまうと、いよいよサーバーを自前で用意する必要がなくなってしまう。




ミニアンケート

ここで得た回答はいかなる用途にも有効活用されることはありません

Q1. あなたは月曜日が好きですか？







こんなん作れたんですね。真面目に集計を取る気は微塵もないですが来週ごろに結果の報告していこうと思います。ちゃんと動くかも確認したいし…。連投も可能になっているのでみんなどしどし投稿してくれよな！


つくりかた

まず何はともあれGoogleフォームの方でアンケート項目を作成します。
作成した共有リンクhttps://docs.google.com/forms/d/e/****/viewformのFormのaction属性https://docs.google.com/forms/d/e/****/formResponseと各質問のname属性entry.****をソースからがんばって見つけてきます。


そしてカスタマイズしたいフォームを作成します。デザイン（CSS）の方は各自でなんとかしてください。
カスタマイズが必要な部分の説明だけ載せます。

  <form  action="https://docs.google.com/forms/d/e/****/formResponse">
  <p>アンケート</p>
  <p>Q1. ****?</p>
  <label><input type="radio" name="entry.****" value="val_1" checked>　val_1</label>
  <label><input type="radio" name="entry.****" value="val_2">　val_2</label>
  <label><input type="radio" name="entry.****" value="val_3">　val_3</label>
  <label><input type="radio" name="entry.****" value="val_4">　val_4</label>
  <button type="submit" name="button" value="送信">送信</button>
  </form>

こんな感じにactionとname部分に先ほど取ってきたgoogleフォームのパーツ埋め込むだけで回答機能できるそうです。ラジオボタンなどの場合はvalue属性がGoogleフォームで作ったやつと値が一致してないとうまくいかないらしい（未検証）。


このままだと、送信後に送信しましたの遷移画面にとぶんでそれを避けるためにAjaxでなんとかします。最近はAxiosとかいうやつが流行りだそうですけどブログに埋め込んでんのjQueryなのと、参考にしたのがjQueryなんでそれでごりごり書きます。裏でAxiosで書くの試していけそうなら別記事あげます。

function postToGoogle() {
  // 入力値の取得
  var field = $('input[name="entry.***"]:checked').val();
  // Ajax通信
  $.ajax({
    url: "https://docs.google.com/forms/d/e/****/formResponse",
    data: {
      "entry.***": field
    },
    type: "POST",
    dataType: "xml",
    statusCode: {
      0: function () {
        //成功時
      },
      200: function () {
        //成功時
      }
    }
  })
}

$(document).ready(function () {
  $('#myform').submit(function () {
    // Gooleフォームへ送信：上で作ったやつの実行
    postToGoogle();
    // 送信後の送信ボタンを使用不能にする。
    // 送信完了メッセージをinnerTextとかで表示するようにすればもっとよくなったかもしれないけど、作るの面倒になった
    $('#mysubmit').prop('disabled', true);
    return false;
  });
});

Googleフォーム側の仕様よくわかってないけど、dataType がXMLじゃないとダメらしいというのだけわかった。あと送信はされるけど何か、Access-Control-Allow-Originエラーだしてくる。これクライアント側でなんとかできる問題なんですかね……。まあいいや。フォーム作って満足してたけど、この記事投稿する直前に挙動が気に入らなくてAjaxいじりするようになったからので色々ひどいことになりました（言い訳）。


まあいいや。そんなわけで今日も一日頑張っていきましょう。みんなも月曜好きだよな！


おわり。

参考
javascript - How to Post Google Forms Data via jQuery and Ajax to Spreadsheets - Stack Overflow

[トップへ]