AI WORLD HQBuild 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.
In short: GitHub Copilot can draft a basic HTML sign-up form when you describe the fields in plain English. You'll end up with a saved file you can open in any browser — collecting responses online is a separate, later step.
For a workshop, a club meetup, or a team outing, a sign-up form beats chasing replies across chat threads. GitHub Copilot is an AI coding assistant that suggests code as you type — you describe what you want in plain words, and it drafts the form for you. This guide is for organizers who'd rather not write code by hand but want a simple form they understand and can edit later.
💡 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 if you don't have one).
- A GitHub Copilot plan — there's a free tier with limited features and paid tiers with more; check GitHub's pricing page for what fits today.
- Visual Studio Code (VS Code) installed — a free code editor from Microsoft and the simplest place to use Copilot.
- About 20–30 minutes for your first run. Future forms take much less.
- One honest limit: this guide ends with a saved file that opens in your browser. It does not send responses anywhere yet — collecting sign-ups online is a separate step.
List the fields your form needs
Open any notepad — paper, your phone, or a plain text file — and write down the questions you want to ask. Most event sign-ups need four to six fields at most: full name, email address, number of guests, dietary or accessibility needs, and a free-text comments box. Keep it short; every extra box lowers the number of people who finish the form. If your event has multiple sessions or ticket types, add one "session" field with a small set of options instead of several separate boxes.
You'll know it worked when a friend can read your list and immediately understand who the form is for.
Create a folder and the HTML file
Make a new folder for the project — name it EventForm and put it on your Desktop or in Documents. Inside it, create a new blank text file and rename it to signup.html. The .html ending tells your computer "this is a webpage." How you create the blank file depends on your system: on Windows, look for something like right-click → New → Text Document, then rename it; on Mac, open TextEdit, pick something like File → New, then File → Save As with the format set to plain text. The exact menu wording varies by version — look for whatever creates a blank text file.
Open signup.html in VS Code by dragging it onto the window, or use File → Open Folder to pick the EventForm folder.
You'll know it worked when signup.html appears as a tab at the top of VS Code and the folder name shows in the left sidebar.
Add a basic HTML skeleton
With the empty file open, type a small skeleton into it. Each line is a tag — a labeled marker that tells the browser what sits between the opening and closing versions. The <title> tag names the browser tab, the <body> tag holds what a visitor sees, and <!-- … --> is a comment — an invisible note the browser ignores. This skeleton gives Copilot a clear place to fill in your form, so type it carefully and exactly as shown.
<html>
<head><title>Sign-up</title></head>
<body>
<!-- form goes here -->
</body>
</html>
You'll know it worked when VS Code colors the tags in different shades and the bottom preview bar reads "Sign-up".
Turn on Copilot in VS Code
In VS Code, look at the left sidebar for the Extensions icon (a square made of four smaller squares, sometimes labeled Extensions). Click it, type Copilot into the search box, and choose the official GitHub Copilot extension from the results. Click Install, then restart VS Code when prompted. After restart, a sign-in prompt appears — click the button to connect your account; a browser tab opens and you confirm with the GitHub account that has Copilot access. Accept any permissions the prompt asks for. If the sidebar icon looks different, open the Extensions panel from the View menu instead.
You'll know it worked when you see a Copilot icon somewhere in the VS Code window (it often sits near the bottom) and you can open a Copilot chat panel from the View menu or a sidebar button.
Ask Copilot to fill in the form
Click your cursor onto the empty line inside the <body> tags — the line that says <!-- form goes here -->. On that line, type a short comment in plain English describing the event and every field from your list, plus a Submit button. Pause for about two seconds without typing. Copilot should suggest a block of code in light gray; press the Tab key to accept it, or click an Accept button if one appears. If the first suggestion isn't what you wanted, delete it, rephrase your comment with clearer wording, and pause again. The comment itself stays invisible in the browser — only the suggested code becomes visible to visitors.
You'll know it worked when the file contains a <form> block with labeled boxes and a submit button, and each label matches one of your listed fields.
Read what Copilot wrote
Read the code line by line, slowly. You don't need to understand every symbol — just check that the field names, the labels next to each box, and the submit button all match what you asked for. If a field is missing, click on a new empty line inside the form area, type another short comment asking for it, pause, and accept the new suggestion. If a label says something you don't want, just edit the words inside the quotation marks. Treat the AI like a helpful assistant: it gives you a fast first draft, but your eyes are the final check.
You'll know it worked when you can read every label aloud and it sounds like something a real visitor would understand.
Save and open the form in your browser
Save the file with Ctrl+S on Windows or Cmd+S on Mac (or use File → Save). Now go to your EventForm folder and double-click signup.html. Your default browser opens it, and you'll see your form exactly as a visitor would. Click into each box, type something, and try the Submit button — pressing it will not send anything anywhere yet, and that's expected, because the form isn't wired to a server. This step is purely to confirm that what you see on screen matches what you asked for.
You'll know it worked when the form looks clean in the browser, every box accepts typing, and clicking Submit shows no error message.
- Accepting Copilot's first suggestion without reading it. The AI sometimes invents field names that sound reasonable but don't match what you wanted — read the labels out loud and fix the wording before saving.
- Saving the file without the
.htmlextension. A file called "signup" without the.htmlending will not open as a webpage. Double-check the filename in your folder before you double-click it. - Asking for too many fields on the first try. Start with five or six — long forms lose sign-ups. Add more later if you really need them.
Open your notepad app and write down four fields for an event you'd actually run — a lunch, a class, a playdate — then make a new folder on your Desktop, create a signup.html file with the skeleton, open it in VS Code, and ask Copilot for those exact four fields. Twenty minutes from now you'll have a working sign-up form on your desktop that you can show a friend.
❓ Quick questions
How long does this take?
About 6 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 if you don't have one).
- A GitHub Copilot plan — there's a free tier with limited features and paid tiers with more; check GitHub's pricing page for what fits today.
- Visual Studio Code (VS Code) installed — a free code editor from Microsoft and the simplest place to use Copilot.
- About 20–30 minutes for your first run. Future forms take much less.
- One honest limit: this guide ends with a saved file that opens in your browser. It does not send responses anywhere yet — collecting sign-ups online is a separate step.
What mistakes should I avoid?
- Accepting Copilot's first suggestion without reading it. The AI sometimes invents field names that sound reasonable but don't match what you wanted — read the labels out loud and fix the wording before saving.
- Saving the file without the
.htmlextension. A file called "signup" without the.htmlending will not open as a webpage. Double-check the filename in your folder before you double-click it. - Asking for too many fields on the first try. Start with five or six — long forms lose sign-ups. Add more later if you really need them.
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