PIXLIFY / COMPONENTS LAB
PREMIUM COMPONENT · BY PIXLIFY
PRICING CALCULATOR · LEAD CAPTURE · QUOTES
Turn “how much does it cost?” into qualified leads. Visitors pick a project type, pages, add-ons and timeline - the estimate animates live and the CTA sends the full summary to your inbox or form.
LIVE PREVIEW - DEMO AUTOPLAY ON · CLICK ANYTHING TO TAKE OVER
TAB / ARROWS / SPACE - FULLY KEYBOARD OPERABLE
VARIANTS & PRESETS
01 - VERTICAL / MOBILE
Stacked · dark
Below the breakpoint the summary moves under the form - ideal for 9:16 and phones.
02 - LIGHT THEME
Euro · single price
Light palette, € after the number, space separator, exact price instead of a range.
03 - FREELANCER
Brand packages · no pages
Three packages, page slider hidden, warm accent and £ pricing.
04 - COMPACT
No breakdown · 2 timelines
Just the big number and a CTA - perfect for a pricing page sidebar.
HOW TO USE
01
Drop it on the canvas
Insert Studio Estimator from Assets, set width to Fill (min. ~360px). Height is automatic.
02
Set your prices
Project Types: label, short description and base price. Pages: included pages and price per extra page. Add-ons: label, price and whether it is preselected.
03
Timelines & rounding
Timelines multiply the subtotal (e.g. Rush ×1.35). Result controls the range spread (±%), rounding and the breakdown.
04
Connect the CTA
Set CTA → Link to a mailto:, Calendly or your form URL. With Send Summary on, the estimate and selections are appended (mail body or ?estimate=&summary= query).
05
Brand it
Labels for every heading, Currency (symbol, position, separator), three font controls and the Look group (colours, radius, Split or Stacked layout).
06
Demo autoplay (optional)
Turn on Demo Autoplay for hero sections and videos - it clicks through options by itself and stops the moment a visitor interacts.
PROPERTY CONTROLS
Project Types
Array: Label, Description, Price. Single choice (radio). Up to 8.
Default Type
Index of the preselected type (0 = first).
Pages → Show / Label / Min / Max / Default
Page-count slider and its range.
Pages → Included / Per Extra Page
Pages included in the base price and price for each extra page.
Add-ons
Array: Label, Price, Preselected. Multiple choice (checkbox chips). Up to 16.
Timelines / Default Timeline
Array: Label, Multiplier (0.5-3). Segmented single choice.
Labels
Title, Subtitle, Type, Add-ons, Timeline, Total, Breakdown, Note.
Currency → Symbol / Position / Thousands
Any symbol or code, before/after, 1,000 · 1 000 · 1.000 · 1000.
Result → Show Range / Spread / Round To / Breakdown
Range ±spread or exact price, rounding step, itemised breakdown.
CTA → Text / Link / Send Summary
Button label, destination, and appending the estimate + summary.
Title Font / Body Font / Total Font
Typography for the heading, UI text and the big number.
Look → Layout / Colours / Radius
Split or Stacked; Background, Panel, Border, Text, Muted, Accent, On Accent; corner radius.
Demo Autoplay → Enabled / Step
Self-playing demo for heroes and videos; stops on first interaction.
Mobile → Stack Below
Width (px) under which the summary stacks under the form.
PERFORMANCE
No dependencies. Prices are computed in memory; the total tween is one short rAF loop only when the number changes.
MOBILE
Stacks below the breakpoint, type cards go single-column and timeline pills wrap. Native inputs give big touch targets.
ACCESSIBILITY
Native radio, checkbox and range inputs in fieldsets with legends, visible focus rings, aria-live total. Reduced motion disables tweening and autoplay.
© 2026 PIXLIFY - MADE IN WARSAW
STUDIO ESTIMATOR · PREMIUM COMPONENT · BY PIXLIFY