B2B Lead Gen Hero with Form

Capture high-quality leads the moment a visitor lands on your page with this integrated form hero.

This B2B-focused template combines a powerful value proposition with an accessible contact form, making it as easy as possible for potential clients to get in touch.

Screenshot of a B2B hero section that includes a lead generation form.

Get Source Code Preview

About the B2B Lead Gen Hero

For many B2B websites, the primary goal of the homepage is lead capture. This hero section is designed to maximize that conversion. By placing the most essential form fields (like name and email) directly in the hero, it reduces the number of clicks required for a user to express interest. This approach is ideal for businesses offering demos, consultations, or quotes.

Features

Conversion-Optimized: The prominent form is designed to reduce friction and increase lead capture rates.
Two-Column Layout: A clean, professional layout separates the marketing message from the data capture form.
Accessible Form: The form includes properly linked label tags and appropriate input types for good usability and accessibility.
Responsive Design: The two columns stack gracefully on mobile devices, ensuring the form is easy to use on any screen.

Code Breakdown

This component is split into CSS for your site's head and HTML for the body.

The layout is controlled by CSS Grid on the .leadgen-hero-container element. On wider screens, it creates a two-column layout using grid-template-columns: 1fr 1fr. On mobile, it defaults to a single column, stacking the content on top of the form.

The form itself is a standard form element. Each input is paired with a corresponding label for accessibility, although the labels are visually hidden for a cleaner look. You will need to configure the form's action attribute to point to your backend script that will process the submission.

Code

<style>
    :root {
        --b2b-hero-padding: 4rem 1.5rem;
        --b2b-hero-bg-color: #eef2ff;
        --b2b-hero-text-color: #374151;
        --b2b-hero-headline-color: #111827;
        --b2b-hero-form-bg: #ffffff;
        --b2b-hero-input-border: #d1d5db;
        --b2b-hero-input-focus-border: #4f46e5;
        --b2b-hero-cta-bg: #4f46e5;
        --b2b-hero-cta-hover-bg: #4338ca;
        --b2b-hero-cta-text-color: #ffffff;
        --b2b-hero-max-width: 1024px;
        --b2b-hero-gap: 2rem;
    }
    .leadgen-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--b2b-hero-bg-color);
        padding: var(--b2b-hero-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .leadgen-hero * {
         box-sizing: border-box;
    }
    .leadgen-hero-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--b2b-hero-gap);
        max-width: var(--b2b-hero-max-width);
        width: 100%;
        align-items: center;
    }
    .leadgen-hero-content .title {
        font-size: clamp(2rem, 5vw, 2.75rem);
        color: var(--b2b-hero-headline-color);
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .leadgen-hero-content .subtitle {
        font-size: 1.1rem;
        color: var(--b2b-hero-text-color);
        line-height: 1.6;
        margin: 0;
    }
    .leadgen-hero-form {
        background-color: var(--b2b-hero-form-bg);
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
    .leadgen-hero-form .form-title {
        font-size: 1.25rem;
        font-weight: 600;
        margin: 0 0 1.5rem;
        color: var(--b2b-hero-headline-color);
        text-align: center;
    }
    .leadgen-hero-form .form-group {
        margin-bottom: 1rem;
    }
    .leadgen-hero-form .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }
    .leadgen-hero-form .form-input {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 1px solid var(--b2b-hero-input-border);
        border-radius: 6px;
        font-size: 1rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .leadgen-hero-form .form-input:focus {
        outline: none;
        border-color: var(--b2b-hero-input-focus-border);
        box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
    }
    .leadgen-hero-form .form-button {
        width: 100%;
        background-color: var(--b2b-hero-cta-bg);
        color: var(--b2b-hero-cta-text-color);
        padding: 0.8rem 1rem;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 0.5rem;
    }
    .leadgen-hero-form .form-button:hover {
        background-color: var(--b2b-hero-cta-hover-bg);
    }
    .leadgen-hero-form .form-footer {
        font-size: 0.8rem;
        color: #6b7280;
        text-align: center;
        margin-top: 1rem;
    }
    @media (min-width: 768px) {
        .leadgen-hero-container {
            grid-template-columns: 1fr 1fr;
            gap: calc(var(--b2b-hero-gap) * 2);
        }
    }
</style>

<section class="leadgen-hero">
    <div class="leadgen-hero-container">

<div class="leadgen-hero-content">
            <h1 class="title">Unlock Your Business's Full Potential</h1>
            <p class="subtitle">Get a personalized demo of our all-in-one growth platform and see how we can help you streamline operations, boost sales, and delight customers.</p>
        </div>

<div class="leadgen-hero-form-wrapper">
            
            <form class="leadgen-hero-form" action="#" method="POST">
                <h2 class="form-title">Request a Free Demo</h2>
                <div class="form-group">
                    <label for="leadgen-name" class="sr-only">Full Name</label>
                    <input type="text" id="leadgen-name" name="name" class="form-input" placeholder="Full Name" required>
                </div>
                <div class="form-group">
                    <label for="leadgen-email" class="sr-only">Work Email</label>
                    <input type="email" id="leadgen-email" name="email" class="form-input" placeholder="Work Email" required>
                </div>
                <button type="submit" class="form-button">Get My Demo</button>
                <p class="form-footer">No credit card required. No spam.</p>
            </form>
        </div>
    </div>
</section>

View Output