Googleフォーム+Herokuで簡単に独自アンケートフォームを作る

とある案件でアンケートフォームを作ってほしいと依頼を受けました。

• Webで利用できること
• 独自のCSSを利用したい（googleフォームのままは嫌）

WebアプリケーションにしてDBを構築してもよかったのですが、都度DBにアクセスするのも手間（かつユーザが直接確認できない）なので、バックエンドはgoogleフォームがいいと判断しました。

その際の方法を共有します。

ざっくりとした手順は以下の通りです。

1. html+CSSを作成する

• googleフォームを作成する
• htmlにgoogleフォームのform actionとinput nameを埋め込む
• herokuにアップロードする

前提

• googleアカウントを持っている
• herokuアカウントを持っている
• heroku操作はwindowsで記載しています。（Macの方は読み替えてください）

html+CSSを作成する

こんな感じです。
サンプルはbootstrapを使っています。

この時点ではformのactionとinputのnameは仮の値(ここではxxx)とします。
これらはgoogleフォーム作成後に置き換えます。

formとinput部分

<form class="needs-validation px-5" action="xxx">
<input id="q1a1" name="xxx" value="ラーメン" type="radio" class="custom-control-input" checked required>

入力チェックはinput patternを利用すれば最低限は実装できます。

入力チェック

<input type="tel" class="form-control" id="tel" name="xxx" placeholder="000-000-0000" pattern="\d{2,4}-\d{3,4}-\d{3,4}" required>

googleフォームを作成する

googleフォームはgoogleドライブから新規＞その他＞googleフォームを選択すると作れます。

HTMLに合わせてアンケート項目を作成していきます。
ラジオボタンの値は作成したHTMLのinput valueと合わせる必要があります。
それ以外は任意でOKです。

次にスプレッドシートを作成します。
これによりスプレッドシートでアンケートの回答が見れます。
回答＞緑色のスプレッドシートロゴを押下します。
スプレッドシートのファイル名などは任意です。

フォームの項目がスプレッドシートに表示されればOKです。

htmlにgoogleフォームのform actionとinput nameを埋め込む

googleフォームをプレビューで開きます。

プレビューを開いた状態で、デベロッパーツールを表示します。（ページのソースを表示でも可。）

googleフォームのhtmlからform actionの値を見つけてコピーします。
それを作成したhtmlのform actionに貼り付けます。

form

<form action="https://docs.google.com/forms/d/e/xxx/formResponse" target="_self" method="POST" id="yyy">

同様にgoogleフォームのhtmlからinput name(entry.xxxの部分)を探してコピーします。
それを作成したhtmlのinput nameに貼り付けます。

input

<input type="hidden" name="entry.xxx" jsname="yyy" disabled>

ローカルPCのhtmlを開いて、submitしてみて、スプレッドシートに回答内容が登録されればOKです。

herokuにアップロードする

htmlファイルと同じフォルダにindex.phpを作成し、以下の内容とします。

<?php
header('Location: /作成したhtml名.html');
?>

コマンドプロンプトでhtmlファイルが配置されたフォルダにCDして以下のコマンドを実行します。
(app_nameは任意です。)

git init
git add .
git commit -m "初回コミット"
heroku apps:create app_name
git push heroku master
heroku open

すると、ブラウザで以下のURLでアンケート画面が表示されます！
https://app_name.herokuapp.com/index.html

参考

• httpsにする方法
  http://unot13.hatenablog.com/entry/2018/06/04/170017

• BASIC認証する方法
  https://qiita.com/reoring/items/bca12aaa5f94b190a488

• その他参考
  https://qiita.com/sota6412/items/fa077cbf820faca30598
  https://qiita.com/sugitata/items/182173c01e0470a3a4a8

以上です。