Bootstrap Split Hero with Inline Signup Form — Free Snippet

<div class="row g-0 bssplit-row">
  <div class="col-lg-6 bssplit-copy d-flex align-items-center">
    <div class="p-5">
      <h1 class="bssplit-title">Start shipping faster.</h1>
      <p class="bssplit-sub mb-4">Create a free account — no credit card, cancel anytime.</p>

      <form id="bssplitForm" novalidate>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Full name</label>
          <input type="text" class="form-control" id="bssplitName" required>
          <div class="invalid-feedback">Enter your name.</div>
        </div>
        <div class="mb-3">
          <label class="form-label small fw-semibold">Work email</label>
          <input type="email" class="form-control" id="bssplitEmail" required>
          <div class="invalid-feedback">Enter a valid email.</div>
        </div>
        <button type="submit" class="btn btn-dark w-100 fw-bold">Create free account</button>
        <p class="small text-muted mt-2 mb-0" id="bssplitStatus"></p>
      </form>
    </div>
  </div>
  <div class="col-lg-6 bssplit-visual d-none d-lg-flex align-items-center justify-content-center">
    <div class="bssplit-mock">
      <div class="bssplit-mock-row" style="--w:70%"></div>
      <div class="bssplit-mock-row" style="--w:45%"></div>
      <div class="bssplit-mock-row" style="--w:85%"></div>
      <div class="bssplit-mock-row" style="--w:60%"></div>
    </div>
  </div>
</div>

body { margin: 0; }
.bssplit-row { min-height: 100vh; }
.bssplit-title { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
.bssplit-sub { color: #6b7280; }
.bssplit-visual { background: linear-gradient(135deg, #4f46e5, #7c3aed); }
.bssplit-mock { width: 70%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 14px; padding: 24px; }
.bssplit-mock-row { height: 12px; width: var(--w); background: rgba(255,255,255,.35); border-radius: 6px; margin-bottom: 12px; }
.bssplit-mock-row:last-child { margin-bottom: 0; }

const form = document.getElementById('bssplitForm');
const name = document.getElementById('bssplitName');
const email = document.getElementById('bssplitEmail');
const status = document.getElementById('bssplitStatus');

form.addEventListener('submit', e => {
  e.preventDefault();
  name.classList.toggle('is-invalid', !name.value.trim());
  email.classList.toggle('is-invalid', !email.checkValidity());

  if (!name.value.trim() || !email.checkValidity()) {
    status.textContent = 'Please fix the highlighted fields.';
    return;
  }

  status.textContent = 'Account created for ' + name.value + ' (' + email.value + ').';
  form.reset();
  [name, email].forEach(f => f.classList.remove('is-invalid'));
});