Implementing a Customized Confirmation Screen for Google Forms

In our previous article, "Pitfalls When Building Your Own Forms with Google Forms," we shared the challenges we faced when creating a contact form through HTML customization of Google Forms. This time, we'll introduce how we built the confirmation screen.

In the previous project,

input screen → submission completion screen → automated confirmation email

were implemented.

This time,

input screen → input confirmation screen → submission completion screen → automated confirmation email

we'll summarize how we implemented the confirmation screen.

Conclusion: Google Forms alone cannot "insert a confirmation page."

Google Forms does not let you freely control how submitted content is processed or how the page navigates via JavaScript. For security reasons, its structure does not allow JavaScript access to the form contents.

Google Forms

• It is fundamentally impossible to insert an intermediate confirmation screen before submission.
• It is also impossible to send the data entered on the page to other pages or insert it into HTML.

Therefore, a custom HTML form combined with a GAS web app is essential.

With a GAS web app, you build the form with HTML and GAS instead of Google Forms. I wanted to create a contact form using Google Forms, so I asked Gemini about it.

Could I pass the data entered on the static page (index.html) to the confirmation page confirm.html, and then connect the data on that page to a Google Form using ?

That's a sharp idea, but unfortunately, that approach is essentially "nearly impossible" in principle. If you still want to do it, here is how: (1) In index.html, save the values entered in the form to sessionStorage using JavaScript. (2) In confirm.html, read the values from sessionStorage and display them. (3) Use a to POST to Google Forms' formResponse (customize using entry.xxxxx). Note that this method is not an official formResponse approach, and it has the drawback of not working for users who have JavaScript turned off.

Plus JavaScript for the implementation!

Now, let's move on to the implementation method using JavaScript.

① index.html: Create the input page

First, create the contact form on the input page. At this stage, do not enter the entry.xxxx value from Google Form.

<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 confirm button is clicked, the values entered in the form are saved to sessionStorage using JavaScript, and the page navigates to the confirmation page /inquiry/confirm.html.

② confirm.html: Create the confirmation page

Populate the class="confirmBlock" element with the values saved in sessionStorage.

Then, enter the entry.xxxxx values from Google Form into the form directly below it.

<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 place an input form on a confirmation page...?

Because this form is what makes the Google Form formResponse work!

Set the form itself to hidden with type="hidden".

Here is the actual confirmation screen.

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

When the submit button is pressed

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

Just redirect to the submission complete page complete.html, and you're all set!

The flow works like this: the values entered in index.html are passed to the Google Form on confirm.html and submitted.

Since it's a customized Google Form, you can also use a summary spreadsheet, and you can send automatic reply emails with GAS.

Summary

A confirmation screen, which is difficult to achieve with Google Forms alone, can be flexibly implemented by leveraging JavaScript. Note: the source code is fully visible, though 💦

With a few simple customizations, you can significantly improve both the appearance and usability, so why not put in a little extra effort?