Paso a paso
🌐 GitHub Copilot
GitHub
📘 Paso a paso 📘 GitHub Copilot↗ GitHub Copilot · Sitio oficialprincipiante 💼 Negocios

Crea un formulario de reseñas sencillo para tu pequeño negocio con GitHub Copilot

Deja que la IA escriba el HTML, el CSS y el JavaScript por ti — sin saber programar, listo en unos 20 minutos

7 min de lectura·14 de agosto de 2026

Esta guía fue escrita por IA. Pasó controles automáticos de datos y calidad; ningún editor humano la revisó.

Si llevas una pequeña tienda, 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 montar un formulario de "Deja una reseña" puede costar más de lo que te gustaría gastar. Esta guía te explica cómo hacer que GitHub Copilot escriba ese formulario por ti — y te cuenta, con 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.

✅ Antes de empezar
  • Una cuenta gratuita de GitHub (regístrate en github.com — solo necesitas un correo).
  • Un navegador moderno como Chrome, Edge o Firefox.
  • Unos 15–20 minutos tranquilos.
  • Una lista corta con 3 campos que quieras en el formulario (la mayoría de los formularios de reseñas solo piden: nombre del cliente, puntuación con estrellas y un cuadro de comentario).
  • Ojo: GitHub Copilot tiene planes gratuitos y de pago — revisa la página de precios de GitHub para ver las opciones actuales antes de empezar.
1
Paso 1 de 7

Abre un Codespace gratis (tu editor de código en la nube)

Inicia sesión en github.com, ve a github.com/codespaces y haz clic en el botón verde "New codespace". Elige la plantilla "Blank" y escoge una máquina pequeña (2 núcleos bastan para un formulario tan simple). 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 "+" de arriba a la derecha y luego en "New repository"), después pulsa el botón verde "Code" y elige la pestaña "Codespaces".

💬 Ejemplollama a tu repositorio `review-form` para encontrarlo fácilmente después.
✅ Sabrás que funcionó cuando

Sabrás que ha funcionado cuando veas una pantalla de editor oscura con un panel de archivos a la izquierda y un pequeño panel de terminal abajo.

Siguiente paso ↓
GitHub CopilotNew codespace
✏️ Boceto: tu pantalla puede verse un poco distinta
2
Paso 2 de 7

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 la 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í 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

Sabrás que ha funcionado 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.

Siguiente paso ↓
GitHub CopilotNew File
✏️ Boceto: tu pantalla puede verse un poco distinta
3
Paso 3 de 7

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 conversación o un destello ✨. Haz clic en él. Se abrirá un panel de chat a la derecha. En la caja de abajo, escribe tu petición en un lenguaje claro y directo. Sé concreto con los tres campos que quieres.

💬 Ejemplo*"Escribe un formulario HTML limpio para una pequeña panadería llamada 'Sunrise Sourdough'. Pide el nombre del cliente, una valoración de 1 a 5 estrellas y un cuadro de comentarios. Incluye un bonito botón 'Enviar reseña'."*
🔄 Si se ve distinto

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

Sabrás que ha funcionado 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.

Siguiente paso ↓
GitHub CopilotEscribe unformulario HTMLlimpio para una…
✏️ Boceto: tu pantalla puede verse un poco distinta
4
Paso 4 de 7

Pega el código en tu archivo y guárdalo

Haz clic dentro de tu archivo index.html vacío para que el cursor quede 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, mira en la barra de menú superior File → Save — todos los editores de código lo tienen. La pestaña de arriba debería mostrar ahora index.html sin un asterisco pequeño.

💬 Ejemplosi la respuesta de Copilot fue un mensaje de chat en vez de un bloque de código, cópialo del chat y pégalo en el archivo de la misma forma.
✅ Sabrás que funcionó cuando

Sabrás que ha funcionado cuando el archivo ya no tenga un puntito junto a su nombre en el panel izquierdo (los puntitos indican cambios sin guardar).

Siguiente paso ↓
GitHub CopilotCtrl + V
✏️ Boceto: tu pantalla puede verse un poco distinta
5
Paso 5 de 7

Pídele a Copilot que le dé estilo

Ahora toca dejarlo bonito. Vuelve al panel de Copilot Chat y escribe una continuación como la del ejemplo de abajo. Copilot te responde con CSS — la parte que controla colores, espacios y 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 <head> de apertura.

💬 Ejemplo*"Ahora añade CSS para que el formulario se vea cálido y amable: fondo color crema suave, esquinas redondeadas y un botón 'Enviar' marrón. Mantenlo sencillo."*
🔄 Si se ve distinto

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

Sabrás que ha funcionado cuando tu archivo tenga líneas nuevas que empiecen por <style> y terminen con </style>, y el código de dentro tenga palabras como color, padding o border-radius.

Siguiente paso ↓
GitHub CopilotApply
✏️ Boceto: tu pantalla puede verse un poco distinta
6
Paso 6 de 7

Haz que realmente te envíe la reseña

Un formulario que está solo en una página puede recoger información en el navegador, pero no puede mandarte los resultados por correo sin un pequeño paso extra. Para ser sincero: Copilot puede escribir el front-end (lo que ven los visitantes), pero para recibir las reseñas en tu bandeja de entrada necesitarás un servicio de formularios gratuito. Formspree tiene un plan gratuito que funciona bien — regístrate, consigue un endpoint de formulario (una dirección web larga) y luego pídele a Copilot que dirija tu formulario hacia allí. En el chat, escribe algo parecido al ejemplo. Copilot reescribirá la etiqueta <form> para que los datos vayan a Formspree, que después los reenviará a tu correo. Si la configuración de Formspree te parece liosa, pregúntale a Copilot: "Cambia el botón de envío para que abra la app de correo del usuario con la reseña ya escrita." Ese atajo rápido usa un enlace mailto: y funciona sin ningún servicio de terceros.

💬 Ejemplo*"Actualiza el formulario para que se envíe a Formspree. Usa este endpoint: https://formspree.io/f/your-code-here, y cambia el texto del botón a 'Enviar mi reseña'."*
✅ Sabrás que funcionó cuando

Sabrás que ha funcionado cuando pulses Submit en la vista previa y ocurra una de dos cosas: (a) Formspree muestre una página de "gracias", o (b) se abra tu aplicación de correo con el texto de la reseña listo para enviar.

Siguiente paso ↓
GitHub CopilotActualiza elformulario para quese envíe a…
✏️ Boceto: tu pantalla puede verse un poco distinta
7
Paso 7 de 7

Previsualízalo y ajusta lo que no te convenza

Haz clic derecho en tu archivo index.html del panel izquierdo y elige "Open in browser" (o mira cerca de la parte superior de la pestaña del archivo, donde puede haber un pequeño icono de navegador). Se abrirá una pestaña nueva con 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, donde puede haber un pequeño icono "Go Live" o "Live Preview" — a veces Codespaces lo esconde ahí. Si algo se ve raro, vuelve a Copilot Chat y describe el problema con palabras sencillas — por ejemplo: "El botón de envío es demasiado pequeño en el móvil: hazlo más grande."

✅ Sabrás que funcionó cuando

Sabrás que ha funcionado cuando tu formulario se vea decente en pantalla, los campos sean fáciles de pulsar y enviarlo no muestre ningún error.

GitHub CopilotOpen in browser
✏️ Boceto: tu pantalla puede verse un poco distinta

Errores habituales

  • Pegar el código otra vez en el chat en vez de en el archivo. Muchos principiantes pegan la respuesta de Copilot en el chat de nuevo, creando un bucle sin fin. Solución: haz clic en el área vacía del editor antes de pegar y luego guarda con Ctrl+S.
  • Olvidarse de guardar. Codespaces 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 ciegamente en todo lo que escribe Copilot. Copilot es útil pero se equivoca — puede inventarse un nombre de campo, saltarse una etiqueta de cierre o usar HTML obsoleto. 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 pegar y publicar 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 'Deja tu reseña'. Campos: nombre, valoración de 1 a 5 estrellas y un cuadro de comentarios. Añade un botón 'Enviar reseña' y un estilo sencillo y cálido." Guarda el archivo, abre la vista previa y mira lo que te entrega Copilot en menos de un minuto.

🎯 Siguiente guíaCrea una calculadora sencilla de presupuesto del hogar con GitHub CopilotEscribe una pequeña calculadora que sume tus gastos mensuales — Copilot te ayuda a escribir el código, línea por línea.

❓ 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 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).
  • Un navegador moderno como Chrome, Edge o Firefox.
  • Unos 15–20 minutos tranquilos.
  • Una lista corta con 3 campos que quieras en el formulario (la mayoría de los formularios de reseñas solo piden: nombre del cliente, puntuación con estrellas y un cuadro de comentario).
  • Ojo: GitHub Copilot tiene planes gratuitos y de pago — revisa la página de precios de GitHub para ver las opciones actuales antes de empezar.

Sigue leyendo

📘 Crea 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. 📘 Primeros pasos con GitHub Copilot: una guía para principiantes Aprende cómo dejar que la IA escriba código por ti de forma segura, directamente en tu editor, para que puedas terminar proyectos pequeños más rápido. 📰 Cómo escribir tu primer prompt en la app de GitHub Copilot Una guía paso a paso, pensada para principiantes, para tener tu primera conversación con el asistente de IA de GitHub — sin necesidad de saber programar 📘 Crea una calculadora sencilla de presupuesto del hogar con GitHub Copilot Escribe una pequeña calculadora que sume tus gastos mensuales — Copilot te ayuda a escribir el código, línea por línea. 📘 Genera fragmentos de código básicos y reutilizables con GitHub Copilot Aprende cómo GitHub Copilot puede escribir código inicial por ti — desde formatear fechas hasta llamadas sencillas a APIs — aunque no seas desarrollador a tiempo completo. 📘 Cómo pedirle a GitHub Copilot que te explique un mensaje de error confuso Una forma sencilla para principiantes de convertir un texto críptico en una lista clara y amigable
¿Te ha resultado útil?

✦ Generada por IA en la redacción automática de AI World HQ, en lenguaje claro. Pasó controles automáticos de datos y calidad; ningún editor humano revisó esta guía. ¿Ves un error? Usa los botones de arriba.

📘 ¿Lo prefieres en un solo archivo? Trabajo y correo: el pack de IA (12 guías, PDF gratuito e imprimible)

← Volver a las noticias