Step-by-step

🌐 GitHub Copilot

GitHub

📘 Step-by-step 📘 GitHub Copilot↗ GitHub Copilot · Official sitebeginner 💼 Business

Build a simple review form for your small business with GitHub Copilot

Q: What mistakes should I avoid?

Pasting the code back into the chat instead of the file. Many beginners paste Copilot's reply into the chat again, creating an endless loop. The fix: click into the empty editor area before pressing paste, then save with Ctrl+S. Forgetting to save. Codespaces often auto-saves, but not always. The fix: glance at the file tab — if there's a dot or asterisk next to the filename, it isn't

Let AI write the HTML, CSS, and JavaScript for you — no coding background needed, ready in about 20 minutes

7 min read·August 14, 2026

This guide was written by AI. It passed automated fact and quality checks; no human editor reviewed it.

If you run a small shop, café, or local service, you already know how much a few honest reviews help. You probably also know that hiring a developer to build a "Leave a review" form can cost more than you'd like to spend. This guide walks you through having GitHub Copilot write that form for you — and explains, in plain words, what it can do and what it can't.

💡 Tip: tap a step’s number when you finish it — a green tick appears and your browser remembers how far you got.

✅ Before you start

A free GitHub account (sign up at github.com — all you need is an email).
A modern browser like Chrome, Edge, or Firefox.
About 15–20 minutes of quiet time.
A short list of 3 fields you want on your form (most review forms just need: customer name, star rating, and a comment box).
Heads-up: GitHub Copilot offers both free and paid plans — check GitHub's pricing page for the current options before you start.

Step 1 of 7

Open a free Codespace (your code editor in the cloud)

Sign in to github.com, then head to github.com/codespaces and click the green "New codespace" button. Pick the "Blank" template and choose a small machine (2-core is plenty for a tiny form). A new tab opens with a full code editor — it looks a lot like VS Code, but it runs in your browser. Wait about 30 seconds for it to load. If the Codespaces button is hard to find, create a new empty repository first (click the "+" in the top-right, then "New repository"), then click the green "Code" button and pick the "Codespaces" tab.

💬 Examplename your repository `review-form` so it's easy to find later.

✅ You'll know it worked when

you see a dark editor screen with a file panel on the left and a small terminal panel at the bottom.

Next step ↓

✏️ Sketch — your screen may look a little different

Step 2 of 7

Make a new file for your form

In the left-hand file panel, look for an icon that looks like a piece of paper with a folded corner — that's the "New File" button. Click it, type index.html as the file name, and press Enter. A blank white editor opens in the middle of the screen — that's where your form will live. If that button isn't where you expect, right-click anywhere in the empty file panel and choose "New File" from the menu that pops up.

✅ You'll know it worked when

index.html shows up in the left panel and the editor in the middle is empty, with a line number 1 on the left edge.

Next step ↓

✏️ Sketch — your screen may look a little different

Step 3 of 7

Ask Copilot to build the form for you

Look for the Copilot Chat icon in the left sidebar — it usually looks like a small speech bubble or a sparkle ✨. Click it. A chat panel slides open on the right. In the box at the bottom, type your request in plain English. Be specific about the three fields you want.

💬 Example*"Write a clean HTML form for a small bakery called 'Sunrise Sourdough'. Ask for the customer's name, a star rating from 1 to 5, and a comment box. Include a nice 'Submit review' button."*

🔄 If it looks different

If you don't see a chat icon, try the keyboard shortcut Ctrl + Shift + I on Windows/Linux, or Cmd + Shift + I on Mac — that opens the same chat panel.

✅ You'll know it worked when

Copilot replies with a block of HTML code in the chat, and a small "Apply" or "Copy" button sits next to it.

Next step ↓

✏️ Sketch — your screen may look a little different

Step 4 of 7

Paste the code into your file and save it

Click into your empty index.html file so the cursor is inside it. Then press Ctrl + V (or Cmd + V on Mac) to paste the code from the chat. If a small popup asks you to confirm, click "Accept". Save the file with Ctrl + S (or Cmd + S). If your keyboard shortcuts don't match, look at the top menu bar for File → Save instead — every code editor has that. The tab at the top should now read index.html with no little asterisk.

💬 Exampleif Copilot's reply was a chat message instead of a code block, copy it from the chat, then paste it into the file the same way.

✅ You'll know it worked when

the file no longer has a dot next to its name in the left panel (dots mean unsaved changes).

Next step ↓

✏️ Sketch — your screen may look a little different

Step 5 of 7

Ask Copilot to style it

Now make it look nice. Go back to the Copilot Chat panel and type a follow-up like the example below. Copilot replies with CSS — the part that controls colors, spacing, and fonts. Click the "Apply" button if it appears; otherwise click "Copy" and paste the CSS at the top of your file just after the opening <head> tag. If "Apply" isn't visible, look for a small "Insert at cursor" link near the code block — most editors offer one.

💬 Example*"Now add CSS that makes the form look warm and friendly — soft cream background, rounded corners, and a brown 'Submit' button. Keep it simple."*

✅ You'll know it worked when

your file has new lines starting with <style> and ending with </style>, and the code inside has words like color, padding, or border-radius.

Next step ↓

✏️ Sketch — your screen may look a little different

Step 6 of 7

Make it actually deliver the review to you

A form sitting on a page by itself can collect information in the browser, but it can't email you the results without a small extra step. The honest thing here: Copilot can write the front-end (what visitors see), but to receive reviews in your inbox you'll need a free form service. Formspree has a free tier that works well — sign up, get a form endpoint (a long web address), then ask Copilot to point your form at it. In the chat, type something like the example. Copilot will rewrite the <form> tag so the data goes to Formspree, which then forwards it to your email. If Formspree's setup looks confusing, ask Copilot instead: "Change the submit button so it opens the user's email app with the review already filled in." That quick shortcut uses a mailto: link and works without any third-party service.

💬 Example*"Update the form so it submits to Formspree. Use this endpoint: https://formspree.io/f/your-code-here, and change the button text to 'Send my review'."*

✅ You'll know it worked when

you click Submit in the preview and either (a) Formspree shows a thank-you page, or (b) your email app opens with the review text ready to send.

Next step ↓

✏️ Sketch — your screen may look a little different

Step 7 of 7

Preview it and tweak what you don't like

Right-click your index.html file in the left panel and pick "Open in browser" (or look near the top of the file's tab for a small browser icon). A new tab opens showing your form. Try filling it out and submitting to see how it behaves. If "Open in browser" isn't there, look at the bottom-right corner of the editor for a small "Go Live" or "Live Preview" icon — Codespaces sometimes hides it there. If something looks off, go back to Copilot Chat and describe the problem in plain words — for example: "The submit button is too small on phones — make it bigger."

✅ You'll know it worked when

your form looks decent on screen, the fields are easy to click, and submitting it doesn't show an error.

✏️ Sketch — your screen may look a little different

⚠️ Common mistakes

Pasting the code back into the chat instead of the file. Many beginners paste Copilot's reply into the chat again, creating an endless loop. The fix: click into the empty editor area before pressing paste, then save with Ctrl+S.
Forgetting to save. Codespaces often auto-saves, but not always. The fix: glance at the file tab — if there's a dot or asterisk next to the filename, it isn't saved yet. Press Ctrl+S to be sure.
Trusting every line Copilot writes. Copilot is helpful but it makes mistakes — it might invent a field name, miss a closing tag, or use outdated HTML. The fix: read the suggested code, run the preview, and ask Copilot to fix anything weird instead of just pasting and publishing.

🚀 Try it now

Open github.com/codespaces, start a blank Codespace, and paste this exact prompt into Copilot Chat: "Make me a clean, friendly HTML page with a 'Leave a review' form. Fields: name, star rating 1–5, and a comment box. Add a 'Submit review' button and simple warm styling." Save the file, hit preview, and see what Copilot hands you in under a minute.

🎯 Next guideBuild a Simple Household Budget Calculator with GitHub CopilotWrite a small calculator that adds your monthly expenses — Copilot helps you write the code, line by line.

❓ Quick questions

How long does this take?

About 7 minutes — the guide has 7 steps, and you can tick each one off as you go.

Which tool do I need?

This guide uses GitHub Copilot — but the approach works very similarly in other AI assistants.

Do I need to prepare anything?

A free GitHub account (sign up at github.com — all you need is an email).
A modern browser like Chrome, Edge, or Firefox.
About 15–20 minutes of quiet time.
A short list of 3 fields you want on your form (most review forms just need: customer name, star rating, and a comment box).
Heads-up: GitHub Copilot offers both free and paid plans — check GitHub's pricing page for the current options before you start.

What mistakes should I avoid?

Pasting the code back into the chat instead of the file. Many beginners paste Copilot's reply into the chat again, creating an endless loop. The fix: click into the empty editor area before pressing paste, then save with Ctrl+S.
Forgetting to save. Codespaces often auto-saves, but not always. The fix: glance at the file tab — if there's a dot or asterisk next to the filename, it isn't saved yet. Press Ctrl+S to be sure.
Trusting every line Copilot writes. Copilot is helpful but it makes mistakes — it might invent a field name, miss a closing tag, or use outdated HTML. The fix: read the suggested code, run the preview, and ask Copilot to fix anything weird instead of just pasting and publishing.

Keep reading

📘 Build a Simple Event Sign-Up Form with GitHub Copilot Plan the fields your event needs, then have Copilot draft a clean HTML form you can open in any browser. 📘 Getting started with GitHub Copilot: a beginner's guide Learn how to let AI write code for you safely, right inside your editor, so you can finish small projects faster. 📰 How to Write Your First Prompt in the GitHub Copilot App A beginner-friendly walkthrough to your first conversation with GitHub's AI helper — no coding background needed 📘 Build a Simple Household Budget Calculator with GitHub Copilot Write a small calculator that adds your monthly expenses — Copilot helps you write the code, line by line. 📘 Generate Basic, Reusable Code Snippets with GitHub Copilot Learn how GitHub Copilot can write starter code for you — from date formatting to simple API calls — even if you're not a full-time developer. 📘 How to Ask GitHub Copilot to Explain a Confusing Error Message A beginner's way to turn cryptic red text into a clear, friendly to-do list

Was this helpful?

✦ Generated by AI in AI World HQ's automated newsroom, written in plain language. Checked by automated fact and quality gates — no human editor reviewed this guide. Spot a mistake? Use the buttons above.

📘 Prefer it in one file? Work and Email: The AI Pack (12 guides, free printable PDF)

← Back to all stories