Formulario Con Html Y Base De Datos Google Spreadsheet

Un formulario HTML con base de datos Google Spreadsheet permite recopilar información desde una página web y guardarla directamente en una hoja de cálculo de Google. Es una forma sencilla y gratuita de crear bases de datos para encuestas, inscripciones, o recolección de datos generales.

El proceso básico involucra tres componentes clave:

• Formulario HTML: La interfaz que los usuarios ven y usan para ingresar datos.
• Google Apps Script: Un código que actúa como intermediario, recibiendo los datos del formulario y escribiéndolos en la hoja de cálculo.
• Google Spreadsheet: La hoja de cálculo donde se almacenan los datos enviados.

Pasos para crear un formulario HTML y conectarlo a Google Spreadsheet:

1. Crear la hoja de cálculo: Abre Google Sheets y crea una nueva hoja de cálculo. Nombra las columnas con los encabezados que corresponderán a los campos de tu formulario (ej: Nombre, Email, Comentario).
2. Crear el formulario HTML: Crea un archivo HTML con los campos que necesites. Es importante que cada campo tenga un atributo `name` que coincida con los encabezados de las columnas en tu hoja de cálculo. Aquí un ejemplo básico:

   
           <form id="myForm">
             <label for="nombre">Nombre:</label><br>
             <input type="text" id="nombre" name="Nombre"><br>
             <label for="email">Email:</label><br>
             <input type="email" id="email" name="Email"><br>
             <button type="submit">Enviar</button>
           </form>
         

3. Crear el Google Apps Script: En tu hoja de cálculo, ve a "Herramientas" > "Editor de secuencias de comandos". Escribe el script que recibirá los datos del formulario y los agregará a la hoja. Necesitarás la ID de tu hoja de cálculo (que se encuentra en la URL). Un ejemplo sencillo es:

   
   function doPost(e) {
     var ss = SpreadsheetApp.openById("TU_ID_DE_HOJA_DE_CALCULO");
     var sheet = ss.getSheetByName("Hoja1"); //Cambia "Hoja1" si tu hoja tiene otro nombre
     var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
     var row = [];
     for (var i = 0; i < headers.length; i++) {
       row.push(e.parameter[headers[i]]);
     }
     sheet.appendRow(row);
     return ContentService.createTextOutput("¡Gracias por enviar el formulario!");
   }
         

4. Publicar el script como aplicación web: En el editor de secuencias de comandos, ve a "Publicar" > "Implementar como aplicación web". Configura el acceso para "Cualquiera" (o el nivel de acceso que necesites). Obtén la URL de la aplicación web.
5. Conectar el formulario HTML al script: En tu formulario HTML, agrega JavaScript para enviar los datos al script al hacer clic en el botón "Enviar". Puedes usar `fetch` o `XMLHttpRequest`. Asegúrate de apuntar la URL en el atributo `action` del formulario a la URL de la aplicación web. Por ejemplo: `<form id="myForm" action="TU_URL_DE_APLICACION_WEB" method="post">`. De forma más moderna usarías Javascript para realizar una petición `POST` asíncrona usando `fetch`.

Consideraciones importantes: Asegúrate de validar los datos en el formulario HTML y en el script de Google Apps Script para evitar errores y garantizar la seguridad. El manejo de errores y la seguridad son cruciales en aplicaciones web reales.