← Back to Exercise 1 of 3

Exercise 2 of 3: Client Homework Form

Now you're connecting two systems: a form your clients fill out, and a Google backend that emails the answers to you. This is the bridge between "static page" and "real software."

Before you start — what this exercise assumes: Nothing in this exercise costs money. Google Apps Script is free with any Google account.
0 / 0 steps
1
What You're Building (and Why It Matters)

You're building two things that talk to each other:

  • The front end: An HTML form your clients open in their browser. It has questions, text fields, and a "Submit" button.
  • The back end: A tiny script running on Google's servers that receives the form data and sends you an email with the answers.
Why does this matter? This is the exact same pattern used by every piece of middleware you'll ever build. Front end (what the user sees) talks to back end (what does the work). The Eisenhower Matrix was a standalone page — it didn't talk to anything. This exercise teaches you to connect things. If you can connect an HTML form to Google Apps Script, you can connect a Flask app to QuickBooks. Same pattern, bigger scale.

What the client experiences:

  • They open a link you send them
  • They see a professional-looking form with questions
  • They type their answers
  • Their work auto-saves in their browser (so they can close and come back)
  • They click "Submit" and see a confirmation
  • You get an email with all their answers, neatly formatted
2
Build the Email Backend (Google Apps Script)

Google Apps Script is Google's free automation tool. It runs JavaScript on Google's servers and can send emails, read spreadsheets, and respond to web requests. You're going to create a tiny script that does one thing: receive data from your form and email it to you.

This is free — you don't need a "developer account." No credit card, no Google Cloud, no billing setup. If you have a Gmail account, you already have everything you need — Apps Script is part of every Google account, same as Docs and Sheets. (Don't confuse it with Google Cloud Platform, the paid service people picture when they hear "Google developer" — you never touch that here.) The only ceiling is a daily send limit: about 100 emails a day on a free Gmail account, 1,500 on Google Workspace — far more than a client intake form will ever use.
You need a Gmail account for this. If you don't have one, go to accounts.google.com/signup and create one — it's free and takes a couple of minutes.
Open Google Apps Script

You'll see a code editor with some default text (function myFunction() { }). Delete all of it and replace it with the code below — but first, put your email address in the box so the script arrives ready to run.

Google Apps Script — paste this function doPost(e) { // Parse the incoming data from the form var data = JSON.parse(e.postData.contents); // Send an email with the homework answers MailApp.sendEmail({ to: "YOUR_EMAIL@gmail.com", subject: "Homework: " + (data.clientName || "Unknown"), body: data.body }); // Tell the form it worked return ContentService .createTextOutput(JSON.stringify({result: "success"})) .setMimeType(ContentService.MimeType.JSON); } function doGet(e) { // If someone opens the URL directly, show a message return ContentService.createTextOutput( "This endpoint receives homework submissions. " + "Use the form to submit." ); }

Now deploy it as a web app:

"Anyone" sounds scary, but it's fine. This just means the form can send data to the script without the client needing a Google login. The script only does one thing — email you. There's nothing to hack, nothing to steal. This is the same approach we use for our client homework forms.

Google will ask you to authorize the script. This is Google making sure YOU approve the script to send emails on your behalf.

You might see a scary "Google hasn't verified this app" screen. That's normal for personal scripts. Click "Advanced" (small text at bottom left), then click "Go to Homework Email Handler (unsafe)". It's not actually unsafe — this is YOUR script, running on YOUR account. Google just warns about any script it hasn't reviewed.

You should now see a deployment confirmation with a Web app URL. It looks something like https://script.google.com/macros/s/ABC123.../exec.

Your email backend is live. That URL is a working endpoint on the internet. When anything sends a POST request to it with the right data, you'll get an email. Free, hosted by Google, no server to maintain.
3
Quick Test — Is the Backend Alive?

Before building the form, let's make sure the backend works.

You should see the message: "This endpoint receives homework submissions. Use the form to submit." That's the doGet() function responding — it means the script is deployed and reachable.

If you see an error instead: Go back to the Apps Script editor, check that you saved the code, and make sure the deployment completed. You can also click Deploy → Manage deployments to see the status.
4
Set Up the Project & Build the Form

Now you'll use Claude Code to build the front end — the HTML form your clients will see and fill out.

Each exercise is its own project, so it gets its own folder and its own launcher.

Make the folder. Open Command Prompt (Start menu → type cmd → press Enter), paste this line, and press Enter. That's all Command Prompt is for here; you can close it afterward.

mkdir C:\dev\HomeworkForm

Give this project its own launcher. Same recipe as the Launch Claude.bat you made on Page 1 (full how-to, plus the Mac version). Open Notepad, copy these three lines in, then choose File → Save As, set Save as type to All files (*.*), and save it as C:\dev\Launch HomeworkForm.bat.

Launch HomeworkForm.bat — editable
Watch for .txt on the end. If the file shows up as Launch HomeworkForm.bat.txt, rename it and delete the .txt.

Start Claude. Double-click Launch HomeworkForm.bat. Claude opens, already standing in your project folder. Any time you come back to this exercise, double-click it again.

Now give Claude the big prompt. The Web app URL you pasted in Section 2 is already in it — there's nothing to hand-edit in the black box. (If the prompt still shows a placeholder, scroll up to Section 2 and paste the URL into the box there.)

Prompt: Build the homework form Set up this project with a CLAUDE.md at the root (project rules: single HTML file, no server) and a context/ folder containing PROJECT.md and JOURNAL.md. Then build me a client homework form. PROJECT CONTEXT: I'm a consultant who works with small businesses. I send this form to clients before our first meeting so I understand their business. BUILD a single HTML file called homework.html with: QUESTIONS (organize into sections): Section "About Your Business": - What does your business do? - How many employees do you have? - What's your annual revenue range? Section "Your Challenges": - What's the biggest problem in your business right now? - What have you tried that didn't work? - If you could fix one thing overnight, what would it be? Section "Goals": - Where do you want to be in 12 months? - What does success look like for this engagement? FEATURES: - Clean, professional design - Auto-save to localStorage (client can close and come back without losing work) - "Client Name" field at the top - A "Submit" button that sends the data to this Google Apps Script URL: PASTE_YOUR_WEB_APP_URL_HERE - The submit should POST the answers to that URL. IMPORTANT: send the JSON as a plain-text body — call fetch with just { method: "POST", body: JSON.stringify(...) } and do NOT set a Content-Type header. A Content-Type: application/json header triggers a CORS preflight that Google Apps Script rejects, and the email silently never sends. A plain-text body still parses fine server-side (the script does JSON.parse(e.postData.contents)). - The JSON body should be shaped like: { clientName: "...", body: "formatted text of all answers" } - Treat a completed request as success and show an optimistic confirmation; if fetch throws, show an error and point me at the Download backup. Don't block the success message on reading the response (it can't always be read cross-origin). - Also include a "Download as .txt" backup button - A status bar at the bottom showing save state Make it look professional enough that I'd be comfortable sending it to a real client.
The #1 reason the email never arrives: if the form sends a Content-Type: application/json header, the browser fires a CORS preflight that Google Apps Script can't answer — and the submit fails with no visible error. The prompt above tells Claude to avoid this by posting a plain-text body. If your first test email doesn't show up, this is the first thing to check.
5
Test the Full Loop

This is the moment of truth. You're going to fill out the form and check if the email arrives.

Email not showing up? Check your Spam folder first. If it's not there either, go back to your Apps Script editor, click Executions in the left sidebar, and look for error messages. Common issues: the email address is wrong in the script, or the deployment needs to be updated (Deploy → Manage deployments → edit the pencil icon → set version to "New version" → Deploy).

Now test the backup feature:

And test the auto-save:

You just built a full client-facing tool with an email backend. Your client opens a link, fills out a form, hits Submit, and you get a formatted email. No server to maintain, no hosting costs, no passwords to manage. The HTML file can live anywhere — on your computer, in Google Drive, on a website.
6
Make It Yours

The questions above are generic. Customize them for YOUR practice. Go back to Claude Code and try:

Example customization prompts "Change the questions to focus on [your industry]. Add a section about their current software and tools." "Add my company logo at the top. Here's the URL: ..." "Change the color scheme to match my branding. Primary: #2C5F2D, Accent: #97BC62" "Add a slider at the bottom where the client rates their urgency from 1-10." "Change 'Submit' to 'Send to [Your Name]' and update the success message with my name."
7
Save Your Progress & Wrap Up
Update context/JOURNAL.md with everything we built. Include the GAS URL, what the form looks like, and any customizations.
Exercise 2 of 3 complete. New skills unlocked:

Google Apps Script — free serverless backend for email, spreadsheets, and automation
Front-to-back communication — HTML form sends data to a backend via fetch()
Deployment — you deployed a live web endpoint that anyone can send data to
Error handling — fallback download button in case the email fails

This is the exact same pattern used to talk to any API. Google Apps Script today, QuickBooks tomorrow.

Next Up: Exercise 3 of 3 — The Big One

You're going to build a middleware that connects to a real business system's API and pushes data into it. This is real production-grade work — authentication, API calls, error handling. If you can do this, you can build anything your clients need. Pick the version that matches the system you actually use.

Exercise 3: QuickBooks → Exercise 3: Contractors Cloud →