Google Formにhidden項目を設定して、スプレッドシート に登録を行いたいため、やり方を調べていたのですが、
通城の Form の利用方法では設定できず、Formを自前実装することで設定できました。

実装した内容を記載します。

何故 hidden 項目を設定したいのか?

hidden項目を使用したいのは、以下イメージのようなケースです。　

google form flow.png - Google ドライブ

項番の説明

イメージの項番について説明します。

1. スプレッドシート の入力データを元に、対象者へ事前入力済のGoogle Form のリンクを持つメールを送信する。
Google Form には、事前入力済みのURLを生成する機能があります。
URLはかなり長くなるので、URL 短縮サービスの利用を検討したほうがいいかもしれません。

2. ユーザーがメールを受信する。

3. ユーザーは、メールに記載されたリンクをクリックしフォームにアクセスする。

4. フォームの送信内容をスプレッドシート へ転記、どのユーザーの回答なのか、スプレッドシートの元データを紐付けする。
Google Form の 回答をスプレッドシート に転記する機能を使用して、スプレッドシート に転記、元の入力データとは Google Apps Script 等を使用して紐付けします。

hidden項目は、元データとFormの入力データの紐付けに使う

hidden項目は、元データとFormの入力データの紐付けに使います。
Google Form には、メールアドレスを収集する 機能がありますが、メール受信したユーザーが受信メールと同様のメールアドレスを入力するとは限りません。
このため、スプレッドシートにユーザーごとに一意となるキー値を設定して、hidden項目に設定、受け渡したほうが、紐付けが維持できる確率が高いと考えました。

実装したForm

以下のForm を作成しました。

上記を入力して、POSTすると、以下のGoogle Form に データが送信されます。

参考

Google フォームのカスタマイズ方法は以下が参考になりました。
作成したフォームは、Googleフォームを自由にデザインカスタマイズする方法 の実装を拝借していて、非表示Iframeに対してPOST後に、親画面をThanksページに遷移させています。

hidden項目の追加のために実装した箇所

hidden項目を追加するために、以下を実装しました。

  • Google フォームにhidden項目とする入力項目を追加。
    Image from Gyazo 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>

以下、URLでアクセスすると、hiddenを含めた各入力項目に値を設定可能です。
https://examples.monotalk.xyz/googlecustomform/index.html?entry.1226210233=a@b.com&entry.1050072059=クエリの受け取りテスト&entry.715219965=uuid

  • 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>

参考

ページ実装時に以下を参考にしました。

後は、Mailに記載するURLは、短縮URLの生成サービスとかが使えれば良い感じにできるかと思いました。

以上です。

コメント

カテゴリー

最近の投稿