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