Hero - Overhanging Form
A full-width hero with just text and a form overhanging it.
View a live demo of this section.
Modules:
Overview
The Hero - Overhanging Form section creates a striking visual impact by positioning your form element to overlap the hero content area, breaking traditional layout boundaries. This modern design approach is particularly effective for SaaS landing pages, product demos, and lead generation campaigns where capturing visitor attention and conversions is paramount.
Unlike standard hero sections where forms sit inline with content, this section’s overhanging design creates visual depth and draws immediate focus to your call-to-action. The form appears to “float” over the hero background, making it impossible for visitors to miss while maintaining the bold aesthetic that defines the Vertical theme.
Usage Guide
You’ll find this section most effective on homepage headers, campaign landing pages, and product signup flows. The overhanging form works exceptionally well when you need to balance compelling messaging with immediate conversion opportunities—perfect for free trial signups, demo requests, or newsletter subscriptions.
When adding this section through HubSpot’s page editor, position it at the top of your page for maximum impact. The drag-and-drop interface makes it simple to customize the underlying Hero - 1 Column module’s content while the form automatically maintains its overhanging position across different screen sizes.
Pro tip: Keep your hero text concise and punchy since the overhanging form will occupy significant visual real estate on mobile devices. Test your form length carefully—shorter forms tend to work better with this layout to maintain the clean, modern aesthetic. You can customize the form’s styling through the theme’s global settings to ensure it complements your brand colors and maintains proper contrast against your chosen hero background.