Topics

last time"Pitfalls when creating customer forms with Google Forms", I wrote an article summarizing the points I encountered when creating an inquiry form using HTML customization in Google Forms, and this time I will introduce how to create a confirmation screen.

In the previous case,

Input screen → Sending completion screen → Automatic sending confirmation email

This was the implementation.

This time,

Input screen → Input confirmation screen → Sending completion screen → Automatic sending confirmation email

Here is a summary of the implementation of the confirmation screen.

Conclusion: You can't insert a confirmation page using Google Forms alone

Google Forms does not allow you to freely control the processing or transition of submitted content using JavaScript (for security reasons, the form contents cannot be accessed using JavaScript).

Google Forms is

• It is not possible to design an intermediate screen (for confirmation) before sending.
• It is also not possible to send the data you are entering to other pages or insert it into HTML.

Therefore, "Original HTML form + GAS web app" is required.

GAS Web AppI decided to use HTML and GAS instead of Google Forms. I wanted to create an inquiry form using Google Form 3, so I asked Gemini.

Is it possible to pass the data entered on a static page (index.html) to the confirmation page (confirm.html) and then link the data on that page to a Google Form with

?

It's a clever idea, but unfortunately, this approach is "nearly impossible" in principle. If you really want to do it: 1. index.html → Save the values ​​entered in the form to sessionStorage using JavaScript. 2. confirm.html reads and displays the values ​​from sessionStorage. 3. POSTs to Google Form's formResponse (customize using entry.xxxxx). However, please note that this is an unofficial method of formResponse and has the disadvantage that it won't work for users with JavaScript turned off.

Plus implemented with JavaScript!

Now let's look at how to implement it using JavaScript.

①index.html: Create an input page

First, create an inquiry form on the input page. At this point, you can use Google Forms.entry.xxxxDo not enter a value.

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

When the confirmation button is pressed, the value entered in the form is saved in sessionStorage using JavaScript, and the confirmation screen page is displayed./inquiry/confirm.htmlYou will be redirected to.

②confirm.html: Create a confirmation page

The value stored in sessionStorageclass=”confirmBlock”Pour into.

And in the form directly below it, enter GoogleFormentry.xxxxxPlease enter the value.

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

Why put an input form here when it's a confirmation page?

It's Google FormformResponseBecause it works in this form!

type="hidden"The form itself will be hidden.

Here is the actual confirmation screen

type="hidden"If you remove it, your customized Google Form will be hidden here!

When the send button is pressed

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

Submission completion pagecomplete.htmlJust move to and you're good to go!

As a flowindex.htmlThe value entered inconfirm.htmlIt passes the data to the Google Form in and sends it.

Since it is a customized Google Form, you can also use summary spreadsheets and send automatic reply emails using GAS.

summary

A "confirmation screen" that is difficult to implement using Google Forms alone can be flexibly implemented by utilizing JavaScript. (Well, the source code is completely visible, though.)

A little customization can greatly improve the appearance and ease of use, so why not give it a try?