webdevpuneet.com

Related Snippets

63 in Heroes category
40–45 of 60

Split-Screen Hero with Embedded Signup Form

Hero with Social Proof Logo Strip

Typed.js Multi-String Hero

Typed.js Rotating Headline

tsParticles Interactive Hero

Hero Email Capture

Split-Screen Hero with Signup Form — Free HTML CSS JS Snippet

Split-Screen Hero with Embedded Signup Form · Heroes · Plain HTML, CSS & JS · Live preview

CategoryHeroes
TagsAuthenticationLanding PageForms & ValidationCSS Grid

Copy & paste

Source Code

<section class="ssf-hero">
  <div class="ssf-left">
    <span class="ssf-eyebrow">Free 14-day trial</span>
    <h1 class="ssf-h1">Run your whole team from one dashboard</h1>
    <p class="ssf-sub">Plan sprints, track time, and ship releases without switching tabs. No credit card required to start.</p>
    <ul class="ssf-benefits">
      <li><span class="ssf-check">✓</span>Unlimited projects on every plan</li>
      <li><span class="ssf-check">✓</span>Real-time collaboration, built in</li>
      <li><span class="ssf-check">✓</span>Cancel anytime, no lock-in contracts</li>
    </ul>
    <div class="ssf-avatars">
      <div class="ssf-av" style="background:linear-gradient(135deg,#f472b6,#fb7185)">K</div>
      <div class="ssf-av" style="background:linear-gradient(135deg,#818cf8,#6366f1)">R</div>
      <div class="ssf-av" style="background:linear-gradient(135deg,#34d399,#10b981)">T</div>
      <span class="ssf-av-text">Joined by 8,400+ teams this year</span>
    </div>
  </div>

  <div class="ssf-right">
    <form class="ssf-form" id="ssfForm" novalidate>
      <h2 class="ssf-form-title">Create your account</h2>
      <p class="ssf-form-sub">Start your free trial in under a minute.</p>

      <label class="ssf-field">
        <span>Full name</span>
        <input type="text" id="ssfName" name="name" placeholder="Alex Rivera" autocomplete="name">
        <small class="ssf-error" id="ssfNameErr"></small>
      </label>

      <label class="ssf-field">
        <span>Work email</span>
        <input type="email" id="ssfEmail" name="email" placeholder="[email protected]" autocomplete="email">
        <small class="ssf-error" id="ssfEmailErr"></small>
      </label>

      <label class="ssf-field">
        <span>Password</span>
        <input type="password" id="ssfPassword" name="password" placeholder="At least 8 characters" autocomplete="new-password">
        <small class="ssf-error" id="ssfPasswordErr"></small>
        <div class="ssf-strength" id="ssfStrength"><i></i><i></i><i></i></div>
      </label>

      <button type="submit" class="ssf-submit">Create free account</button>
      <p class="ssf-legal">By continuing you agree to our Terms and Privacy Policy.</p>
      <p class="ssf-success" id="ssfSuccess" role="status"></p>
    </form>
  </div>
</section>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real multi-field form
Name, email, and password — not just an email teaser.
Live validation
Per-field errors computed on actual submit, not decorative.
Password strength meter
Recomputed on every keystroke from real input.
Benefit checklist
Scannable bullets instead of a long paragraph.
Social proof row
Overlapping avatars plus a joined-teams count.
Split-screen layout
Pitch on the left, conversion surface on the right.
Responsive collapse
Single column with form still prioritized on mobile.
No dependencies
Vanilla JS validation, no form library required.

About this UI Snippet

Split-Screen Hero with Embedded Signup Form — Real Multi-Field Validation

Screenshot of the Split-Screen Hero with Embedded Signup Form snippet rendered live

Most hero sections that claim to have a "signup form" actually have a single email input — this snippet builds a genuine multi-field account creation form (name, email, password) directly into a split-screen hero, with real client-side validation and a live password-strength meter, not just an email-capture teaser.

Why split-screen, and why a real form

The left column carries the pitch: eyebrow label, headline, subheading, a short benefit list, and a social-proof avatar row. The right column is the conversion surface — a bordered card containing the actual form a visitor fills in to create an account. Putting the form directly in the hero, rather than behind a "Sign up" button that navigates away, removes a click and lets a visitor complete the whole action without ever leaving the page.

Real validation, not a fake success state

The JavaScript listens for the form's submit event, calls preventDefault(), and runs three checks: name length, an email-shape regex, and an 8-character minimum on the password. Each field gets its own inline error message and an .ssf-invalid border state — nothing submits, and no success message appears, until all three checks pass. This is deliberately not a decorative form; wire the same submit handler to a real fetch() call against your signup endpoint and the validation logic stays exactly as-is.

Live password strength meter

As the visitor types into the password field, an input listener recomputes a 0–3 score from length, mixed case, and digit/symbol presence, then toggles a weak/medium/strong class on a three-segment bar — genuine feedback computed from the current value on every keystroke, not a static illustration.

Benefit bullets over generic copy

Rather than one long paragraph, the left column uses a short checklist of concrete benefits ("Unlimited projects on every plan") with a circular checkmark icon — scannable in under two seconds, which matters because a visitor filling out a form on the right needs quick reassurance on the left, not another paragraph to read.

Responsive collapse

At 860px the grid collapses from two columns to one, with the form card stacking beneath the pitch copy and a top border replacing the left border — so the form remains the clear focal point on mobile rather than being squeezed into a narrow sidebar.

Customizing it

Swap the field set for your own signup requirements (add a company field, a plan selector), replace the regex-based email check with your backend's validation rules, and wire the submit handler to a real endpoint. Pair it with hero email capture for a lighter-weight variant, or startup hero for a single-column alternative.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSThe split-screen hero and form render; validation is wired to the form's submit event.
  2. 2
    Try submitting emptyEach field shows its own inline error and a red border.
  3. 3
    Type a passwordWatch the three-segment strength bar update live as you type.
  4. 4
    Submit valid valuesA green success message replaces the form's placeholder state.
  5. 5
    Edit the benefit bulletsUpdate the ssf-benefits list items to your own value props.
  6. 6
    Wire a real endpointReplace the success-message branch with a fetch() call to your signup API.

Real-world uses

Common Use Cases

SaaS signup landing pages
Capture a full account in the hero, with name, email and password fields validated on submit rather than a single email teaser.
Product-led growth funnels
Reduce clicks between an ad and an activated account, with a password strength meter recomputed on every keystroke.
Waitlist to account conversion
Pair with a coming soon hero so waitlist members can create an account when the product opens.
B2B trial signups
Use benefit bullets to speak to the buyer, with a scannable checklist beside the form instead of a long paragraph.
Course and membership signups
Swap benefits for curriculum highlights on a course or membership page, or reuse the validated form pattern for internal tool onboarding.
Related: Hero with Live Ticking User Counter
See the Hero with Live Ticking User Counter for a related heroes pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Not by default — the submit handler calls preventDefault(), runs validation, and shows a success message locally so you can see the full interaction. Replace the success-message block with a fetch() POST to your real signup endpoint; the validation logic that gates the submission stays unchanged.

An input listener on the password field runs scorePassword(), which checks three conditions — length of at least 8, presence of both upper and lower case letters, and presence of a digit or symbol — awarding one point each for a 0-3 score. That score maps to a weak/medium/strong class on a three-segment bar, so the meter reflects the password actually typed, recalculated on every keystroke.

On submit, the name field requires at least 2 characters, the email field is tested against a standard email-shape regex ([email protected]), and the password field requires at least 8 characters. Each check independently sets or clears an inline error message and a red .ssf-invalid border on its own input — submission is blocked until all three pass.

Every extra click between a visitor deciding to sign up and completing the form is a chance to lose them. Embedding real fields directly in the hero removes that navigation step entirely — the visitor can go from reading the pitch on the left to a validated account on the right without a page load in between.

Copy an existing .ssf-field label block, give the input a new id, and add a matching small.ssf-error element with its own id. In the JS, add the same setError() pattern inside the submit handler for your new field's validation rule before the final valid check.