FlowCraft · Live demo

FlowCraft Pricing Matrix

Flip the Monthly / Annual switch and every plan's price, billing period and savings update at once. This demo runs the same app.js that comes with the paid table.

Sample plans. The plan names, prices and features are examples you replace. Click a plan button to see how it hands the choice to the quote form below the table. Nothing is sent from this page.

Try it

Flip the switch. Click Monthly or Annual, or tab to the switch and press Space.
Watch the prices. All three plans switch between "/mo" and "/yr" together.
See the savings. On annual, each plan shows exactly how much a year it saves.

Pricing

Simple plans that grow with you

Start small and upgrade any time. No setup fees, cancel whenever you like. (Sample plans.)

Monthly Annual Save 20%

Standard

For freelancers and small teams.

$29/mo

Up to 3 team members
10 active projects
Basic analytics
Email support

Start with Standard

Professional

For growing agencies that need more room.

$79/mo

Up to 15 team members
Unlimited projects
Advanced analytics & reports
Client portal
Priority support

Start with Professional

Enterprise

For larger teams with custom needs.

$199/mo

Unlimited team members
Unlimited projects
Custom integrations
Single sign-on (SSO)
Dedicated account manager

Talk to Sales

Prices in USD. Annual plans are billed once a year.

How it works

How the annual price is worked out

You only enter each plan's monthly price. app.js works out the yearly price and the savings from the discount you set, so the numbers always agree.

Full yearMonthly price × 12
Annual priceFull year × (1 − discount ÷ 100), rounded to the nearest dollar
SavingsFull year − annual price, shown under the price

Example with the defaults: Professional at $79 a month is $948 a year. With 20% off that's $758, a saving of $190.

<section data-pricing
  data-annual-discount="20"
  data-currency="$">

  <article data-plan="professional"
           data-monthly="79">
    …
    <a href="/signup" data-cta>…</a>
  </article>

Want an exact yearly price instead? Add data-annual="750" to a plan. Each plan button's link gets ?plan=…&billing=… added, so your signup or contact page knows what the visitor chose.

What the full version includes

Delivered as a ZIP download through Payhip.

index.htmlThe toggle and three plan cards, styled with Tailwind CSS
app.jsToggle logic, price math, button links and the quote form, heavily commented
style.cssThe sliding toggle and price-change animation
README.txtSetup guide, plus an optional .htaccess for Apache/Hostinger

Requirements

Any web host, or none. The table also runs when index.html is opened directly from your computer.
Where your plan buttons go. Your signup, checkout, booking or contact page. Put its address in each button's href.
An internet connection for visitors. Tailwind CSS loads from its public CDN.
No npm install or build step. Upload the files and the table runs.

Get the Pricing Matrix

Start with the free static shell to check the layout, or get the full version with the working toggle you just tried.

Free

Free Static HTML Shell

The pricing table's layout: the toggle and three plan cards, so you can review the design and markup in your own project.

Complete visual layout
Sample structure and markup
Does not include the toggle logic or price updates

Try the Free Static Shell

Opens the free download on Payhip.

Full version

Full Pricing Matrix — $67

The working pricing table you just tried, ready for your own plans and prices.

Monthly/Annual toggle updates every price, "/mo" ↔ "/yr" and the savings instantly
Set prices and the annual discount in the HTML; the math is done for you
Plan buttons pass the chosen plan and billing to your signup page, or to the built-in quote form that sends leads to your form service
No build step: HTML, Tailwind CSS (via CDN) and vanilla JavaScript

Buy the Full Pricing Matrix — $67

Checkout and download are handled by Payhip.

Back to the FlowCraft catalogue to see the other components.