Si alguna vez has necesitado crear una página de registro para un evento, un webinar o un taller, sabes que las opciones habituales implican plugins de pago, formularios genéricos que no se integran bien con tu diseño, o herramientas externas que añaden complejidad innecesaria.
En este tutorial construimos algo diferente: un sistema de registro completo integrado directamente en Divi, con Google Sheets como base de datos y sin depender de ningún plugin adicional.
¿Qué vamos a construir?
El resultado es una página de registro de eventos completamente funcional que incluye:
- Formulario dinámico cuyos campos se gestionan desde Google Sheets — puedes agregar, quitar o modificar campos sin tocar el código
- Control de cupos con barra de disponibilidad en tiempo real que muestra los lugares restantes
- Lista de espera automática — cuando el evento se llena, los nuevos registros entran en lista de espera con su número de posición
- Correo de confirmación automático al participante con los detalles del evento
- Notificación al organizador en cada nuevo registro con el resumen de datos y el total acumulado
- Detección de duplicados — si alguien intenta registrarse con un correo ya existente, el sistema lo detecta
- Precargador mientras el formulario carga los campos desde Sheets, para que la experiencia visual sea limpia desde el primer segundo
Todo esto sin plugins de pago y sin base de datos propia. Google Sheets actúa como el backend completo del sistema.
¿Cómo funciona la integración?
La clave está en Google Apps Script, que actúa como puente entre el formulario y Google Sheets. Cuando un visitante envía el formulario, el sistema hace tres cosas automáticamente: guarda los datos en la hoja de registros, envía el correo de confirmación al participante y notifica al organizador.
El sistema se apoya en tres hojas dentro del mismo documento de Google Sheets:
Configuración — donde defines los datos del evento que aparecen en los correos: nombre del evento, fecha, horario y enlace de acceso. También controlas desde aquí el cupo máximo, los correos del organizador y si quieres activar o desactivar las notificaciones. Todo editable sin tocar código.
Campos — la hoja más poderosa del sistema. Aquí defines qué campos tiene tu formulario: el nombre, la etiqueta que verá el usuario, el tipo de campo (texto, email, teléfono, selector), si es requerido y las opciones en caso de ser un select. El formulario en la página se genera automáticamente a partir de esta hoja. Si agregas un campo nuevo, aparece en el formulario y se crea la columna correspondiente en Registros de forma automática.
Registros — donde se guardan todos los datos de quienes se registran, con timestamp, estado (Confirmado o Lista de espera) y número de posición en espera si aplica.
¿Cómo lo construimos en Divi?
El diseño de la página lo construimos completamente con módulos nativos de Divi. El panel con la información del evento, el título, la fecha, el horario y todos los elementos visuales los manejas desde el builder como cualquier otra página, con total libertad de diseño.
La funcionalidad del formulario, la barra de cupos y los mensajes de confirmación se integran mediante unos fragmentos de código que encontrarás dentro del tutorial exclusivo en la Academia OV DIVI. Son tres bloques: el HTML que define la estructura del formulario, el CSS con todos los estilos del sistema, y el JavaScript que conecta todo con Google Sheets.
¿Para qué tipo de proyectos es útil?
Este sistema es perfecto para cualquier proyecto que necesite registrar personas para un evento con cupo limitado:
- Webinars y talleres online
- Cursos presenciales o híbridos
- Eventos corporativos
- Cenas, torneos, actividades con aforo limitado
- Cualquier evento donde necesites una lista de asistentes organizada
Y lo mejor es que es completamente reutilizable. Cada vez que tengas un nuevo evento, duplicas la página en Divi, creas un nuevo documento en Google Sheets, pegas el script y ajustas los campos desde la hoja — sin tocar el diseño ni el código.
Accede al tutorial completo
Este es un tutorial exclusivo disponible para los miembros de la Academia OV DIVI. En él encontrarás el paso a paso completo: desde la configuración de Google Sheets y Apps Script hasta la implementación en Divi, incluyendo todos los fragmentos de código listos para usar.
👉 Ver tutorial en la Academia OV DIVI
¿Quieres ver el resultado antes de entrar al tutorial? Aquí tienes la demo en vivo:
¿Tienes alguna pregunta sobre cómo implementarlo o quieres adaptarlo a un caso específico? Déjame tu comentario abajo.
0 comentarios