En este tutorial te mostraré cómo crear un formulario HTML personalizado para ingresar datos fácilmente en Google Sheets utilizando Google Apps Script. Esta técnica es perfecta para quienes manejan bases de datos grandes y buscan agilizar el proceso de registro de nuevos clientes o datos, sin depender exclusivamente de Google Forms. Vamos a construir paso a paso desde cero: crear la hoja, programar un menú personalizado y diseñar el formulario HTML. Al final tendrás una base sólida para automatizar el ingreso de información y escalar a soluciones más complejas.
Si prefieres ver el tutorial en video, te lo dejo aquí abajo para que puedas seguirlo visualmente.
1. Crear la hoja y la tabla base en Google Sheets
Para empezar, crea un archivo nuevo en Google Sheets. La forma más rápida es abrir sheets.new en tu navegador. Nombra tu archivo como Clientes. Luego, crea una tabla sencilla con las siguientes columnas que serán los campos que vamos a llenar desde el formulario:
| Nombre | Apellido | Número | Estado | |
|---|---|---|---|---|
| Juan | Pérez | juanperez@email.com | 123456789 | Activo |
| Ana | García | anagarcia@email.com | 987654321 | Inactivo |
El campo Estado lo utilizaremos para experimentar con listas desplegables en el formulario, pero por ahora solo crea la estructura básica como en la tabla. Esto te servirá para alimentar la base de datos desde el formulario.
2. Crear el menú personalizado con Google Apps Script
Ahora vamos con la programación para que puedas abrir el formulario desde un menú personalizado en la hoja. Usaremos la función especial onOpen, que se ejecuta cada vez que abres el archivo, para crear un menú llamado CRM. Este menú tendrá la opción Crear cliente que abrirá el formulario.
function onOpen() {
var ui = SpreadsheetApp.getUi();
ui.createMenu('CRM')
.addItem('Crear cliente', 'crearCliente')
.addToUi();
}Con este código, cada vez que abras tu archivo verás el menú CRM en la barra superior. Por ahora, la opción «Crear cliente» no hará nada porque falta crear la función crearCliente.
3. Crear la función para mostrar el formulario HTML
La función crearCliente será la encargada de abrir una ventana emergente (popup) con nuestro formulario HTML. Para esto usaremos el servicio HTML Service de Google Apps Script. Primero, veamos una versión sencilla que muestra un mensaje básico, para entender cómo funciona:
function crearCliente() {
var html = HtmlService.createHtmlOutput('<h2>Crea tu cliente</h2>');
SpreadsheetApp.getUi().showModalDialog(html, 'Crear tu cliente');
}Este código abre un popup con un título simple. Puedes ajustar el tamaño con setWidth y setHeight para que se vea mejor:
var html = HtmlService.createHtmlOutput('<h2>Crea tu cliente</h2>')
.setWidth(400)
.setHeight(300);Pero para formularios más complejos, es mucho mejor separar el código HTML en un archivo aparte. Así mantienes todo organizado y fácil de modificar.
4. Separar el HTML en un archivo externo
En el editor de Apps Script, crea un nuevo archivo HTML llamado formulario.html. Luego, modifica la función crearCliente para que cargue este archivo:
function crearCliente() {
var html = HtmlService.createHtmlOutputFromFile('formulario')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(html, 'Crear tu cliente');
}Ahora crea el archivo formulario.html y agrega un encabezado simple para probar que todo funciona bien:
<h2>Crea tu cliente - Versión 2</h2>Guarda y prueba el menú nuevamente. Verás que el contenido del popup ahora viene del archivo HTML externo.
5. Construir el formulario HTML paso a paso
Dentro de formulario.html, vamos a crear un formulario clásico en HTML. Empezaremos con el campo Nombre. Es importante usar la etiqueta label vinculada al input mediante el atributo for y id, para mejorar la accesibilidad y la experiencia del usuario.
<form id="formCliente">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
</form>Al hacer clic en el texto «Nombre», el cursor se posiciona automáticamente en el campo, lo que mejora mucho la usabilidad. Además, el atributo required asegura que el usuario no pueda enviar el formulario sin completar este campo.
Continúa agregando los demás campos siguiendo la misma estructura: Apellido, Email, Número y Estado. Para Estado puedes usar un select con opciones para que el usuario elija entre «Activo» e «Inactivo».
<form id="formCliente">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required><br>
<label for="apellido">Apellido:</label>
<input type="text" id="apellido" name="apellido" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="numero">Número:</label>
<input type="tel" id="numero" name="numero" pattern="[0-9]{7,15}" title="Solo números, entre 7 y 15 dígitos" required><br>
<label for="estado">Estado:</label>
<select id="estado" name="estado" required>
<option value="" disabled selected>Selecciona una opción</option>
<option value="Activo">Activo</option>
<option value="Inactivo">Inactivo</option>
</select><br>
<button type="submit">Guardar</button>
</form>Este formulario básico ya tiene validación HTML para que los campos obligatorios no queden vacíos y que el email tenga formato correcto. El campo número acepta solo números y entre 7 y 15 dígitos, ajusta esto según tu necesidad.
6. Próximos pasos: conectar el formulario con la hoja
Hasta aquí, tienes el formulario básico y el menú que lo abre. El siguiente paso es manejar el envío del formulario para que los datos se guarden en la hoja de cálculo. Esto implica agregar código JavaScript en el archivo HTML y funciones en Google Apps Script para recibir esos datos y escribirlos en la hoja.
En próximos tutoriales te enseñaré cómo hacer esta conexión, cómo validar los datos de forma avanzada y cómo usar listas desplegables dinámicas para el campo Estado. También veremos cómo escalar esta solución para manejar bases de datos más complejas y automatizar procesos.
Código completo para empezar
Aquí te dejo el código completo que hemos visto hasta ahora para que puedas copiarlo y probarlo en tu proyecto.
Conclusión y próximos pasos
En este tutorial aprendiste a crear un formulario HTML personalizado para Google Sheets usando Google Apps Script, desde la estructura básica en Sheets, pasando por el menú personalizado, hasta el diseño inicial del formulario en HTML. Este método es la base para automatizaciones más avanzadas, como guardar los datos ingresados directamente en la hoja o validar información antes de enviarla. En próximos tutoriales podrás conectar este formulario con tu base de datos y agregar lógica para manejar dropdowns, validaciones y más.
Si quieres aprender a usar Google Forms y Google Sheets desde cero, te invito a tomar un curso gratis de 2 horas.