form autorecargable

formulario que se recarga automaticamente al enviarlo.(sin necesidad de recargar la pagina nuevamente o usar F5)

Este es un ejemplo basico de un formulario que se autorecarga al dar clic en el boton "Enviar", es decir que volvera a su presentacion inicial para volver a ser respondido si fuera necesario.

para lograrlo usaremos HTML y javascript nativo

Este ejemplo se hace a petición de un usario en el foro oficial de Google denominado "Editores de Documentos"

Desde mi óptica se pierde la pagina de finalización también conocida como pagina de "Gracias", la cual le da un toque correcto, pero las necesidades suelen ser diferentes a lo que a veces pensamos 🤷‍♂️

ver aquí el sunto.-https://support.google.com/docs/thread/417746134?msgid=418201690

Los invito a que revisen las guías de Google apps script que he creado con el fin de que tengan nociones básicas para poder entender el código y en su caso puedan hacer modificaciones a los ejemplos que verán en ellos, incluyendo este mismo ejercicio.

código para HTML Local:

<!DOCTYPE html>

<html>

<head>

<title>Formulario Autorefrescable</title>

</head>

<body>

var loadCount = 0;

function reloadForm() {

loadCount++;

// La primera carga es cuando se abre la página.

// La segunda (loadCount > 1) es cuando Google envía la respuesta y recarga el iframe.

if (loadCount > 1) {

window.location.reload();

}

</script>

src="https://docs.google.com/forms/d/e/ID_de_tu_Form_Aquí/viewform"

width="640"

height="481"

frameborder="0"

marginheight="0"

marginwidth="0"

onload="reloadForm()">

Cargando…

</iframe>

</body>

</html>

código para Google sites:

src="https://docs.google.com/forms/d/e/ID de tu formulario/viewform"

width="100%"

height="481"

frameborder="0"

marginheight="0"

marginwidth="0">

Cargando…

</iframe>

</div>

var loadCount = 0;

var iframe = document.getElementById('google_form');

iframe.onload = function() {

loadCount++;

// La primera carga (1) es el formulario vacío.

// La segunda carga (2) es la página de "Respuesta enviada".

if (loadCount > 1) {

// En lugar de refrescar la página, reiniciamos el iframe

loadCount = 0; // Reseteamos el contador

iframe.src = iframe.src; // Esto obliga al iframe a recargar el formulario en blanco

}

};

</script>

Ejemplo #2.- cuando el formulario sea mas "largo".

En este ejemplo solo se busco que al enviar el formulario nos regrese al encabezado del mismo, para evitar ver ese gran espacio en blanco que se genera cuando se envía, asi podemos ver de nuevo la cabezera del formularo de Google, y si se deseara un comportamiento parecido al primer ejemplo, solo tendriamos que modificar esta línea en el html:

//iframe.src = iframe.src; para dejarla así:

iframe.src = iframe.src; (es decir sin las 2 barras diagonales // )

🔴 así que pongan mucha atención en esa línea a la hora de copiar y pegar el código, habilitando o deshabilitando segun el comportamiento que deseen 😊

código #2 para Google sites:

src="https://docs.google.com/forms/d/e/ID_de_tu_formulario_aquí/viewform"

width="100%"

height="1800"

frameborder="0"

marginheight="0"

marginwidth="0">

Cargando…

</iframe>

var loadCount = 0;

var iframe = document.getElementById('google_form');

iframe.onload = function() {

loadCount++;

// Si loadCount es 2, significa que el formulario ya se envió

if (loadCount > 1) {

// 1. Reiniciamos el formulario (vuelve a estar en blanco)

loadCount = 0;

iframe.src = iframe.src;

// 2. Subimos al inicio del contenedor

// Usamos scrollIntoView para que el navegador apunte al "top-anchor"

document.getElementById('top-anchor').scrollIntoView({ behavior: 'smooth' });

// Alternativa por si el anterior falla en algunos navegadores:

window.scrollTo(0, 0);

}

};

</script>