Topics

último tiempo"Errores al crear formularios de clientes con Formularios de Google"Escribí un artículo que resume los puntos que encontré al crear un formulario de consulta usando la personalización HTML en Formularios de Google, y esta vez presentaré cómo crear una pantalla de confirmación.

En el caso anterior,

Pantalla de entrada → Pantalla de finalización de envío → Correo electrónico de confirmación de envío automático

Esta fue la implementación.

Esta vez,

Pantalla de entrada → Pantalla de confirmación de entrada → Pantalla de finalización de envío → Correo electrónico de confirmación de envío automático

A continuación se muestra un resumen de la implementación de la pantalla de confirmación.

Conclusión: No puedes insertar una página de confirmación usando solo Formularios de Google

Google Forms no le permite controlar libremente el procesamiento o la transición del contenido enviado mediante JavaScript (por razones de seguridad, no se puede acceder al contenido del formulario mediante JavaScript).

Formularios de Google es

• No es posible diseñar una pantalla intermedia (de confirmación) antes del envío.
• Tampoco es posible enviar los datos que estás ingresando a otras páginas o insertarlos en HTML.

Por lo tanto, "Formulario HTML original + aplicación web GAS" se requiere.

Aplicación web GASDecidí usar HTML y GAS en lugar de Formularios de Google. Quería crear un formulario de consulta con Formularios de Google 3, así que le pregunté a Gemini.

¿Es posible pasar los datos ingresados ​​en una página estática (index.html) a la página de confirmación (confirm.html) y luego vincular los datos de esa página a un formulario de Google con

?

Es una idea ingeniosa, pero lamentablemente, este enfoque es prácticamente imposible en principio. Si realmente quieres hacerlo: 1. index.html → Guarda los valores introducidos en el formulario en sessionStorage mediante JavaScript. 2. confirm.html lee y muestra los valores de sessionStorage. 3. publica en formResponse de Google Forms (personalízalo con entry.xxxxx). Sin embargo, ten en cuenta que este es un método no oficial de formResponse y tiene la desventaja de que no funcionará para usuarios con JavaScript desactivado.

¡Además implementado con JavaScript!

Ahora veamos cómo implementarlo usando JavaScript.

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

Primero, crea un formulario de consulta en la página de entrada. En este punto, puedes usar Formularios de Google.entry.xxxxNo introduzca ningún valor.

<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, el valor ingresado en el formulario se guarda en sessionStorage usando JavaScript y se muestra la página de la pantalla de confirmación./inquiry/confirm.htmlSerás redirigido a.

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

El valor almacenado en sessionStorageclass=”confirmBlock”Verter en.

Y en el formulario que se encuentra justo debajo, introduzca GoogleFormentry.xxxxxPor favor, introduzca el valor.

<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é poner un formulario de entrada aquí cuando es una página de confirmación?

Es un formulario de GoogleformResponse¡Porque funciona de esta forma!

type="hidden"El formulario en sí quedará oculto.

Aquí está la pantalla de confirmación real.

type="hidden"¡Si lo eliminas, tu formulario de Google personalizado quedará oculto aquí!

Cuando se presiona el botón de enviar

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

Página de finalización del envíocomplete.html¡Simplemente muévete y listo!

Como un flujoindex.htmlEl valor ingresado enconfirm.htmlPasa los datos al formulario de Google y los envía.

Dado que es un formulario de Google personalizado, también puedes utilizar hojas de cálculo de resumen y enviar correos electrónicos de respuesta automática mediante GAS.

resumen

Una "pantalla de confirmación" difícil de implementar solo con Formularios de Google se puede implementar de forma flexible con JavaScript. (Bueno, el código fuente es completamente visible, claro).

Un poco de personalización puede mejorar enormemente la apariencia y la facilidad de uso, así que ¿por qué no intentarlo?