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

¡Hola a todos! Bienvenidos a otro tutorial de JuanGuzman.com. 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 donde los usuarios pueden seleccionar continentes, países y ciudades en un formulario interactivo. 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 su continente, país y ciudad, y enviar estos datos junto con su correo electrónico a una hoja de cálculo de Google Sheets. Además, la lista de países y ciudades se actualizará dinámicamente según el continente seleccionado. 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: En la hoja datos, ingresa una tabla con los siguientes encabezados: Continente, País y Ciudad.

Paso 2: Crear el Script de Google Apps

  1. Abrir el editor de scripts: Ve a Extensiones > Apps Script para abrir el editor de scripts.
  2. Configurar el script inicial: Crea un nuevo script con el siguiente código básico:
function doGet() { return HtmlService.createHtmlOutputFromFile('formulario'); } 
function escribirDatosEnSheets(formulario) { const hoja = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('desplegables'); hoja.appendRow([formulario.email, formulario.continente, formulario.pais]); } 
function enviarDatosAHTML() { const hoja = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('datos'); const datos = hoja.getDataRange().getValues(); datos.shift(); // Eliminar encabezados return datos; }

Paso 3: Crear la Interfaz HTML

  1. 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>
<head>
  <title>Formulario Dinámico</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <h2>Escoge tu destino</h2>
    <form id="formulario" onsubmit="procesarFormulario(this); return false;">
      <div class="form-group">
        <label for="email">Correo Electrónico</label>
        <input type="email" class="form-control" id="email" name="email" required>
      </div>
      <div class="form-group">
        <label for="continente">Continente</label>
        <select class="form-control" id="continente" name="continente" onchange="actualizarPaises(this.value);" required>
          <option value="">Escoge tu continente</option>
        </select>
      </div>
      <div class="form-group">
        <label for="pais">País</label>
        <select class="form-control" id="pais" name="pais" required>
          <option value="">Escoge tu país</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary">Enviar</button>
    </form>
  </div>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      google.script.run.withSuccessHandler(poblarContinentes).enviarDatosAHTML();
    });

    function poblarContinentes(datos) {
      const continentes = [...new Set(datos.map(fila => fila[0]))];
      const selectContinente = document.getElementById('continente');
      continentes.forEach(continente => {
        const option = document.createElement('option');
        option.value = continente;
        option.text = continente;
        selectContinente.appendChild(option);
      });
    }

    function actualizarPaises(continenteSeleccionado) {
      google.script.run.withSuccessHandler(function(datos) {
        const paises = datos.filter(fila => fila[0] === continenteSeleccionado).map(fila => fila[1]);
        const selectPais = document.getElementById('pais');
        selectPais.innerHTML = '<option value="">Escoge tu país</option>';
        paises.forEach(pais => {
          const option = document.createElement('option');
          option.value = pais;
          option.text = pais;
          selectPais.appendChild(option);
        });
      }).enviarDatosAHTML();
    }

    function procesarFormulario(formulario) {
      google.script.run.escribirDatosEnSheets(new FormData(formulario));
      alert('Datos enviados exitosamente');
      formulario.reset();
    }
  </script>
</body>
</html>

Paso 4: Implementación y Pruebas

  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.

Para profundizar en estos temas y acceder a más cursos y plantillas, te invito a visitar JuanGuzman.com. ¡Hasta la próxima!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Pin It on Pinterest

Share This