lead-gen-calculator
Multi-step calculator UI for Astro. Quote tools, pricing calculators. Uses astro-forms for backend.
When & Why to Use This Skill
This Claude skill provides a specialized framework for building high-converting, multi-step lead generation calculators and interactive quote tools for Astro-based websites. It optimizes the user experience through progressive disclosure, cognitive load management, and seamless backend integration with astro-forms, ensuring high data integrity and GDPR compliance for marketing funnels.
Use Cases
- Service-based businesses: Creating instant quote tools for services like home renovation, cleaning, or moving to capture qualified leads.
- SaaS & B2B Marketing: Developing interactive ROI or pricing calculators on landing pages to engage prospects and demonstrate value.
- Financial Services: Building multi-step loan or insurance premium estimators that reduce form abandonment through step-by-step questions.
- E-commerce: Implementing product recommendation quizzes that guide users to a specific solution before capturing contact information for follow-up.
| name | lead-gen-calculator |
|---|---|
| description | Multi-step calculator UI for Astro. Quote tools, pricing calculators. Uses astro-forms for backend. |
Lead Gen Calculator Skill
Multi-step calculator UI. Requires astro-forms for backend.
Purpose
Step-by-step calculator interface. Captures leads through progressive questions.
Output
calculator_ready: true
steps: [...]
step_limits: { max_steps: 7, max_fields_per_step: 4 }
primary_conversion: { type: calculator, id: "quote-calc" }
conversion_verdict: PASS | WARN | FAIL
Primary Conversion Declaration
Calculator IS the primary conversion on its page.
primary_conversion:
type: calculator
id: "quote-calculator"
page: "/kalkulator"
No other forms on calculator pages.
Page Exclusion Rules
| Page Type | Calculator Allowed |
|---|---|
| calculator | ✅ Required |
| landing | ✅ Optional (embedded) |
| service | ❌ Use form instead |
| thank-you | ❌ Forbidden |
| article | ❌ Forbidden |
Calculator on forbidden page = FAIL.
Step Limits (Cognitive Load)
step_limits:
max_steps: 7
max_fields_per_step: 4
max_options_per_question: 6
| Limit | Value | Result if exceeded |
|---|---|---|
| Steps | 7 | FAIL |
| Fields/step | 4 | FAIL |
| Options/question | 6 | WARN |
Progressive Disclosure
Personal data only in final step.
| Step | Can Ask |
|---|---|
| 1-N | Service, location, preferences |
| Final | Name, email, phone, GDPR |
Email before final step = FAIL.
Step Types & Auto-Advance
| Type | Behavior | Auto-advance |
|---|---|---|
| radio | Single select | Yes (200ms) |
| checkbox | Multi-select | When all selected |
| dropdown | Select menu | On selection |
| form | Contact (final) | No (submit) |
Data Integrity Contract
Calculator submissions MUST include:
data_contract:
required:
- quote_id # Unique hash
- all_answers # Complete step data
- source_page # Calculator URL
- timestamp # ISO datetime
- gdpr_consent # true + timestamp
calculated:
- price_estimate # If pricing enabled
- breakdown # Line items
Post-Submit Flow Contract
post_submit_flow:
1_result_page: required # /eredmeny/[hash]
2_confirmation_email: required
3_analytics_event: required # calculator_submit
Any missing = FAIL.
Visual Rules
| Element | Rule |
|---|---|
| Images | 1:1 aspect ratio |
| Cards | Brand color bg, white text |
| Social proof | Different per step |
| Chrome | Minimal, focus on question |
| Menu | Hidden on calculator |
Loading Strategy
| Phase | Action |
|---|---|
| First page | Eager load all assets |
| After load | Prefetch next step |
| API calls | Show skeleton |
GTM Events (Required)
gtm_events:
- calculator_step # Step viewed
- calculator_option # Option selected
- calculator_submit # Form submitted
- calculator_value # Quote amount
Missing events = WARN.
Browser State
| Feature | Implementation |
|---|---|
| Persistence | localStorage |
| Back button | popstate listener |
| State restore | From history.state |
Conversion Verdict
conversion_verdict: PASS | WARN | FAIL
issues: []
| Condition | Verdict |
|---|---|
| Calculator on forbidden page | FAIL |
| >7 steps | FAIL |
| >4 fields per step | FAIL |
| Email before final step | FAIL |
| Missing data contract field | FAIL |
| Post-submit flow incomplete | FAIL |
| >6 options per question | WARN |
| GTM events missing | WARN |
| All pass | PASS |
FAIL States
| Condition |
|---|
| Calculator on thank-you/article |
| Exceeds 7 steps |
| Exceeds 4 fields per step |
| Personal data before final step |
| No result page |
| No confirmation email |
WARN States
| Condition |
|---|
| >6 options per question |
| GTM events not configured |
| No social proof variation |
References
- components.md — UI components
- client.md — Client JS
- gtm.md — Analytics events
Definition of Done
- Primary conversion declared
- Steps ≤7, fields/step ≤4
- Personal data only in final step
- Data contract complete
- Post-submit flow complete
- GTM events configured
- Browser back handled
- conversion_verdict = PASS