Implementación de la pantalla de confirmación de un formulario personalizado de Google Form

En nuestro artículo anterior, titulado Los escollos de crear formularios de cliente con Google Form, recopilamos los puntos en los que tropezamos al crear un formulario de contacto mediante la personalización del HTML de Google Form. En esta ocasión, presentamos cómo crear la pantalla de confirmación.

En el proyecto anterior,

pantalla de entrada → pantalla de finalización de envío → correo de confirmación automático

fue la implementación de ese flujo.

En esta ocasión,

pantalla de entrada → pantalla de confirmación de datos → pantalla de finalización de envío → correo de confirmación automático

resumimos la implementación de la pantalla de confirmación.

Conclusión: con Google Form por sí solo no es posible insertar una página de confirmación.

Google Forms no permite controlar libremente, mediante JavaScript, el procesamiento del envío de datos ni las transiciones de página (por razones de seguridad, la estructura del formulario no permite acceder a su contenido mediante JS).

Google Forms,

• Es imposible, de entrada, diseñar una pantalla intermedia de confirmación antes del envío.
• Tampoco es posible enviar los datos introducidos a otras páginas ni insertarlos en el HTML.

Por lo tanto, es indispensable una combinación de formulario HTML propio + aplicación web de GAS.

Con una aplicación web de GAS, no se usa Google Forms sino una estructura con HTML y GAS. Como quería crear un formulario de contacto con Google Form 3, le consulté a Gemini.

¿No sería posible pasar los datos introducidos en la página estática (index.html) a la página de confirmación (confirm.html) y, desde allí, enviar los datos de esa página al Google Form mediante ?

Es una idea interesante, pero, por desgracia, en principio ese método es "prácticamente imposible". Si aun así quiere intentarlo, los pasos son los siguientes: ① En index.html, guardar en sessionStorage los valores introducidos en el formulario mediante JavaScript. ② En confirm.html, leer los valores de sessionStorage y mostrarlos. ③ Enviar mediante un POST al formResponse de Google Form (personalizándolo con entry.xxxxx). Sin embargo, este enfoque tiene inconvenientes que conviene tener en cuenta: no es un método oficial de formResponse y no funciona con usuarios que tienen JavaScript desactivado.

¡Añadiendo JavaScript para implementarlo!

A continuación, veamos cómo implementarlo con JavaScript.

①index.html: Crear la página de entrada

Primero, creamos el formulario de contacto en la página de entrada. En este punto, no introducimos los valores de entry.xxxx de GoogleForm.

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

Cuando se pulsa el botón de confirmación, los valores introducidos en el formulario se guardan en sessionStorage mediante JavaScript y se redirige a la página de confirmación /inquiry/confirm.html.

②confirm.html: Crear la página de confirmación

Insertamos los valores guardados en sessionStorage en class=”confirmBlock”.

A continuación, introduzca los valores de entry.xxxxx de GoogleForm en el formulario situado justo debajo.

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

Aunque es una página de confirmación, ¿por qué colocar aquí un formulario de entrada...?

Es porque hace que formResponse de GoogleForm funcione con este formulario.

Con type="hidden", el propio formulario se oculta.

Esta es la pantalla de confirmación real:

Si se elimina type="hidden", aquí aparecerá oculto el GoogleForm personalizado.

Cuando se pulse el botón de enviar

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

Basta con redirigir a la página de finalización complete.html.

El flujo es el siguiente: los valores introducidos en index.html se pasan al GoogleForm de confirm.html y se envían.

Al tratarse de un GoogleForm personalizado, también puede utilizar una hoja de cálculo para el resumen de datos y enviar correos de respuesta automática con GAS.

Conclusión

Con JavaScript es posible implementar de forma flexible una "pantalla de confirmación" que resulta difícil de lograr solo con Google Forms. Nota: el código fuente es visible para cualquiera, así que... 💦

Con una personalización sencilla, puede mejorar notablemente el aspecto y la facilidad de uso, así que le recomendamos dedicarle un poco de tiempo.