Search blocks by description or jump to a page.
A hero with a subscription form and a monthly to yearly billing toggle. Lets visitors pick a plan and price before they start a paid signup.
Subscription Form With Toggle is a two column hero. The left column holds a headline, a subheading that updates its copy depending on the selected billing period, and a four item checklist of plan benefits, each item marked with a green check icon. The right column is a card containing a monthly/yearly toggle switch at the top, a large price display that reflects the active period, and a signup form with full name, email, and password fields leading to a full width submit button. A terms and privacy footnote sits below the button.
The two columns are independent. You can rewrite the headline and subheading, swap out or reorder the checklist items, and adjust the monthly and annual prices without affecting the form. The card itself can stand alone if you only need the form, and the toggle label text and "Save 20%" badge are easy to change to match your own discount.
Reach for this block when you want visitors to choose a billing period and start an account in the same step. It works well for a healthcare scheduling product where the pricing commitment is a real decision: monthly suits a clinic testing the platform, annual suits one ready to commit. Compared to a plain signup form, the toggle surfaces the price difference early so visitors arrive at checkout with no surprises.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block has three clearly separated zones you can adapt independently:
Tip: keep the checklist to four items or fewer so the left column stays roughly the same height as the form card on desktop.