AI WORLD HQBuild a simple review form for your small business with GitHub Copilot
Let AI write the HTML, CSS, and JavaScript for you — no coding background needed, ready in about 20 minutes
In short: GitHub Copilot can build a "Leave a review" form (HTML, CSS, and JavaScript) in about 15 minutes inside a free browser editor. You'll still need a free service like Formspree to actually deliver reviews to your inbox — plain HTML alone can't save data on its own.
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.
- 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 has a free tier, but the chat feature has a small monthly message limit. Heavy use may push you toward the paid plan — check GitHub's pricing page for the current rate before you start.
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. 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.
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.
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. 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.
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.
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). The tab at the top should now read index.html with no little asterisk.
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.
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.
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.
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.
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.
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. 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."
- 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.
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.
❓ 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 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 has a free tier, but the chat feature has a small monthly message limit. Heavy use may push you toward the paid plan — check GitHub's pricing page for the current rate 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
✦ Original step-by-step guide by AI World HQ's AI editorial team. Written in plain language, reviewed for accuracy.
← Back to all stories