All classes Claude from Zero to Expert Syllabus · Episode 78 of 100

Claude from Zero to Expert Class #78: An Order Form That Works

0 views

Build a working order form on the Sunset Coffee website with Claude Code: choose a send-to-WhatsApp flow without a server, understand the subtotal and shipping calculation, test it with several cases, and protect customer data privacy. Episode 78 of 100, Session 16: Building a Website with Claude Code.

Software: Claude
Level: Advanced
Duration: ± 8 min
Series total: 15 h 1 min · 100 videos
Published: October 28, 2026

Episode 78 of 100 · view syllabus

Subscribe ▶ Watch the video lesson0 plays

Checking access...

Want to go deeper?

Join one of our courses or ask us directly on WhatsApp.

View the full 100-episode syllabus View Claude AI Courses Ask on WhatsApp

Recommended classes for you

Picked from the software, topic, and level of “Claude from Zero to Expert Class #78: An Order Form That Works”.

50 episodesFree preview

Agentic AI · Beginner–Intermediate

Agentic AI Without Coding

50 video lessons with PDF guides, 14 h 29 min in total. Starts with: Chatbots, Automation, and AI Agents: What's the Difference?.

14 h 29 min 73 0

View class

18 episodesFree preview

Python · Beginner–Advanced

Machine Learning Python

18 video lessons with PDF guides, 3 h 41 min in total. Starts with: Introduction to Machine Learning & First Model.

3 h 41 min 61 0

View class

6 episodesFree preview

Python · Intermediate–Advanced

Brain Tumor Segmentation with U-Net

6 video lessons with PDF guides, 1 h 10 min in total. Starts with: Brain MRI Dataset & Tumor Mask: Loading, Visualization & Patient-wise Splitting.

1 h 10 min 28 0

View class

Deep Learning CNN-LSTM Pneumonia Detection

6 episodesFree preview

Python · Intermediate–Advanced

Deep Learning CNN-LSTM Pneumonia Detection

6 video lessons with PDF guides, 57 min in total. Starts with: Chest X-ray Dataset: Loading, Exploration & Data Splitting.

57 min 22 0

View class

Need more than a video?

Other ways we can help with Claude.

Learn with a mentor

Scheduled AI & Machine Learning courses with live guidance and a certificate.

Course

Midjourney Course: Create Stunning AI Images from Text

★ 4.9

Course

DALL-E Course: Creating Professional AI Images from Text

★ 4.9

Course

Stable Diffusion Course: AI Art from Beginner to Professional

★ 4.9

See all in AI & Machine Learning →

Have it built for you

No time to learn Claude? Our team can do the project for you.

Service

AI Image Creation with Stable Diffusion — Unlimited Custom Visual Production

★ 4.9

Service

AI Image & Video Creation with Leonardo AI — All-in-One Visuals for Business

★ 4.9

Service

AI Image Creation with Midjourney — Cinematic AI Art for Business

★ 4.9

See all in AI & Machine Learning →

Get notified about new Claude classes

At most one email a week. Unfollow anytime with one click.

Transcript

The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.

Show transcript

Introduction

Hi, and welcome back. Until now, Sunset Coffee's orders have come in through messy WhatsApp chats, and Dimas often has to ask again about quantities and addresses. In this episode Raka builds an order form that calculates the total and shipping automatically, checks the entries, and sends a tidy order to Sunset Coffee's WhatsApp.

Step 1: Designing the form flow

Before asking Claude, Raka designs the flow with Laras. First, the customer enters a name, picks products and quantities, then writes an address. Second, the page calculates the subtotal, shipping, and total automatically, following the rules in CLAUDE.md. Third, the entries are checked. The name, address, and at least one product can't be empty. Fourth, the send button opens Sunset Coffee's WhatsApp with the order message neatly filled in. The customer just presses send in WhatsApp. There are two main options for where orders go. Sending to WhatsApp is free and needs no server. Saving to a database on a server needs extra services. On the data side, the WhatsApp option doesn't store customer data on the website. The database option stores data, so it must be kept secure, ideally with a programmer involved. Sunset Coffee already serves customers through WhatsApp, so the first option fits best. Only if orders ever become very high should you consider the second option.

Step 2: Asking Claude to build the form

Raka writes the form brief. The first part names the fields needed, the calculation rules from CLAUDE.md, and how the send button behaves. The second part covers the checks and privacy limits: name, address, and at least one product are required, and don't store customer data anywhere. It ends with a request for a plan. Claude's plan is clear: an order section in the index file, the calculation and checks in the script file, and the look in the style file. Claude also confirms that the data is only used to build the WhatsApp message. The plan matches the brief. Raka replies: approved, go ahead. Claude changes three files. For each file a permission box appears, and Raka approves them one by one after reading the names. A three-point summary wraps up the work: the form below the menu, automatic calculation, and a send button to the business WhatsApp.

Step 3: Understanding the shipping calculation

The most important part of the form is the calculation. Raka asks Claude to show the shipping part and explain it line by line. Here are the three lines. No need to memorize them, just understand what they mean. The word const simply means storing a value under a name. The first line adds up price times quantity for each product. The second line sets the shipping: zero if the subtotal is above two hundred thousand rupiah, otherwise ten thousand. The third line adds the subtotal and shipping together. Claude also points out one thing: an order of exactly two hundred thousand still pays shipping, because the rule says above. It asks whether this should be confirmed with the business owner. A good question, because this is a business decision, not a coding matter. Raka doesn't guess, and asks Laras directly on WhatsApp: if an order totals exactly two hundred thousand, is shipping free or still ten thousand? Laras answers: still ten thousand; it's free when it's above two hundred thousand. That means Claude's code is already right and doesn't need changing. Business rules are always asked of the business owner, not decided by AI.

Step 4: Trying out the form

Time to try it like a real customer. Raka fills in a sample order for Rina: two liters of palm sugar iced coffee and one cold brew. In the right panel, the subtotal is calculated right away: two hundred twenty-five thousand rupiah. Because the subtotal is above two hundred thousand, shipping is free. The total is two hundred twenty-five thousand. Raka checks it by hand with a calculator, and it matches. Then Raka presses the send order to WhatsApp button. Also notice the notes field: palm sugar on the side. This field isn't required, but it really helps Dimas prepare the order the way the customer likes it. This is the message Sunset Coffee receives. Everything is filled in automatically from the form: the product list, the total with a free shipping note, the name, address, and notes. Dimas can reply and process the order right away without asking again. The message format is the same for every customer, so it's easier to record. One try isn't enough. Raka tests five cases. First, a small order: one cup of iced coffee at eighteen thousand, plus ten thousand shipping, for a total of twenty-eight thousand. Second, an order close to the limit: one hamper and two cups, a subtotal of one hundred eighty-six thousand, which still pays shipping, for a total of one hundred ninety-six thousand. Third, Rina's order from before: two hundred twenty-five thousand, with free shipping. Fourth, the name is left empty. The form shows a warning and the order isn't sent. Fifth, all product quantities are zero. The warning appears again. A good form doesn't just calculate correctly; it also rejects incomplete entries. Then Raka tries something unusual, like a customer making a typo: entering minus one cold brew. The total actually drops to thirty thousand. That's a bug, and Raka reports it fully to Claude. Claude reads the script file to find the cause, without changing anything yet. The cause: the check only makes sure the quantity isn't empty, but not that it isn't negative. Claude suggests a new rule: the quantity must be at least zero and a whole number. The change box shows one old red line replaced by three green lines. What it means: if the quantity is empty, negative, or a fraction, show a warning and stop. We can even read the warning text directly. Raka chooses Yes, then reruns every test case from the start. Every time there's a fix, retest everything, because a fix in one place can affect another.

Step 5: Privacy and saving a version

The form handles customer data, so hold on to three privacy rules. First, ask only for what's needed: name, order, and address. Don't ask for an ID number or birth date that isn't needed to deliver coffee. Second, nothing is stored on the website. The data is put straight into a WhatsApp message, without being recorded anywhere. Third, customers press send in WhatsApp themselves. No message is ever sent silently. If Laras later wants orders recorded automatically in a spreadsheet, we'll cover that in the automation session. Before customers use the form, there are four final checks. First, Laras personally rechecks all the prices and shipping rules. The business owner is the best checker for the business's numbers. Second, Dimas makes sure the incoming WhatsApp message is easy to read and easy to record. Third, field warnings are written in friendly language, such as please enter your name, not a confusing word like error. Fourth, the form is tried by one person who has never seen it, such as a friend of Raka's. Fresh eyes often find confusing spots that the builder can't see. All the test cases pass, so Raka saves a new version with the note order form to WhatsApp. The permission box appears as usual. Raka chooses Yes. The third version is saved. The Sunset Coffee website now has a menu, an open badge, a floating button, and an order form. The screens in this video are simulations; try applying the same flow to a form for your own business.

Done!

The Sunset Coffee order form works: the total and shipping are calculated automatically, required fields are checked, and tidy orders are sent to WhatsApp without storing data on the website. In the next episode we make sure the whole page, including this form, looks tidy and is easy to use on a phone screen. See you there!

Practice exercises

Try these on your own after watching to lock in what you learned.

Decide which fields your business truly needs for an order
Ask Claude to build a form with your price and shipping rules
Test at least five cases, including empty fields and the free shipping limit

Ask the class material

Type a question or keyword; we find the part of this episode that explains it and jump the video there.

My notes

Notes are saved with the current video time and are only visible to you.

Questions & answers

Stuck on a step? Ask here; the instructor and other learners can answer.

No questions yet.

Your instructor

Cerdas Inovasi Digital Team

Software developers, BIM & 3D engineers, and AI practitioners

53 video classes1,296 episodes

We build software, BIM models, games and AI automations for clients every day, and turn that hands-on work into step-by-step classes: every step is shown on screen and comes with a PDF guide you can keep.

See our clients →

Memuat

Claude from Zero to Expert Class #78: An Order Form That Works

0 views

Software

Claude

Level

Advanced

Duration

± 8 min

Series total

15 h 1 min · 100 videos

Published

October 28, 2026

Episode 78 of 100 · view syllabus

▶ Watch the video lesson0 plays

Transcript

The full narration of this video. The current sentence is highlighted while the video plays; click any sentence to jump there.

Show transcript

Introduction

Step 1: Designing the form flow

Step 2: Asking Claude to build the form

Step 3: Understanding the shipping calculation

Step 4: Trying out the form

Step 5: Privacy and saving a version

Done!

Your instructor

Cerdas Inovasi Digital Team

Software developers, BIM & 3D engineers, and AI practitioners

53 video classes1,296 episodes

See our clients →

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:24Step 1: Designing the form flow

1:31Step 2: Asking Claude to build the form

2:28Step 3: Understanding the shipping calculation

3:40Step 4: Trying out the form

6:24Step 5: Privacy and saving a version

8:03Done!

Practice exercises

Ask the class material

My notes

Questions & answers

Your instructor

Recommended classes for you

Need more than a video?

Transcript

0:03Introduction

0:24Step 1: Designing the form flow

1:31Step 2: Asking Claude to build the form

2:28Step 3: Understanding the shipping calculation

3:40Step 4: Trying out the form

6:24Step 5: Privacy and saving a version

8:03Done!

Practice exercises

Ask the class material

My notes

Questions & answers

Your instructor

Introduction

Step 1: Designing the form flow

Step 2: Asking Claude to build the form

Step 3: Understanding the shipping calculation

Step 4: Trying out the form

Step 5: Privacy and saving a version

Done!

Introduction

Step 1: Designing the form flow

Step 2: Asking Claude to build the form

Step 3: Understanding the shipping calculation

Step 4: Trying out the form

Step 5: Privacy and saving a version

Done!