This password reset form displays a confirmation message after submission to reassure users that the request was successful.
HTML
<div class="reset-wrapper">
<form class="reset-confirm">
<h3>Reset Password</h3>
<p class="subtitle">Enter your email to receive a reset link</p>
<input type="email" placeholder="Email address" required>
<button type="button">Send Reset Link</button>
</form>
<div class="reset-success">
<span class="icon">✓</span>
<h4>Check your inbox</h4>
<p>
We’ve sent a password reset link to your email.
</p>
</div>
</div>Note: In production, toggle .reset-confirm and .reset-success visibility with JavaScript or backend logic.
CSS
:root{
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#4f46e5;
--primary-dark:#4338ca;
--success:#16a34a;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#020617;
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#6366f1;
--primary-dark:#818cf8;
--success:#22c55e;
}
}
body{
background:var(--bg);
font-family:system-ui, -apple-system, sans-serif;
}
.reset-wrapper{
max-width:420px;
margin:80px auto;
}
.reset-confirm{
padding:32px;
background:var(--card);
border-radius:18px;
border:1px solid var(--border);
box-shadow:0 16px 40px rgba(0,0,0,.12);
text-align:center;
color:var(--text);
}
.reset-confirm h3{
font-size:22px;
margin-bottom:6px;
}
.reset-confirm .subtitle{
font-size:14px;
color:var(--muted);
margin-bottom:24px;
}
.reset-confirm input{
width:100%;
padding:14px 16px;
margin-bottom:20px;
border-radius:12px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--card),var(--bg));
color:var(--text);
font-size:15px;
outline:none;
transition:border .2s ease, box-shadow .2s ease;
}
.reset-confirm input::placeholder{
color:var(--muted);
}
.reset-confirm input:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(79,70,229,.18);
}
.reset-confirm button{
width:100%;
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(
135deg,
var(--primary),
var(--primary-dark)
);
color:#ffffff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
.reset-confirm button:hover{
transform:translateY(-1px);
box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.reset-confirm button:active{
transform:translateY(0);
box-shadow:none;
}
.reset-success{
display:none;
margin-top:24px;
padding:28px;
background:var(--card);
border-radius:18px;
border:1px solid var(--border);
box-shadow:0 16px 40px rgba(0,0,0,.12);
text-align:center;
color:var(--text);
}
.reset-success .icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:52px;
height:52px;
margin-bottom:12px;
border-radius:50%;
background:rgba(22,163,74,.15);
color:var(--success);
font-size:24px;
}
.reset-success h4{
font-size:18px;
margin-bottom:6px;
}
.reset-success p{
font-size:14px;
color:var(--muted);
}How to switch states (important)
In real use, toggle visibility:
.reset-confirm{ display:none; }
.reset-success{ display:block; }(Use JavaScript or backend logic.)
Notes
- Reduces user anxiety
- Improves trust
- JS-ready status handling
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.