→ Anonymous
→ User Registration Form with Step-by-Step...

User Registration Form with Step-by-Step Instructions

This Example is contributed by Anonymous, on 31-Mar-2025. It is responsive.

Signup

<div class="registration-container">
  <div class="form-header">
    <h1>Create Your Account</h1>
    <p>Join our community by filling out the form below</p>
  </div>
  
  <form id="registration-form" class="registration-form">
    <div class="form-group">
      <label for="fullname">Full Name</label>
      <input type="text" id="fullname" name="fullname" required>
      <small class="instruction">Enter your first and last name as it appears on official documents.</small>
    </div>
    
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" id="username" name="username" required>
      <small class="instruction">Choose a unique username (5-15 characters, letters and numbers only).</small>
    </div>
    
    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" name="email" required>
      <small class="instruction">We'll send a verification link to this email address.</small>
    </div>
    
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" name="password" required>
      <small class="instruction">Create a strong password (minimum 8 characters with at least one uppercase letter, one number, and one special character).</small>
      <div class="password-strength" id="password-strength">
        <div class="strength-bar"></div>
        <span class="strength-text">Password strength</span>
      </div>
    </div>
    
    <div class="form-group">
      <label for="confirm-password">Confirm Password</label>
      <input type="password" id="confirm-password" name="confirm-password" required>
      <small class="instruction">Re-enter your password to confirm.</small>
    </div>
    
    <div class="form-group">
      <label for="dob">Date of Birth</label>
      <input type="date" id="dob" name="dob" required>
      <small class="instruction">You must be at least 13 years old to register.</small>
    </div>
    
    <div class="form-group checkbox-group">
      <input type="checkbox" id="terms" name="terms" required>
      <label for="terms">I agree to the <a href="#">Terms and Conditions</a> and <a href="#">Privacy Policy</a></label>
    </div>
    
    <div class="form-group checkbox-group">
      <input type="checkbox" id="newsletter" name="newsletter">
      <label for="newsletter">Subscribe to our newsletter for updates and promotions</label>
    </div>
    
    <button type="submit" class="submit-btn">Create Account</button>
  </form>
  
  <div class="form-footer">
    <p>Already have an account? <a href="#">Sign in</a></p>
  </div>
</div>

Related Examples