Booking CTA Hero Template

Turn inspiration into action with a hero section that lets visitors start their booking process immediately.

This template is ideal for travel agencies, hotels, and booking sites, featuring an integrated form that allows users to search for flights or accommodations right away.

Screenshot of a booking hero section with input fields for dates and destinations.

Get Source Code Preview

About the Booking CTA Hero

This hero section is designed to reduce the friction between a user's initial interest and the booking process. By placing key search fields directly in the hero against an inspiring background, you provide a clear and immediate path for them to find what they're looking for. This can significantly improve conversion rates compared to making users navigate to a separate booking page.

Features

Integrated Booking Form: Allows users to start the booking process instantly.
Icon-Labeled Inputs: Uses clear SVG icons alongside labels for improved scannability and a modern look.
Image Background: Sets a beautiful travel-themed backdrop to inspire users.
Accessible & Responsive: The form is built with accessibility in mind, and the layout wraps cleanly on mobile devices.

Code Breakdown

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

The layout uses Flexbox to center the content. The booking form itself is also a flex container, allowing its input groups and the search button to align in a row on desktops and wrap onto new lines for mobile. Each input field (e.g., input type="text") is paired with a label for accessibility and grouped with an SVG icon inside a container div. This grouping structure helps us achieve the desired layout. You will need to wire the form's action attribute up to your site's backend search functionality.

Code

<style>
    :root {
        /*
            Demonstration image from Unsplash by S-well.
            Replace with your own destination photo.
        */
        --bch-bg-image: url('https://images.unsplash.com/photo-1530789253388-582c481c54b0?q=80&w=1470');
        --bch-min-height: 90vh;
        --bch-padding: 3rem 1.5rem;
        --bch-text-color: #ffffff;
        --bch-overlay-color: rgba(0, 0, 0, 0.4);
        --bch-form-bg: #ffffff;
        --bch-form-text-color: #1f2937;
        --bch-cta-bg: #d97706;
        --bch-cta-hover-bg: #b45309;
        --bch-cta-text-color: #ffffff;
    }
    .booking-cta-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";
        min-height: var(--bch-min-height);
        padding: var(--bch-padding);
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-image: var(--bch-bg-image);
        background-size: cover;
        background-position: center;
    }
    .booking-cta-hero::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: var(--bch-overlay-color);
        z-index: 1;
    }
    .booking-cta-hero * {
         box-sizing: border-box;
    }
    .bch-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        color: var(--bch-text-color);
        width: 100%;
    }
    .bch-content .title {
        font-size: clamp(2.5rem, 6vw, 4rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 2.5rem;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .bch-booking-form {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        background-color: var(--bch-form-bg);
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    }
    .bch-booking-form .input-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background-color: #f1f5f9;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        flex: 1 1 180px; /* Flexbox for responsive inputs */
    }
    .bch-booking-form .input-group svg {
        width: 1.25em;
        height: 1.25em;
        color: #64748b;
    }
    .bch-booking-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;
    }
    .bch-booking-form .form-input {
        border: none;
        outline: none;
        background-color: transparent;
        font-size: 1rem;
        width: 100%;
        color: var(--bch-form-text-color);
    }
    .bch-booking-form .form-button {
        flex: 1 1 100px; /* Flexbox for button */
        background-color: var(--bch-cta-bg);
        color: var(--bch-cta-text-color);
        font-size: 1.1rem;
        font-weight: 600;
        border: none;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .bch-booking-form .form-button:hover {
        background-color: var(--bch-cta-hover-bg);
    }
</style>

<section class="booking-cta-hero">
    <div class="bch-content">
        <h1 class="title">Your Adventure Awaits</h1>
        
        
        <form class="bch-booking-form" action="#">
            <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /></svg>
                <label for="destination-input" class="sr-only">Destination</label>
                <input type="text" id="destination-input" name="destination" class="form-input" placeholder="Where to?">
            </div>
            <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                <label for="checkin-input" class="sr-only">Check-in Date</label>
                <input type="text" id="checkin-input" name="checkin" class="form-input" placeholder="Check-in" onfocus="(this.type='date')" onblur="(this.type='text')">
            </div>
             <div class="input-group">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" /></svg>
                <label for="checkout-input" class="sr-only">Check-out Date</label>
                <input type="text" id="checkout-input" name="checkout" class="form-input" placeholder="Check-out" onfocus="(this.type='date')" onblur="(this.type='text')">
            </div>
            <button type="submit" class="form-button">Search</button>
        </form>
    </div>
</section>

View Output