Build a Simple Event Sign-Up Form with GitHub Copilot

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.

Next step ↓

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.

Next step ↓

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.

Next step ↓

Turn on Copilot in VS Code

In VS Code, look at the Copilot icon in the left sidebar (it looks like two overlapping brackets or may be labeled Copilot). Click it to open the Copilot panel. If you're not signed in, a prompt will appear asking you to sign in with your GitHub account — click the button to connect; a browser tab opens and you confirm with the GitHub account that has Copilot access. Accept any permissions the prompt asks for.

Next step ↓

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.

Next step ↓

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.

Next step ↓

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.