This contact form includes inline validation messaging to help users fix errors quickly before submission.
HTML
<form class="contact-validate">
<h3>Contact Us</h3>
<p class="subtitle">Please fill in all required fields</p>
<div class="field error">
<input type="text" placeholder="Name" required>
<span class="msg">Name is required</span>
</div>
<div class="field error">
<input type="email" placeholder="Email" required>
<span class="msg">Enter a valid email address</span>
</div>
<div class="field">
<textarea placeholder="Message" rows="4" required></textarea>
</div>
<button type="button">Send Message</button>
</form>Note:
- Add
.errorto.fieldto show an error- Remove
.errorto show a valid state- In real projects, toggle these with JavaScript or backend validation
CSS
:root{
--bg:#f8fafc;
--card:#ffffff;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#2563eb;
--error:#ef4444;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#020617;
--card:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#3b82f6;
--error:#f87171;
}
}
.contact-validate{
max-width:420px;
margin:80px auto;
padding:32px;
background:var(--card);
border-radius:18px;
border:1px solid var(--border);
box-shadow:0 16px 40px rgba(0,0,0,.12);
font-family:system-ui, -apple-system, sans-serif;
color:var(--text);
}
.contact-validate h3{
font-size:22px;
margin-bottom:6px;
}
.contact-validate .subtitle{
font-size:14px;
color:var(--muted);
margin-bottom:24px;
}
.field{
margin-bottom:18px;
position:relative;
}
.field input,
.field textarea{
width:100%;
padding:14px 16px;
font-size:15px;
border-radius:12px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--card),var(--bg));
color:var(--text);
outline:none;
resize:none;
transition:border .2s ease, box-shadow .2s ease;
}
.field input:focus,
.field textarea:focus{
border-color:var(--primary);
box-shadow:0 0 0 4px rgba(37,99,235,.18);
}
.field.error input,
.field.error textarea{
border-color:var(--error);
box-shadow:0 0 0 4px rgba(239,68,68,.18);
}
.msg{
display:none;
margin-top:6px;
font-size:12px;
color:var(--error);
}
.field.error .msg{
display:block;
}
.contact-validate button{
width:100%;
padding:14px;
border:none;
border-radius:12px;
background:linear-gradient(
135deg,
var(--primary),
#1d4ed8
);
color:#ffffff;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
.contact-validate button:hover{
transform:translateY(-1px);
box-shadow:0 12px 30px rgba(0,0,0,.2);
}
.contact-validate button:active{
transform:translateY(0);
box-shadow:none;
}Notes
- Clear error feedback
- Reduces submission errors
- JavaScript-ready validation
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.