→ Sammy Rodriguez
→ Clean Modern Sign Up Form with Toggle

Clean Modern Sign Up Form with Toggle

A clean, responsive sign up and login form with a simple toggle to switch between authentication modes. Perfect for websites and web applications.

This Example is contributed by Sammy Rodriguez, on 02-Mar-2025. It is responsive. similar terms for this example are Form Component,Login,Register,Sign in

Form Login Form Authentication

Author Sammy Rodriguez

Fork Fullscreen

<div class="container">
  <div class="form-container">
    <div class="form-header">
      <div class="toggle">
        <span class="toggle-login active">Login</span>
        <span class="toggle-signup">Sign Up</span>
      </div>
    </div>
    
    <div class="form-body">
      <form class="login-form">
        <div class="input-group">
          <input type="email" id="login-email" placeholder="Email" required>
        </div>
        <div class="input-group">
          <input type="password" id="login-password" placeholder="Password" required>
        </div>
        <div class="forgot-password">
          <a href="#">Forgot Password?</a>
        </div>
        <button type="submit" class="submit-btn">Log In</button>
      </form>
      
      <form class="signup-form hidden">
        <div class="input-group">
          <input type="text" id="signup-name" placeholder="Full Name" required>
        </div>
        <div class="input-group">
          <input type="email" id="signup-email" placeholder="Email" required>
        </div>
        <div class="input-group">
          <input type="password" id="signup-password" placeholder="Password" required>
        </div>
        <div class="input-group">
          <input type="password" id="signup-confirm-password" placeholder="Confirm Password" required>
        </div>
        <div class="terms">
          <input type="checkbox" id="terms" required>
          <label for="terms">I agree to the <a href="#">Terms of Service</a></label>
        </div>
        <button type="submit" class="submit-btn">Sign Up</button>
      </form>
    </div>
    
    <div class="social-login">
      <p>Or continue with</p>
      <div class="social-icons">
        <button class="social-icon google"><i class="fab fa-google"></i></button>
        <button class="social-icon facebook"><i class="fab fa-facebook-f"></i></button>
        <button class="social-icon github"><i class="fab fa-github"></i></button>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

Related Examples