A compact technical demo built to show custom HTML, CSS, JavaScript, form validation, API-style submission states, and dynamic UI behavior inside a client website.
The fake client is Pine Brook Auto Detailing. The purpose is to prove custom front-end logic, not just visual design.
This simulates the internal view a small business owner would use after form submissions are pushed into a CRM, Google Sheet, Airtable, or email workflow.
Full Detail · SUV / Crossover · $222
Interior Detail · Sedan · $115
Ceramic Coating Prep · Sedan · $420
The point of this piece is to make the technical side visible fast: custom snippets, dynamic state, form validation, and API integration patterns.
Price updates instantly based on selected service, vehicle size, and add-ons. No page refresh.
Validation, loading, success, and error messaging are handled the same way a real API workflow would require.
New submissions update the dashboard cards and lead list, showing how user actions change the interface.
In production, this would point to a real endpoint like Airtable, Zapier, Make, a CRM webhook, or a custom server route.
// Webflow custom-code friendly pattern
const payload = {
name: form.name.value,
service: selectedService,
vehicleSize: selectedVehicle,
estimate: currentTotal,
source: "webflow-quote-widget"
};
await fetch("/api/leads", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});