🔥

GoogleフォームをHTMLフォームで運用するときの時刻型フィールドの扱い

2023/09/24に公開

JavaScript

すでにGoogleフォームで注文や予約を扱っているときに、HTMLフォームでの運用をしたいとなることがありました。それまでのワークフローはできるだけ崩したくないので、GoogleフォームにHTMLフォームを接続する方法は多くの記事があって、参考になりました。
そのときに、時刻型フィールドの扱いで、少しつまりました。
それを解決したときの記録です。

この記事では、GoogleフォームとHTMLフォームを接続する方法には触れません。
ぼくが参考にした記事は以下です。

HTMLフォームのinput:timeそのままでは使えない

Googleフォームの時刻フィールドは、中身をよく見ると、
input:numberを２つ繋げた形でした。
そうなると、HTMLフォーム側をinput:timeでentry.＊＊＊＊＊＊＊＊をあわせても、
うまくデータが渡せません。

解決の方法として思いつくのは、

HTMLフォームをGoogleフォーム側に合わせて実装。
HTML側のJavaScriptで処理をして、input:hiddenにデータをのせて渡す

今回は２の方を採用しました。

JavaScriptでの処理

input:timeににゅうりょくされた値を取得　●●：●●　という形
文字列操作で’：’で分けてそれぞれを変数に格納
Googleフォーム側のidに合わせたnameをつけたinput:hiddenのvalueに格納
送信

このための関数を定義します。

function splitTime(e) {
    e.preventDefault(); 
    
    const timeElement = document.getElementById("time");
    const timeValue = timeElement.value; 
    const [hour, minute] = timeValue.split(":");
    
    const timeHour = document.getElementById("time_hour")
    timeHour.value = hour;
    const timeMinute = document.getElementById("time_minute")
    timeMinute.value = minute;

    e.target.submit(); 
    }

この関数をformのonsubmitに渡します。

<form action={formAction} method="post" onsubmit="splitTime(event)">
  <label for="entry.1602770933">
    なまえ
    <input type="text" name="entry.*********" id="uname" />
  </label>
  <label for="entry.1674287926">
    月日
    <input type="date" name="entry.*********" id="date" />
  </label>
  <label for="entry.*********">
    時刻
    <input type="time" maxlength="2" name="time" id="time" />
    <!-- Googleフォームの「時」と「分」の入力フィールド -->
    <input type="hidden" maxlength="2" name="entry.*********_hour" id="time_hour" />
    <input type="hidden" maxlength="2" name="entry.*********_minute" id="time_minute" />
  </label>
  <input type="submit" value="送信" />
</form>

ふりかえり

GoogleフォームとHTMLフォームを接続するのが意外と簡単でした。
astroを使用しているので、name部分を変数にして、
ComponentScriptの部分で設定しておけば便利そうだなと思いました。

また、関数定義の部分は、コンポーネントのscriptタグに書いたのですが、
ここにはis:inlineディレクティブをつけないと動きませんでした。

このあたりがまだ理解が浅いところです。

HTMLフォームのinput:timeそのままでは使えない

JavaScriptでの処理

ふりかえり

Discussion