Lead capture and CRM blueprint
From a visitor’s first click to a booked, tracked lead.
A 6-step scoping form on my own site feeds a private Kanban board in real time, with the full brief, a pre-filled booking link and notes on every lead. Three flows and 41 steps, mapped from the first click to a moved card.
TriggerStepDecisionErrorEnd
V1 · Oct 2026
01
The three flows
What the visitor does, what happens to their data, and what I see on the other side.
Figure 01 · Flow map3 flows · 41 steps
| Flow | Starts when | Branches on | Steps | Ends with |
|---|---|---|---|---|
| 01 Form Flow | Visitor Arrives wanderingtech.com loads in browser | All Fields Valid? | 15 | User Corrects + Retries Lead Booked |
| 02 Data Pipeline | submitForm() Called Submit & Book Call → pressed by visitor | All Fields Valid? | 13 | User Corrects + Retries Lead Captured & Booking Open |
| 03 CRM Dashboard | New Lead Inserted Supabase leads table receives a new row | Card Interaction? | 13 | Stage Updated Lead Reviewed |
02
Building blocks
Every flow is assembled from the same small set of steps.
Figure 02 · Step catalog15 step types
| Step | What it does | 1 | 2 | 3 | Total |
|---|---|---|---|---|---|
| UI render | Renders or updates a UI component in the browser. | 2 | 1 | 3 | 6 |
| Form step | One of 6 progressive steps in the automation scoping form. | 6 | · | · | 6 |
| End node | Terminal point · this flow path is complete. | 2 | 2 | 2 | 6 |
| Trigger | Entry point that starts this data flow. | 1 | 1 | 1 | 3 |
| If / else | Decision branch based on validation result or user interaction. | 1 | 1 | 1 | 3 |
| Calendly embed | Injects the Calendly iframe with pre-filled name + email params. | 1 | 2 | · | 3 |
| Error state | Handles failed validation · no data is sent when this fires. | 1 | 1 | · | 2 |
| Supabase insert | Inserts a new row into the Supabase PostgreSQL leads table. | 1 | 1 | · | 2 |
| Validation | Client-side field validation before data is submitted. | · | 2 | · | 2 |
| Supabase read | Reads and streams data from Supabase in real-time. | · | · | 2 | 2 |
| Lead modal | Full brief modal: all 20+ form fields + editable notes field. | · | · | 2 | 2 |
| n8n webhook | Posts form payload to the configured n8n webhook endpoint. | · | 1 | · | 1 |
| Notification | Fires a Telegram bot alert via n8n · currently in progress. | · | 1 | · | 1 |
| Kanban board | The 5-column Kanban view with draggable lead cards per stage. | · | · | 1 | 1 |
| Supabase update | Updates an existing leads row · stage change or notes. | · | · | 1 | 1 |
03
The scoping form
Six short steps that capture what a call would otherwise have to ask.
Figure 03 · Form steps6 steps
| Step | No. | Asks for |
|---|---|---|
| About You | 1 | Name · Company · Role type (single select) |
| Pain Points | 2 | 12-item multi-select grid · trigger · frequency |
| Current Stack | 3 | Tools in use · desired output destination |
| AI & Goals | 4 | AI needs type · success definition text |
| Scope & Budget | 5 | Timeline · budget range · prior attempts |
| Contact & Submit | 6 | Email · preferred call time · extra context |
04
The lead board
Five columns, one card per lead, and two things you can do with a card.
Figure 04 · Lead stages5 stages
StagesNew→Contacted→Proposal→Won→Lost
| When you | Step | What happens |
|---|---|---|
| A new lead arrives | Place in "New" Column | Default stage on first insert |
| Drag a card to another column | Drag to Pipeline Stage | Column drop event fires on drag end |
| The stage is saved | PATCH Supabase Row | UPDATE leads SET stage=? WHERE id=? |
| Click a card | Open Lead Modal | Full brief modal renders over Kanban |
| Read the brief | Show 20+ Fields + Notes | All data · editable notes · Calendly link |
05
From submit to booking
What happens to the data between the button and the booking page.
Figure 05 · Submit path9 steps
| # | Step type | Step | Detail |
|---|---|---|---|
| 01 | Validation | Client-side Validation | validateStep('submit') · email + name checks |
| 02 | If / else | All Fields Valid? | Required fields + email format check |
| 03 | Validation | Compile 20+ Fields to JSON | Full form state serialized to data object |
| 04 | n8n webhook | POST to n8n (if configured) | try/catch · CONFIG.N8N_WEBHOOK endpoint |
| 05 | Notification | Telegram Alert Fires | n8n → bot notifies Jam of new lead in real-time |
| 06 | Supabase insert | INSERT to Supabase | supabase.from('leads').insert([data]) |
| 07 | UI render | Show Done State | Step 7 active · success checkmark renders |
| 08 | Calendly embed | Build Calendly URL | Append ?email=&name= query parameters |
| 09 | Calendly embed | Inject Calendly iframe | Into #calendly-embed div · booking page open |
06
Checks and limits
What stops a bad submission, and what is still unfinished.
Figure 06 · Checks7 checks
| Check | Behaviour | Where |
|---|---|---|
| Checked before sending | Required fields are present and the email format is valid | Flow 1 All Fields Valid? |
| If a check fails | An inline error shows, step 6 stays open and no data is sent | Flow 1 Show Inline Error |
| Booking details | The visitor’s name and email are added to the booking link as query parameters | Flow 2 Build Calendly URL |
| Optional webhook | Posted inside a try/catch, and only when an endpoint is configured | Flow 2 POST to n8n (if configured) |
| Alert to me | A Telegram message through n8n. In progress | Flow 2 Telegram Alert Fires |
| Dashboard access | The dashboard is password-gated | Flow 3 summary |
| Stage change | One update to the lead’s row, then the board and charts refresh | Flow 3 PATCH Supabase Row |
Flow 1
Form Flow
ACQUISITION6-step progressive scoping form · visitor to qualified, booked lead in under 3 minutes with full context captured.
Figure 07 · Form Flow15 steps
Swipe sideways to see the whole flowchart
Read this flow as a list
- Visitor Arrives. wanderingtech.com loads in browser
- Portfolio Loads. Vercel CDN · particle canvas · animated hero
- "Book a Call" Clicked. showPage("page-book") SPA router fires
- Step 1 · About You. Name · Company · Role type (single select)
- Step 2 · Pain Points. 12-item multi-select grid · trigger · frequency
- Step 3 · Current Stack. Tools in use · desired output destination
- Step 4 · AI & Goals. AI needs type · success definition text
- Step 5 · Scope & Budget. Timeline · budget range · prior attempts
- Step 6 · Contact & Submit. Email · preferred call time · extra context
- All Fields Valid?. Email format + required field presence check
- POST to Supabase. All 20+ fields inserted to leads table
- Show Inline Error. Red message · field stays open for edit
- Load Calendly Embed. iframe injected · email + name pre-filled
- User Corrects + Retries. Step 6 stays active · no data sent
- Lead Booked. CRM row live · Calendly scheduling open
Flow 2
Data Pipeline
BACKENDValidation → n8n webhook (optional) → Supabase INSERT → Calendly pre-fill. End-to-end under 1 second.
Figure 08 · Data Pipeline13 steps
Swipe sideways to see the whole flowchart
Read this flow as a list
- submitForm() Called. Submit & Book Call → pressed by visitor
- Client-side Validation. validateStep('submit') · email + name checks
- All Fields Valid?. Required fields + email format check
- Compile 20+ Fields to JSON. Full form state serialized to data object
- Show Error Message. Inline error text · submitForm() exits
- POST to n8n (if configured). try/catch · CONFIG.N8N_WEBHOOK endpoint
- User Corrects + Retries. No data sent · form stays on Step 6
- Telegram Alert Fires. n8n → bot notifies Jam of new lead in real-time
- INSERT to Supabase. supabase.from('leads').insert([data])
- Show Done State. Step 7 active · success checkmark renders
- Build Calendly URL. Append ?email=&name= query parameters
- Inject Calendly iframe. Into #calendly-embed div · booking page open
- Lead Captured & Booking Open. Supabase row live · Calendly ready to schedule
Flow 3
CRM Dashboard
MANAGEMENTPassword-gated Kanban with real-time Supabase sync, 5 pipeline stages, full brief modals, and 4 analytics charts.
Figure 09 · CRM Dashboard13 steps
Swipe sideways to see the whole flowchart
Read this flow as a list
- New Lead Inserted. Supabase leads table receives a new row
- Realtime Subscription Fires. supabase.channel('leads') INSERT event
- Fetch All Leads. SELECT * FROM leads ORDER BY created_at DESC
- Render Kanban Board. 5 cols: New · Contacted · Proposal · Won · Lost
- Render Lead Cards. Each lead: name · budget · timeline preview
- Place in "New" Column. Default stage on first insert
- Card Interaction?. Drag (stage change) vs. Click (view brief)
- Drag to Pipeline Stage. Column drop event fires on drag end
- Open Lead Modal. Full brief modal renders over Kanban
- PATCH Supabase Row. UPDATE leads SET stage=? WHERE id=?
- Show 20+ Fields + Notes. All data · editable notes · Calendly link
- Stage Updated. Kanban refreshes · analytics recalculate
- Lead Reviewed. Notes saved · next action taken · modal closed
Want something like this?
Tell me about the process you want off your plate. The brief takes about three minutes, and the project is priced before I start.
Start a BriefOpen the animated, interactive version of this diagram →
Shown at a high level. Real lead records and anything confidential are left out.