---
title: "GoogleFormカスタマイズの確認画面を実装"
date: 2025-08-07
categories: column
author: 平林
canonical: https://www.liberogic.jp/topics/20250808-googleform/
---

# GoogleFormカスタマイズの確認画面を実装

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/dc8cbd91fc024d3494b778655e412bca/hero%20(1).png)

前回「GoogleFormでお客様のフォームを作るときの落とし穴」と題して、GoogleFormのHTMLカスタマイズでお問合せフォームを作成する際につまづいたポイントを記事にまとめましたが、今回は確認画面の作成についてご紹介します。

前回「[GoogleFormでお客様のフォームを作るときの落とし穴](/topics/20241127-googleform-point/)」と題して、GoogleFormのHTMLカスタマイズでお問合せフォームを作成する際につまづいたポイントを記事にまとめましたが、今回は確認画面の作成についてご紹介します。

前回の案件では、

**入力画面→送信完了画面→自動送信確認メール**

の実装でした。

今回は、

**入力画面→入力確認画面→送信完了画面→自動送信確認メール**

確認画面の実装についてまとめます。

## 結論：Googleフォームだけでは「確認ページを挟む」ことはできない

GoogleFormはJavaScriptでの送信内容の加工や遷移を自由に制御できません（セキュリティの都合上、フォームの中身にJSでアクセスできない構造です）。

GoogleFormは、

- 送信前の中間画面（確認）を挟む設計がそもそもできない。
- 入力中のデータを他ページに送ったり、HTMLに差し込んだりも不可能。

よって「**独自HTMLフォーム + GAS Webアプリ**」が必須になります。

**GAS Webアプリだと**GoogleFormではなく、HTMLとGASで組むことになります。GoogleForm３を使用してお問合せフォームを作成したかったので、Geminiに聞いてみることに。

> 静的ページ(index.html)に入力したデータを確認画面ページのconfirm.htmlに渡して、
> そのページのデータを <form action="https://docs.google.com/forms/xxx/formResponse" method="post" target="hidden_iframe" onsubmit="submitted = true;">のGoogleFormに連携できないかな？

> 鋭いアイデアですが、残念ながらそのやり方は原則「不可能に近い」です。
> どうしてもやりたい場合
> 
> ①index.html → フォームに入力した値をJavaScriptでsessionStorageに保存。
> 
> ②confirm.htmlでsessionStorageから値を読み込んで表示。
> 
> ③<form>でGoogleFormのformResponseにPOST（entry.xxxxxを使ってカスタマイズ）
> 
> ただこちらはformResponseの公式ではない方法、またJavaScriptがオフのユーザーには動作しないといったデメリットがあるので注意です。
> 
> 

## プラスjavascriptで実装！

それではjavascriptとを利用して実装方法に参ります。

### ①`index.html`：入力ページを作成

まず入力ページではお問合せフォームを作成します。この時点ではGoogleFormの`entry.xxxx`の値は入れません。

```
`<form id="form">
  <input type="text" name="category" placeholder="お問い合わせ種類">
  <input type="text" name="name" placeholder="お名前">
  <input type="email" name="email" placeholder="メールアドレス">
  <button type="submit">確認</button>
</form>

<script>
  document.getElementById('form').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(e.target);
    for (const [key, value] of formData.entries()) {
      sessionStorage.setItem(key, value); // sessionStorage に保存
    }
    window.location.href = '/inquiry/confirm.html';
  });
</script>

`
```

確認ボタンが押されたら、formに入力された値をJavaScriptでsessionStorageに保存し、確認画面ページ `/inquiry/confirm.html`へ遷移します。

### ②`confirm.html`：確認画面ページを作成

sessionStorageに保存された値を`class=”confirmBlock”`へ流し込みます。

そして直下にあるformにGoogleFormの`entry.xxxxx` の値を入れてください。

```
`<div class="confirmBlock">
  <p>お問い合わせ種類: <span id="category"></span></p>
  <p>お名前: <span id="name"></span></p>
  <p>メールアドレス: <span id="email"></span></p>
</div>

<form action="<https://docs.google.com/forms/d/e/1FAIpQLSc-.../formResponse>"
      method="POST" target="hidden_iframe" onsubmit="submitted = true;">
  <input type="hidden" name="entry.1234567890" id="categoryInput">
  <input type="hidden" name="entry.2345678901" id="nameInput">
  <input type="hidden" name="entry.3456789012" id="emailInput">
  <button type="submit">送信</button>
</form>

<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>

<script>
  // 表示とフォームへの挿入
  ['category', 'name', 'email'].forEach(key => {
    const value = sessionStorage.getItem(key);
    document.getElementById(key).textContent = value;
    document.getElementById(key + 'Input').value = value;
  });

  let submitted = false;
</script>

`
```

確認画面ページなのになぜここに入力フォームを置くのか…

それは、GoogleFormの`formResponse` をこのformで機能させるからです！

`type="hidden"` でform自体は非表示にします。

実際の確認画面がこちら

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/64fd3a77a31e4d40a97347857e019eb0/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-17%2018.45.44.png)

`type="hidden"`をなしにすると、ここにカスタマイズしたGoogleFormが隠れています！

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/ee10f37f6b6943849976e8dd3ec0a207/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202025-07-17%2018.46.51.png)

送信ボタンが押されたら

```
`<iframe name="hidden_iframe" style="display:none;" onload="if(submitted) window.location='/inquiry/complete.html';"></iframe>
`
```

送信完了画面ページ `complete.html` に遷移すればOKです！

流れとしては`index.html`で入力した値を`confirm.html`にあるGoogleFormに渡して送信する。というものです。

カスタマイズのGoogleFormなので、集計スプレッドシートも使用できますし、GASで自動返信メールも送ることができます。

## まとめ

Googleフォーム単体では実現が難しい“確認画面”も、JavaScriptを活用すれば柔軟に実装可能です。※まぁソースは丸見えなんですけどね💦

ちょっとしたカスタマイズで、見た目や使いやすさをぐっと引き上げられるので、一手間加えてみてはいかがでしょうか。