Twenty-four packages, six tabs, and forms that finally make sense

Rebuild it, and fix the forms.

This is the page type where design debt accumulates and nobody volunteers to touch it: many tabs, many packages, and a long run of inputs behind each one. The surface can be restyled in an afternoon. The forms are the actual problem, and they are the reason the page underperforms.

It read the page first and laid the foundation from the source: navy, brand blue, Inter, flat four and eight pixel radii — pulled off the original rather than invented.

Then it spent the effort where it mattered. Instead of one long run of inputs, every form was grouped: your details, project scope, your brief, add-ons, attachments — each with a one-line reason you are being asked for it.

Because most fields are required, starring nearly everything communicates nothing. It inverted the convention and flagged the exceptions with an Optional chip instead. Inline help sits under the ambiguous fields, with proper focus rings and error states carrying an icon rather than just a red border.

A sticky order bar keeps the running total in view however far you scroll, and the checkout carries the order across with an Individual/Company toggle that changes what it asks for.

It checked its own arithmetic against the source. Eight different pricing models across the verticals, spot-checked rather than trusted. They matched exactly.

That is the check most rebuilds skip. A pricing calculator that is subtly wrong looks completely normal and quietly misquotes customers.

It also caught two CSS bugs in its own output while building the sticky order bar: first the bar would not stick, because overflow: hidden on the panel was killing it; then the bar rendered translucent and content bled through, so it was made solid. Both found by looking at the result rather than assuming the code was correct.

An empty submit was tested too — correctly blocked, flagging seven fields. And nothing is charged: the Stripe keys are deliberately absent, and it said so.

• Six tabs and eleven sub-tabs switching in place with no page reloads
• Twenty-four packages, each opening its form beside the card
• Grouped fieldsets with a stated reason for every group
• Optional chips replacing asterisk noise, plus inline help on ambiguous fields
• Proper focus rings and error states with an icon, not just a red border
• A sticky order bar holding the running total in view
• An Individual/Company checkout that changes what it asks for
• Eight pricing models verified against the source — exact match
• Two CSS bugs self-caught and fixed; empty submit correctly blocked, flagging seven fields

What this build actually used.

• Platform: WordPress with WPOS — six tabs, eleven sub-tabs and twenty-four packages switching in place with no page reloads
• Design tokens: pulled straight from the source page — navy, brand blue, Inter, and flat four and eight pixel radii
• Form structure: grouped fieldsets — your details, project scope, your brief, add-ons, attachments — each carrying a one-line reason you are being asked
• Form affordances: Optional chips flagging the exceptions instead of starring nearly every field, inline help under the ambiguous ones, proper focus rings, and error states with an icon rather than just a red border
• Order bar: a sticky running total held in view however far you scroll
• Checkout: carries the order across, with an Individual/Company toggle that changes what it asks for
• Payments: Stripe scaffolded but deliberately inert — the keys are absent and nothing is charged
• Self-verification: eight pricing models spot-checked against the source and matched exactly; an empty submit correctly blocked, flagging seven fields
• Debugging: two CSS bugs in its own output — overflow: hidden on the panel killing the sticky bar, then the bar rendering translucent with content bleeding through

Can WPOS handle a page with many tabs and many packages?

Yes. This build covers six tabs, eleven sub-tabs and twenty-four packages, switching in place without reloads.

Does it check that pricing logic is actually correct?

Here it did. Eight pricing models across the verticals were spot-checked against the source page and matched exactly.

Is the checkout live?

No. The checkout flow works and carries the order across, but nothing is charged — the Stripe keys are deliberately absent, and the build says so.

Start free for 30 days with 5,000 credits at wpos.ai. No card required, and nothing charges automatically. WPOS connects to any WordPress site, new or existing, on any host, and works alongside Gutenberg, Elementor, WooCommerce and Divi. Book a call with the founders at cal.com/algorismus/30min.