AI WORLD HQCrea un formulario de inscripción sencillo con GitHub Copilot
Define los campos que necesita tu evento y deja que Copilot te prepare un formulario HTML limpio que puedes abrir en cualquier navegador.
En resumen: GitHub Copilot puede preparar un formulario HTML básico de inscripción cuando le describes los campos en lenguaje cotidiano. Acabarás con un archivo guardado que puedes abrir en cualquier navegador — recoger las respuestas en línea es un paso aparte, que viene después.
Para un taller, una reunión de un club o una salida de equipo, un formulario de inscripción siempre es mejor que perseguir respuestas en hilos de chat. GitHub Copilot es un asistente de programación con IA que sugiere código mientras escribes — le describes lo que quieres con palabras normales y él se encarga de preparar el formulario por ti. Esta guía es para organizadores que prefieren no escribir código a mano pero quieren un formulario sencillo que entiendan y puedan editar más adelante.
💡 Consejo: toca el número de un paso cuando lo termines — aparece una marca verde y tu navegador recuerda hasta dónde llegaste.
- Una cuenta gratuita de GitHub (regístrate en github.com si todavía no tienes una).
- Un plan de GitHub Copilot — hay una versión gratuita con funciones limitadas y planes de pago con más opciones; consulta la página de precios de GitHub para ver cuál te encaja hoy.
- Visual Studio Code (VS Code) instalado — un editor de código gratuito de Microsoft y el lugar más sencillo para usar Copilot.
- Unos 20–30 minutos para tu primera prueba. Los siguientes formularios te llevarán mucho menos.
- Una limitación importante: esta guía termina con un archivo guardado que se abre en tu navegador. Todavía no envía respuestas a ningún sitio — recoger inscripciones en línea es un paso aparte.
Haz una lista de los campos que necesita tu formulario
Abre cualquier bloc de notas — papel, el móvil o un archivo de texto plano — y anota las preguntas que quieres hacer. La mayoría de inscripciones a eventos necesitan entre cuatro y seis campos como máximo: nombre completo, correo electrónico, número de invitados, necesidades dietéticas o de accesibilidad, y una caja de comentarios en texto libre. Mantenlo corto; cada caja extra reduce la cantidad de personas que terminan el formulario. Si tu evento tiene varias sesiones o tipos de entrada, añade un único campo de "sesión" con un conjunto pequeño de opciones en lugar de varias cajas separadas.
Sabrás que funcionó cuando un amigo pueda leer tu lista y entender de inmediato para quién es el formulario.
Crea una carpeta y el archivo HTML
Crea una carpeta nueva para el proyecto — llámala EventForm y ponla en el Escritorio o en Documentos. Dentro, crea un archivo de texto en blanco y renómbralo como signup.html. La terminación .html le indica a tu ordenador "esto es una página web". La forma de crear el archivo en blanco depende de tu sistema: en Windows, busca algo como clic derecho → Nuevo → Documento de texto y luego renómbralo; en Mac, abre TextEdit, elige algo como Archivo → Nuevo y luego Archivo → Guardar como con el formato en texto plano. La redacción exacta del menú cambia según la versión — busca lo que sirva para crear un archivo de texto en blanco.
Abre signup.html en VS Code arrastrándolo sobre la ventana, o usa Archivo → Abrir carpeta para elegir la carpeta EventForm.
Sabrás que funcionó cuando signup.html aparezca como pestaña en la parte superior de VS Code y el nombre de la carpeta se vea en la barra lateral izquierda.
Añade un esqueleto básico de HTML
Con el archivo vacío abierto, escribe dentro un pequeño esqueleto. Cada línea es una etiqueta — un marcador con nombre que le dice al navegador qué hay entre la versión de apertura y la de cierre. La etiqueta <title> nombra la pestaña del navegador, la etiqueta <body> contiene lo que ve quien visita la página, y <!-- … --> es un comentario — una nota invisible que el navegador ignora. Este esqueleto le da a Copilot un lugar claro para rellenar tu formulario, así que escríbelo con cuidado y exactamente como se muestra.
<html>
<head><title>Sign-up</title></head>
<body>
<!-- form goes here -->
</body>
</html>
Sabrás que funcionó cuando VS Code coloree las etiquetas en distintos tonos y la barra inferior de previsualización muestre "Sign-up".
Activa Copilot en VS Code
En VS Code, busca en la barra lateral izquierda el icono de Extensiones (un cuadrado hecho de cuatro cuadrados más pequeños, a veces etiquetado como Extensions). Haz clic, escribe Copilot en el cuadro de búsqueda y elige la extensión oficial GitHub Copilot en los resultados. Haz clic en Instalar y, cuando te lo pida, reinicia VS Code. Después del reinicio aparecerá un aviso para iniciar sesión — haz clic en el botón para conectar tu cuenta; se abre una pestaña del navegador y confirmas con la cuenta de GitHub que tiene acceso a Copilot. Acepta los permisos que te solicite. Si el icono de la barra lateral tiene otro aspecto, abre el panel de Extensiones desde el menú Ver en su lugar.
Sabrás que funcionó cuando veas un icono de Copilot en algún lugar de la ventana de VS Code (suele estar cerca de la parte inferior) y puedas abrir un panel de chat de Copilot desde el menú Ver o un botón de la barra lateral.
Pídele a Copilot que rellene el formulario
Coloca el cursor sobre la línea vacía dentro de las etiquetas <body> — la línea que dice <!-- form goes here -->. En esa línea, escribe un comentario corto en lenguaje cotidiano describiendo el evento y cada campo de tu lista, más un botón de Enviar. Haz una pausa de unos dos segundos sin escribir. Copilot debería sugerirte un bloque de código en gris claro; pulsa la tecla Tab para aceptarlo, o haz clic en un botón Aceptar si aparece. Si la primera sugerencia no es lo que querías, bórrala, reformula tu comentario con un wording más claro y vuelve a pausar. El comentario en sí permanece invisible en el navegador — solo el código sugerido se vuelve visible para los visitantes.
Sabrás que funcionó cuando el archivo contenga un bloque <form> con cajas etiquetadas y un botón de enviar, y cada etiqueta coincida con uno de los campos de tu lista.
Revisa lo que escribió Copilot
Lee el código línea por línea, despacio. No necesitas entender cada símbolo — solo comprueba que los nombres de los campos, las etiquetas junto a cada caja y el botón de enviar coincidan con lo que pediste. Si falta un campo, haz clic en una línea vacía nueva dentro del área del formulario, escribe otro comentario corto pidiéndolo, pausa y acepta la nueva sugerencia. Si una etiqueta dice algo que no quieres, solo edita las palabras dentro de las comillas. Trata a la IA como una asistente útil: te da un primer borrador rápido, pero tus ojos son la última revisión.
Sabrás que funcionó cuando puedas leer cada etiqueta en voz alta y suene como algo que una persona visitante real entendería.
Guarda y abre el formulario en tu navegador
Guarda el archivo con Ctrl+S en Windows o Cmd+S en Mac (o usa Archivo → Guardar). Ahora ve a tu carpeta EventForm y haz doble clic en signup.html. Tu navegador predeterminado lo abrirá y verás tu formulario exactamente como lo vería cualquier visitante. Haz clic dentro de cada caja, escribe algo y prueba el botón de Enviar — pulsarlo todavía no enviará nada a ningún sitio, y es lo esperado, porque el formulario no está conectado a un servidor. Este paso es solo para confirmar que lo que ves en pantalla coincide con lo que pediste.
Sabrás que funcionó cuando el formulario se vea limpio en el navegador, cada caja acepte texto y al hacer clic en Enviar no aparezca ningún mensaje de error.
- Aceptar la primera sugerencia de Copilot sin leerla. A veces la IA inventa nombres de campos que suenan razonables pero no coinciden con lo que querías — lee las etiquetas en voz alta y corrige el wording antes de guardar.
- Guardar el archivo sin la extensión
.html. Un archivo llamado "signup" sin la terminación.htmlno se abrirá como página web. Comprueba el nombre del archivo en tu carpeta antes de hacer doble clic. - Pedir demasiados campos en el primer intento. Empieza con cinco o seis — los formularios largos pierden inscripciones. Añade más después si realmente los necesitas.
Prueba ahora mismo
Abre tu aplicación de bloc de notas y anota cuatro campos para un evento que realmente organizarías — un almuerzo, una clase, una quedada para jugar — y luego crea una carpeta nueva en tu Escritorio, crea un archivo signup.html con el esqueleto, ábrelo en VS Code y pídele a Copilot esos cuatro campos exactos. Dentro de veinte minutos tendrás un formulario de inscripción listo en tu escritorio que podrás enseñarle a un amigo.
❓ Preguntas rápidas
¿Cuánto tiempo lleva?
Unos 6 minutos — la guía tiene 7 pasos y puedes ir marcándolos a medida que avanzas.
¿Qué herramienta necesito?
Esta guía usa GitHub Copilot — pero el método funciona de forma muy parecida en otros asistentes de IA.
¿Necesito preparar algo?
- Una cuenta gratuita de GitHub (regístrate en github.com si todavía no tienes una).
- Un plan de GitHub Copilot — hay una versión gratuita con funciones limitadas y planes de pago con más opciones; consulta la página de precios de GitHub para ver cuál te encaja hoy.
- Visual Studio Code (VS Code) instalado — un editor de código gratuito de Microsoft y el lugar más sencillo para usar Copilot.
- Unos 20–30 minutos para tu primera prueba. Los siguientes formularios te llevarán mucho menos.
- Una limitación importante: esta guía termina con un archivo guardado que se abre en tu navegador. Todavía no envía respuestas a ningún sitio — recoger inscripciones en línea es un paso aparte.
¿Qué errores debo evitar?
- Aceptar la primera sugerencia de Copilot sin leerla. A veces la IA inventa nombres de campos que suenan razonables pero no coinciden con lo que querías — lee las etiquetas en voz alta y corrige el wording antes de guardar.
- Guardar el archivo sin la extensión
.html. Un archivo llamado "signup" sin la terminación.htmlno se abrirá como página web. Comprueba el nombre del archivo en tu carpeta antes de hacer doble clic. - Pedir demasiados campos en el primer intento. Empieza con cinco o seis — los formularios largos pierden inscripciones. Añade más después si realmente los necesitas.
Sigue leyendo
✦ Guía original paso a paso del equipo editorial de IA de AI World HQ Escrita en lenguaje claro y revisada para mayor precisión.
← Volver a las noticias