Advanced Forms
Multi-step, file upload, signature and address forms.
Multi-Step Form
Account
2
Profile
3
Finish
Tell us about yourself
This helps us personalize your experience.
<div class="uk-form-adv">
<div class="uk-form-steps">
<div class="uk-form-step done">
<div class="uk-form-step-num"><i class="fas fa-check"></i></div>
<div class="uk-form-step-label">Account</div>
</div>
<div class="uk-form-step-line done"></div>
<div class="uk-form-step active">
<div class="uk-form-step-num">2</div>
<div class="uk-form-step-label">Profile</div>
</div>
<div class="uk-form-step-line"></div>
<div class="uk-form-step">
<div class="uk-form-step-num">3</div>
<div class="uk-form-step-label">Finish</div>
</div>
</div>
<div class="uk-form-title">Tell us about yourself</div>
<p class="uk-form-sub">This helps us personalize your experience.</p>
<div class="uk-form-row">
<div class="uk-form-group">
<label class="uk-form-label">First Name</label>
<input type="text" class="uk-form-input" placeholder="Marcus">
</div>
<div class="uk-form-group">
<label class="uk-form-label">Last Name</label>
<input type="text" class="uk-form-input" placeholder="Johnson">
</div>
</div>
<div class="uk-form-group">
<label class="uk-form-label">Role</label>
<select class="uk-form-select">
<option>Select your role</option>
<option>Designer</option>
</select>
</div>
<div class="uk-form-actions">
<button class="uk-form-btn-ghost">Back</button>
<button class="uk-form-btn">Continue</button>
</div>
</div>
<style>
.uk-form-adv {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.75rem;
}
.uk-form-steps {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 2rem;
}
.uk-form-step {
flex: 0 0 auto;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.uk-form-step-num {
width: 32px; height: 32px;
border-radius: 50%;
background: #e2e8f0;
color: #64748b;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.8rem;
}
.uk-form-step.active .uk-form-step-num {
background: #1e3a8a; color: #fff;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.12);
}
.uk-form-step.done .uk-form-step-num { background: #059669; color: #fff; }
.uk-form-step-label { font-size: 0.72rem; font-weight: 600; color: #64748b; }
.uk-form-step.active .uk-form-step-label,
.uk-form-step.done .uk-form-step-label { color: #0b1b2f; }
.uk-form-step-line {
flex: 1;
height: 2px;
background: #e2e8f0;
margin-top: 15px;
border-radius: 999px;
}
.uk-form-step-line.done { background: #059669; }
.uk-form-title {
font-size: 1.25rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.35rem;
text-align: left;
}
.uk-form-sub {
font-size: 0.85rem;
color: #64748b;
margin-bottom: 1.5rem;
text-align: left;
}
.uk-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
@media (max-width: 480px) {
.uk-form-row { grid-template-columns: 1fr; }
}
.uk-form-group { margin-bottom: 1rem; text-align: left; }
.uk-form-label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #0b1b2f;
margin-bottom: 0.4rem;
}
.uk-form-input, .uk-form-select {
width: 100%;
padding: 0.65rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 0.85rem;
outline: 0;
transition: all 0.15s;
font-family: inherit;
background: #fff;
}
.uk-form-input:focus, .uk-form-select:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-form-actions {
display: flex;
justify-content: space-between;
margin-top: 1.5rem;
}
.uk-form-btn, .uk-form-btn-ghost {
padding: 0.65rem 1.5rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
}
.uk-form-btn {
background: #1e3a8a; color: #fff; border: 0;
}
.uk-form-btn:hover { background: #0f2a5c; }
.uk-form-btn-ghost {
background: transparent; color: #64748b; border: 1px solid #e2e8f0;
}
.uk-form-btn-ghost:hover { background: #f8fafc; }
</style>
File Upload Form
Upload your documents
Please upload a copy of your ID and resume.
Click to upload or drag and drop
PDF, PNG, JPG (max. 5MB)
resume-2025.pdf
1.2 MB
<div class="uk-form-dropzone">
<i class="fas fa-cloud-upload-alt"></i>
<div class="uk-form-dropzone-title">Click to upload or drag and drop</div>
<div class="uk-form-dropzone-desc">PDF, PNG, JPG (max. 5MB)</div>
</div>
<div class="uk-form-file-list">
<div class="uk-form-file">
<div class="uk-form-file-icon"><i class="fas fa-file-pdf"></i></div>
<div class="uk-form-file-info">
<div class="uk-form-file-name">resume-2025.pdf</div>
<div class="uk-form-file-size">1.2 MB</div>
</div>
<button class="uk-form-file-remove"><i class="fas fa-times"></i></button>
</div>
</div>
<style>
.uk-form-dropzone {
border: 2px dashed #cbd5e1;
border-radius: 0.85rem;
padding: 2rem;
text-align: center;
background: #f8fafc;
cursor: pointer;
transition: all 0.15s;
margin-bottom: 1rem;
}
.uk-form-dropzone:hover {
border-color: #1e3a8a;
background: #eef2f8;
}
.uk-form-dropzone i {
font-size: 2rem;
color: #1e3a8a;
margin-bottom: 0.75rem;
}
.uk-form-dropzone-title {
font-size: 0.88rem;
font-weight: 700;
color: #0b1b2f;
margin-bottom: 0.35rem;
}
.uk-form-dropzone-desc {
font-size: 0.75rem;
color: #94a3b8;
}
.uk-form-file-list { margin-top: 1rem; }
.uk-form-file {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
}
.uk-form-file-icon {
width: 36px; height: 36px;
border-radius: 0.5rem;
background: #fee2e2;
color: #dc2626;
display: flex; align-items: center; justify-content: center;
font-size: 0.95rem;
}
.uk-form-file-info { flex: 1; text-align: left; }
.uk-form-file-name {
font-size: 0.82rem;
font-weight: 600;
color: #0b1b2f;
}
.uk-form-file-size {
font-size: 0.7rem;
color: #94a3b8;
}
.uk-form-file-remove {
background: transparent; border: 0; color: #94a3b8;
cursor: pointer; padding: 4px; border-radius: 4px;
}
.uk-form-file-remove:hover { background: #fee2e2; color: #dc2626; }
</style>
Signature Form
Sign the agreement
By signing below, you agree to our Terms of Service.
Sign here
<div class="uk-form-signature">
<div class="uk-form-sig-placeholder">Sign here</div>
<div class="uk-form-sig-line"></div>
</div>
<div class="uk-form-check">
<input type="checkbox" checked>
<label>I agree to the <a href="#">Terms of Service</a>.</label>
</div>
<style>
.uk-form-signature {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
height: 140px;
position: relative;
margin-bottom: 1.25rem;
}
.uk-form-sig-placeholder {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: #cbd5e1;
font-size: 1.15rem;
font-style: italic;
pointer-events: none;
}
.uk-form-sig-line {
position: absolute;
bottom: 1.5rem;
left: 2rem; right: 2rem;
height: 1px;
background: #cbd5e1;
}
.uk-form-check {
display: flex;
align-items: flex-start;
gap: 0.65rem;
text-align: left;
}
.uk-form-check input { margin-top: 4px; accent-color: #1e3a8a; }
.uk-form-check label {
font-size: 0.82rem;
color: #475569;
line-height: 1.5;
cursor: pointer;
}
.uk-form-check a { color: #1e3a8a; font-weight: 600; }
</style>
Address Form
Shipping Address
Where should we send your order?
<div class="uk-form-title">Shipping Address</div>
<div class="uk-form-row">
<div class="uk-form-group">
<label class="uk-form-label">First Name</label>
<input type="text" class="uk-form-input" placeholder="Marcus">
</div>
<div class="uk-form-group">
<label class="uk-form-label">Last Name</label>
<input type="text" class="uk-form-input" placeholder="Johnson">
</div>
</div>
<div class="uk-form-group">
<label class="uk-form-label">Address</label>
<input type="text" class="uk-form-input" placeholder="123 Market Street">
</div>
<div class="uk-form-row">
<div class="uk-form-group">
<label class="uk-form-label">City</label>
<input type="text" class="uk-form-input" placeholder="San Francisco">
</div>
<div class="uk-form-group">
<label class="uk-form-label">ZIP Code</label>
<input type="text" class="uk-form-input" placeholder="94103">
</div>
</div>
Payment Details Form
Payment details
All transactions are secure and encrypted.
<div class="uk-form-payment-types">
<button class="uk-form-payment-type active"><i class="fab fa-cc-visa"></i></button>
<button class="uk-form-payment-type"><i class="fab fa-cc-mastercard"></i></button>
<button class="uk-form-payment-type"><i class="fab fa-cc-amex"></i></button>
<button class="uk-form-payment-type"><i class="fab fa-paypal"></i></button>
</div>
<div class="uk-form-group">
<label class="uk-form-label">Card Number</label>
<div class="uk-form-input-icon">
<i class="fas fa-credit-card"></i>
<input type="text" class="uk-form-input" placeholder="0000 0000 0000 0000" style="padding-left: 2.5rem;">
</div>
</div>
<style>
.uk-form-payment-types {
display: flex;
gap: 0.35rem;
margin-bottom: 1.25rem;
}
.uk-form-payment-type {
flex: 1;
padding: 0.65rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 1.5rem;
color: #cbd5e1;
cursor: pointer;
transition: all 0.15s;
}
.uk-form-payment-type.active {
border-color: #1e3a8a;
color: #1e3a8a;
background: #eef2f8;
}
.uk-form-input-icon { position: relative; }
.uk-form-input-icon > i {
position: absolute;
left: 0.85rem;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 0.9rem;
z-index: 1;
}
</style>
Inline Newsletter Signup
Join the newsletter
Get the latest updates and tips in your inbox.
No spam. Unsubscribe anytime.
<div class="uk-form-news-icon"><i class="fas fa-envelope-open-text"></i></div>
<div class="uk-form-title">Join the newsletter</div>
<form class="uk-form-inline">
<input type="email" placeholder="[email protected]" required>
<button type="submit">Subscribe</button>
</form>
<div class="uk-form-small">No spam. Unsubscribe anytime.</div>
<style>
.uk-form-news-icon {
width: 56px; height: 56px;
border-radius: 1rem;
background: #eef2f8;
color: #1e3a8a;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.uk-form-inline {
display: flex;
gap: 0.5rem;
padding: 0.35rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 999px;
}
.uk-form-inline input {
flex: 1;
border: 0;
background: transparent;
padding: 0.6rem 1rem;
font-size: 0.85rem;
outline: 0;
}
.uk-form-inline button {
padding: 0.6rem 1.25rem;
background: #1e3a8a;
color: #fff;
border: 0;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
}
.uk-form-small {
font-size: 0.72rem;
color: #94a3b8;
margin-top: 0.75rem;
}
</style>