→ Anonymous
→ Password Reset Request Form

Password Reset Request Form

A clean and responsive forgot password form that allows users to request a password reset link via email, featuring input validation and success feedback.

This Example is contributed by Anonymous, on 26-Feb-2025. It is responsive.

Authentication Password Reset

Author Anonymous

Fork Fullscreen

<div class="forgot-password-container">
  <div class="forgot-password-card">
    <div class="form-header">
      <h2>Forgot Password?</h2>
      <p>Enter your email address below and we'll send you a link to reset your password.</p>
    </div>
    
    <form id="reset-password-form">
      <div class="form-group">
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="Enter your email" required>
        <span class="error-message" id="email-error"></span>
      </div>
      
      <button type="submit" class="reset-btn">Send Reset Link</button>
    </form>
    
    <div class="form-footer">
      <p>Remembered your password? <a href="#">Sign In</a></p>
    </div>
    
    <div class="success-message" id="success-message">
      <div class="success-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
          <polyline points="22 4 12 14.01 9 11.01"></polyline>
        </svg>
      </div>
      <h3>Check Your Email</h3>
      <p>We've sent a password reset link to your email address. Please check your inbox and follow the instructions.</p>
      <button class="back-btn" id="back-btn">Back to Sign In</button>
    </div>
  </div>
</div>

Related Examples