This signup form organizes multiple fields into a clean layout, ideal for collecting detailed user information.
HTML
<form class="signup-multi">
<h3>Create Account</h3>
<div class="row">
<input type="text" placeholder="First name" required>
<input type="text" placeholder="Last name" required>
</div>
<input type="email" placeholder="Email address" required>
<input type="password" placeholder="Password" required>
<label class="terms">
<input type="checkbox" required>
I agree to the terms
</label>
<button type="button">Sign Up</button>
</form>CSS
:root{
--card:#ffffff;
--bg:#f8fafc;
--text:#0f172a;
--muted:#64748b;
--border:#e5e7eb;
--primary:#4f46e5;
--primary-dark:#4338ca;
}
@media (prefers-color-scheme: dark){
:root{
--card:#020617;
--bg:#020617;
--text:#e5e7eb;
--muted:#94a3b8;
--border:#1f2937;
--primary:#6366f1;
--primary-dark:#818cf8;
}
}
.signup-multi{
max-width:260px;
margin:auto;
padding:16px;
background:var(--card);
border-radius:16px;
border:1px solid var(--border);
box-shadow:0 10px 30px rgba(0,0,0,.08);
font-size:12px;
color:var(--text);
}
.signup-multi h3{
font-size:14px;
margin-bottom:12px;
text-align:center;
}
.signup-multi .row{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:10px;
}
.signup-multi input{
width:100%;
padding:10px 12px;
margin-bottom:10px;
border-radius:10px;
border:1px solid var(--border);
background:linear-gradient(180deg,var(--card),var(--bg));
color:var(--text);
font-size:12px;
outline:none;
transition:border .2s ease, box-shadow .2s ease, transform .15s ease;
}
.signup-multi input::placeholder{
color:var(--muted);
}
.signup-multi input:focus{
border-color:var(--primary);
box-shadow:0 0 0 3px rgba(79,70,229,.18);
transform:translateY(-1px);
}
.signup-multi .terms{
display:flex;
align-items:center;
gap:8px;
font-size:11px;
color:var(--muted);
margin:4px 0 12px;
}
.signup-multi .terms input{
width:14px;
height:14px;
accent-color:var(--primary);
}
.signup-multi button{
width:100%;
padding:10px;
border:none;
border-radius:12px;
background:linear-gradient(135deg,var(--primary),var(--primary-dark));
color:#ffffff;
font-size:12px;
font-weight:600;
cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease;
}
.signup-multi button:hover{
transform:translateY(-1px);
box-shadow:0 8px 20px rgba(0,0,0,.18);
}
.signup-multi button:active{
transform:translateY(0);
box-shadow:none;
}Notes
- Structured field layout
- Scales for large forms
- Easy validation integration
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.