← 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." Estimated time: 45 minutes.

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 and create one. It takes 2 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:

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." ); }
Change YOUR_EMAIL@gmail.com to your actual Gmail address. This is where the homework submissions will be sent.

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.

cd C:\dev\HomeworkForm
claude

Now give Claude the big prompt. Replace the placeholder URL with your actual Google Apps Script Web app URL:

Prompt: Build the homework form Set up this project with a CLAUDE.md at the root 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 QuickBooks Online's API and imports bills. This is real production-grade work — OAuth authentication, API calls, file uploads. If you can do this, you can build anything your clients need.

Start Exercise 3 of 3 →