→ Marcus Hendricks
→ Old style registration form wth CSS

Old style registration form wth CSS

This Example is contributed by Marcus Hendricks, on 08-Apr-2025. It is responsive. similar terms for this example are Form Component,Login,Register,Sign in

Form Login Form Social Login

Author Marcus Hendricks

Fork Fullscreen

<div class="registration-container">
  <div class="form-wrapper">
    <h2>Create an Account</h2>
    <div class="social-login">
      <button class="social-btn facebook"><i class="fab fa-facebook-f"></i> Continue with Facebook</button>
      <button class="social-btn google"><i class="fab fa-google"></i> Continue with Google</button>
      <button class="social-btn twitter"><i class="fab fa-twitter"></i> Continue with Twitter</button>
    </div>
    <div class="divider">
      <span>or register with email</span>
    </div>
    <form id="registration-form">
      <div class="form-row">
        <div class="form-group">
          <label for="first-name">First Name</label>
          <input type="text" id="first-name" required>
        </div>
        <div class="form-group">
          <label for="last-name">Last Name</label>
          <input type="text" id="last-name" required>
        </div>
      </div>
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" required>
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" required>
        <small>Password must be at least 8 characters</small>
      </div>
      <div class="form-group">
        <label for="confirm-password">Confirm Password</label>
        <input type="password" id="confirm-password" required>
      </div>
      <div class="form-group checkbox">
        <input type="checkbox" id="terms" required>
        <label for="terms">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
      </div>
      <button type="submit" class="submit-btn">Create Account</button>
    </form>
    <p class="login-link">Already have an account? <a href="#">Log in</a></p>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples

Didn't find component you were looking for?

Search from 500+ components