Google Formsを自作のデザインで使うときのTIPSです。
ネットで見かけるのはformタグに送信先、inputタグにnameを指定する以下のような方法。
<form action="https://docs.google.com/.../formResponse">
<input type="text" name="entry.xxxx">
<input type="text" name="entry.yyyy">
<textarea type="text" name="entry.zzzz"></textarea>
</form>
ページが遷移してしまうのが少しイマイチなので、Fetch APIで送信する方法を考えました。
このサイトにもっと詳しく説明している方がいたので、合わせてご参考になさってください。
Google Formsの作成方法を一通り知っている前提で話しています。
作成したフォームのプレビュー画面で一度テストデータを送信し、ブラウザの検証ツールで内容を確認します。
以下の例では、用意した3つのテキストエリアを入力し送信後、送信後のページで検証ツールを開いています。
NetworkタブでformResponseの項目を探します。（画面はGoogle Chromeですが、ブラウザの種類、バージョンなどで探し方は異なると思います。）
大事なのはentry.1000---の項目で、フォームのIDと入力した内容が書かれています。実際にPOSTされたデータはURLエンコードされており、view sourceを押すと確認できます。
https://docs.google.com/.../formResponseに対し, Content-Typeとしてapplication/x-www-form-urlencodedを指定し、URLエンコードした文字列をbodyにいれてPOSTすれば、同じ内容をGoogle Formsに送信できます。ちなみにentry.1000---以外の項目はなくても正常に送信できます。
POSTするところだけをコードにすると以下のような感じになります。
const form1 = encodeURIComponent('フォーム1の回答');
const form2 = encodeURIComponent('フォーム2の回答');
const form3 = encodeURIComponent('フォーム3の回答');
fetch('https://docs.google.com/.../formResponse', {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: `entry.xxxx=${form1}&entry.yyyy=${form2}&entry.zzzz=${form3}`
});
no-corsを指定しないと、データは届きません。
POSTするデータとGoogle Formsの設定(requiredなど)が一致していないとちゃんとデータが届かないので、 そのあたりの検証は必要ですし、そもそもJavaScriptが動いていない状態ならば、データが送信されないので、各種エラー処理は必要です。
それでもデータベースを用意する必要もなくて、無料で利用できるんで、Google Formsは個人利用にピッタリですね。