背景

GAS初心者がWebフォームをGASで自作し、入力後の送信後画面を出そうとしただけで、それは大変な時間を費やしたのでした。
たくさんサンプルはあるんですけど、いい感じに組み合わせた例は無い気がしたので、まとめてみました。

その1. Googleフォームじゃちょっと足りないんだよね...

Googleフォームを使えば、簡単にアンケートや集計をとれます。
でも、ちょっと複雑なバリデーションチェック(入力チェック)はできなかったりと、壁を感じていました。

それでGASでwebフォームを作ったんですが、フォームデータ送信時に2点大きな問題が発生してしまいました。

ボタンを連打すると複数回データが送信されてしまう
入力直後のページのままブラウザを閉じたあとに、再度ブラウザを開くと送信後の画面を開いてしまい、データを再送してしまう

その2. そんなにJavaScript得意じゃないんだよね...

必要に迫られてその都度調べながら、切り貼りして「これでいいんだよね？」的な感じでGAS, JavaScriptのプログラミングをしていると、複数ページのWebサイトを作るのは結構大変でした。
そんなに人の参考になればいいな、と思います。

最初の状態：GASで複数ページを作る

こちらのページを参考に、複数ページからなるwebフォームを作りました。
この時点で最初はかなり満足していたんですけど。

GAS（HtmlService）で複数のページを遷移（SPA）

改善後の状態：GASで複数ページ + 送信完了ページへ自動遷移

ごく簡単なWebフォームです。
名前を入力し、送信ボタンを押すと、送信中画面、送信完了画面と自動で画面が遷移します。

このフォームを入力すると、こんな感じにスプレッドシートに保存されていきます。

プログラム

GASエディタで以下を入力し、デプロイしてください。

code.gs

// コード.gs
function doGet() {
  return HtmlService.createTemplateFromFile("index").evaluate();
}

function saveName(name) {
  const sheetId = 'スプレッドシートID'; // ここにスプレッドシートのIDを入力
  const sheet = SpreadsheetApp.openById(sheetId).getActiveSheet();
  sheet.appendRow([name]); // 名前をスプレッドシートの最終行に追加
}

index.html

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    .loading {
      display: none;
      text-align: center; /* 中央揃え */
      margin-top: 50px;
    }
    
    .loader {
      border: 16px solid #f3f3f3; /* 薄い色のボーダー */
      border-top: 16px solid #3498db; /* 上部のボーダーの色 */
      border-radius: 50%; /* 円形にする */
      width: 50px; /* 幅 */
      height: 50px; /* 高さ */
      animation: spin 2s linear infinite; /* アニメーションを設定 */
      margin: 0 auto; /* 中央揃え */
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .page:not(.isActive) {
      display: none;
    }
  </style>
  <script>
    function submitForm() {
      const nameInput = document.querySelector('input[type="text"]').value; // 名前を取得
      document.getElementById("loader").style.display = "block"; // 処理中のグルグルを表示

      google.script.run.withSuccessHandler(function() {
        document.getElementById("loader").style.display = "none"; // ②処理中画面を非表示
        switchPage('success'); // ③送信完了画面に遷移
      }).saveName(nameInput); // ①名前を保存する関数を呼び出す
    }

    function switchPage(pageName) {
      const pages = Array.from(document.getElementsByClassName("page"));
      for (const page of pages) {
        if (page.id === pageName) {
          page.classList.add("isActive");
        } else {
          page.classList.remove("isActive");
        }
      }
    }

    document.addEventListener("DOMContentLoaded", (event) => {
      // 初期表示
      switchPage("home");
    });
  </script>
</head>
<body>
  <div id="loader" class="loading">
    <div class="loader"></div> <!-- グルグル回る要素 -->
    <div>処理中...</div> <!-- 処理中のテキスト -->
  </div>
  
  <!-- ページ切り替え -->
  <div id="home" class="page isActive">
    <h1>ホームページ</h1>
    <form onsubmit="event.preventDefault(); submitForm();">
      <input type="text" placeholder="名前" required>
      <button type="submit">送信</button>
    </form>
    <a href="#" onclick="switchPage('contact');">お問い合わせ</a>
  </div>

  <div id="success" class="page">
    <h1>送信完了</h1>
    <p>フォームが正常に送信されました！</p>
    <a href="#" onclick="switchPage('home');">戻る</a>
  </div>

  <div id="contact" class="page">
    <h1>お問い合わせ</h1>
    <p>お問い合わせ内容はこちらに入力してください。</p>
    <a href="#" onclick="switchPage('home');">戻る</a>
  </div>
</body>
</html>

まとめ

ここで紹介した例が最適とはとても思えないんですが、誰かの参考になれば嬉しいです。

なお、この記事は、【札幌現地+オンライン開催】力強くブログを108記事アウトプットする日の 20241229のブログの一つとして書きました。
参加した皆さん、お疲れ様です！