Google Formに
通城の
実装した
何故 hidden 項目を 設定したいのか ?
hidden項目を
項番の 説明
イメージの
1. スプレッドシート の
Google Form には、
URLは
2. ユーザーが
3. ユーザーは、
4. フォームの
Google Form の
hidden項目は、 元データと Formの 入力データの 紐付けに 使う
hidden項目は、
Google Form には、メールアドレスを<wbr>収集する<wbr>
機能が
この
実装したForm
以下の
上記を
参考
Google フォームの
作成したGoogleフォームを<wbr>自由に<wbr>デザインカスタマイズする<wbr>方法
の
hidden項目の 追加の ために 実装した 箇所
hidden項目を
Google フォームに
hidden項目と する 入力項目を 追加。
Identification
という 項目を 追加しました。 形式は テキストが 良いかと 思います。 HTMLフォームに
追加した 入力項目と 同一ネーム属性を 持つhidden項目を 追加 <input type="hidden" name="entry.715219965" value="67676">
クエリストリングで、
項目に 値を 設定できるようにする。
HTMLの
<script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { var queryString = window.location.search; var keyValue = queryString.substring(1).split('&').map((p) => p.split('=')).reduce((obj, e) => ({...obj, [e[0]]: e[1]}), {}); Object.keys(keyValue).forEach((key) => { var elem = document.querySelector("[name='" + key + "']"); if(elem) { elem.value = decodeURI(keyValue[key]); } }); }); </script>
以下、
https://examples.monotalk.xyz/googlecustomform/index.html?entry.1226210233=a@b.com&entry.1050072059=クエリの
Identification
の未指定時は、 uuidを 設定する
パラメータなしの場合は、 Identification
にuuidを 設定して、 番号が 理論上は 重複しないようにします。 <script type="text/javascript"> document.addEventListener("DOMContentLoaded", () => { var identification = document.querySelector("[name='entry.715219965']"); identification.value = uuid(); var queryString = window.location.search; var keyValue = queryString.substring(1).split('&').map((p) => p.split('=')).reduce((obj, e) => ({...obj, [e[0]]: e[1]}), {}); Object.keys(keyValue).forEach((key) => { var elem = document.querySelector("[name='" + key + "']"); if(elem) { elem.value = decodeURI(keyValue[key]); } }); }); function uuid() { var uuid = "", i, random; for (i = 0; i < 32; i++) { random = Math.random() * 16 | 0; if (i == 8 || i == 12 || i == 16 || i == 20) { uuid += "-"; } uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16); } return uuid; } </script>
参考
ページ実装時に
- JavaScriptで
URLパラメーターを ライブラリ無しで ワンライナーで 処理してみる。 - Qiita - UUID v4 generator in JavaScript (RFC4122 compliant)
後は、
以上です。
コメント