Implementación de pantalla de confirmación con personalización de Google Form

Anteriormente, publicamos un artículo titulado «Errores comunes al crear formularios de clientes con Google Form» donde resumimos los puntos clave para la personalización HTML de Google Form. Esta vez, te 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.

Esta vez,

pantalla de entrada → pantalla de confirmación de entrada → 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: No es posible «insertar una página de confirmación» con Google Form solo.

Google Form no permite controlar libremente el procesamiento o la redirección del contenido enviado mediante JavaScript (por razones de seguridad, la estructura no permite acceder al contenido del formulario con JS).

Google Form

• no permite diseñar una pantalla intermedia (de confirmación) antes del envío.
• Es imposible enviar datos durante la entrada a otras páginas o insertarlos en HTML.

Por lo tanto, un formulario HTML personalizado + Aplicación web de GAS se vuelve esencial.

Con una aplicación web de GAS, en lugar de usar Google Form, se construye con HTML y GAS. Como queríamos crear un formulario de contacto utilizando Google Form, decidimos consultar a Gemini.

¿Podemos pasar los datos ingresados en la página estática (index.html) a la página de confirmación (confirm.html) y luego vincularlos a Google Form mediante ?

Es una idea perspicaz, pero desafortunadamente ese método es "prácticamente imposible" según los principios. Si realmente quieres hacerlo: ① index.html → Guarda los valores ingresados en el formulario en sessionStorage usando JavaScript. ② En confirm.html, lee y muestra los valores desde sessionStorage. ③ Envía con POST a formResponse de Google Form mediante (personaliza usando entry.xxxxx). Sin embargo, este método es no oficial para formResponse y tiene desventajas como no funcionar para usuarios con JavaScript deshabilitado, así que ten cuidado.

¡Más implementación con JavaScript!

Ahora procederemos a explicar el método de implementación utilizando JavaScript.

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

Primero, crea un formulario de consulta en la página de entrada. En este punto, no incluyas el valor de entry.xxxx de 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>

Cuando se presiona el botón de confirmación, guarda los valores ingresados en el formulario usando JavaScript en sessionStorage y navega a la página de pantalla de confirmación /inquiry/confirm.html.

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

Introduce los valores guardados en sessionStorage en class="confirmBlock".

A continuación, ingresa el valor de entry.xxxxx de Google Form en el formulario que se encuentra 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>

¿Por qué colocar un formulario de entrada en una página de confirmación?

¡Porque necesitas que formResponse de Google Form funcione con este formulario!

Oculta el formulario en sí mismo usando type="hidden".

Aquí está la pantalla de confirmación real

Si estableces type="hidden", ¡aquí se oculta el formulario de Google personalizado!

Cuando se presiona el botón de envío

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

¡Está bien si se redirige a la página de pantalla de finalización complete.html!

El flujo es tomar el valor ingresado en index.html, pasarlo al formulario de Google en confirm.html y enviarlo.

Dado que es un formulario de Google personalizado, también puedes usar la hoja de cálculo de agregación y puedes enviar correos de respuesta automática con GAS.

Conclusión

La "pantalla de confirmación", que es difícil de lograr con solo un formulario de Google, se puede implementar de manera flexible utilizando JavaScript. ※Bueno, el código es completamente visible 💦

Con algunos ajustes simples, puedes mejorar significativamente la apariencia y la facilidad de uso, así que ¿por qué no le añades un poco más de esfuerzo?