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

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

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

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

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

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

参考

以上です。