Search blocks by description or jump to a page.
A split screen hero with a multi step form and a progress indicator. Guides visitors through a longer signup without overwhelming them at once.
Split Screen Multi Step divides the viewport into two columns. The left column shows a full bleed image with a frosted overlay card listing four platform benefits, each prefixed by a check circle icon. The right column holds the signup flow: a heading, a subheading, a horizontal progress bar with a "Step X of 3" counter, and a form panel that swaps content as the visitor moves forward. Step one collects a full name, email address, and password. Step two gathers profession, optional company name, and years of experience. Step three presents five topic checkboxes so the visitor can declare their interests. Back and Continue buttons navigate between steps, and a final Complete Setup button closes the flow. A terms and privacy footnote sits below the form throughout.
Every piece of copy is independent, so you can relabel the steps, swap the benefit bullets, change the checkbox topics, or reduce the form to two steps without affecting the layout. The image on the left is the only visual asset and can be replaced with any appropriately sized photo.
Reach for this block when account creation needs more than two fields but a long single page form would feel overwhelming. It fits particularly well for fintech and banking products where onboarding must collect identity details, financial profile information, and notification preferences as separate, clearly labeled stages. The progress bar signals how much work remains, which reduces abandonment compared to a single dense form. A simpler Sign Up Form works when you only need an email and password; this layout earns its place when the product genuinely needs structured input across distinct categories.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The three steps cover the most common onboarding pattern, but each section is independently editable:
Tip: keep step three to five or fewer checkboxes so the final screen feels lighter than the earlier data entry steps.