→ Anonymous
→ Waitlist Form

Waitlist Form

This Example is contributed by Anonymous, on 02-Mar-2025. It is responsive. similar terms for this example is Form Component

Form Signup Waitlist

Author Anonymous

Fork Fullscreen

<div class="waitlist-container">
  <div class="waitlist-card">
    <div class="waitlist-header">
      <h2>Join the Waitlist</h2>
      <p>Be the first to know when we launch.</p>
    </div>
    <form id="waitlistForm" class="waitlist-form">
      <div class="form-group">
        <label for="fullName">Full Name</label>
        <input type="text" id="fullName" placeholder="Enter your full name" required>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" placeholder="Enter your email address" required>
      </div>
      <div class="form-group checkbox-group">
        <input type="checkbox" id="earlyAccess" checked>
        <label for="earlyAccess">I want early access</label>
      </div>
      <button type="submit" class="submit-btn">Join Waitlist</button>
    </form>
    <div id="successMessage" class="success-message">
      <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
        <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
        <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
      </svg>
      <h3>You're on the list!</h3>
      <p>We'll notify you when we launch.</p>
    </div>
  </div>
</div>

Related Examples