Multi-Step CTA Hero
A hero that guides visitors through a short multi step call to action. Use it to qualify leads or onboard users right from a landing page header.
A hero that guides visitors through a short multi step call to action. Use it to qualify leads or onboard users right from a landing page header.
Search blocks by description or jump to a page.
Multi-Step CTA Hero splits into two columns. The left column carries a headline, a short subtext paragraph, a vertical checklist of five benefit items each marked with a circular check icon, and a social proof row of overlapping avatar photos with a joined-count label beneath them. The right column holds a card with a progress bar at the top, a step counter and percentage label, and a form body that changes at each step: an email input on step one, a company size selector and a primary use case selector on step two, a full name input on step three, and a confirmation screen with a green check icon on step four. Back and Continue buttons advance or retreat through the steps, and a small security note sits beneath the card.
Every piece of copy is independent. You can rewrite the headline, swap the benefit list, change the avatar images, and relabel any of the four steps without touching the form logic. The selectors on step two list fixed options, so replace those values to match your own qualification criteria. The confirmation message on the final step personalises itself with the name entered in step three.
Reach for this block when you want to qualify or segment a lead at the point of signup rather than sending a plain email capture to a generic funnel. It fits developer tools landing pages well: capturing a work email first, then asking about team size and primary use case, gives sales and onboarding teams the context they need before a trial even starts. It outperforms a single inline email field when the information gathered on steps two and three will actually change what a user sees next, such as routing to a self-serve flow versus a sales call.
A natural flow around it on a Marketing (Legacy) page:
Before
After
The block covers the full signup funnel from first touch to confirmation. A few specific ways to adapt it:
Tip: keep step two to at most two fields. Every extra question on that screen measurably increases drop-off before a user reaches confirmation.