AI WORLD HQCrea un formulario de reseñas sencillo para tu pequeño negocio con GitHub Copilot
Deja que la IA escriba el HTML, CSS y JavaScript por ti — sin experiencia en programación, listo en unos 20 minutos
En resumen: GitHub Copilot puede crear un formulario de "Deja una reseña" (HTML, CSS y JavaScript) en unos 15 minutos dentro de un editor gratuito en el navegador. Aun así necesitarás un servicio gratuito como Formspree para que las reseñas lleguen de verdad a tu correo — un HTML sencillo por sí solo no puede guardar datos.
Si llevas una tienda pequeña, una cafetería o un servicio local, ya sabes lo mucho que ayudan unas cuantas reseñas honestas. Seguro que también sabes que contratar a un programador para crear un formulario de "Deja una reseña" puede costar más de lo que te gustaría gastar. Esta guía te explica paso a paso cómo hacer que GitHub Copilot escriba ese formulario por ti — y te cuenta, en palabras claras, qué puede hacer y qué no.
💡 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 — solo necesitas un correo electrónico).
- Un navegador moderno como Chrome, Edge o Firefox.
- Unos 15–20 minutos tranquilos.
- Una lista corta con los 3 campos que quieres en tu formulario (la mayoría de los formularios de reseñas solo necesitan: nombre del cliente, puntuación con estrellas y un cuadro de comentario).
- Aviso: GitHub Copilot tiene un plan gratuito, pero la función de chat tiene un límite mensual de mensajes. Si le das mucho uso quizá tengas que pasarte al plan de pago — consulta la página de precios de GitHub para ver la tarifa actual antes de empezar.
Abre un Codespace gratis (tu editor de código en la nube)
Inicia sesión en github.com, luego ve a github.com/codespaces y haz clic en el botón verde "New codespace". Elige la plantilla "Blank" y selecciona una máquina pequeña (2 núcleos son más que suficientes para un formulario pequeño). Se abrirá una pestaña nueva con un editor de código completo — se parece mucho a VS Code, pero funciona en tu navegador. Espera unos 30 segundos a que cargue. Si te cuesta encontrar el botón de Codespaces, crea primero un repositorio vacío nuevo (haz clic en el "+" arriba a la derecha y luego en "New repository"), después pulsa el botón verde "Code" y elige la pestaña "Codespaces". Sabrás que funcionó cuando veas una pantalla de editor oscura con un panel de archivos a la izquierda y un pequeño panel de terminal abajo.
Crea un archivo nuevo para tu formulario
En el panel de archivos de la izquierda, busca un icono que parece una hoja de papel con una esquina doblada — ese es el botón "New File". Haz clic, escribe index.html como nombre de archivo y pulsa Enter. Se abrirá un editor en blanco en el centro de la pantalla — ahí es donde vivirá tu formulario.
Si ese botón no está donde lo esperas, haz clic derecho en cualquier zona vacía del panel de archivos y elige "New File" en el menú que aparece.
Sabrás que funcionó cuando index.html aparezca en el panel izquierdo y el editor del centro esté vacío, con un número de línea 1 en el borde izquierdo.
Pídele a Copilot que cree el formulario por ti
Busca el icono de Copilot Chat en la barra lateral izquierda — normalmente parece una pequeña burbuja de chat o un destello ✨. Haz clic. Se abrirá un panel de chat a la derecha. En la caja de abajo, escribe tu petición en un lenguaje claro. Sé concreto con los tres campos que quieres. Si no ves el icono de chat, prueba con el atajo de teclado Ctrl + Shift + I en Windows/Linux, o Cmd + Shift + I en Mac — se abrirá el mismo panel de chat.
Sabrás que funcionó cuando Copilot responda con un bloque de código HTML en el chat y aparezca un pequeño botón "Apply" o "Copy" al lado.
Pega el código en tu archivo y guárdalo
Haz clic dentro de tu archivo index.html vacío para que el cursor esté dentro. Luego pulsa Ctrl + V (o Cmd + V en Mac) para pegar el código del chat. Si aparece una pequeña ventana pidiendo confirmación, haz clic en "Accept". Guarda el archivo con Ctrl + S (o Cmd + S).
Si tus atajos de teclado no coinciden, busca en la barra de menú superior File → Save — todos los editores de código lo tienen.
Sabrás que funcionó cuando el archivo ya no tenga un puntito al lado de su nombre en el panel izquierdo (los puntitos indican cambios sin guardar). La pestaña de arriba debería mostrar index.html sin ningún asterisco pequeño.
Pídele a Copilot que le dé estilo
Ahora haz que se vea bonito. Vuelve al panel de Copilot Chat y escribe una continuación como la del ejemplo de abajo. Copilot responderá con CSS — la parte que controla los colores, los espacios y las fuentes. Haz clic en el botón "Apply" si aparece; si no, haz clic en "Copy" y pega el CSS al principio de tu archivo, justo después de la etiqueta de apertura <head>.
Si no ves "Apply", busca un pequeño enlace "Insert at cursor" cerca del bloque de código — la mayoría de los editores lo ofrecen.
Sabrás que funcionó cuando tu archivo tenga líneas nuevas que empiecen con <style> y terminen con </style>, y el código de dentro tenga palabras como color, padding o border-radius.
Haz que la reseña te llegue de verdad
Un formulario sentado solo en una página puede recoger información en el navegador, pero no puede enviarte los resultados por correo sin un pequeño paso extra. Lo cierto es: Copilot puede escribir la parte visual (lo que ven los visitantes), pero para recibir las reseñas en tu correo necesitarás un servicio gratuito de formularios. Formspree tiene un plan gratuito que funciona bien — regístrate, obtén un endpoint de formulario (una dirección web larga) y luego pídele a Copilot que dirija tu formulario hacia ahí.
En el chat, escribe algo como el ejemplo. Copilot reescribirá la etiqueta <form> para que los datos vayan a Formspree, que luego te los reenviará por correo.
Si la configuración de Formspree te parece liosa, pregúntale a Copilot: "Cambia el botón de enviar para que abra la app de correo del usuario con la reseña ya rellenada." Ese atajo rápido usa un enlace mailto: y funciona sin servicios de terceros.
Sabrás que funcionó cuando hagas clic en Submit en la vista previa y ocurra una de dos cosas: (a) Formspree muestre una página de agradecimiento, o (b) se abra tu app de correo con el texto de la reseña listo para enviar.
Previsualízalo y ajusta lo que no te guste
Haz clic derecho en tu archivo index.html en el panel izquierdo y elige "Open in browser" (o mira cerca de la parte superior de la pestaña del archivo, suele haber un pequeño icono de navegador). Se abrirá una pestaña nueva mostrando tu formulario. Prueba a rellenarlo y enviarlo para ver cómo se comporta.
Si no aparece "Open in browser", mira en la esquina inferior derecha del editor un pequeño icono "Go Live" o "Live Preview" — a veces Codespaces lo esconde ahí.
Sabrás que funcionó cuando tu formulario se vea decente en pantalla, los campos sean fáciles de clicar y al enviarlo no aparezca ningún error. Si algo no se ve bien, vuelve a Copilot Chat y describe el problema con palabras claras — por ejemplo: "El botón de enviar es muy pequeño en el móvil — hazlo más grande."
- Pegar el código de vuelta en el chat en vez de en el archivo. Muchos principiantes pegan la respuesta de Copilot otra vez en el chat, creando un bucle infinito. Solución: haz clic en el área vacía del editor antes de pegar y luego guarda con Ctrl+S.
- Olvidar guardar. Codespace suele autoguardar, pero no siempre. Solución: echa un vistazo a la pestaña del archivo — si hay un puntito o un asterisco junto al nombre, aún no está guardado. Pulsa Ctrl+S para asegurarte.
- Confiar en cada línea que escribe Copilot. Copilot es útil, pero se equivoca — puede inventarse un nombre de campo, olvidar una etiqueta de cierre o usar HTML desactualizado. Solución: lee el código que sugiere, abre la vista previa y pídele a Copilot que arregle cualquier cosa rara en vez de pegarlo y publicarlo sin más.
Pruébalo ahora
Abre github.com/codespaces, inicia un Codespace en blanco y pega este prompt exacto en Copilot Chat: "Hazme una página HTML limpia y amable con un formulario de 'Deja una reseña'. Campos: nombre, puntuación de 1–5 estrellas y un cuadro de comentario. Añade un botón 'Enviar reseña' y un estilo cálido y sencillo." Guarda el archivo, abre la vista previa y mira lo que Copilot te entrega en menos de un minuto.
❓ Preguntas rápidas
¿Cuánto tiempo lleva?
Unos 7 minutos — la guía tiene 7 pasos y puedes ir marcándolos a medida que avanzas.
¿Qué herramienta necesito?
Esta guía usa GitHub 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 — solo necesitas un correo electrónico).
- Un navegador moderno como Chrome, Edge o Firefox.
- Unos 15–20 minutos tranquilos.
- Una lista corta con los 3 campos que quieres en tu formulario (la mayoría de los formularios de reseñas solo necesitan: nombre del cliente, puntuación con estrellas y un cuadro de comentario).
- Aviso: GitHub Copilot tiene un plan gratuito, pero la función de chat tiene un límite mensual de mensajes. Si le das mucho uso quizá tengas que pasarte al plan de pago — consulta la página de precios de GitHub para ver la tarifa actual antes de empezar.
¿Qué errores debo evitar?
- Pegar el código de vuelta en el chat en vez de en el archivo. Muchos principiantes pegan la respuesta de Copilot otra vez en el chat, creando un bucle infinito. Solución: haz clic en el área vacía del editor antes de pegar y luego guarda con Ctrl+S.
- Olvidar guardar. Codespace suele autoguardar, pero no siempre. Solución: echa un vistazo a la pestaña del archivo — si hay un puntito o un asterisco junto al nombre, aún no está guardado. Pulsa Ctrl+S para asegurarte.
- Confiar en cada línea que escribe Copilot. Copilot es útil, pero se equivoca — puede inventarse un nombre de campo, olvidar una etiqueta de cierre o usar HTML desactualizado. Solución: lee el código que sugiere, abre la vista previa y pídele a Copilot que arregle cualquier cosa rara en vez de pegarlo y publicarlo sin más.
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