Crear Formularios Dinámicos con Google Sheets, Google Apps Script y HTML

Hoy vamos a abordar un tema fascinante que combina Google Sheets, Google Apps Script y HTML para crear formularios dinámicos. Vamos a construir una página web desde cero con un formulario donde los usuarios puedan seleccionar 2 categorías dependientes. Este formulario estará conectado a Google Sheets, lo que permitirá actualizar y visualizar los datos en tiempo real.

Video

Introducción

La idea es sencilla pero poderosa: queremos un formulario que permita a los usuarios seleccionar dos o mas categorías, y enviar estos datos junto con su correo electrónico a una hoja de cálculo de Google Sheets. Además, la lista de subcategorías se actualizará dinámicamente según la categoría seleccionada. En nuestro ejemplo lo haremos con Continentes y Paises. Este tutorial te guiará paso a paso en la creación de este sistema, utilizando tecnologías web modernas y Google Apps Script.

Paso 1: Configuración Inicial

1. Crea un nuevo Google Sheets: Abre Google Sheets y crea un nuevo documento. Nombra la primera hoja como Datos y la segunda como Desplegables.
2. Llena la hoja datos: Usa los datos que quieras en la hoja Datos . En nuestro caso vamos a trabajar con continentes, paises y ciudades.

Paso 2: Crear el Script de Google Apps

Para empezar a escribir el código, ve a Extensiones > Apps Script para abrir el editor de scripts.

Crear el Webapp

Los webapps, son pequeñas aplicaciones web. Google Apps Script nos permite facilmente crear este tipo de aplicaciones. Para esto necesitamos como mínimo, una función doGet, y un objeto HTML que puede estar vinculado o no a una página HTML que tambien crearemos en Google Apps Script

En este ejemplo crearemos un objeto HTML que llama a la página «formulario», que aun no hemos creado

function doGet() {
  return HtmlService.createHtmlOutputFromFile("formulario")
}

Vamos a crear una función que traiga los datos que el usuario digite en el formulario a Sheets.

Para esto usaremos los métodos de selección y escritura de rangos que nos ofrece Google Apps Script:

function escribirDatosEnSheets(formulario){
  SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Desplegables")
         .appendRow([
            formulario.email,
            formulario.continente,
            formulario.pais
         ])
}

Por último, crearemos una función que envíe los datos de mi primera categoría, para poder crear el desplegable dependiente

function enviarDatosAHTML(){
  let arregloDatos=SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Datos").getDataRange().getValues()
  arregloDatos.shift()
  return arregloDatos;
}

Paso 3: Crear la Interfaz HTML

Crear el archivo HTML: En el editor de scripts, crea un nuevo archivo HTML llamado formulario.html y agrega el siguiente código:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <h1>Escoge tu destino</h1>
    <form id="formulario" onsubmit="procesarFormulario(this)">
      <div class="mb-3">
        <label for="email" class="form-label">Correo electrónico</label>
        <input type="email" class="form-control" id="email" name="email">   
      </div>
      <div class="mb-3">
        <label for="continente" class="form-label">Continente</label>
        <select class="form-select" onchange="poblarDesplegableCondicional()" id="continente" name="continente">
        </select>   
      </div>
      <div class="mb-3">
        <label for="pais" class="form-label">Pais</label>
        <select class="form-select" id="pais" name="pais">
        </select>   
      </div>
      <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
  </div>
  <script>

      let arregloGlobal;

      document.addEventListener("DOMContentLoaded",function(){
        google.script.run.withSuccessHandler(poblarDesplegable).enviarDatosAHTML()
      })

      //Código nuestro
      function procesarFormulario(formulario){
        event.preventDefault();
        google.script.run.escribirDatosEnSheets(formulario)
        document.getElementById("email").value=""
        document.getElementById("continente").value=""
        document.getElementById("pais").value=""
        document.getElementById("pais").innerHTML=""
      }

      function poblarDesplegableCondicional(){
        let seleccion=document.getElementById("continente").value
        let listaConDuplicados=arregloGlobal.filter(fila=>fila[0]==seleccion).map(fila=>fila[1])
        let lista=[]
        listaConDuplicados.forEach(elemento=>{
          if(lista.indexOf(elemento)==-1) lista.push(elemento)
        })
        let desplegable=document.getElementById("pais")
        desplegable.innerHTML=""
        lista.unshift("Escoge tu país de "+seleccion)
        lista.forEach(elemento=>{
          let opcion=document.createElement("option")
          opcion.text=elemento
          desplegable.appendChild(opcion)
        })
      }

      function poblarDesplegable(arreglo){
        arregloGlobal=arreglo.slice()
        let listaConDuplicados=arregloGlobal.map(fila=>fila[0])
        let lista=[]
        listaConDuplicados.forEach(elemento=>{
          if(lista.indexOf(elemento)==-1) lista.push(elemento)
        })
        let desplegable=document.getElementById("continente")
        lista.unshift("Escoge tu continente")
        lista.forEach(elemento=>{
          let opcion=document.createElement("option")
          opcion.text=elemento
          desplegable.appendChild(opcion)
        })
      }
    </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
  </script>
</body>

</html>

Paso 4: Implementación y Pruebas

Implementar la aplicación web

Sigue los siguientes pasos:

1. En el editor de scripts, ve a Implementar > Nueva implementación.
2. Selecciona Tipo de implementación: Aplicación web,
3. Dale un título
4. En «Aplicación Web» en «Ejecutar como", selecciona Yo (Y debe aparecer tu correo de la cuenta)
5. En «Quien tiene Acceso» selecciona «Cualquier usuario".
6. Haz clic en Implementar.

1. Implementar la aplicación web: En el editor de scripts, ve a Implementar > Nueva implementación. Selecciona Tipo de implementación: Aplicación web, luego Ejecutar como: tú mismo y Acceso: Cualquiera, incluso anónimo. Haz clic en Implementar.
2. Obtener la URL de la aplicación web: Copia la URL proporcionada y ábrela en una ventana de navegador para probar el formulario.

Conclusión

Hemos creado un formulario dinámico utilizando Google Sheets, Google Apps Script y HTML. Esta solución es extremadamente flexible y puede adaptarse a una variedad de necesidades. Puedes expandir este proyecto añadiendo más niveles de dependencias, como la selección de ciudades, o integrando otras funcionalidades según tus requerimientos.