Home Forms

Forms UI

Reusable form components with clean inputs, selects, radios, checkboxes and more.

14 Forms Pure HTML & CSS
Login Form Popular

Welcome back

Sign in to your account

Forgot password? 
<div class="form-card">
  <h3>Welcome back</h3>
  <input type="email" placeholder="Email">
  <input type="password" placeholder="Password">
  <div class="options">
    <label><input type="checkbox"> Remember me</label>
    <a href="#">Forgot password?</a>
  </div>
  <button>Login</button>
</div>
Signup Form Essential

Create Account

Join thousands of developers

<div class="form-card">
  <h3>Create Account</h3>
  <input type="text" placeholder="Full Name">
  <input type="email" placeholder="Email">
  <input type="password" placeholder="Password">
  <input type="password" placeholder="Confirm Password">
  <button>Register</button>
</div>
Contact Form Popular

Get in Touch

We'll get back to you soon

<div class="form-card">
  <h3>Get in Touch</h3>
  <input type="text" placeholder="Your Name">
  <input type="email" placeholder="Your Email">
  <textarea placeholder="Your Message"></textarea>
  <button>Send Message</button>
</div>
More Inputs Essential

Extra Inputs

Select, radio, checkbox & file

<select>
  <option>Select Country</option>
  <option>India</option>
  <option>USA</option>
</select>

<label><input type="radio" name="gender"> Male</label>
<label><input type="radio" name="gender"> Female</label>

<label><input type="checkbox"> HTML</label>
<label><input type="checkbox"> CSS</label>
<label><input type="checkbox"> JavaScript</label>

<input type="file">
<button>Submit</button>
Multi-Step Form Trending
1
2
3

Account Setup

Step 1 of 3: Personal Details

<div class="multi-step-card">
  <div class="step-progress">
    <div class="step-num active">1</div>
    <div class="step-line"></div>
    <div class="step-num">2</div>
    <div class="step-line"></div>
    <div class="step-num">3</div>
  </div>
  <h3>Account Setup</h3>
  <input type="text" placeholder="Username">
  <input type="text" placeholder="Professional Title">
  <button>Next Step</button>
</div>
Floating Label Essential

Welcome Back

Sign in with floating inputs

<div class="floating-group">
  <input type="email" class="floating-input" placeholder=" " required>
  <label class="floating-label">Email Address</label>
</div>

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
  top: -8px;
  font-size: 12px;
  color: #6c5ce7;
}
Glassmorphism Premium

Get in Touch

Frosted glass contact form

<div class="glass-form-card">
  <input type="text" class="glass-input" placeholder="Name">
  <input type="email" class="glass-input" placeholder="Email">
  <textarea class="glass-input" placeholder="Message"></textarea>
  <button class="glass-btn">Send Message</button>
</div>
Split Form Layout Popular

Join Us!

Access modern UI tools & community components.

Signup

<div class="split-form-card">
  <div class="split-left">
    <h4>Welcome!</h4>
  </div>
  <div class="split-right">
    <input type="email" placeholder="Email">
    <button>Signup</button>
  </div>
</div>
Validation Form Essential

Validation Check

Live visual feedback on input

<div class="form-field success-field">
  <input type="text" class="valid-input">
  <i class="fa-solid fa-circle-check valid-icon"></i>
  <span class="success-msg">Valid!</span>
</div>
Secure Checkout Premium
•••• •••• •••• ••••
CARDHOLDER NAME
MM/YY
<div class="credit-card-mock">
  <div class="card-chip"></div>
  <div class="card-number-display">•••• •••• •••• ••••</div>
  <div class="card-holder-display">CARDHOLDER NAME</div>
  <div class="card-expiry-display">MM/YY</div>
</div>
<form class="payment-form">
  <input type="text" placeholder="Cardholder Name" oninput="updateCardName(this.value)">
  <input type="text" placeholder="Card Number" oninput="updateCardNumber(this.value)">
  <button type="submit" class="payment-btn">Pay Securely</button>
</form>
Emoji Feedback Trending 
<div class="emoji-container">
  <button type="button" class="emoji-btn" onclick="selectEmoji(this, 'angry')">😠</button>
  <button type="button" class="emoji-btn" onclick="selectEmoji(this, 'neutral')">😐</button>
  <button type="button" class="emoji-btn" onclick="selectEmoji(this, 'happy')">😊</button>
  <button type="button" class="emoji-btn" onclick="selectEmoji(this, 'love')">😍</button>
  <button type="button" class="emoji-btn" onclick="selectEmoji(this, 'excited')">🤩</button>
</div>
<textarea placeholder="What can we improve?..."></textarea>
<button type="button" class="form-btn feedback-submit-btn">Submit Review</button>
OTP Verification Essential

Verify Account

We sent a 6-digit code to your email

Didn't receive code? Resend Code

<div class="otp-input-group">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
  <input type="text" class="otp-box" maxlength="1" oninput="handleOtpInput(this)">
</div>
<button type="button" class="form-btn otp-btn">Verify & Activate</button>
Newsletter Pill Popular 
<form class="inline-pill-form">
  <i class="fa-regular fa-envelope pill-icon"></i>
  <input type="email" class="pill-input" placeholder="Enter your email address" required>
  <button type="submit" class="pill-btn">Subscribe</button>
</form>
Notification Options New

Preferences

Manage active delivery channels

Email Digests

Weekly summaries and component releases

Push Alerts

Immediate live database additions

Security Logs

Critical account activity warning notes

<div class="pref-item">
  <div class="pref-text">
    <h4>Email Digests</h4>
    <p>Weekly summaries of new items</p>
  </div>
  <label class="pref-switch">
    <input type="checkbox" checked>
    <span class="pref-slider"></span>
  </label>
</div>
Password Strength Trending

Create Password

Set a secure password for your account

Enter a password 0%
  • At least 8 characters
  • One uppercase letter
  • One number
  • One special character
<div class="strength-meter-card">
  <input type="password" oninput="updateStrengthMeter(this.value)">
  <div class="strength-bar-wrap">
    <div class="strength-bar"></div>
  </div>
  <ul class="strength-checklist">
    <li>At least 8 characters</li>
    <li>One uppercase letter</li>
  </ul>
</div>
Survey Poll Cards Premium

Quick Poll

Which framework do you prefer?

<div class="poll-options-grid">
  <label class="poll-option-card">
    <input type="radio" name="pollChoice" value="react">
    <div class="poll-option-icon"><i class="fa-brands fa-react"></i></div>
    <span class="poll-option-label">React</span>
  </label>
</div>
<button class="form-btn">Submit Vote</button>
Booking Form Premium

Book Appointment

Schedule your session below

<div class="booking-reservation-card">
  <input type="text" placeholder="Full Name">
  <input type="date">
  <input type="time">
  <select>
    <option>Choose a service</option>
  </select>
  <textarea placeholder="Notes..."></textarea>
  <button class="form-btn">Confirm Booking</button>
</div>
Profile Settings New

Edit Profile

Update your public information

<div class="profile-settings-card">
  <div class="profile-avatar-circle">
    <i class="fa-solid fa-user"></i>
  </div>
  <input type="file" accept="image/*">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <textarea placeholder="Bio..."></textarea>
  <button class="form-btn">Save Changes</button>
</div>
Shipping Address Essential

Delivery Details

Where should we ship your order?

<div class="shipping-address-card">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <input type="text" placeholder="Street Address">
  <input type="text" placeholder="City">
  <input type="text" placeholder="ZIP">
  <select><option>Select Country</option></select>
  <input type="tel" placeholder="Phone">
  <button class="form-btn">Save Address</button>
</div>
Multi-file Upload Essential

Upload Files

Drag & drop files or click to select

<label class="dropzone"><input type="file" multiple hidden>Drop files here</label>
Searchable Select New

Choose Option

Type to filter options

<div class="searchable-select"><input><select><option>...</option></select></div>
Coupon Code Essential

Apply Coupon

Enter promo code to redeem

<div class="coupon-row"><input type="text"><button>Apply</button></div>
Rating Slider Trending

Rate Experience

Drag to set a rating

7 
<input type="range" min="0" max="10" oninput="...">
Human Check Essential

Are you human?

Simple anti-bot checkbox

<label><input type="checkbox"> I'm not a robot</label>