30 Modern CSS Forms for Websites – HTML & CSS Form Examples

Modern CSS forms are one of the most important UI elements on any professional website. A good form helps visitors contact a business, create an account, sign in, subscribe to a newsletter, request a quote, book an appointment, complete checkout, submit feedback, or filter products with less friction.

Forms may look simple at first, but they have a direct impact on user experience, trust, conversions, and accessibility. A form that is hard to read, crowded, confusing, or difficult to use on mobile can stop visitors from taking action. A clean and responsive CSS form makes the website feel more polished, easier to use, and more professional.

Modern form design is not only about adding rounded corners, shadows, gradients, or nice buttons. A strong form layout should also use clear labels, readable input fields, helpful spacing, visible focus states, mobile-friendly tap targets, and a logical structure that guides the user from the first field to the final submit button.

In this guide, we showcase 30 modern CSS forms for websites. These examples include contact forms, login forms, signup forms, newsletter forms, search forms, quote request forms, checkout forms, booking forms, support ticket forms, feedback forms, file upload forms, floating label forms, dark mode forms, glassmorphism forms, product filter forms, payment card forms, and complete responsive form layouts.

Each example includes a live preview and visible code blocks, so you can see exactly how the form is built. Most examples use HTML and CSS only, while interactive patterns such as multi-step forms or star ratings include small JavaScript snippets where needed.

These form examples are designed as practical UI patterns that you can copy, customize, and reuse in real projects, including business websites, WordPress themes, landing pages, SaaS websites, eCommerce stores, dashboards, portfolios, blogs, and client websites.

What are modern CSS forms?
Why form design matters for websites
Common types of website forms
CSS form design principles
30 modern CSS form examples
Form accessibility best practices
Common form design mistakes
FAQ
Conclusion

What Are Modern CSS Forms?

Modern CSS forms are website forms that use HTML for structure and CSS for layout, spacing, colors, typography, borders, buttons, focus states, responsive behavior, and visual design. They help users enter information clearly and submit it through a clean, easy-to-use interface.

A form can be as simple as a single newsletter email field or as advanced as a multi-step checkout flow with grouped inputs, radio buttons, checkboxes, dropdowns, file uploads, validation messages, and progress indicators.

The HTML creates the form fields, labels, buttons, and input types. CSS controls how everything looks and responds across different screen sizes. JavaScript is only needed when the form requires extra interaction, such as opening steps, updating selected ratings, previewing uploaded files, or showing dynamic validation feedback.

A well-designed CSS form should be easy to understand before the user starts typing. Labels should be clear, fields should be large enough to use on mobile, buttons should stand out, and the layout should guide the user naturally through the form.

Common CSS form elements include:

Text inputs for names, titles, and short answers
Email, phone, password, date, number, and search fields
Textarea fields for longer messages or descriptions
Select dropdowns, checkboxes, radio buttons, and toggles
Submit buttons, secondary buttons, and call-to-action buttons
Floating labels, helper text, error messages, and success states
File upload areas, payment card fields, and filter controls

The best modern forms are not only attractive. They are also readable, accessible, responsive, fast to complete, and easy to maintain.

Why Form Design Matters for Websites

Form design matters because forms are often the point where a visitor becomes a lead, customer, subscriber, member, or active user. A website can have strong content and beautiful visuals, but if the form is hard to complete, many users will stop before submitting it.

A contact form can decide whether a business receives a new inquiry. A checkout form can affect online sales. A signup form can influence account creation. A newsletter form can grow an email list. A quote request form can turn a visitor into a potential client.

Good CSS form design helps users understand what information is needed, where to enter it, and what action they are about to take. Clear spacing, consistent input styles, strong button hierarchy, and helpful labels make the form feel easier and more trustworthy.

Modern form design helps with:

User experience: forms are easier to read, complete, and submit.
Conversions: better forms can encourage more inquiries, signups, bookings, and purchases.
Mobile usability: fields and buttons remain easy to tap on smaller screens.
Accessibility: labels, focus states, and readable contrast help more people use the form.
Trust: a polished form makes the website feel more professional and reliable.
Clarity: users can quickly understand what each field is asking for.

A form should never feel like an obstacle. It should feel like a simple and natural step in the user journey.

Common Types of Website Forms

Different websites need different form patterns. A blog may only need a search form and newsletter signup form, while a business website may need contact forms, quote request forms, booking forms, and support forms. An eCommerce website may need checkout forms, product filters, login forms, account forms, and payment UI layouts.

Before designing a form, think about the user’s goal. A short newsletter form should be fast and minimal. A checkout form should feel secure and organized. A quote request form may need grouped fields and enough space for project details. A multi-step form can help when the form contains many questions.

Contact Forms

Contact forms are used on business websites, portfolios, agency websites, service pages, blogs, and landing pages. They usually collect a name, email address, subject, and message. A good contact form should be short, clear, and easy to submit.

Login and Signup Forms

Login and signup forms are common in SaaS websites, dashboards, membership websites, web apps, online stores, and account areas. These forms should be simple, secure-looking, and easy to understand, with clear password fields, helper links, and strong call-to-action buttons.

Newsletter Forms

Newsletter forms are often placed inside blog posts, footers, popups, sidebars, landing pages, and call-to-action sections. They should usually be short, because the goal is to collect an email address with as little friction as possible.

Checkout and Payment Forms

Checkout forms need to feel organized and trustworthy. They may include contact details, shipping information, billing fields, payment card UI, order notes, coupon fields, and an order summary. A clean checkout layout can make the buying process feel easier and more reliable.

Booking and Appointment Forms

Booking forms are useful for salons, clinics, consultants, agencies, hotels, restaurants, event websites, and service businesses. They often include date fields, time fields, service selection, contact details, and optional message fields.

Feedback, Survey, and Review Forms

Feedback forms help collect user opinions, ratings, reviews, and suggestions. These forms may include star ratings, radio buttons, textareas, satisfaction scales, or multiple-choice questions. They should feel lightweight and quick to complete.

Search and Filter Forms

Search and filter forms help users narrow down content, products, blog posts, listings, services, categories, or resources. These forms are especially useful for eCommerce websites, directories, real estate websites, job boards, documentation pages, and large blogs.

CSS Form Design Principles

Modern CSS form design should balance visual style with usability. A form can look impressive, but it still needs to be easy to read, easy to complete, and clear on every device. The best forms usually feel simple, even when the design is carefully crafted.

Use these principles when designing forms for real websites:

Use Clear Labels

Every important field should have a clear label. Placeholder text can help, but it should not replace labels in forms where clarity and accessibility matter. Labels help users understand what information is required, even after they start typing.

Keep Enough Spacing Between Fields

Forms need breathing room. Good spacing makes fields easier to scan and reduces mistakes. Inputs, labels, helper text, and buttons should not feel cramped, especially on mobile screens.

Make Inputs Easy to Tap on Mobile

Mobile users need larger tap targets and comfortable field heights. Small inputs, tiny checkboxes, and narrow buttons make forms harder to complete on phones. A responsive form should stay readable and touch-friendly at every screen size.

Use Visible Focus States

Focus states show which field is currently active. This is important for keyboard users, accessibility, and general usability. A modern form should make active fields obvious with a border, outline, glow, background change, or another clear visual cue.

Group Related Fields

If a form has many fields, group related information together. For example, checkout forms can separate contact details, shipping details, billing details, and payment information. Grouping makes long forms easier to understand.

Make the Submit Button Clear

The main button should clearly explain the action. Labels like “Send Message”, “Create Account”, “Request Quote”, “Book Appointment”, or “Complete Order” are usually better than a generic “Submit”.

Design Helpful Error and Success States

Users should understand what went wrong and how to fix it. Error messages should be clear, specific, and placed close to the relevant field. Success states should confirm that the form was submitted or that the next step is complete.

Do Not Add Unnecessary Fields

Every extra field adds friction. Ask only for information that is truly needed. Shorter forms are usually easier to complete, while longer forms should be split into sections or steps when it improves clarity.

With these basics in mind, let’s look at practical form examples that you can use as starting points for real website projects.

30 Modern CSS Form Examples

The following examples show practical CSS form patterns for modern websites. Each example includes a live preview and visible HTML/CSS code, so you can copy the structure, adjust the styling, and reuse the pattern in your own website, WordPress theme, landing page, dashboard, or client project.

Some forms are simple and use only HTML and CSS. More interactive examples include a small JavaScript snippet when it improves the user experience, such as multi-step navigation or clickable rating behavior.

1. Modern Contact Form

A modern contact form is one of the most useful form patterns for business websites, landing pages, portfolios, agencies, freelancers, and service pages. It gives visitors a simple way to send a message, request information, or start a conversation with the website owner.

This example uses a clean card layout, clear labels, large input fields, soft shadows, rounded corners, and a strong call-to-action button. The form is designed to feel professional without becoming complicated or visually heavy.

Perfect for business websites, portfolios, agencies, and service pages
Uses clear labels instead of relying only on placeholder text
Includes responsive spacing and mobile-friendly input sizes
Works with HTML and CSS only
Easy to customize with your own colors, fields, and button text

Contact Form

Let’s talk about your project

Send a short message and we will get back to you with the next steps, answers, or a custom quote.

HTML

<div class="form-contact-card">

  <div class="form-contact-header">
    <div class="form-contact-kicker">Contact Form</div>
    <h3 class="form-contact-title">Let’s talk about your project</h3>
    <p class="form-contact-text">Send a short message and we will get back to you with the next steps, answers, or a custom quote.</p>
  </div>

  <form class="form-contact-form" action="#" method="post">

    <div class="form-contact-grid">

      <div class="form-contact-field">
        <label class="form-contact-label" for="contact-name">Full name</label>
        <input class="form-contact-input" id="contact-name" type="text" name="name" placeholder="Jane Cooper">
      </div>

      <div class="form-contact-field">
        <label class="form-contact-label" for="contact-email">Email address</label>
        <input class="form-contact-input" id="contact-email" type="email" name="email" placeholder="jane@example.com">
      </div>

    </div>

    <div class="form-contact-field">
      <label class="form-contact-label" for="contact-subject">Subject</label>
      <input class="form-contact-input" id="contact-subject" type="text" name="subject" placeholder="Website design project">
    </div>

    <div class="form-contact-field">
      <label class="form-contact-label" for="contact-message">Message</label>
      <textarea class="form-contact-textarea" id="contact-message" name="message" placeholder="Tell us what you need help with..."></textarea>
    </div>

    <div class="form-contact-note">
      <span class="form-contact-note-icon">i</span>
      <span>Keep your message short and clear. Add your project goal, timeline, and any important details.</span>
    </div>

    <button class="form-contact-button" type="submit">Send Message</button>

  </form>

</div>

CSS

.form-contact-card{
width:min(100%,620px);
padding:30px;
border-radius:26px;
background:rgba(255,255,255,.92);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.16);
backdrop-filter:blur(16px);
}

.form-contact-header{
margin-bottom:24px;
text-align:left;
}

.form-contact-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:7px 11px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-contact-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-contact-text{
margin:0;
font-size:16px;
line-height:1.7;
color:#64748b;
max-width:520px;
}

.form-contact-form{
display:grid;
gap:18px;
}

.form-contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.form-contact-field{
display:grid;
gap:8px;
}

.form-contact-label{
font-size:14px;
font-weight:800;
color:#0f172a;
}

.form-contact-input,
.form-contact-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
box-sizing:border-box;
}

.form-contact-input{
min-height:52px;
padding:0 16px;
}

.form-contact-textarea{
min-height:132px;
resize:vertical;
padding:15px 16px;
}

.form-contact-input::placeholder,
.form-contact-textarea::placeholder{
color:#94a3b8;
}

.form-contact-input:focus,
.form-contact-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-contact-note{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px 15px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#64748b;
font-size:14px;
line-height:1.55;
}

.form-contact-note-icon{
flex:0 0 auto;
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
}

.form-contact-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-contact-button:hover,
.form-contact-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(37,99,235,.30);
filter:saturate(1.05);
outline:none;
}

@media (max-width: 720px){
.form-contact-card{
padding:22px;
border-radius:22px;
}

.form-contact-grid{
grid-template-columns:1fr;
}

.form-contact-title{
font-size:31px;
}

.form-contact-text{
font-size:15px;
}
}

This modern contact form is a strong starting point for service websites, agency websites, landing pages, portfolios, and WordPress contact pages. It keeps the structure simple, but the spacing, labels, focus states, and button styling make the form feel polished and easy to use.

You can customize this form by adding phone number fields, service dropdowns, project budget fields, privacy checkboxes, or a real backend integration for sending messages.

2. Responsive Contact Form with Image

A responsive contact form with an image is useful when you want the form section to feel more visual and branded. Instead of showing only fields, this layout combines a contact form with an image panel, feature list, support message, or brand-focused visual area.

This pattern works well on homepages, landing pages, contact pages, agency websites, SaaS websites, and service websites. On desktop, the image and form sit side by side. On mobile, the layout stacks into a single column so the form remains easy to read and complete.

Perfect for contact pages, landing pages, and service websites
Uses a two-column desktop layout with a visual image-style panel
Stacks cleanly on mobile screens
Includes a professional contact card and trust-focused side content
Works with HTML and CSS only

C Contactly

Fast Response

Start a better conversation today

Use this visual contact form layout when you want a professional contact section with more trust, context, and brand personality.

✓ Clear project details
✓ Mobile-friendly layout
✓ Clean form structure

Tell us what you need

Fill in the form and choose the type of project you want to discuss.

HTML

<div class="form-image-layout">

  <div class="form-image-panel">

    <div class="form-image-brand">
      <span class="form-image-brand-icon">C</span>
      <span>Contactly</span>
    </div>

    <div class="form-image-info">

      <div class="form-image-badge">Fast Response</div>

      <h3 class="form-image-heading">Start a better conversation today</h3>

      <p class="form-image-copy">Use this visual contact form layout when you want a professional contact section with more trust, context, and brand personality.</p>

      <ul class="form-image-points">
        <li><span class="form-image-check">✓</span> Clear project details</li>
        <li><span class="form-image-check">✓</span> Mobile-friendly layout</li>
        <li><span class="form-image-check">✓</span> Clean form structure</li>
      </ul>

    </div>

  </div>

  <div class="form-image-form-wrap">

    <div class="form-image-form-header">
      <div class="form-image-kicker">Contact Us</div>
      <h3 class="form-image-title">Tell us what you need</h3>
      <p class="form-image-text">Fill in the form and choose the type of project you want to discuss.</p>
    </div>

    <form class="form-image-form" action="#" method="post">

      <div class="form-image-grid">

        <div class="form-image-field">
          <label class="form-image-label" for="image-name">Name</label>
          <input class="form-image-input" id="image-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-image-field">
          <label class="form-image-label" for="image-email">Email</label>
          <input class="form-image-input" id="image-email" type="email" name="email" placeholder="alex@example.com">
        </div>

      </div>

      <div class="form-image-field">
        <label class="form-image-label" for="image-service">Project type</label>
        <select class="form-image-select" id="image-service" name="service">
          <option>Website design</option>
          <option>Landing page</option>
          <option>Online store</option>
          <option>Custom UI project</option>
        </select>
      </div>

      <div class="form-image-field">
        <label class="form-image-label" for="image-message">Project details</label>
        <textarea class="form-image-textarea" id="image-message" name="message" placeholder="Write a short summary of your project..."></textarea>
      </div>

      <label class="form-image-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this request.</span>
      </label>

      <button class="form-image-button" type="submit">Request a Free Quote</button>

    </form>

  </div>

</div>

CSS

.form-image-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(280px,.9fr) minmax(320px,1.1fr);
gap:0;
border-radius:28px;
overflow:hidden;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 28px 90px rgba(0,0,0,.42);
}

.form-image-panel{
position:relative;
min-height:620px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
background:
linear-gradient(180deg,rgba(14,165,233,.10),rgba(168,85,247,.12)),
linear-gradient(135deg,#0f172a,#111827);
}

.form-image-panel::before{
content:"";
position:absolute;
inset:22px;
border-radius:24px;
background:
linear-gradient(135deg,rgba(34,211,238,.22),rgba(168,85,247,.22)),
url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80");
background-size:cover;
background-position:center;
opacity:.72;
filter:saturate(1.05);
}

.form-image-panel::after{
content:"";
position:absolute;
inset:22px;
border-radius:24px;
background:linear-gradient(180deg,rgba(2,6,23,.08),rgba(2,6,23,.72));
}

.form-image-brand,
.form-image-info{
position:relative;
z-index:2;
}

.form-image-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:#ffffff;
font-size:18px;
font-weight:900;
letter-spacing:-.03em;
}

.form-image-brand-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:14px;
background:linear-gradient(135deg,#22d3ee,#a855f7);
box-shadow:0 14px 34px rgba(34,211,238,.26);
}

.form-image-info{
max-width:360px;
}

.form-image-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
backdrop-filter:blur(12px);
margin-bottom:16px;
}

.form-image-heading{
margin:0 0 14px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-image-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#dbeafe;
}

.form-image-points{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-image-points li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:750;
color:#ffffff;
}

.form-image-check{
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.18);
border:1px solid rgba(34,211,238,.32);
color:#67e8f9;
font-size:13px;
font-weight:900;
}

.form-image-form-wrap{
padding:34px;
background:rgba(255,255,255,.96);
}

.form-image-form-header{
margin-bottom:24px;
}

.form-image-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:7px 11px;
border-radius:999px;
background:#f1f5f9;
color:#334155;
font-size:13px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-image-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-image-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-image-form{
display:grid;
gap:16px;
}

.form-image-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-image-field{
display:grid;
gap:8px;
}

.form-image-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-image-input,
.form-image-select,
.form-image-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-image-input,
.form-image-select{
min-height:50px;
padding:0 15px;
}

.form-image-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-image-textarea{
min-height:120px;
resize:vertical;
padding:14px 15px;
}

.form-image-input::placeholder,
.form-image-textarea::placeholder{
color:#94a3b8;
}

.form-image-input:focus,
.form-image-select:focus,
.form-image-textarea:focus{
border-color:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.12);
background:#ffffff;
}

.form-image-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-image-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#7c3aed;
}

.form-image-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:15px;
background:linear-gradient(135deg,#7c3aed,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(124,58,237,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-image-button:hover,
.form-image-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(124,58,237,.30);
filter:saturate(1.05);
outline:none;
}

@media (max-width: 900px){
.form-image-layout{
grid-template-columns:1fr;
}

.form-image-panel{
min-height:360px;
}

.form-image-form-wrap{
padding:26px;
}

.form-image-grid{
grid-template-columns:1fr;
}
}

@media (max-width: 520px){
.form-image-panel{
min-height:330px;
padding:24px;
}

.form-image-panel::before,
.form-image-panel::after{
inset:14px;
border-radius:20px;
}

.form-image-form-wrap{
padding:22px;
}

.form-image-title{
font-size:30px;
}

.form-image-heading{
font-size:30px;
}
}

This responsive contact form with image is a good choice when a plain contact form feels too simple. The image panel adds visual weight, while the form remains clear, structured, and easy to complete.

Use this layout for contact pages, quote request sections, landing pages, agency websites, SaaS websites, and service pages where the form should feel like a complete section instead of a small standalone card.

3. Minimal Contact Form

A minimal contact form is a clean and lightweight form pattern for websites that do not need heavy visuals, large backgrounds, or complex decorative elements. It focuses on clarity, readable spacing, simple fields, and a direct submit action.

This type of form works especially well for blogs, personal websites, portfolios, documentation websites, small business pages, and clean landing pages. The design is intentionally simple so the form feels easy to complete and does not distract from the main content.

Perfect for blogs, portfolios, personal websites, and simple contact pages
Uses a clean single-column layout
Works without JavaScript
Includes clear labels and subtle focus states
Easy to place inside content sections, sidebars, or contact pages

Minimal Contact

Send a simple message

A clean contact form for websites that need a lightweight and distraction-free design.

HTML

<div class="form-minimal-card">

  <div class="form-minimal-header">
    <p class="form-minimal-kicker">Minimal Contact</p>
    <h3 class="form-minimal-title">Send a simple message</h3>
    <p class="form-minimal-text">A clean contact form for websites that need a lightweight and distraction-free design.</p>
  </div>

  <form class="form-minimal-form" action="#" method="post">

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-name">Name</label>
      <input class="form-minimal-input" id="minimal-name" type="text" name="name" placeholder="Your name">
    </div>

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-email">Email</label>
      <input class="form-minimal-input" id="minimal-email" type="email" name="email" placeholder="your@email.com">
    </div>

    <div class="form-minimal-field">
      <label class="form-minimal-label" for="minimal-message">Message</label>
      <textarea class="form-minimal-textarea" id="minimal-message" name="message" placeholder="Write your message..."></textarea>
    </div>

    <div class="form-minimal-row">
      <p class="form-minimal-note">We usually reply within one business day.</p>
      <button class="form-minimal-button" type="submit">Send Message</button>
    </div>

  </form>

</div>

CSS

.form-minimal-card{
width:min(100%,560px);
padding:34px;
border-radius:24px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 20px 55px rgba(15,23,42,.08);
}

.form-minimal-header{
margin-bottom:26px;
}

.form-minimal-kicker{
margin:0 0 10px;
font-size:13px;
font-weight:850;
letter-spacing:.08em;
text-transform:uppercase;
color:#64748b;
}

.form-minimal-title{
margin:0 0 12px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-minimal-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#64748b;
}

.form-minimal-form{
display:grid;
gap:18px;
}

.form-minimal-field{
display:grid;
gap:8px;
}

.form-minimal-label{
font-size:14px;
font-weight:800;
color:#0f172a;
}

.form-minimal-input,
.form-minimal-textarea{
width:100%;
border:0;
border-bottom:2px solid #cbd5e1;
border-radius:0;
background:transparent;
color:#0f172a;
font-size:16px;
line-height:1.45;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,background .22s ease;
}

.form-minimal-input{
min-height:48px;
padding:8px 0;
}

.form-minimal-textarea{
min-height:128px;
resize:vertical;
padding:10px 0;
}

.form-minimal-input::placeholder,
.form-minimal-textarea::placeholder{
color:#94a3b8;
}

.form-minimal-input:focus,
.form-minimal-textarea:focus{
border-color:#0f172a;
}

.form-minimal-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:4px;
}

.form-minimal-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-minimal-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border:0;
border-radius:999px;
background:#0f172a;
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-minimal-button:hover,
.form-minimal-button:focus{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.18);
background:#111827;
outline:none;
}

@media (max-width: 640px){
.form-minimal-card{
padding:24px;
border-radius:22px;
}

.form-minimal-row{
align-items:stretch;
flex-direction:column;
}

.form-minimal-button{
width:100%;
}

.form-minimal-title{
font-size:31px;
}
}

This minimal contact form is useful when you want a clean form that blends into the website instead of becoming a large visual feature. It is simple, fast, readable, and easy to reuse in many content layouts.

Use this form pattern for blogs, personal websites, portfolio contact pages, small service websites, documentation pages, and any design where a lightweight contact form is enough.

4. Login Form UI

A modern login form UI helps users sign in quickly while making the account area feel secure, professional, and easy to use. Login forms are common in SaaS products, dashboards, membership websites, online stores, web apps, learning platforms, and customer portals.

This example uses a centered authentication card with a strong heading, email and password fields, remember-me option, forgot-password link, and a clear sign-in button. The layout is compact, responsive, and designed to work well on both desktop and mobile screens.

Perfect for SaaS websites, dashboards, memberships, and account pages
Includes email and password fields with clear labels
Uses a remember-me checkbox and forgot-password link
Includes a secondary signup prompt
Works with HTML and CSS only

HTML

<div class="form-login-shell">

  <div class="form-login-logo">
    <span class="form-login-logo-icon">L</span>
    <span>LoginPro</span>
  </div>

  <div class="form-login-card">

    <div class="form-login-header">
      <h3 class="form-login-title">Welcome back</h3>
      <p class="form-login-text">Sign in to continue to your dashboard and manage your account.</p>
    </div>

    <form class="form-login-form" action="#" method="post">

      <div class="form-login-field">
        <label class="form-login-label" for="login-email">Email address</label>
        <input class="form-login-input" id="login-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-login-field">
        <label class="form-login-label" for="login-password">Password</label>
        <input class="form-login-input" id="login-password" type="password" name="password" placeholder="Enter your password">
      </div>

      <div class="form-login-options">
        <label class="form-login-check">
          <input type="checkbox" name="remember">
          <span>Remember me</span>
        </label>
        <a class="form-login-link" href="#">Forgot password?</a>
      </div>

      <button class="form-login-button" type="submit">Sign In</button>

      <div class="form-login-divider">or</div>

      <a class="form-login-secondary" href="#">Continue with Google</a>

    </form>

    <p class="form-login-signup">Don’t have an account? <a href="#">Create one</a></p>

  </div>

</div>

CSS

.form-login-shell{
width:min(100%,440px);
}

.form-login-logo{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-bottom:20px;
color:#ffffff;
font-size:19px;
font-weight:900;
letter-spacing:-.03em;
}

.form-login-logo-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#22d3ee);
box-shadow:0 16px 38px rgba(99,102,241,.28);
color:#ffffff;
font-size:18px;
font-weight:900;
}

.form-login-card{
padding:30px;
border-radius:28px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.44);
backdrop-filter:blur(18px);
}

.form-login-header{
text-align:center;
margin-bottom:24px;
}

.form-login-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,40px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-login-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#cbd5e1;
}

.form-login-form{
display:grid;
gap:16px;
}

.form-login-field{
display:grid;
gap:8px;
}

.form-login-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-login-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(15,23,42,.74);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-login-input::placeholder{
color:#94a3b8;
}

.form-login-input:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-login-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin-top:2px;
}

.form-login-check{
display:inline-flex;
align-items:center;
gap:9px;
font-size:14px;
line-height:1.4;
color:#cbd5e1;
cursor:pointer;
}

.form-login-check input{
width:17px;
height:17px;
margin:0;
accent-color:#22d3ee;
}

.form-login-link{
font-size:14px;
font-weight:800;
color:#67e8f9;
text-decoration:none;
}

.form-login-link:hover,
.form-login-link:focus{
color:#ffffff;
text-decoration:underline;
outline:none;
}

.form-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#6366f1,#22d3ee);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-login-button:hover,
.form-login-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-login-divider{
display:flex;
align-items:center;
gap:12px;
margin:4px 0;
color:#94a3b8;
font-size:13px;
font-weight:800;
}

.form-login-divider::before,
.form-login-divider::after{
content:"";
height:1px;
flex:1;
background:rgba(255,255,255,.12);
}

.form-login-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.06);
color:#ffffff;
font-size:15px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.form-login-secondary:hover,
.form-login-secondary:focus{
background:rgba(255,255,255,.10);
border-color:rgba(255,255,255,.22);
transform:translateY(-1px);
outline:none;
}

.form-login-signup{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.form-login-signup a{
font-weight:900;
color:#67e8f9;
text-decoration:none;
}

.form-login-signup a:hover,
.form-login-signup a:focus{
color:#ffffff;
text-decoration:underline;
outline:none;
}

@media (max-width: 640px){
.form-login-card{
padding:24px;
border-radius:24px;
}

.form-login-options{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.form-login-title{
font-size:31px;
}
}

This login form UI is a practical pattern for account-based websites and web apps. It keeps the login flow compact while still including the small details users expect, such as a remember-me option, forgot-password link, and secondary signup prompt.

Use this form for SaaS login pages, dashboard sign-in screens, WordPress membership areas, customer portals, course platforms, eCommerce account pages, and private client areas.

5. Signup / Registration Form

A signup or registration form helps new users create an account, join a platform, start a free trial, register for a service, or become a member. It is one of the most important forms for SaaS websites, membership websites, online courses, dashboards, communities, and eCommerce stores.

This example uses a clean registration card with grouped fields, a password input, a terms checkbox, and a strong account creation button. The layout is modern, responsive, and designed to feel trustworthy without overwhelming the user.

Perfect for SaaS websites, memberships, courses, apps, and account areas
Includes name, email, password, and terms agreement fields
Uses clear labels and mobile-friendly input sizes
Includes a secondary login prompt for existing users
Works with HTML and CSS only

HTML

<div class="form-signup-card">

  <div class="form-signup-top">
    <div class="form-signup-logo">
      <span class="form-signup-logo-icon">S</span>
      <span>SignupFlow</span>
    </div>
    <span class="form-signup-pill">Free Trial</span>
  </div>

  <div class="form-signup-header">
    <h3 class="form-signup-title">Create your account</h3>
    <p class="form-signup-text">Start your free account and access your dashboard in just a few seconds.</p>
  </div>

  <form class="form-signup-form" action="#" method="post">

    <div class="form-signup-grid">

      <div class="form-signup-field">
        <label class="form-signup-label" for="signup-first">First name</label>
        <input class="form-signup-input" id="signup-first" type="text" name="first_name" placeholder="Alex">
      </div>

      <div class="form-signup-field">
        <label class="form-signup-label" for="signup-last">Last name</label>
        <input class="form-signup-input" id="signup-last" type="text" name="last_name" placeholder="Morgan">
      </div>

    </div>

    <div class="form-signup-field">
      <label class="form-signup-label" for="signup-email">Email address</label>
      <input class="form-signup-input" id="signup-email" type="email" name="email" placeholder="alex@example.com">
    </div>

    <div class="form-signup-field">
      <label class="form-signup-label" for="signup-password">Password</label>
      <input class="form-signup-input" id="signup-password" type="password" name="password" placeholder="Create a strong password">
      <p class="form-signup-help">Use at least 8 characters with letters and numbers.</p>
    </div>

    <label class="form-signup-terms">
      <input type="checkbox" name="terms">
      <span>I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</span>
    </label>

    <button class="form-signup-button" type="submit">Create Account</button>

  </form>

  <p class="form-signup-login">Already have an account? <a href="#">Sign in</a></p>

</div>

CSS

.form-signup-card{
width:min(100%,520px);
padding:30px;
border-radius:28px;
background:rgba(255,255,255,.94);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
backdrop-filter:blur(16px);
}

.form-signup-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-bottom:24px;
}

.form-signup-logo{
display:inline-flex;
align-items:center;
gap:10px;
font-size:18px;
line-height:1;
font-weight:900;
letter-spacing:-.03em;
color:#0f172a;
}

.form-signup-logo-icon{
width:40px;
height:40px;
display:grid;
place-items:center;
border-radius:15px;
background:linear-gradient(135deg,#22c55e,#2563eb);
box-shadow:0 14px 34px rgba(34,197,94,.22);
color:#ffffff;
font-size:17px;
font-weight:900;
}

.form-signup-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:32px;
padding:0 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
text-transform:uppercase;
white-space:nowrap;
}

.form-signup-header{
margin-bottom:24px;
}

.form-signup-title{
margin:0 0 10px;
font-size:clamp(28px,4vw,42px);
line-height:1.08;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-signup-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-signup-form{
display:grid;
gap:16px;
}

.form-signup-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-signup-field{
display:grid;
gap:8px;
}

.form-signup-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-signup-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-signup-input::placeholder{
color:#94a3b8;
}

.form-signup-input:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13);
background:#ffffff;
}

.form-signup-help{
margin:-2px 0 0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-signup-terms{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-signup-terms input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22c55e;
}

.form-signup-terms a{
color:#2563eb;
font-weight:850;
text-decoration:none;
}

.form-signup-terms a:hover,
.form-signup-terms a:focus{
text-decoration:underline;
outline:none;
}

.form-signup-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#2563eb);
color:#ffffff;
font-size:15px;
font-weight:900;
cursor:pointer;
box-shadow:0 16px 36px rgba(34,197,94,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-signup-button:hover,
.form-signup-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(37,99,235,.25);
filter:saturate(1.06);
outline:none;
}

.form-signup-login{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-signup-login a{
font-weight:900;
color:#2563eb;
text-decoration:none;
}

.form-signup-login a:hover,
.form-signup-login a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 640px){
.form-signup-card{
padding:24px;
border-radius:24px;
}

.form-signup-top{
align-items:flex-start;
flex-direction:column;
}

.form-signup-grid{
grid-template-columns:1fr;
}

.form-signup-title{
font-size:31px;
}
}

This signup form is useful when you need a clean account creation layout that feels professional and trustworthy. The grouped name fields keep the form compact on desktop, while the mobile layout stacks everything into a single column.

Use this form for SaaS websites, membership pages, online courses, customer portals, web apps, dashboards, and eCommerce account registration pages.

6. Newsletter Signup Form

A newsletter signup form is a simple but powerful form pattern for growing an email list, promoting updates, sharing new articles, sending product news, or building a direct audience outside social media. It usually needs fewer fields than a contact form because the goal is quick subscription.

This example uses a modern newsletter card with a clear headline, benefit-focused copy, an email input, a strong subscribe button, and a small privacy note. The layout is designed to work well inside blog posts, homepages, landing pages, footers, and content sections.

Perfect for blogs, landing pages, SaaS websites, and content websites
Uses a compact email signup layout
Includes a clear benefit-driven headline
Works well inside article content or footer sections
Uses HTML and CSS only

HTML

<div class="form-newsletter-card">

  <div class="form-newsletter-inner">

    <div class="form-newsletter-content">

      <div class="form-newsletter-kicker">Newsletter</div>

      <h3 class="form-newsletter-title">Get better <span>web design ideas</span></h3>

      <p class="form-newsletter-text">Join our newsletter and receive practical UI ideas, CSS examples, design tips, and website inspiration directly in your inbox.</p>

      <div class="form-newsletter-stats">
        <div class="form-newsletter-stat">
          <strong>12k+</strong>
          <span>Readers</span>
        </div>
        <div class="form-newsletter-stat">
          <strong>Weekly</strong>
          <span>Fresh tips</span>
        </div>
      </div>

    </div>

    <form class="form-newsletter-form" action="#" method="post">

      <label class="form-newsletter-label" for="newsletter-email">Email address</label>

      <div class="form-newsletter-row">
        <input class="form-newsletter-input" id="newsletter-email" type="email" name="email" placeholder="you@example.com">
        <button class="form-newsletter-button" type="submit">Subscribe</button>
      </div>

      <p class="form-newsletter-note">No spam. Unsubscribe anytime. We only send useful website design content.</p>

    </form>

  </div>

</div>

CSS

.form-newsletter-card{
width:min(100%,760px);
position:relative;
overflow:hidden;
padding:38px;
border-radius:30px;
background:
linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-newsletter-card::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-90px;
top:-100px;
border-radius:999px;
background:radial-gradient(circle,rgba(245,158,11,.34),transparent 68%);
pointer-events:none;
}

.form-newsletter-card::after{
content:"";
position:absolute;
width:300px;
height:300px;
left:-130px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(236,72,153,.24),transparent 70%);
pointer-events:none;
}

.form-newsletter-inner{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);
gap:28px;
align-items:center;
}

.form-newsletter-content{
max-width:460px;
}

.form-newsletter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.14);
border:1px solid rgba(245,158,11,.26);
color:#fbbf24;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-newsletter-title{
margin:0 0 14px;
font-size:clamp(30px,5vw,48px);
line-height:1.04;
font-weight:900;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-newsletter-title span{
background:linear-gradient(90deg,#fbbf24,#f472b6,#60a5fa) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-newsletter-text{
margin:0;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.form-newsletter-form{
display:grid;
gap:12px;
padding:18px;
border-radius:24px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 20px 60px rgba(0,0,0,.28);
}

.form-newsletter-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-newsletter-row{
display:flex;
gap:10px;
}

.form-newsletter-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.08);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-newsletter-input::placeholder{
color:#94a3b8;
}

.form-newsletter-input:focus{
border-color:#fbbf24;
box-shadow:0 0 0 4px rgba(251,191,36,.14);
background:rgba(255,255,255,.11);
}

.form-newsletter-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#f59e0b,#ec4899);
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
box-shadow:0 16px 36px rgba(236,72,153,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-newsletter-button:hover,
.form-newsletter-button:focus{
transform:translateY(-2px);
box-shadow:0 22px 46px rgba(236,72,153,.30);
filter:saturate(1.08);
outline:none;
}

.form-newsletter-note{
margin:2px 0 0;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

.form-newsletter-stats{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-top:18px;
}

.form-newsletter-stat{
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-newsletter-stat strong{
display:block;
font-size:20px;
line-height:1;
font-weight:900;
color:#ffffff;
margin-bottom:6px;
}

.form-newsletter-stat span{
display:block;
font-size:13px;
line-height:1.45;
color:#cbd5e1;
}

@media (max-width: 820px){
.form-newsletter-card{
padding:26px;
border-radius:26px;
}

.form-newsletter-inner{
grid-template-columns:1fr;
}

.form-newsletter-row{
flex-direction:column;
}

.form-newsletter-button{
width:100%;
}

.form-newsletter-title{
font-size:34px;
}
}

@media (max-width: 520px){
.form-newsletter-card{
padding:22px;
}

.form-newsletter-stats{
grid-template-columns:1fr;
}

.form-newsletter-title{
font-size:31px;
}
}

This newsletter signup form works well when you want a form that feels more like a complete call-to-action section. The copy explains the benefit, the input stays simple, and the button makes the subscription action clear.

Use this form inside blog posts, landing pages, SaaS pages, website footers, lead generation sections, and content marketing pages where email signup is an important goal.

7. Inline Newsletter Form

An inline newsletter form is a compact email signup pattern that fits naturally inside blog posts, article sections, resource pages, footers, sidebars, and landing page content. Unlike a large newsletter block, this version is designed to stay small, focused, and easy to place between paragraphs or after a useful section.

This example uses a horizontal layout on desktop and stacks cleanly on mobile. It includes a short headline, supporting text, an email input, and a clear subscribe button. The design is simple enough to reuse in many parts of a website without taking too much space.

Perfect for blog posts, article sections, sidebars, and footers
Uses a compact inline layout on desktop
Stacks into a clean single-column form on mobile
Includes a clear email label and privacy note
Works with HTML and CSS only

HTML

<div class="form-inline-newsletter-box">

  <div class="form-inline-newsletter-content">

    <div class="form-inline-newsletter-kicker">Design Tips</div>

    <h3 class="form-inline-newsletter-title">Get weekly CSS ideas</h3>

    <p class="form-inline-newsletter-text">Join the newsletter for practical UI patterns, CSS examples, and modern website design inspiration.</p>

  </div>

  <form class="form-inline-newsletter-form" action="#" method="post">

    <label class="form-inline-newsletter-label" for="inline-newsletter-email">Email address</label>

    <div class="form-inline-newsletter-row">
      <input class="form-inline-newsletter-input" id="inline-newsletter-email" type="email" name="email" placeholder="you@example.com">
      <button class="form-inline-newsletter-button" type="submit">Subscribe</button>
    </div>

    <p class="form-inline-newsletter-note">No spam. You can unsubscribe anytime. Read our <a href="#">privacy policy</a>.</p>

  </form>

</div>

CSS

.form-inline-newsletter-box{
width:min(100%,880px);
display:grid;
grid-template-columns:minmax(0,.95fr) minmax(320px,1.05fr);
gap:26px;
align-items:center;
padding:26px;
border-radius:26px;
background:#ffffff;
border:1px solid #e2e8f0;
box-shadow:0 20px 60px rgba(15,23,42,.10);
}

.form-inline-newsletter-content{
min-width:0;
}

.form-inline-newsletter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:10px;
padding:7px 11px;
border-radius:999px;
background:#ecfeff;
color:#0891b2;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-inline-newsletter-title{
margin:0 0 9px;
font-size:clamp(24px,3.5vw,34px);
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-inline-newsletter-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-inline-newsletter-form{
display:grid;
gap:10px;
min-width:0;
}

.form-inline-newsletter-label{
font-size:14px;
font-weight:850;
color:#0f172a;
}

.form-inline-newsletter-row{
display:flex;
gap:10px;
align-items:center;
min-width:0;
}

.form-inline-newsletter-input{
width:100%;
min-width:0;
min-height:52px;
padding:0 16px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#f8fafc;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-inline-newsletter-input::placeholder{
color:#94a3b8;
}

.form-inline-newsletter-input:focus{
border-color:#0891b2;
box-shadow:0 0 0 4px rgba(8,145,178,.12);
background:#ffffff;
}

.form-inline-newsletter-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
background:#0f172a;
color:#ffffff;
font-size:14px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-inline-newsletter-button:hover,
.form-inline-newsletter-button:focus{
transform:translateY(-2px);
box-shadow:0 16px 34px rgba(15,23,42,.18);
background:#111827;
outline:none;
}

.form-inline-newsletter-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-inline-newsletter-note a{
color:#0891b2;
font-weight:850;
text-decoration:none;
}

.form-inline-newsletter-note a:hover,
.form-inline-newsletter-note a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 820px){
.form-inline-newsletter-box{
grid-template-columns:1fr;
padding:22px;
border-radius:24px;
}

.form-inline-newsletter-row{
flex-direction:column;
align-items:stretch;
}

.form-inline-newsletter-button{
width:100%;
}

.form-inline-newsletter-title{
font-size:30px;
}
}

@media (max-width: 520px){
.form-inline-newsletter-box{
padding:20px;
}

.form-inline-newsletter-title{
font-size:28px;
}
}

This inline newsletter form is a strong choice when you want a compact signup area that does not interrupt the reading experience. It can be placed between article sections, after a tutorial, inside a blog sidebar, or near the end of a landing page.

Use this pattern for blogs, resource libraries, content websites, SaaS marketing pages, personal websites, and WordPress posts where email list growth is important but the form should stay lightweight.

8. Search Form Design

A modern search form helps users quickly find content, products, services, documentation, articles, listings, or resources. Search forms are especially useful for blogs, eCommerce websites, directories, help centers, knowledge bases, marketplaces, dashboards, and large content websites.

This example uses a large search input, a category selector, a clear search button, and quick suggestion chips. The form is designed as a reusable search section that can be placed near the top of a page, inside a hero section, or above a listing grid.

Perfect for blogs, eCommerce stores, directories, and documentation websites
Includes a search input, category selector, and search button
Uses suggestion chips for common searches
Stacks cleanly on mobile screens
Works with HTML and CSS only

Search Form

Find the right website resource

Use this modern search form to help visitors find articles, products, documentation, services, or resources faster.

Contact forms Login UI Checkout forms Newsletter forms

CSS Form Examples Reusable layouts for contact, login, signup, and checkout forms.

Modern UI Patterns Clean components for landing pages, dashboards, and websites.

Responsive Design Mobile-friendly form layouts that adapt to smaller screens.

HTML

<div class="form-search-panel">

  <div class="form-search-kicker">Search Form</div>

  <h3 class="form-search-title">Find the right <span>website resource</span></h3>

  <p class="form-search-text">Use this modern search form to help visitors find articles, products, documentation, services, or resources faster.</p>

  <form class="form-search-box" action="#" method="get">

    <div class="form-search-field">
      <span class="form-search-icon">⌕</span>
      <input class="form-search-input" type="search" name="query" placeholder="Search CSS forms, layouts, components...">
    </div>

    <select class="form-search-select" name="category" aria-label="Select category">
      <option value="">All categories</option>
      <option value="css">CSS</option>
      <option value="ui">UI Design</option>
      <option value="wordpress">WordPress</option>
      <option value="templates">Templates</option>
    </select>

    <button class="form-search-button" type="submit">Search</button>

  </form>

  <div class="form-search-suggestions" aria-label="Popular searches">
    <a class="form-search-chip" href="#">Contact forms</a>
    <a class="form-search-chip" href="#">Login UI</a>
    <a class="form-search-chip" href="#">Checkout forms</a>
    <a class="form-search-chip" href="#">Newsletter forms</a>
  </div>

  <div class="form-search-results">

    <div class="form-search-result">
      <strong>CSS Form Examples</strong>
      <span>Reusable layouts for contact, login, signup, and checkout forms.</span>
    </div>

    <div class="form-search-result">
      <strong>Modern UI Patterns</strong>
      <span>Clean components for landing pages, dashboards, and websites.</span>
    </div>

    <div class="form-search-result">
      <strong>Responsive Design</strong>
      <span>Mobile-friendly form layouts that adapt to smaller screens.</span>
    </div>

  </div>

</div>

CSS

.form-search-panel{
width:min(100%,900px);
text-align:center;
}

.form-search-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(34,211,238,.24);
color:#67e8f9;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-search-title{
margin:0 auto 14px;
max-width:720px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:900;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-search-title span{
background:linear-gradient(90deg,#22d3ee,#818cf8,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-search-text{
margin:0 auto 26px;
max-width:650px;
font-size:16px;
line-height:1.75;
color:#cbd5e1;
}

.form-search-box{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) minmax(170px,.36fr) auto;
gap:10px;
align-items:center;
padding:12px;
border-radius:24px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 28px 90px rgba(0,0,0,.38);
backdrop-filter:blur(18px);
}

.form-search-field{
position:relative;
min-width:0;
}

.form-search-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:900;
pointer-events:none;
}

.form-search-input{
width:100%;
min-width:0;
min-height:56px;
padding:0 16px 0 48px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(15,23,42,.72);
color:#ffffff;
font-size:16px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-search-input::placeholder{
color:#94a3b8;
}

.form-search-input:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-search-select{
width:100%;
min-height:56px;
padding:0 40px 0 15px;
border:1px solid rgba(255,255,255,.12);
border-radius:18px;
background:rgba(15,23,42,.72);
color:#ffffff;
font-size:15px;
font-weight:750;
line-height:1.4;
outline:none;
box-sizing:border-box;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 24px,calc(100% - 13px) 24px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}

.form-search-select:focus{
border-color:#818cf8;
box-shadow:0 0 0 4px rgba(129,140,248,.14);
background-color:rgba(15,23,42,.94);
}

.form-search-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 22px;
border:0;
border-radius:18px;
background:linear-gradient(135deg,#22d3ee,#818cf8);
color:#020617;
font-size:15px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-search-button:hover,
.form-search-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.30);
filter:saturate(1.08);
outline:none;
}

.form-search-suggestions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-top:18px;
}

.form-search-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 13px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:13px;
font-weight:800;
text-decoration:none;
transition:background .22s ease,color .22s ease,transform .22s ease,border-color .22s ease;
}

.form-search-chip:hover,
.form-search-chip:focus{
background:rgba(255,255,255,.13);
border-color:rgba(34,211,238,.28);
color:#ffffff;
transform:translateY(-1px);
outline:none;
}

.form-search-results{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-top:28px;
}

.form-search-result{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
text-align:left;
}

.form-search-result strong{
display:block;
margin-bottom:7px;
font-size:15px;
line-height:1.3;
color:#ffffff;
}

.form-search-result span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

@media (max-width: 860px){
.form-search-box{
grid-template-columns:1fr;
}

.form-search-button{
width:100%;
}

.form-search-results{
grid-template-columns:1fr;
}

.form-search-title{
font-size:36px;
}
}

@media (max-width: 520px){
.form-search-box{
padding:10px;
border-radius:22px;
}

.form-search-title{
font-size:31px;
}

.form-search-text{
font-size:15px;
}
}

This search form design works well when users need to find something quickly. The category selector helps narrow the search, while suggestion chips give users a faster path to popular topics or common searches.

Use this pattern for blogs, documentation websites, product catalogs, help centers, directories, marketplaces, resource libraries, and WordPress websites with large content collections.

9. Hero Section Lead Form

A hero section lead form is a high-conversion form pattern used at the top of landing pages, SaaS websites, service websites, agency pages, and campaign pages. It combines a strong headline with a short form so visitors can take action immediately without scrolling.

This example uses a modern split hero layout with content on the left and a lead capture form on the right. The form includes essential fields, a service selector, a clear CTA button, and a small trust note. It is designed to collect qualified leads without making the first step feel too long.

Perfect for landing pages, SaaS websites, agencies, and service businesses
Combines hero content with a lead capture form
Includes name, email, service type, and message fields
Uses responsive two-column layout on desktop
Works with HTML and CSS only

Lead Generation Form

Turn visitors into qualified leads

Use this hero section lead form to capture project requests, demo bookings, service inquiries, or consultation requests directly from the top of a landing page.

Free consultation Fast response No obligation

Short Form Only asks for the most important first-step information.

Hero Placement Visitors can take action immediately after reading the headline.

Conversion Focused The form supports service leads, demos, and quote requests.

Get a free estimate

Tell us what you need and we will send the next steps.

HTML

<div class="form-hero-lead-layout">

  <div class="form-hero-lead-content">

    <div class="form-hero-lead-kicker">Lead Generation Form</div>

    <h3 class="form-hero-lead-title">Turn visitors into <span>qualified leads</span></h3>

    <p class="form-hero-lead-text">Use this hero section lead form to capture project requests, demo bookings, service inquiries, or consultation requests directly from the top of a landing page.</p>

    <div class="form-hero-lead-actions">
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> Free consultation</span>
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> Fast response</span>
      <span class="form-hero-lead-pill"><span class="form-hero-lead-dot"></span> No obligation</span>
    </div>

    <div class="form-hero-lead-features">

      <div class="form-hero-lead-feature">
        <strong>Short Form</strong>
        <span>Only asks for the most important first-step information.</span>
      </div>

      <div class="form-hero-lead-feature">
        <strong>Hero Placement</strong>
        <span>Visitors can take action immediately after reading the headline.</span>
      </div>

      <div class="form-hero-lead-feature">
        <strong>Conversion Focused</strong>
        <span>The form supports service leads, demos, and quote requests.</span>
      </div>

    </div>

  </div>

  <div class="form-hero-lead-card">

    <div class="form-hero-lead-card-header">
      <h3 class="form-hero-lead-card-title">Get a free estimate</h3>
      <p class="form-hero-lead-card-text">Tell us what you need and we will send the next steps.</p>
    </div>

    <form class="form-hero-lead-form" action="#" method="post">

      <div class="form-hero-lead-grid">

        <div class="form-hero-lead-field">
          <label class="form-hero-lead-label" for="hero-lead-name">Name</label>
          <input class="form-hero-lead-input" id="hero-lead-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-hero-lead-field">
          <label class="form-hero-lead-label" for="hero-lead-email">Email</label>
          <input class="form-hero-lead-input" id="hero-lead-email" type="email" name="email" placeholder="you@example.com">
        </div>

      </div>

      <div class="form-hero-lead-field">
        <label class="form-hero-lead-label" for="hero-lead-service">Service type</label>
        <select class="form-hero-lead-select" id="hero-lead-service" name="service">
          <option>Website design</option>
          <option>Landing page</option>
          <option>Online store</option>
          <option>UI redesign</option>
        </select>
      </div>

      <div class="form-hero-lead-field">
        <label class="form-hero-lead-label" for="hero-lead-message">Project details</label>
        <textarea class="form-hero-lead-textarea" id="hero-lead-message" name="message" placeholder="Write a short summary of your project..."></textarea>
      </div>

      <button class="form-hero-lead-submit" type="submit">Request Free Estimate</button>

      <p class="form-hero-lead-small">No spam. We only use your details to reply to this request.</p>

    </form>

  </div>

</div>

CSS

.form-hero-lead-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
gap:34px;
align-items:center;
}

.form-hero-lead-content{
min-width:0;
}

.form-hero-lead-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-hero-lead-title{
margin:0 0 16px;
max-width:650px;
font-size:clamp(34px,5vw,62px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-hero-lead-title span{
background:linear-gradient(90deg,#86efac,#22d3ee,#818cf8) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-hero-lead-text{
margin:0 0 26px;
max-width:600px;
font-size:17px;
line-height:1.78;
color:#cbd5e1;
}

.form-hero-lead-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-bottom:28px;
}

.form-hero-lead-pill{
display:inline-flex;
align-items:center;
gap:9px;
min-height:40px;
padding:0 14px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#e2e8f0;
font-size:13px;
font-weight:850;
}

.form-hero-lead-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.form-hero-lead-features{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
max-width:650px;
}

.form-hero-lead-feature{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-hero-lead-feature strong{
display:block;
margin-bottom:6px;
font-size:15px;
line-height:1.25;
color:#ffffff;
}

.form-hero-lead-feature span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-hero-lead-card{
position:relative;
padding:26px;
border-radius:28px;
background:rgba(255,255,255,.95);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.form-hero-lead-card::before{
content:"";
position:absolute;
inset:-1px;
border-radius:28px;
padding:1px;
background:linear-gradient(135deg,rgba(34,197,94,.6),rgba(34,211,238,.45),rgba(129,140,248,.5));
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
pointer-events:none;
}

.form-hero-lead-card-header{
margin-bottom:20px;
}

.form-hero-lead-card-title{
margin:0 0 8px;
font-size:28px;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-hero-lead-card-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-hero-lead-form{
display:grid;
gap:14px;
}

.form-hero-lead-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.form-hero-lead-field{
display:grid;
gap:7px;
}

.form-hero-lead-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-hero-lead-input,
.form-hero-lead-select,
.form-hero-lead-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-hero-lead-input,
.form-hero-lead-select{
min-height:50px;
padding:0 14px;
}

.form-hero-lead-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-hero-lead-textarea{
min-height:106px;
resize:vertical;
padding:13px 14px;
}

.form-hero-lead-input::placeholder,
.form-hero-lead-textarea::placeholder{
color:#94a3b8;
}

.form-hero-lead-input:focus,
.form-hero-lead-select:focus,
.form-hero-lead-textarea:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.13);
background:#ffffff;
}

.form-hero-lead-submit{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,197,94,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-hero-lead-submit:hover,
.form-hero-lead-submit:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-hero-lead-small{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
text-align:center;
}

@media (max-width: 940px){
.form-hero-lead-layout{
grid-template-columns:1fr;
}

.form-hero-lead-features{
grid-template-columns:1fr;
}

.form-hero-lead-card{
max-width:560px;
width:100%;
margin:0 auto;
}

.form-hero-lead-title{
font-size:38px;
}
}

@media (max-width: 560px){
.form-hero-lead-card{
padding:22px;
border-radius:24px;
}

.form-hero-lead-card::before{
border-radius:24px;
}

.form-hero-lead-grid{
grid-template-columns:1fr;
}

.form-hero-lead-title{
font-size:32px;
}

.form-hero-lead-text{
font-size:15px;
}
}

This hero section lead form is useful when the main goal of a landing page is to collect inquiries, demo requests, consultations, or project leads. The form stays visible next to the main value proposition, which makes the page more action-focused.

Use this pattern for agency landing pages, service pages, SaaS demo pages, quote request pages, marketing campaigns, consultation pages, and lead generation websites.

10. Quote Request Form

A quote request form helps businesses collect structured project details from potential customers. It is especially useful for service websites, contractors, agencies, web design companies, construction companies, home improvement businesses, B2B services, and custom product inquiries.

This example uses a modern multi-section quote form with contact details, project type, budget range, timeline, and message fields. It keeps the layout organized while still being simple enough for users to complete quickly.

Perfect for agencies, contractors, consultants, and service businesses
Collects structured quote request details
Includes contact fields, project type, budget, timeline, and message
Uses grouped sections for better readability
Works with HTML and CSS only

Tell us about your project

Fill in the details below and we will prepare the next steps for your request.

HTML

<div class="form-quote-wrap">

  <aside class="form-quote-sidebar">

    <div class="form-quote-sidebar-inner">

      <div class="form-quote-kicker">Quote Request</div>

      <h3 class="form-quote-title">Request a custom project quote</h3>

      <p class="form-quote-text">Collect better project details with a structured form that helps users explain what they need before the first call.</p>

      <ul class="form-quote-steps">
        <li>
          <span class="form-quote-step-number">1</span>
          <span class="form-quote-step-content">
            <strong>Share contact details</strong>
            <span>Collect the basic information needed to reply.</span>
          </span>
        </li>
        <li>
          <span class="form-quote-step-number">2</span>
          <span class="form-quote-step-content">
            <strong>Choose project type</strong>
            <span>Let users tell you what kind of work they need.</span>
          </span>
        </li>
        <li>
          <span class="form-quote-step-number">3</span>
          <span class="form-quote-step-content">
            <strong>Send the request</strong>
            <span>Use the details to prepare a useful quote.</span>
          </span>
        </li>
      </ul>

      <p class="form-quote-help">Tip: keep quote forms focused. Ask for enough information to qualify the request, but avoid making the first step too long.</p>

    </div>

  </aside>

  <div class="form-quote-card">

    <div class="form-quote-card-header">
      <h3 class="form-quote-card-title">Tell us about your project</h3>
      <p class="form-quote-card-text">Fill in the details below and we will prepare the next steps for your request.</p>
    </div>

    <form class="form-quote-form" action="#" method="post">

      <div class="form-quote-section">

        <h4 class="form-quote-section-title">
          <span class="form-quote-section-icon">1</span>
          Contact details
        </h4>

        <div class="form-quote-grid">

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-name">Full name</label>
            <input class="form-quote-input" id="quote-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-email">Email address</label>
            <input class="form-quote-input" id="quote-email" type="email" name="email" placeholder="you@example.com">
          </div>

        </div>

      </div>

      <div class="form-quote-section">

        <h4 class="form-quote-section-title">
          <span class="form-quote-section-icon">2</span>
          Project information
        </h4>

        <div class="form-quote-grid">

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-type">Project type</label>
            <select class="form-quote-select" id="quote-type" name="project_type">
              <option>Website design</option>
              <option>Online store</option>
              <option>Landing page</option>
              <option>Custom development</option>
            </select>
          </div>

          <div class="form-quote-field">
            <label class="form-quote-label" for="quote-budget">Budget range</label>
            <select class="form-quote-select" id="quote-budget" name="budget">
              <option>$1,000 - $3,000</option>
              <option>$3,000 - $5,000</option>
              <option>$5,000 - $10,000</option>
              <option>$10,000+</option>
            </select>
          </div>

        </div>

        <div class="form-quote-field">
          <label class="form-quote-label">Timeline</label>
          <div class="form-quote-options">
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="asap">
              <span>ASAP</span>
            </label>
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="1-2-months" checked>
              <span>1-2 months</span>
            </label>
            <label class="form-quote-option">
              <input type="radio" name="timeline" value="flexible">
              <span>Flexible</span>
            </label>
          </div>
        </div>

        <div class="form-quote-field">
          <label class="form-quote-label" for="quote-message">Project details</label>
          <textarea class="form-quote-textarea" id="quote-message" name="message" placeholder="Describe your project, goals, pages, features, and any important requirements..."></textarea>
        </div>

      </div>

      <label class="form-quote-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this quote request.</span>
      </label>

      <button class="form-quote-submit" type="submit">Send Quote Request</button>

    </form>

  </div>

</div>

CSS

.form-quote-wrap{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
gap:20px;
align-items:stretch;
}

.form-quote-sidebar{
padding:28px;
border-radius:28px;
background:#0f172a;
color:#ffffff;
position:relative;
overflow:hidden;
box-shadow:0 24px 70px rgba(15,23,42,.22);
}

.form-quote-sidebar::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-110px;
border-radius:999px;
background:radial-gradient(circle,rgba(245,158,11,.34),transparent 70%);
pointer-events:none;
}

.form-quote-sidebar::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-130px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);
pointer-events:none;
}

.form-quote-sidebar-inner{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
height:100%;
}

.form-quote-kicker{
display:inline-flex;
align-items:center;
width:max-content;
gap:8px;
margin-bottom:18px;
padding:8px 12px;
border-radius:999px;
background:rgba(245,158,11,.14);
border:1px solid rgba(245,158,11,.28);
color:#fbbf24;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-quote-title{
margin:0 0 14px;
font-size:clamp(30px,4vw,44px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-quote-text{
margin:0 0 24px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-quote-steps{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-quote-steps li{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-quote-step-number{
flex:0 0 auto;
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:999px;
background:linear-gradient(135deg,#f59e0b,#22c55e);
color:#0f172a;
font-size:13px;
font-weight:950;
}

.form-quote-step-content strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-quote-step-content span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-quote-help{
margin-top:auto;
padding-top:24px;
font-size:13px;
line-height:1.65;
color:#94a3b8;
}

.form-quote-card{
padding:28px;
border-radius:28px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-quote-card-header{
margin-bottom:22px;
}

.form-quote-card-title{
margin:0 0 8px;
font-size:30px;
line-height:1.1;
font-weight:900;
letter-spacing:-.04em;
color:#0f172a;
}

.form-quote-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-quote-form{
display:grid;
gap:20px;
}

.form-quote-section{
display:grid;
gap:14px;
padding:18px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-quote-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-quote-section-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:10px;
background:#ffedd5;
color:#c2410c;
font-size:13px;
font-weight:950;
}

.form-quote-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-quote-field{
display:grid;
gap:8px;
}

.form-quote-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-quote-input,
.form-quote-select,
.form-quote-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-quote-input,
.form-quote-select{
min-height:50px;
padding:0 14px;
}

.form-quote-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-quote-textarea{
min-height:128px;
resize:vertical;
padding:13px 14px;
}

.form-quote-input::placeholder,
.form-quote-textarea::placeholder{
color:#94a3b8;
}

.form-quote-input:focus,
.form-quote-select:focus,
.form-quote-textarea:focus{
border-color:#f59e0b;
box-shadow:0 0 0 4px rgba(245,158,11,.13);
background:#ffffff;
}

.form-quote-options{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-quote-option{
position:relative;
cursor:pointer;
}

.form-quote-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-quote-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 12px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-quote-option input:checked + span{
border-color:#f59e0b;
box-shadow:0 0 0 4px rgba(245,158,11,.12);
background:#fff7ed;
color:#9a3412;
}

.form-quote-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-quote-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#f59e0b;
}

.form-quote-submit{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#f59e0b,#22c55e);
color:#0f172a;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(245,158,11,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-quote-submit:hover,
.form-quote-submit:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

@media (max-width: 940px){
.form-quote-wrap{
grid-template-columns:1fr;
}

.form-quote-sidebar{
min-height:auto;
}

.form-quote-help{
margin-top:24px;
}

.form-quote-card-title{
font-size:28px;
}
}

@media (max-width: 640px){
.form-quote-sidebar,
.form-quote-card{
padding:22px;
border-radius:24px;
}

.form-quote-grid,
.form-quote-options{
grid-template-columns:1fr;
}

.form-quote-title{
font-size:32px;
}
}

This quote request form is a practical pattern for collecting structured project inquiries. The grouped sections help users understand what information is needed, while the sidebar explains the process and makes the form feel more trustworthy.

Use this pattern for web design quote forms, contractor inquiry forms, home service requests, B2B project forms, custom product requests, consultation forms, and service business websites.

11. Multi-Step Form

A multi-step form is useful when a form has too many fields to show all at once. Instead of overwhelming the user with one long form, the fields are divided into smaller steps. This can make quote requests, onboarding forms, signup flows, surveys, booking forms, and checkout flows feel easier to complete.

This example uses three simple steps: contact details, project details, and confirmation. The form includes a progress indicator, previous and next buttons, visible step states, and a small JavaScript snippet that controls the form navigation.

Perfect for onboarding, quotes, surveys, checkout, and booking forms
Splits longer forms into smaller steps
Includes progress indicator and step labels
Uses JavaScript for next and previous step behavior
Stacks cleanly on mobile screens

Multi-Step Form

Complete your request in 3 steps

Break a longer form into smaller steps so users can focus on one group of fields at a time.

1 Contact Your details

2 Project Request info

3 Review Confirm details

HTML

<div class="form-multistep-card" data-multistep-form>

  <div class="form-multistep-header">
    <div class="form-multistep-kicker">Multi-Step Form</div>
    <h3 class="form-multistep-title">Complete your request in 3 steps</h3>
    <p class="form-multistep-text">Break a longer form into smaller steps so users can focus on one group of fields at a time.</p>
  </div>

  <div class="form-multistep-progress" aria-label="Form progress">

    <div class="form-multistep-progress-item is-active" data-multistep-progress="0">
      <span class="form-multistep-number">1</span>
      <span class="form-multistep-progress-text">
        <strong>Contact</strong>
        <span>Your details</span>
      </span>
    </div>

    <div class="form-multistep-progress-item" data-multistep-progress="1">
      <span class="form-multistep-number">2</span>
      <span class="form-multistep-progress-text">
        <strong>Project</strong>
        <span>Request info</span>
      </span>
    </div>

    <div class="form-multistep-progress-item" data-multistep-progress="2">
      <span class="form-multistep-number">3</span>
      <span class="form-multistep-progress-text">
        <strong>Review</strong>
        <span>Confirm details</span>
      </span>
    </div>

  </div>

  <form action="#" method="post">

    <div class="form-multistep-step is-active" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Contact details</h4>
        <p class="form-multistep-step-text">Start with basic details so we know who to contact.</p>

        <div class="form-multistep-form-grid">

          <div class="form-multistep-field">
            <label class="form-multistep-label" for="multi-name">Full name</label>
            <input class="form-multistep-input" id="multi-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-multistep-field">
            <label class="form-multistep-label" for="multi-email">Email address</label>
            <input class="form-multistep-input" id="multi-email" type="email" name="email" placeholder="you@example.com">
          </div>

        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" disabled>Previous</button>
          <button class="form-multistep-button form-multistep-button-primary" type="button" data-multistep-next>Next Step</button>
        </div>

      </div>

    </div>

    <div class="form-multistep-step" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Project details</h4>
        <p class="form-multistep-step-text">Choose a project type and add a short message.</p>

        <div class="form-multistep-field">
          <label class="form-multistep-label" for="multi-service">Project type</label>
          <select class="form-multistep-select" id="multi-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Online store</option>
            <option>Custom UI project</option>
          </select>
        </div>

        <div class="form-multistep-field">
          <label class="form-multistep-label" for="multi-message">Project message</label>
          <textarea class="form-multistep-textarea" id="multi-message" name="message" placeholder="Write a short project summary..."></textarea>
        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" data-multistep-prev>Previous</button>
          <button class="form-multistep-button form-multistep-button-primary" type="button" data-multistep-next>Next Step</button>
        </div>

      </div>

    </div>

    <div class="form-multistep-step" data-multistep-step>

      <div class="form-multistep-panel">

        <h4 class="form-multistep-step-title">Review and submit</h4>
        <p class="form-multistep-step-text">Confirm the request and submit the form.</p>

        <div class="form-multistep-summary">

          <div class="form-multistep-summary-item">
            <strong>Step 1: Contact details</strong>
            <span>The user enters their name and email address.</span>
          </div>

          <div class="form-multistep-summary-item">
            <strong>Step 2: Project details</strong>
            <span>The user selects a project type and writes a short message.</span>
          </div>

          <div class="form-multistep-summary-item">
            <strong>Step 3: Submit request</strong>
            <span>The final button sends the form data to your backend or form plugin.</span>
          </div>

        </div>

        <div class="form-multistep-actions">
          <button class="form-multistep-button form-multistep-button-secondary" type="button" data-multistep-prev>Previous</button>
          <button class="form-multistep-button form-multistep-button-submit" type="submit">Submit Request</button>
        </div>

      </div>

    </div>

  </form>

</div>

CSS

.form-multistep-card{
width:min(100%,760px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.44);
backdrop-filter:blur(18px);
}

.form-multistep-header{
text-align:center;
margin-bottom:26px;
}

.form-multistep-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.14);
border:1px solid rgba(168,85,247,.28);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-multistep-title{
margin:0 0 10px;
font-size:clamp(30px,4.5vw,46px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-multistep-text{
margin:0 auto;
max-width:590px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-multistep-progress{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
margin-bottom:24px;
}

.form-multistep-progress-item{
position:relative;
display:flex;
align-items:center;
gap:10px;
padding:13px;
border-radius:18px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.10);
color:#94a3b8;
transition:background .22s ease,border-color .22s ease,color .22s ease;
}

.form-multistep-progress-item.is-active{
background:rgba(168,85,247,.16);
border-color:rgba(168,85,247,.34);
color:#ffffff;
}

.form-multistep-progress-item.is-complete{
background:rgba(34,197,94,.12);
border-color:rgba(34,197,94,.28);
color:#ffffff;
}

.form-multistep-number{
flex:0 0 auto;
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(255,255,255,.10);
color:#ffffff;
font-size:13px;
font-weight:950;
}

.form-multistep-progress-item.is-active .form-multistep-number{
background:linear-gradient(135deg,#a855f7,#22d3ee);
}

.form-multistep-progress-item.is-complete .form-multistep-number{
background:#22c55e;
color:#052e16;
}

.form-multistep-progress-text{
display:grid;
gap:2px;
min-width:0;
}

.form-multistep-progress-text strong{
font-size:13px;
line-height:1.25;
font-weight:900;
color:inherit;
}

.form-multistep-progress-text span{
font-size:12px;
line-height:1.35;
color:#94a3b8;
}

.form-multistep-step{
display:none;
}

.form-multistep-step.is-active{
display:block;
}

.form-multistep-panel{
padding:24px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.24);
}

.form-multistep-step-title{
margin:0 0 8px;
font-size:24px;
line-height:1.15;
font-weight:900;
letter-spacing:-.03em;
color:#ffffff;
}

.form-multistep-step-text{
margin:0 0 18px;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-multistep-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-multistep-field{
display:grid;
gap:8px;
margin-bottom:14px;
}

.form-multistep-form-grid .form-multistep-field{
margin-bottom:0;
}

.form-multistep-label{
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-multistep-input,
.form-multistep-select,
.form-multistep-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-multistep-input,
.form-multistep-select{
min-height:52px;
padding:0 15px;
}

.form-multistep-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-multistep-textarea{
min-height:128px;
resize:vertical;
padding:14px 15px;
}

.form-multistep-input::placeholder,
.form-multistep-textarea::placeholder{
color:#94a3b8;
}

.form-multistep-input:focus,
.form-multistep-select:focus,
.form-multistep-textarea:focus{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14);
background:rgba(255,255,255,.10);
}

.form-multistep-summary{
display:grid;
gap:12px;
}

.form-multistep-summary-item{
padding:15px;
border-radius:18px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.10);
}

.form-multistep-summary-item strong{
display:block;
margin-bottom:5px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-multistep-summary-item span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-multistep-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:20px;
}

.form-multistep-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border:0;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,filter .22s ease;
}

.form-multistep-button:hover,
.form-multistep-button:focus{
transform:translateY(-2px);
outline:none;
}

.form-multistep-button-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
}

.form-multistep-button-secondary:hover,
.form-multistep-button-secondary:focus{
background:rgba(255,255,255,.12);
}

.form-multistep-button-primary{
background:linear-gradient(135deg,#a855f7,#22d3ee);
color:#ffffff;
box-shadow:0 18px 42px rgba(168,85,247,.24);
}

.form-multistep-button-primary:hover,
.form-multistep-button-primary:focus{
box-shadow:0 24px 52px rgba(34,211,238,.26);
filter:saturate(1.08);
}

.form-multistep-button-submit{
background:linear-gradient(135deg,#22c55e,#22d3ee);
color:#020617;
box-shadow:0 18px 42px rgba(34,197,94,.22);
}

.form-multistep-button-submit:hover,
.form-multistep-button-submit:focus{
box-shadow:0 24px 52px rgba(34,211,238,.26);
filter:saturate(1.08);
}

@media (max-width: 760px){
.form-multistep-card{
padding:22px;
border-radius:24px;
}

.form-multistep-progress{
grid-template-columns:1fr;
}

.form-multistep-form-grid{
grid-template-columns:1fr;
}

.form-multistep-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-multistep-button{
width:100%;
}

.form-multistep-title{
font-size:32px;
}
}

@media (max-width: 520px){
.form-multistep-panel{
padding:18px;
border-radius:20px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-multistep-form]").forEach(function (formWrap) {
    const steps = Array.from(formWrap.querySelectorAll("[data-multistep-step]"));
    const progressItems = Array.from(formWrap.querySelectorAll("[data-multistep-progress]"));
    const nextButtons = Array.from(formWrap.querySelectorAll("[data-multistep-next]"));
    const prevButtons = Array.from(formWrap.querySelectorAll("[data-multistep-prev]"));
    let currentStep = 0;

    function updateSteps() {
      steps.forEach(function (step, index) {
        step.classList.toggle("is-active", index === currentStep);
      });

      progressItems.forEach(function (item, index) {
        item.classList.toggle("is-active", index === currentStep);
        item.classList.toggle("is-complete", index < currentStep);
      });
    }

    nextButtons.forEach(function (button) {
      button.addEventListener("click", function () {
        if (currentStep < steps.length - 1) {
          currentStep += 1;
          updateSteps();
        }
      });
    });

    prevButtons.forEach(function (button) {
      button.addEventListener("click", function () {
        if (currentStep > 0) {
          currentStep -= 1;
          updateSteps();
        }
      });
    });

    updateSteps();
  });
});

This multi-step form is useful when you need more information from users but do not want to show a long form immediately. Each step reduces visual pressure and helps users focus on one part of the process at a time.

Use this pattern for quote request forms, onboarding flows, booking forms, surveys, checkout steps, account setup forms, and lead qualification forms.

12. Checkout Form UI

A checkout form UI is one of the most important form patterns for eCommerce websites. A clear checkout layout helps customers enter contact details, shipping information, and payment details without confusion. The design should feel organized, secure, and easy to complete.

This example uses a two-column checkout layout with customer fields on the left and an order summary on the right. The form includes contact information, shipping address fields, payment card UI fields, and a clear order button. It is a visual UI example and does not process real payments.

Perfect for eCommerce checkout pages and product order flows
Includes contact, shipping, and payment UI sections
Uses an order summary sidebar for clarity
Stacks into one column on mobile screens
Works with HTML and CSS only

Checkout Form

Complete your order

A clean checkout UI with contact details, shipping address, payment fields, and an order summary.

HTML

<div class="form-checkout-layout">

  <div class="form-checkout-main">

    <div class="form-checkout-header">
      <div class="form-checkout-kicker">Checkout Form</div>
      <h3 class="form-checkout-title">Complete your order</h3>
      <p class="form-checkout-text">A clean checkout UI with contact details, shipping address, payment fields, and an order summary.</p>
    </div>

    <form class="form-checkout-form" action="#" method="post">

      <div class="form-checkout-section">

        <div class="form-checkout-section-head">
          <h4 class="form-checkout-section-title">
            <span class="form-checkout-section-icon">1</span>
            Contact information
          </h4>
          <span class="form-checkout-secure">● Secure checkout</span>
        </div>

        <div class="form-checkout-grid">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-email">Email address</label>
            <input class="form-checkout-input" id="checkout-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-phone">Phone number</label>
            <input class="form-checkout-input" id="checkout-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
          </div>

        </div>

      </div>

      <div class="form-checkout-section">

        <h4 class="form-checkout-section-title">
          <span class="form-checkout-section-icon">2</span>
          Shipping address
        </h4>

        <div class="form-checkout-grid">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-first">First name</label>
            <input class="form-checkout-input" id="checkout-first" type="text" name="first_name" placeholder="Alex">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-last">Last name</label>
            <input class="form-checkout-input" id="checkout-last" type="text" name="last_name" placeholder="Morgan">
          </div>

          <div class="form-checkout-field form-checkout-field-full">
            <label class="form-checkout-label" for="checkout-address">Address</label>
            <input class="form-checkout-input" id="checkout-address" type="text" name="address" placeholder="123 Main Street">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-city">City</label>
            <input class="form-checkout-input" id="checkout-city" type="text" name="city" placeholder="New York">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-country">Country</label>
            <select class="form-checkout-select" id="checkout-country" name="country">
              <option>United States</option>
              <option>Canada</option>
              <option>United Kingdom</option>
              <option>Australia</option>
            </select>
          </div>

        </div>

      </div>

      <div class="form-checkout-section">

        <h4 class="form-checkout-section-title">
          <span class="form-checkout-section-icon">3</span>
          Payment method
        </h4>

        <div class="form-checkout-radio-group">

          <label class="form-checkout-radio">
            <input type="radio" name="payment" value="card" checked>
            <span>Credit Card</span>
          </label>

          <label class="form-checkout-radio">
            <input type="radio" name="payment" value="paypal">
            <span>PayPal</span>
          </label>

        </div>

        <div class="form-checkout-field">
          <label class="form-checkout-label" for="checkout-card">Card number</label>
          <input class="form-checkout-input" id="checkout-card" type="text" name="card_number" placeholder="1234 5678 9012 3456">
        </div>

        <div class="form-checkout-card-row">

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-name-card">Name on card</label>
            <input class="form-checkout-input" id="checkout-name-card" type="text" name="card_name" placeholder="Alex Morgan">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-expiry">Expiry</label>
            <input class="form-checkout-input" id="checkout-expiry" type="text" name="expiry" placeholder="MM/YY">
          </div>

          <div class="form-checkout-field">
            <label class="form-checkout-label" for="checkout-cvc">CVC</label>
            <input class="form-checkout-input" id="checkout-cvc" type="text" name="cvc" placeholder="123">
          </div>

        </div>

      </div>

      <button class="form-checkout-button" type="submit">Place Order</button>

    </form>

  </div>

  <aside class="form-checkout-summary">

    <h4 class="form-checkout-summary-title">Order Summary</h4>

    <div class="form-checkout-items">

      <div class="form-checkout-item">
        <div class="form-checkout-thumb"></div>
        <div>
          <span class="form-checkout-item-name">Premium UI Kit</span>
          <span class="form-checkout-item-meta">Digital product × 1</span>
        </div>
        <span class="form-checkout-price">$49</span>
      </div>

      <div class="form-checkout-item">
        <div class="form-checkout-thumb"></div>
        <div>
          <span class="form-checkout-item-name">Form Templates</span>
          <span class="form-checkout-item-meta">Digital product × 1</span>
        </div>
        <span class="form-checkout-price">$29</span>
      </div>

    </div>

    <div class="form-checkout-coupon">
      <input type="text" placeholder="Coupon code">
      <button type="button">Apply</button>
    </div>

    <div class="form-checkout-totals">

      <div class="form-checkout-total-row">
        <span>Subtotal</span>
        <span>$78</span>
      </div>

      <div class="form-checkout-total-row">
        <span>Shipping</span>
        <span>Free</span>
      </div>

      <div class="form-checkout-total-row">
        <span>Tax</span>
        <span>$6</span>
      </div>

      <div class="form-checkout-total-row">
        <strong>Total</strong>
        <strong>$84</strong>
      </div>

    </div>

    <p class="form-checkout-note">This is a checkout UI demo. Connect it to your own payment gateway or eCommerce platform for real payments.</p>

  </aside>

</div>

CSS

.form-checkout-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:minmax(0,1.24fr) minmax(300px,.76fr);
gap:22px;
align-items:start;
}

.form-checkout-main,
.form-checkout-summary{
border-radius:28px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-checkout-main{
padding:28px;
}

.form-checkout-header{
margin-bottom:24px;
}

.form-checkout-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-checkout-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-checkout-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-checkout-form{
display:grid;
gap:20px;
}

.form-checkout-section{
display:grid;
gap:14px;
padding:18px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-checkout-section-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.form-checkout-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-checkout-section-icon{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:11px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
}

.form-checkout-secure{
display:inline-flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:900;
color:#15803d;
}

.form-checkout-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-checkout-field{
display:grid;
gap:8px;
}

.form-checkout-field-full{
grid-column:1 / -1;
}

.form-checkout-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-checkout-input,
.form-checkout-select{
width:100%;
min-height:50px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-checkout-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-checkout-input::placeholder{
color:#94a3b8;
}

.form-checkout-input:focus,
.form-checkout-select:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-checkout-card-row{
display:grid;
grid-template-columns:1fr .45fr .35fr;
gap:14px;
}

.form-checkout-radio-group{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-checkout-radio{
position:relative;
cursor:pointer;
}

.form-checkout-radio input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-checkout-radio span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-checkout-radio input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
}

.form-checkout-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-checkout-button:hover,
.form-checkout-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

.form-checkout-summary{
padding:24px;
position:sticky;
top:20px;
}

.form-checkout-summary-title{
margin:0 0 18px;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-checkout-items{
display:grid;
gap:14px;
margin-bottom:18px;
}

.form-checkout-item{
display:grid;
grid-template-columns:54px minmax(0,1fr) auto;
gap:12px;
align-items:center;
}

.form-checkout-thumb{
width:54px;
height:54px;
border-radius:16px;
background:
linear-gradient(135deg,rgba(37,99,235,.18),rgba(34,197,94,.18)),
#f1f5f9;
border:1px solid #e2e8f0;
}

.form-checkout-item-name{
display:block;
font-size:14px;
line-height:1.35;
font-weight:900;
color:#0f172a;
}

.form-checkout-item-meta{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.35;
color:#64748b;
}

.form-checkout-price{
font-size:14px;
font-weight:950;
color:#0f172a;
}

.form-checkout-totals{
display:grid;
gap:10px;
padding-top:18px;
border-top:1px solid #e2e8f0;
}

.form-checkout-total-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
font-size:14px;
line-height:1.4;
color:#64748b;
}

.form-checkout-total-row strong{
font-size:18px;
color:#0f172a;
}

.form-checkout-coupon{
display:flex;
gap:8px;
margin:18px 0;
}

.form-checkout-coupon input{
width:100%;
min-height:46px;
padding:0 13px;
border:1px solid #dbe3ef;
border-radius:14px;
background:#f8fafc;
color:#0f172a;
font-size:14px;
outline:none;
box-sizing:border-box;
}

.form-checkout-coupon button{
min-height:46px;
padding:0 14px;
border:0;
border-radius:14px;
background:#0f172a;
color:#ffffff;
font-size:13px;
font-weight:900;
cursor:pointer;
}

.form-checkout-note{
margin:16px 0 0;
padding:14px;
border-radius:16px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#166534;
font-size:13px;
line-height:1.55;
}

@media (max-width: 940px){
.form-checkout-layout{
grid-template-columns:1fr;
}

.form-checkout-summary{
position:relative;
top:auto;
}
}

@media (max-width: 640px){
.form-checkout-main,
.form-checkout-summary{
padding:22px;
border-radius:24px;
}

.form-checkout-grid,
.form-checkout-card-row,
.form-checkout-radio-group{
grid-template-columns:1fr;
}

.form-checkout-section-head{
align-items:flex-start;
flex-direction:column;
}

.form-checkout-title{
font-size:32px;
}
}

This checkout form UI is useful for showing how a modern eCommerce checkout can be structured. The main form is divided into clear sections, while the order summary keeps pricing, products, coupons, and totals visible.

Use this pattern for online stores, digital product checkout pages, WooCommerce-inspired layouts, order forms, payment UI demos, and eCommerce landing pages. For real payments, connect the form to a secure payment gateway or eCommerce platform.

13. Booking Form

A booking form helps users reserve a service, schedule a visit, book a room, request a consultation, or choose a time slot. It is useful for hotels, restaurants, event websites, agencies, consultants, salons, clinics, rental websites, and service-based businesses.

This example uses a modern booking card with service selection, date, time, number of guests, contact details, and a short message field. The layout is structured, responsive, and designed to make the booking process feel clear and professional.

Perfect for hotels, restaurants, events, consultants, and service businesses
Includes service, date, time, guests, and contact fields
Uses a clean two-column form layout on desktop
Stacks into a single column on mobile screens
Works with HTML and CSS only

B Bookly

Easy Booking

Reserve your perfect time

Use this booking form layout to help visitors choose a service, date, time, and contact details in one clean flow.

✓ Fast booking request
✓ Clear date and time fields
✓ Mobile-friendly layout

Book your visit

Choose a service, select your preferred date and time, and send your booking request.

HTML

<div class="form-booking-layout">

  <div class="form-booking-info">

    <div class="form-booking-info-inner">

      <div class="form-booking-brand">
        <span class="form-booking-brand-icon">B</span>
        <span>Bookly</span>
      </div>

      <div class="form-booking-info-content">

        <div class="form-booking-kicker">Easy Booking</div>

        <h3 class="form-booking-heading">Reserve your perfect time</h3>

        <p class="form-booking-copy">Use this booking form layout to help visitors choose a service, date, time, and contact details in one clean flow.</p>

        <ul class="form-booking-benefits">
          <li><span class="form-booking-check">✓</span> Fast booking request</li>
          <li><span class="form-booking-check">✓</span> Clear date and time fields</li>
          <li><span class="form-booking-check">✓</span> Mobile-friendly layout</li>
        </ul>

      </div>

    </div>

  </div>

  <div class="form-booking-card">

    <div class="form-booking-card-header">
      <h3 class="form-booking-card-title">Book your visit</h3>
      <p class="form-booking-card-text">Choose a service, select your preferred date and time, and send your booking request.</p>
    </div>

    <form class="form-booking-form" action="#" method="post">

      <div class="form-booking-grid">

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-service">Service</label>
          <select class="form-booking-select" id="booking-service" name="service">
            <option>Private consultation</option>
            <option>Room reservation</option>
            <option>Event booking</option>
            <option>Guided tour</option>
          </select>
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-guests">Guests</label>
          <select class="form-booking-select" id="booking-guests" name="guests">
            <option>1 guest</option>
            <option>2 guests</option>
            <option>3 guests</option>
            <option>4+ guests</option>
          </select>
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-date">Date</label>
          <input class="form-booking-input" id="booking-date" type="date" name="date">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-time">Time</label>
          <input class="form-booking-input" id="booking-time" type="time" name="time">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-name">Full name</label>
          <input class="form-booking-input" id="booking-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-booking-field">
          <label class="form-booking-label" for="booking-email">Email address</label>
          <input class="form-booking-input" id="booking-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-booking-field form-booking-field-full">
          <label class="form-booking-label" for="booking-message">Notes</label>
          <textarea class="form-booking-textarea" id="booking-message" name="message" placeholder="Add any special requests or important details..."></textarea>
        </div>

      </div>

      <div class="form-booking-summary">

        <div class="form-booking-summary-item">
          <strong>Flexible</strong>
          <span>Choose a time</span>
        </div>

        <div class="form-booking-summary-item">
          <strong>Simple</strong>
          <span>Short request</span>
        </div>

        <div class="form-booking-summary-item">
          <strong>Fast</strong>
          <span>Quick reply</span>
        </div>

      </div>

      <button class="form-booking-button" type="submit">Send Booking Request</button>

    </form>

  </div>

</div>

CSS

.form-booking-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
gap:22px;
align-items:stretch;
}

.form-booking-info{
position:relative;
overflow:hidden;
padding:30px;
border-radius:30px;
background:
linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.form-booking-info::before{
content:"";
position:absolute;
inset:20px;
border-radius:24px;
background:
linear-gradient(180deg,rgba(2,6,23,.10),rgba(2,6,23,.78)),
url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=80");
background-size:cover;
background-position:center;
opacity:.76;
}

.form-booking-info-inner{
position:relative;
z-index:2;
min-height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
}

.form-booking-brand{
display:inline-flex;
align-items:center;
gap:10px;
color:#ffffff;
font-size:18px;
font-weight:950;
letter-spacing:-.03em;
}

.form-booking-brand-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#0ea5e9,#f59e0b);
box-shadow:0 14px 34px rgba(14,165,233,.24);
color:#ffffff;
font-size:17px;
font-weight:950;
}

.form-booking-info-content{
max-width:360px;
}

.form-booking-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.18);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}

.form-booking-heading{
margin:0 0 14px;
font-size:clamp(30px,4vw,44px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-booking-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#e2e8f0;
}

.form-booking-benefits{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-booking-benefits li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:800;
color:#ffffff;
}

.form-booking-check{
width:22px;
height:22px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(14,165,233,.18);
border:1px solid rgba(14,165,233,.34);
color:#7dd3fc;
font-size:13px;
font-weight:950;
}

.form-booking-card{
padding:28px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 28px 80px rgba(0,0,0,.34);
}

.form-booking-card-header{
margin-bottom:22px;
}

.form-booking-card-title{
margin:0 0 8px;
font-size:30px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-booking-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-booking-form{
display:grid;
gap:16px;
}

.form-booking-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-booking-field{
display:grid;
gap:8px;
}

.form-booking-field-full{
grid-column:1 / -1;
}

.form-booking-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-booking-input,
.form-booking-select,
.form-booking-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-booking-input,
.form-booking-select{
min-height:50px;
padding:0 14px;
}

.form-booking-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-booking-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-booking-input::placeholder,
.form-booking-textarea::placeholder{
color:#94a3b8;
}

.form-booking-input:focus,
.form-booking-select:focus,
.form-booking-textarea:focus{
border-color:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.13);
background:#ffffff;
}

.form-booking-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-booking-summary-item{
text-align:center;
}

.form-booking-summary-item strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.25;
color:#0f172a;
}

.form-booking-summary-item span{
display:block;
font-size:12px;
line-height:1.35;
color:#64748b;
}

.form-booking-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#0ea5e9,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(14,165,233,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-booking-button:hover,
.form-booking-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(245,158,11,.24);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 940px){
.form-booking-layout{
grid-template-columns:1fr;
}

.form-booking-info{
min-height:360px;
}

.form-booking-info-inner{
min-height:310px;
}

.form-booking-card-title{
font-size:28px;
}
}

@media (max-width: 640px){
.form-booking-info,
.form-booking-card{
padding:22px;
border-radius:24px;
}

.form-booking-info::before{
inset:14px;
border-radius:20px;
}

.form-booking-grid,
.form-booking-summary{
grid-template-columns:1fr;
}

.form-booking-heading{
font-size:32px;
}
}

This booking form is useful when visitors need to choose a service, date, time, and contact details in one place. The image panel gives the section a more premium feeling, while the form remains clear and practical.

Use this pattern for hotels, restaurants, event websites, consultants, clinics, salons, travel websites, rental services, and service businesses that need a simple booking request flow.

14. Appointment Form

An appointment form helps users schedule a meeting, consultation, service visit, medical appointment, salon session, coaching call, or support appointment. It is similar to a booking form, but usually focuses more on choosing a professional, appointment type, date, and preferred time.

This example uses a clean appointment scheduling layout with appointment type cards, personal details, date and time fields, and a clear confirmation button. The design works well for service providers that want a structured and professional scheduling form.

Perfect for clinics, salons, consultants, coaches, and service providers
Includes appointment type, date, time, and contact details
Uses visual appointment type cards
Includes a clean confirmation panel
Works with HTML and CSS only

Appointment Form

Schedule your appointment

A professional appointment form for clinics, salons, consultants, coaches, and service businesses.

30 min Average appointment request time slot

What happens next?

1We receive your appointment request.
2Our team checks availability.
3You receive a confirmation by email or phone.

Please note that this form sends an appointment request. The appointment is confirmed only after the service provider replies.

HTML

<div class="form-appointment-shell">

  <div class="form-appointment-header">

    <div class="form-appointment-header-content">

      <div class="form-appointment-kicker">Appointment Form</div>

      <h3 class="form-appointment-title">Schedule your appointment</h3>

      <p class="form-appointment-text">A professional appointment form for clinics, salons, consultants, coaches, and service businesses.</p>

    </div>

    <div class="form-appointment-status">
      <strong>30 min</strong>
      <span>Average appointment request time slot</span>
    </div>

  </div>

  <div class="form-appointment-card">

    <form class="form-appointment-form" action="#" method="post">

      <div class="form-appointment-section">

        <h4 class="form-appointment-section-title">Choose appointment type</h4>

        <div class="form-appointment-types">

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="consultation" checked>
            <span>
              <strong>Consultation</strong>
              <small>Talk with a specialist</small>
            </span>
          </label>

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="service">
            <span>
              <strong>Service Visit</strong>
              <small>Book a service time</small>
            </span>
          </label>

          <label class="form-appointment-type">
            <input type="radio" name="appointment_type" value="follow-up">
            <span>
              <strong>Follow-Up</strong>
              <small>Continue an existing case</small>
            </span>
          </label>

        </div>

      </div>

      <div class="form-appointment-section">

        <h4 class="form-appointment-section-title">Appointment details</h4>

        <div class="form-appointment-grid">

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-date">Preferred date</label>
            <input class="form-appointment-input" id="appointment-date" type="date" name="date">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-time">Preferred time</label>
            <input class="form-appointment-input" id="appointment-time" type="time" name="time">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-provider">Specialist</label>
            <select class="form-appointment-select" id="appointment-provider" name="provider">
              <option>Any available specialist</option>
              <option>Emma Wilson</option>
              <option>James Carter</option>
              <option>Sophia Miller</option>
            </select>
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-phone">Phone number</label>
            <input class="form-appointment-input" id="appointment-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-name">Full name</label>
            <input class="form-appointment-input" id="appointment-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-appointment-field">
            <label class="form-appointment-label" for="appointment-email">Email address</label>
            <input class="form-appointment-input" id="appointment-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-appointment-field form-appointment-field-full">
            <label class="form-appointment-label" for="appointment-message">Notes</label>
            <textarea class="form-appointment-textarea" id="appointment-message" name="message" placeholder="Add any details that help us prepare for your appointment..."></textarea>
          </div>

        </div>

      </div>

      <button class="form-appointment-button" type="submit">Request Appointment</button>

    </form>

    <div class="form-appointment-side">

      <div class="form-appointment-preview-card">

        <h4>What happens next?</h4>

        <ul class="form-appointment-preview-list">
          <li><span class="form-appointment-preview-dot">1</span>We receive your appointment request.</li>
          <li><span class="form-appointment-preview-dot">2</span>Our team checks availability.</li>
          <li><span class="form-appointment-preview-dot">3</span>You receive a confirmation by email or phone.</li>
        </ul>

      </div>

      <div class="form-appointment-note">
        Please note that this form sends an appointment request. The appointment is confirmed only after the service provider replies.
      </div>

    </div>

  </div>

</div>

CSS

.form-appointment-shell{
width:min(100%,940px);
display:grid;
gap:22px;
}

.form-appointment-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:20px;
align-items:end;
padding:26px;
border-radius:28px;
background:#0f172a;
position:relative;
overflow:hidden;
box-shadow:0 24px 70px rgba(15,23,42,.20);
}

.form-appointment-header::before{
content:"";
position:absolute;
width:280px;
height:280px;
right:-120px;
top:-120px;
border-radius:999px;
background:radial-gradient(circle,rgba(168,85,247,.38),transparent 70%);
pointer-events:none;
}

.form-appointment-header::after{
content:"";
position:absolute;
width:240px;
height:240px;
left:-120px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(14,165,233,.30),transparent 70%);
pointer-events:none;
}

.form-appointment-header-content,
.form-appointment-status{
position:relative;
z-index:2;
}

.form-appointment-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.16);
border:1px solid rgba(168,85,247,.30);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-appointment-title{
margin:0 0 10px;
font-size:clamp(30px,4.5vw,48px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-appointment-text{
margin:0;
max-width:620px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-appointment-status{
display:grid;
gap:8px;
min-width:180px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.form-appointment-status strong{
display:block;
font-size:22px;
line-height:1;
font-weight:950;
color:#ffffff;
}

.form-appointment-status span{
display:block;
font-size:13px;
line-height:1.45;
color:#cbd5e1;
}

.form-appointment-card{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.58fr);
gap:22px;
padding:24px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-appointment-form{
display:grid;
gap:20px;
}

.form-appointment-section{
display:grid;
gap:14px;
}

.form-appointment-section-title{
margin:0;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-appointment-types{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-appointment-type{
position:relative;
cursor:pointer;
}

.form-appointment-type input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-appointment-type span{
display:grid;
gap:6px;
min-height:96px;
padding:15px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-appointment-type strong{
display:block;
font-size:14px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.form-appointment-type small{
display:block;
font-size:12px;
line-height:1.45;
color:#64748b;
}

.form-appointment-type input:checked + span{
border-color:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.12);
background:#faf5ff;
transform:translateY(-1px);
}

.form-appointment-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-appointment-field{
display:grid;
gap:8px;
}

.form-appointment-field-full{
grid-column:1 / -1;
}

.form-appointment-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-appointment-input,
.form-appointment-select,
.form-appointment-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-appointment-input,
.form-appointment-select{
min-height:50px;
padding:0 14px;
}

.form-appointment-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-appointment-textarea{
min-height:110px;
resize:vertical;
padding:13px 14px;
}

.form-appointment-input::placeholder,
.form-appointment-textarea::placeholder{
color:#94a3b8;
}

.form-appointment-input:focus,
.form-appointment-select:focus,
.form-appointment-textarea:focus{
border-color:#8b5cf6;
box-shadow:0 0 0 4px rgba(139,92,246,.12);
background:#ffffff;
}

.form-appointment-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#8b5cf6,#0ea5e9);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(139,92,246,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-appointment-button:hover,
.form-appointment-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.25);
filter:saturate(1.08);
outline:none;
}

.form-appointment-side{
display:grid;
gap:14px;
align-content:start;
}

.form-appointment-preview-card{
padding:20px;
border-radius:24px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-appointment-preview-card h4{
margin:0 0 12px;
font-size:19px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-appointment-preview-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-appointment-preview-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#475569;
}

.form-appointment-preview-dot{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#ede9fe;
color:#7c3aed;
font-size:12px;
font-weight:950;
}

.form-appointment-note{
padding:18px;
border-radius:22px;
background:#eff6ff;
border:1px solid #bfdbfe;
color:#1e40af;
font-size:14px;
line-height:1.65;
}

@media (max-width: 920px){
.form-appointment-header{
grid-template-columns:1fr;
}

.form-appointment-card{
grid-template-columns:1fr;
}

.form-appointment-status{
max-width:260px;
}
}

@media (max-width: 640px){
.form-appointment-header,
.form-appointment-card{
padding:22px;
border-radius:24px;
}

.form-appointment-types,
.form-appointment-grid{
grid-template-columns:1fr;
}

.form-appointment-title{
font-size:32px;
}
}

This appointment form is useful when the user needs to choose a specific appointment type, date, time, and provider. The visual appointment cards make the first choice easier, while the side panel explains what happens after submitting the request.

Use this pattern for clinics, salons, consultants, coaches, service providers, repair companies, onboarding calls, support sessions, and professional appointment scheduling pages.

15. Support Ticket Form

A support ticket form helps users report a problem, request help, ask a technical question, or contact a customer support team with structured information. It is useful for SaaS products, hosting companies, software dashboards, WordPress plugins, online stores, customer portals, and help centers.

This example uses a clean support ticket layout with category selection, priority level, contact details, subject, message, and file attachment field. The structure helps users provide enough information for the support team to understand and solve the issue faster.

Perfect for SaaS products, customer portals, help centers, and support pages
Includes category, priority, subject, message, and attachment fields
Uses a clear support ticket layout with helpful side information
Works well for technical support and customer service workflows
Uses HTML and CSS only

Support Ticket

Submit a support request

Use this support ticket form to collect issue details, priority, contact information, and optional attachments.

HTML

<div class="form-support-layout">

  <div class="form-support-card">

    <div class="form-support-header">
      <div class="form-support-kicker">Support Ticket</div>
      <h3 class="form-support-title">Submit a support request</h3>
      <p class="form-support-text">Use this support ticket form to collect issue details, priority, contact information, and optional attachments.</p>
    </div>

    <form class="form-support-form" action="#" method="post">

      <div class="form-support-section">

        <h4 class="form-support-section-title">
          <span class="form-support-section-icon">1</span>
          Ticket details
        </h4>

        <div class="form-support-grid">

          <div class="form-support-field">
            <label class="form-support-label" for="support-category">Category</label>
            <select class="form-support-select" id="support-category" name="category">
              <option>Technical issue</option>
              <option>Billing question</option>
              <option>Account access</option>
              <option>Feature request</option>
            </select>
          </div>

          <div class="form-support-field">
            <label class="form-support-label" for="support-product">Product</label>
            <select class="form-support-select" id="support-product" name="product">
              <option>Website dashboard</option>
              <option>WordPress plugin</option>
              <option>Hosting account</option>
              <option>API integration</option>
            </select>
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label">Priority</label>
            <div class="form-support-priority">
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="low">
                <span>Low</span>
              </label>
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="normal" checked>
                <span>Normal</span>
              </label>
              <label class="form-support-priority-option">
                <input type="radio" name="priority" value="urgent">
                <span>Urgent</span>
              </label>
            </div>
          </div>

        </div>

      </div>

      <div class="form-support-section">

        <h4 class="form-support-section-title">
          <span class="form-support-section-icon">2</span>
          Contact and issue
        </h4>

        <div class="form-support-grid">

          <div class="form-support-field">
            <label class="form-support-label" for="support-name">Full name</label>
            <input class="form-support-input" id="support-name" type="text" name="name" placeholder="Your name">
          </div>

          <div class="form-support-field">
            <label class="form-support-label" for="support-email">Email address</label>
            <input class="form-support-input" id="support-email" type="email" name="email" placeholder="you@example.com">
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-subject">Subject</label>
            <input class="form-support-input" id="support-subject" type="text" name="subject" placeholder="Briefly describe the problem">
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-message">Issue description</label>
            <textarea class="form-support-textarea" id="support-message" name="message" placeholder="Explain what happened, what you expected, and any error messages you saw..."></textarea>
          </div>

          <div class="form-support-field form-support-field-full">
            <label class="form-support-label" for="support-file">Attachment</label>
            <div class="form-support-file">
              <input id="support-file" type="file" name="attachment">
              <p class="form-support-help">Upload a screenshot, PDF, or log file if it helps explain the issue.</p>
            </div>
          </div>

        </div>

      </div>

      <button class="form-support-button" type="submit">Submit Ticket</button>

    </form>

  </div>

  <aside class="form-support-aside">

    <h4 class="form-support-aside-title">Before you submit</h4>

    <p class="form-support-aside-text">A better support ticket helps the team solve the problem faster. Include useful details whenever possible.</p>

    <ul class="form-support-info-list">

      <li>
        <span class="form-support-info-icon">1</span>
        <span class="form-support-info-content">
          <strong>Describe the issue</strong>
          <span>Explain what happened and where it happened.</span>
        </span>
      </li>

      <li>
        <span class="form-support-info-icon">2</span>
        <span class="form-support-info-content">
          <strong>Add screenshots</strong>
          <span>Visual proof can make technical issues easier to understand.</span>
        </span>
      </li>

      <li>
        <span class="form-support-info-icon">3</span>
        <span class="form-support-info-content">
          <strong>Choose priority</strong>
          <span>Use urgent only when something important is blocked.</span>
        </span>
      </li>

    </ul>

    <div class="form-support-status">
      <strong>Average response time</strong>
      Most normal tickets receive a first reply within one business day.
    </div>

  </aside>

</div>

CSS

.form-support-layout{
width:min(100%,1000px);
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr);
gap:22px;
align-items:start;
}

.form-support-card,
.form-support-aside{
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 28px 90px rgba(0,0,0,.36);
backdrop-filter:blur(18px);
}

.form-support-card{
padding:30px;
}

.form-support-header{
margin-bottom:24px;
}

.form-support-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(59,130,246,.14);
border:1px solid rgba(59,130,246,.28);
color:#93c5fd;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-support-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-support-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-support-form{
display:grid;
gap:18px;
}

.form-support-section{
display:grid;
gap:14px;
padding:18px;
border-radius:22px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
}

.form-support-section-title{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-support-section-icon{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:11px;
background:rgba(59,130,246,.18);
color:#93c5fd;
font-size:13px;
font-weight:950;
}

.form-support-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-support-field{
display:grid;
gap:8px;
}

.form-support-field-full{
grid-column:1 / -1;
}

.form-support-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-support-input,
.form-support-select,
.form-support-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-support-input,
.form-support-select{
min-height:50px;
padding:0 14px;
}

.form-support-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-support-textarea{
min-height:132px;
resize:vertical;
padding:13px 14px;
}

.form-support-input::placeholder,
.form-support-textarea::placeholder{
color:#94a3b8;
}

.form-support-input:focus,
.form-support-select:focus,
.form-support-textarea:focus{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:rgba(255,255,255,.10);
}

.form-support-priority{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}

.form-support-priority-option{
position:relative;
cursor:pointer;
}

.form-support-priority-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-support-priority-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:46px;
padding:0 12px;
border-radius:15px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-support-priority-option input:checked + span{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:rgba(59,130,246,.16);
color:#ffffff;
}

.form-support-file{
position:relative;
display:grid;
gap:8px;
}

.form-support-file input{
width:100%;
min-height:54px;
padding:13px;
border:1px dashed rgba(147,197,253,.36);
border-radius:16px;
background:rgba(59,130,246,.08);
color:#cbd5e1;
font-size:14px;
box-sizing:border-box;
}

.form-support-help{
margin:0;
font-size:13px;
line-height:1.55;
color:#94a3b8;
}

.form-support-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22d3ee);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-support-button:hover,
.form-support-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.28);
filter:saturate(1.08);
outline:none;
}

.form-support-aside{
padding:24px;
position:sticky;
top:20px;
}

.form-support-aside-title{
margin:0 0 14px;
font-size:22px;
line-height:1.15;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-support-aside-text{
margin:0 0 18px;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-support-info-list{
display:grid;
gap:12px;
margin:0 0 18px;
padding:0;
list-style:none;
}

.form-support-info-list li{
display:flex;
align-items:flex-start;
gap:12px;
padding:14px;
border-radius:18px;
background:rgba(15,23,42,.62);
border:1px solid rgba(255,255,255,.10);
}

.form-support-info-icon{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:950;
flex:0 0 auto;
}

.form-support-info-content strong{
display:block;
margin-bottom:4px;
font-size:14px;
line-height:1.3;
color:#ffffff;
}

.form-support-info-content span{
display:block;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-support-status{
padding:16px;
border-radius:20px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#bbf7d0;
font-size:13px;
line-height:1.6;
}

.form-support-status strong{
display:block;
margin-bottom:4px;
color:#ffffff;
font-size:14px;
}

@media (max-width: 920px){
.form-support-layout{
grid-template-columns:1fr;
}

.form-support-aside{
position:relative;
top:auto;
}
}

@media (max-width: 640px){
.form-support-card,
.form-support-aside{
padding:22px;
border-radius:24px;
}

.form-support-grid,
.form-support-priority{
grid-template-columns:1fr;
}

.form-support-title{
font-size:32px;
}
}

This support ticket form is useful when users need to send structured issue reports instead of a simple contact message. The category, product, priority, subject, message, and attachment fields help support teams understand the request faster.

Use this pattern for SaaS dashboards, hosting support pages, WordPress plugin support forms, customer portals, help centers, eCommerce support pages, and technical service websites.

16. Feedback Form

A feedback form helps collect opinions, suggestions, satisfaction levels, and improvement ideas from users. It can be used after a purchase, after a support interaction, inside a dashboard, at the end of a service, or on a website feedback page.

This example uses a modern feedback card with satisfaction options, topic selection, contact details, and an open message field. The layout is friendly, compact, and designed to make users feel comfortable sharing quick feedback.

Perfect for product feedback, service feedback, website feedback, and customer satisfaction forms
Includes visual satisfaction choices
Uses topic selection and optional contact details
Works well inside dashboards, support pages, and post-purchase screens
Uses HTML and CSS only

Feedback Form

How was your experience?

Use this feedback form to collect user satisfaction, suggestions, and improvement ideas in a friendly way.

HTML

<div class="form-feedback-card">

  <div class="form-feedback-top">

    <div class="form-feedback-top-inner">

      <div class="form-feedback-kicker">Feedback Form</div>

      <h3 class="form-feedback-title">How was your experience?</h3>

      <p class="form-feedback-text">Use this feedback form to collect user satisfaction, suggestions, and improvement ideas in a friendly way.</p>

    </div>

  </div>

  <div class="form-feedback-body">

    <form class="form-feedback-form" action="#" method="post">

      <div class="form-feedback-section">

        <h4 class="form-feedback-section-title">Choose your satisfaction level</h4>

        <div class="form-feedback-rating">

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="great" checked>
            <span>
              <span class="form-feedback-emoji">😍</span>
              <span class="form-feedback-label-text">Great</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="good">
            <span>
              <span class="form-feedback-emoji">🙂</span>
              <span class="form-feedback-label-text">Good</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="okay">
            <span>
              <span class="form-feedback-emoji">😐</span>
              <span class="form-feedback-label-text">Okay</span>
            </span>
          </label>

          <label class="form-feedback-rating-option">
            <input type="radio" name="satisfaction" value="bad">
            <span>
              <span class="form-feedback-emoji">🙁</span>
              <span class="form-feedback-label-text">Bad</span>
            </span>
          </label>

        </div>

      </div>

      <div class="form-feedback-section">

        <h4 class="form-feedback-section-title">Tell us more</h4>

        <div class="form-feedback-grid">

          <div class="form-feedback-field">
            <label class="form-feedback-label" for="feedback-topic">Feedback topic</label>
            <select class="form-feedback-select" id="feedback-topic" name="topic">
              <option>Website experience</option>
              <option>Product quality</option>
              <option>Customer support</option>
              <option>Checkout process</option>
            </select>
          </div>

          <div class="form-feedback-field">
            <label class="form-feedback-label" for="feedback-email">Email address</label>
            <input class="form-feedback-input" id="feedback-email" type="email" name="email" placeholder="Optional email">
          </div>

          <div class="form-feedback-field form-feedback-field-full">
            <label class="form-feedback-label" for="feedback-message">Your feedback</label>
            <textarea class="form-feedback-textarea" id="feedback-message" name="message" placeholder="Share your thoughts, suggestions, or anything we can improve..."></textarea>
          </div>

        </div>

      </div>

      <label class="form-feedback-check">
        <input type="checkbox" name="followup">
        <span>You may contact me about this feedback if more details are needed.</span>
      </label>

      <button class="form-feedback-button" type="submit">Send Feedback</button>

    </form>

  </div>

</div>

CSS

.form-feedback-card{
width:min(100%,720px);
overflow:hidden;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-feedback-top{
position:relative;
padding:30px;
background:#0f172a;
overflow:hidden;
}

.form-feedback-top::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-120px;
border-radius:999px;
background:radial-gradient(circle,rgba(244,114,182,.36),transparent 70%);
pointer-events:none;
}

.form-feedback-top::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-130px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(250,204,21,.26),transparent 70%);
pointer-events:none;
}

.form-feedback-top-inner{
position:relative;
z-index:2;
}

.form-feedback-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(244,114,182,.16);
border:1px solid rgba(244,114,182,.30);
color:#f9a8d4;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-feedback-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-feedback-text{
margin:0;
max-width:600px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-feedback-body{
padding:30px;
}

.form-feedback-form{
display:grid;
gap:20px;
}

.form-feedback-section{
display:grid;
gap:14px;
}

.form-feedback-section-title{
margin:0;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-feedback-rating{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}

.form-feedback-rating-option{
position:relative;
cursor:pointer;
}

.form-feedback-rating-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-feedback-rating-option span{
display:grid;
place-items:center;
gap:8px;
min-height:96px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
color:#475569;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-feedback-emoji{
font-size:28px;
line-height:1;
}

.form-feedback-label-text{
font-size:13px;
font-weight:900;
line-height:1.25;
color:#0f172a;
}

.form-feedback-rating-option input:checked + span{
border-color:#ec4899;
box-shadow:0 0 0 4px rgba(236,72,153,.12);
background:#fdf2f8;
transform:translateY(-1px);
}

.form-feedback-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-feedback-field{
display:grid;
gap:8px;
}

.form-feedback-field-full{
grid-column:1 / -1;
}

.form-feedback-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-feedback-input,
.form-feedback-select,
.form-feedback-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-feedback-input,
.form-feedback-select{
min-height:50px;
padding:0 14px;
}

.form-feedback-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-feedback-textarea{
min-height:130px;
resize:vertical;
padding:13px 14px;
}

.form-feedback-input::placeholder,
.form-feedback-textarea::placeholder{
color:#94a3b8;
}

.form-feedback-input:focus,
.form-feedback-select:focus,
.form-feedback-textarea:focus{
border-color:#ec4899;
box-shadow:0 0 0 4px rgba(236,72,153,.12);
background:#ffffff;
}

.form-feedback-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-feedback-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#ec4899;
}

.form-feedback-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#ec4899,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(236,72,153,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-feedback-button:hover,
.form-feedback-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(245,158,11,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-feedback-top,
.form-feedback-body{
padding:24px;
}

.form-feedback-card{
border-radius:24px;
}

.form-feedback-rating{
grid-template-columns:1fr 1fr;
}

.form-feedback-grid{
grid-template-columns:1fr;
}

.form-feedback-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-feedback-rating{
grid-template-columns:1fr;
}
}

This feedback form is useful when you want to collect quick user opinions without making the form feel too formal. The satisfaction options make the form easier to start, while the open message field lets users explain their experience in their own words.

Use this pattern for customer feedback pages, dashboard feedback forms, post-purchase feedback, support follow-ups, product improvement surveys, and website experience feedback sections.

17. Review Form with Star Rating

A review form with star rating is useful when you want users to rate a product, service, article, booking, support experience, or website interaction. Star ratings make the form more visual and easier to complete because users can quickly select a score before writing their review.

This example includes an interactive 5-star rating, review title, review message, name field, email field, and a submit button. The stars are controlled with a small JavaScript snippet that updates the selected rating and keeps the UI clear.

Perfect for product reviews, service reviews, testimonials, and feedback pages
Includes clickable 5-star rating behavior
Uses clear review title and message fields
Includes optional reviewer details
Uses HTML, CSS, and a small JavaScript snippet

Review Form

Leave a product review

Rate your experience and share a short review to help other customers make a better decision.

5.0 Rating

HTML

<div class="form-review-card" data-review-form>

  <div class="form-review-header">

    <div>

      <div class="form-review-kicker">Review Form</div>

      <h3 class="form-review-title">Leave a product review</h3>

      <p class="form-review-text">Rate your experience and share a short review to help other customers make a better decision.</p>

    </div>

    <div class="form-review-score">
      <strong data-review-score>5.0</strong>
      <span>Rating</span>
    </div>

  </div>

  <form class="form-review-form" action="#" method="post">

    <div class="form-review-rating-block">

      <label class="form-review-rating-label">Your rating</label>

      <div class="form-review-stars" role="radiogroup" aria-label="Choose star rating">

        <button class="form-review-star is-active" type="button" data-review-star="1" aria-label="1 star">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="2" aria-label="2 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="3" aria-label="3 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="4" aria-label="4 stars">★</button>
        <button class="form-review-star is-active" type="button" data-review-star="5" aria-label="5 stars">★</button>

      </div>

      <input type="hidden" name="rating" value="5" data-review-input>

      <p class="form-review-rating-text" data-review-text>Excellent — you selected 5 stars.</p>

    </div>

    <div class="form-review-grid">

      <div class="form-review-field">
        <label class="form-review-label" for="review-name">Your name</label>
        <input class="form-review-input" id="review-name" type="text" name="name" placeholder="Alex Morgan">
      </div>

      <div class="form-review-field">
        <label class="form-review-label" for="review-email">Email address</label>
        <input class="form-review-input" id="review-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-review-field form-review-field-full">
        <label class="form-review-label" for="review-title">Review title</label>
        <input class="form-review-input" id="review-title" type="text" name="review_title" placeholder="Great product and fast delivery">
      </div>

      <div class="form-review-field form-review-field-full">
        <label class="form-review-label" for="review-message">Your review</label>
        <textarea class="form-review-textarea" id="review-message" name="review" placeholder="Write your honest review here..."></textarea>
      </div>

    </div>

    <label class="form-review-check">
      <input type="checkbox" name="permission">
      <span>I allow this review to be displayed publicly on the website.</span>
    </label>

    <button class="form-review-button" type="submit">Submit Review</button>

  </form>

</div>

CSS

.form-review-card{
width:min(100%,720px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-review-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-review-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(250,204,21,.14);
border:1px solid rgba(250,204,21,.28);
color:#fde68a;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-review-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-review-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-review-score{
display:grid;
place-items:center;
min-width:112px;
min-height:112px;
padding:16px;
border-radius:26px;
background:rgba(250,204,21,.12);
border:1px solid rgba(250,204,21,.24);
text-align:center;
}

.form-review-score strong{
display:block;
font-size:34px;
line-height:1;
font-weight:950;
color:#facc15;
}

.form-review-score span{
display:block;
margin-top:6px;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
color:#fde68a;
}

.form-review-form{
display:grid;
gap:18px;
}

.form-review-rating-block{
padding:18px;
border-radius:22px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
}

.form-review-rating-label{
display:block;
margin-bottom:12px;
font-size:14px;
font-weight:900;
color:#ffffff;
}

.form-review-stars{
display:flex;
align-items:center;
gap:8px;
}

.form-review-star{
width:46px;
height:46px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#64748b;
font-size:25px;
line-height:1;
cursor:pointer;
transition:background .22s ease,border-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.form-review-star:hover,
.form-review-star:focus{
transform:translateY(-2px);
border-color:rgba(250,204,21,.42);
color:#facc15;
outline:none;
}

.form-review-star.is-active{
background:rgba(250,204,21,.16);
border-color:rgba(250,204,21,.38);
color:#facc15;
box-shadow:0 0 0 4px rgba(250,204,21,.10);
}

.form-review-rating-text{
margin:12px 0 0;
font-size:13px;
line-height:1.55;
color:#cbd5e1;
}

.form-review-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-review-field{
display:grid;
gap:8px;
}

.form-review-field-full{
grid-column:1 / -1;
}

.form-review-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-review-input,
.form-review-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-review-input{
min-height:50px;
padding:0 14px;
}

.form-review-textarea{
min-height:132px;
resize:vertical;
padding:13px 14px;
}

.form-review-input::placeholder,
.form-review-textarea::placeholder{
color:#94a3b8;
}

.form-review-input:focus,
.form-review-textarea:focus{
border-color:#facc15;
box-shadow:0 0 0 4px rgba(250,204,21,.14);
background:rgba(255,255,255,.10);
}

.form-review-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(15,23,42,.68);
border:1px solid rgba(255,255,255,.10);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-review-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#facc15;
}

.form-review-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#facc15,#ec4899);
color:#111827;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(250,204,21,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-review-button:hover,
.form-review-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.26);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-review-card{
padding:24px;
border-radius:24px;
}

.form-review-header{
grid-template-columns:1fr;
}

.form-review-score{
min-width:0;
width:100%;
}

.form-review-grid{
grid-template-columns:1fr;
}

.form-review-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-review-stars{
gap:6px;
}

.form-review-star{
width:40px;
height:40px;
border-radius:13px;
font-size:22px;
}
}

JavaScript

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll("[data-review-form]").forEach(function (form) {
    const stars = Array.from(form.querySelectorAll("[data-review-star]"));
    const score = form.querySelector("[data-review-score]");
    const input = form.querySelector("[data-review-input]");
    const text = form.querySelector("[data-review-text]");

    const labels = {
      1: "Poor — you selected 1 star.",
      2: "Fair — you selected 2 stars.",
      3: "Good — you selected 3 stars.",
      4: "Very good — you selected 4 stars.",
      5: "Excellent — you selected 5 stars."
    };

    function setRating(value) {
      stars.forEach(function (star) {
        const starValue = Number(star.getAttribute("data-review-star"));
        star.classList.toggle("is-active", starValue <= value);
      });

      if (score) {
        score.textContent = value + ".0";
      }

      if (input) {
        input.value = value;
      }

      if (text) {
        text.textContent = labels[value];
      }
    }

    stars.forEach(function (star) {
      star.addEventListener("click", function () {
        const value = Number(star.getAttribute("data-review-star"));
        setRating(value);
      });
    });

    setRating(5);
  });
});

This review form with star rating is useful when you want the review process to feel more interactive and visual. The selected star state makes the rating clear, while the hidden input stores the chosen rating value for form submission.

Use this pattern for product reviews, service testimonials, booking feedback, course reviews, software ratings, eCommerce reviews, and customer experience pages.

18. Survey Form

A survey form helps collect structured answers from users, customers, readers, employees, or website visitors. It is useful when you need to understand preferences, satisfaction, goals, problems, buying intent, product feedback, or audience behavior.

This example uses a modern survey card with multiple-choice questions, checkbox options, a dropdown field, and an open comment area. The layout is designed to be clear, scannable, and easy to complete without feeling like a long questionnaire.

Perfect for customer surveys, audience research, product feedback, and website questionnaires
Includes radio buttons, checkboxes, select dropdown, and textarea field
Uses grouped question cards for readability
Stacks cleanly on mobile screens
Works with HTML and CSS only

Survey Form

Help us improve your experience

Answer a few quick questions so we can understand what users need and improve the website experience.

68%

HTML

<div class="form-survey-card">

  <div class="form-survey-header">

    <div>

      <div class="form-survey-kicker">Survey Form</div>

      <h3 class="form-survey-title">Help us improve your experience</h3>

      <p class="form-survey-text">Answer a few quick questions so we can understand what users need and improve the website experience.</p>

    </div>

    <div class="form-survey-progress">
      <strong>68%</strong>
      <div class="form-survey-bar">
        <span></span>
      </div>
    </div>

  </div>

  <form class="form-survey-form" action="#" method="post">

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">1</span>
        How often do you use this website?
      </h4>

      <div class="form-survey-options">

        <label class="form-survey-option">
          <input type="radio" name="usage" value="daily" checked>
          <span>Daily</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="weekly">
          <span>Weekly</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="monthly">
          <span>Monthly</span>
        </label>

        <label class="form-survey-option">
          <input type="radio" name="usage" value="first-time">
          <span>First time</span>
        </label>

      </div>

    </div>

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">2</span>
        What are you most interested in?
      </h4>

      <div class="form-survey-checklist">

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="css">
          <span>CSS examples</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="ui">
          <span>UI components</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="wordpress">
          <span>WordPress tutorials</span>
        </label>

        <label class="form-survey-check">
          <input type="checkbox" name="interest[]" value="templates">
          <span>Website templates</span>
        </label>

      </div>

    </div>

    <div class="form-survey-question">

      <h4 class="form-survey-question-title">
        <span class="form-survey-question-number">3</span>
        Tell us more
      </h4>

      <div class="form-survey-field">
        <label class="form-survey-label" for="survey-goal">Main goal</label>
        <select class="form-survey-select" id="survey-goal" name="goal">
          <option>Learn modern CSS</option>
          <option>Find ready-to-use examples</option>
          <option>Improve a client website</option>
          <option>Build a new project</option>
        </select>
      </div>

      <div class="form-survey-field">
        <label class="form-survey-label" for="survey-message">Additional comments</label>
        <textarea class="form-survey-textarea" id="survey-message" name="message" placeholder="Share any ideas, problems, or topics you want to see next..."></textarea>
      </div>

    </div>

    <div class="form-survey-footer">

      <p class="form-survey-footer-text">Your answers help us create better examples, guides, and website resources.</p>

      <button class="form-survey-button" type="submit">Submit Survey</button>

    </div>

  </form>

</div>

CSS

.form-survey-card{
width:min(100%,820px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-survey-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-survey-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-survey-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-survey-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#64748b;
}

.form-survey-progress{
min-width:150px;
padding:16px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-survey-progress strong{
display:block;
margin-bottom:8px;
font-size:20px;
line-height:1;
font-weight:950;
color:#0f172a;
}

.form-survey-bar{
height:8px;
border-radius:999px;
background:#e2e8f0;
overflow:hidden;
}

.form-survey-bar span{
display:block;
width:68%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#2563eb,#22c55e);
}

.form-survey-form{
display:grid;
gap:18px;
}

.form-survey-question{
display:grid;
gap:14px;
padding:20px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-survey-question-title{
display:flex;
align-items:flex-start;
gap:10px;
margin:0;
font-size:16px;
line-height:1.4;
font-weight:950;
color:#0f172a;
}

.form-survey-question-number{
width:28px;
height:28px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:10px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:950;
}

.form-survey-options{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.form-survey-option{
position:relative;
cursor:pointer;
}

.form-survey-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-survey-option span{
display:flex;
align-items:center;
min-height:48px;
padding:0 14px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
font-weight:850;
line-height:1.35;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease,transform .22s ease;
}

.form-survey-option input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
transform:translateY(-1px);
}

.form-survey-checklist{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}

.form-survey-check{
display:flex;
align-items:center;
gap:10px;
min-height:48px;
padding:0 14px;
border-radius:15px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
font-weight:850;
line-height:1.35;
cursor:pointer;
box-sizing:border-box;
}

.form-survey-check input{
width:18px;
height:18px;
margin:0;
accent-color:#2563eb;
}

.form-survey-field{
display:grid;
gap:8px;
}

.form-survey-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-survey-select,
.form-survey-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-survey-select{
min-height:50px;
padding:0 38px 0 14px;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-survey-textarea{
min-height:126px;
resize:vertical;
padding:13px 14px;
}

.form-survey-textarea::placeholder{
color:#94a3b8;
}

.form-survey-select:focus,
.form-survey-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-survey-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:18px;
border-radius:22px;
background:#0f172a;
}

.form-survey-footer-text{
margin:0;
font-size:14px;
line-height:1.6;
color:#cbd5e1;
}

.form-survey-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 20px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:14px;
font-weight:950;
cursor:pointer;
white-space:nowrap;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-survey-button:hover,
.form-survey-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.06);
outline:none;
}

@media (max-width: 760px){
.form-survey-card{
padding:24px;
border-radius:24px;
}

.form-survey-header{
grid-template-columns:1fr;
}

.form-survey-progress{
min-width:0;
width:100%;
}

.form-survey-options,
.form-survey-checklist{
grid-template-columns:1fr;
}

.form-survey-footer{
align-items:stretch;
flex-direction:column;
}

.form-survey-button{
width:100%;
}

.form-survey-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-survey-question{
padding:16px;
border-radius:20px;
}
}

This survey form is useful when you need more structured answers than a simple feedback form can provide. The grouped questions make the form easier to scan, while the mix of radio buttons, checkboxes, dropdowns, and open comments gives users different ways to respond.

Use this pattern for customer surveys, user research, product feedback, website improvement forms, audience research, onboarding questionnaires, and internal company surveys.

19. File Upload Form

A file upload form is useful when users need to send documents, images, screenshots, resumes, invoices, project files, design assets, support attachments, or custom request files. It is commonly used on support pages, job application forms, quote request forms, client portals, order forms, and service websites.

This example uses a modern upload card with contact fields, a message area, and a styled file upload zone. The upload area is designed to feel clear and inviting, while the rest of the form stays simple and easy to complete.

Perfect for support forms, job applications, quote requests, and client portals
Includes name, email, project type, message, and file upload fields
Uses a modern dashed upload area
Stacks cleanly on mobile screens
Works with HTML and CSS only

File Upload Form

Send files with your request

Use this form when users need to upload documents, screenshots, project files, or other attachments.

25MB Max file

HTML

<div class="form-upload-card">

  <div class="form-upload-header">

    <div>

      <div class="form-upload-kicker">File Upload Form</div>

      <h3 class="form-upload-title">Send files with your request</h3>

      <p class="form-upload-text">Use this form when users need to upload documents, screenshots, project files, or other attachments.</p>

    </div>

    <div class="form-upload-badge">
      <strong>25MB</strong>
      <span>Max file</span>
    </div>

  </div>

  <form class="form-upload-form" action="#" method="post" enctype="multipart/form-data">

    <div class="form-upload-grid">

      <div class="form-upload-field">
        <label class="form-upload-label" for="upload-name">Full name</label>
        <input class="form-upload-input" id="upload-name" type="text" name="name" placeholder="Your name">
      </div>

      <div class="form-upload-field">
        <label class="form-upload-label" for="upload-email">Email address</label>
        <input class="form-upload-input" id="upload-email" type="email" name="email" placeholder="you@example.com">
      </div>

      <div class="form-upload-field form-upload-field-full">
        <label class="form-upload-label" for="upload-type">Request type</label>
        <select class="form-upload-select" id="upload-type" name="request_type">
          <option>Support attachment</option>
          <option>Project files</option>
          <option>Job application</option>
          <option>Invoice or document</option>
        </select>
      </div>

      <div class="form-upload-field form-upload-field-full">
        <label class="form-upload-label" for="upload-message">Message</label>
        <textarea class="form-upload-textarea" id="upload-message" name="message" placeholder="Write a short message about the uploaded file..."></textarea>
      </div>

    </div>

    <div class="form-upload-zone">

      <div class="form-upload-icon">↑</div>

      <p class="form-upload-zone-title">Upload your file</p>

      <p class="form-upload-zone-text">Choose a PDF, image, document, ZIP file, or screenshot from your device.</p>

      <input class="form-upload-file" type="file" name="attachment" id="upload-file">

    </div>

    <div class="form-upload-help">
      <span class="form-upload-help-icon">i</span>
      <span>For real websites, validate file type and size on the server before saving or sending uploaded files.</span>
    </div>

    <button class="form-upload-button" type="submit">Submit File Request</button>

  </form>

</div>

CSS

.form-upload-card{
width:min(100%,780px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-upload-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:18px;
align-items:start;
margin-bottom:24px;
}

.form-upload-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-upload-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-upload-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#64748b;
}

.form-upload-badge{
display:grid;
place-items:center;
min-width:112px;
min-height:92px;
padding:14px;
border-radius:24px;
background:#f8fafc;
border:1px solid #e2e8f0;
text-align:center;
}

.form-upload-badge strong{
display:block;
font-size:24px;
line-height:1;
font-weight:950;
color:#0ea5e9;
}

.form-upload-badge span{
display:block;
margin-top:7px;
font-size:12px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
color:#64748b;
}

.form-upload-form{
display:grid;
gap:20px;
}

.form-upload-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-upload-field{
display:grid;
gap:8px;
}

.form-upload-field-full{
grid-column:1 / -1;
}

.form-upload-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-upload-input,
.form-upload-select,
.form-upload-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-upload-input,
.form-upload-select{
min-height:50px;
padding:0 14px;
}

.form-upload-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-upload-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-upload-input::placeholder,
.form-upload-textarea::placeholder{
color:#94a3b8;
}

.form-upload-input:focus,
.form-upload-select:focus,
.form-upload-textarea:focus{
border-color:#0ea5e9;
box-shadow:0 0 0 4px rgba(14,165,233,.13);
background:#ffffff;
}

.form-upload-zone{
display:grid;
place-items:center;
gap:12px;
padding:28px;
border-radius:22px;
border:2px dashed #bae6fd;
background:
linear-gradient(180deg,rgba(240,249,255,.92),rgba(255,255,255,.92));
text-align:center;
transition:border-color .22s ease,background .22s ease,box-shadow .22s ease;
}

.form-upload-zone:hover{
border-color:#0ea5e9;
box-shadow:0 18px 46px rgba(14,165,233,.12);
}

.form-upload-icon{
width:54px;
height:54px;
display:grid;
place-items:center;
border-radius:20px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-size:24px;
font-weight:950;
box-shadow:0 16px 34px rgba(14,165,233,.22);
}

.form-upload-zone-title{
margin:0;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-upload-zone-text{
margin:0;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-upload-file{
width:100%;
max-width:360px;
padding:12px;
border-radius:14px;
background:#ffffff;
border:1px solid #dbe3ef;
color:#475569;
font-size:14px;
box-sizing:border-box;
}

.form-upload-help{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-upload-help-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#e0f2fe;
color:#0369a1;
font-size:13px;
font-weight:950;
}

.form-upload-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#0ea5e9,#8b5cf6);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(14,165,233,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-upload-button:hover,
.form-upload-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(139,92,246,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-upload-card{
padding:24px;
border-radius:24px;
}

.form-upload-header{
grid-template-columns:1fr;
}

.form-upload-badge{
width:100%;
}

.form-upload-grid{
grid-template-columns:1fr;
}

.form-upload-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-upload-zone{
padding:22px;
}
}

This file upload form is useful when a normal contact form is not enough and users need to attach supporting files. The upload zone makes the attachment field easier to notice, while the rest of the form collects the context needed to understand the file.

Use this pattern for job application forms, support request forms, project inquiry forms, client portals, order customization forms, invoice submissions, and document upload pages.

20. Floating Label Form

A floating label form is a modern form pattern where the label moves above the input text when the user focuses the field or enters content. It creates a clean interface while still keeping labels visible, which is better than relying only on placeholder text.

This example uses floating labels for name, email, phone, subject, and message fields. The layout is compact, polished, and useful for contact forms, signup forms, quote request forms, app forms, and modern landing page forms.

Perfect for modern contact forms, signup forms, and quote forms
Uses CSS-only floating label behavior
Keeps labels visible after users start typing
Includes focus states and responsive spacing
Works with HTML and CSS only

Floating Labels

A cleaner form interaction

Floating labels keep the form compact while still showing users what each field means after they start typing.

HTML

<div class="form-floating-card">

  <div class="form-floating-header">

    <div class="form-floating-kicker">Floating Labels</div>

    <h3 class="form-floating-title">A cleaner <span>form interaction</span></h3>

    <p class="form-floating-text">Floating labels keep the form compact while still showing users what each field means after they start typing.</p>

  </div>

  <form class="form-floating-form" action="#" method="post">

    <div class="form-floating-grid">

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-name" type="text" name="name" placeholder=" ">
        <label class="form-floating-label" for="floating-name">Full name</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-email" type="email" name="email" placeholder=" ">
        <label class="form-floating-label" for="floating-email">Email address</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-phone" type="tel" name="phone" placeholder=" ">
        <label class="form-floating-label" for="floating-phone">Phone number</label>
      </div>

      <div class="form-floating-field">
        <input class="form-floating-input" id="floating-subject" type="text" name="subject" placeholder=" ">
        <label class="form-floating-label" for="floating-subject">Subject</label>
      </div>

      <div class="form-floating-field form-floating-field-full">
        <textarea class="form-floating-textarea" id="floating-message" name="message" placeholder=" "></textarea>
        <label class="form-floating-label" for="floating-message">Your message</label>
      </div>

    </div>

    <div class="form-floating-helper">
      <span class="form-floating-helper-icon">i</span>
      <span>Floating labels work best when inputs still have enough vertical space and the label remains easy to read.</span>
    </div>

    <label class="form-floating-consent">
      <input type="checkbox" name="consent">
      <span>I agree to be contacted about this request.</span>
    </label>

    <button class="form-floating-button" type="submit">Send Message</button>

  </form>

</div>

CSS

.form-floating-card{
width:min(100%,700px);
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-floating-header{
text-align:center;
margin-bottom:26px;
}

.form-floating-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(34,211,238,.14);
border:1px solid rgba(34,211,238,.28);
color:#67e8f9;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-floating-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,46px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-floating-title span{
background:linear-gradient(90deg,#22d3ee,#a855f7,#f472b6) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-floating-text{
margin:0 auto;
max-width:560px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-floating-form{
display:grid;
gap:18px;
}

.form-floating-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-floating-field{
position:relative;
}

.form-floating-field-full{
grid-column:1 / -1;
}

.form-floating-input,
.form-floating-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background:rgba(15,23,42,.70);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-floating-input{
height:58px;
padding:22px 15px 8px;
}

.form-floating-textarea{
min-height:142px;
resize:vertical;
padding:24px 15px 12px;
}

.form-floating-label{
position:absolute;
left:15px;
top:18px;
font-size:15px;
line-height:1;
font-weight:750;
color:#94a3b8;
pointer-events:none;
transition:transform .18s ease,font-size .18s ease,color .18s ease,top .18s ease;
}

.form-floating-input:focus,
.form-floating-textarea:focus{
border-color:#22d3ee;
box-shadow:0 0 0 4px rgba(34,211,238,.14);
background:rgba(15,23,42,.94);
}

.form-floating-input:focus + .form-floating-label,
.form-floating-input:not(:placeholder-shown) + .form-floating-label,
.form-floating-textarea:focus + .form-floating-label,
.form-floating-textarea:not(:placeholder-shown) + .form-floating-label{
top:9px;
font-size:11px;
color:#67e8f9;
letter-spacing:.04em;
text-transform:uppercase;
}

.form-floating-helper{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-floating-helper-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,211,238,.14);
color:#67e8f9;
font-size:13px;
font-weight:950;
}

.form-floating-consent{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-floating-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22d3ee;
}

.form-floating-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#22d3ee,#a855f7);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(34,211,238,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-floating-button:hover,
.form-floating-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(168,85,247,.28);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-floating-card{
padding:24px;
border-radius:24px;
}

.form-floating-grid{
grid-template-columns:1fr;
}

.form-floating-title{
font-size:32px;
}
}

This floating label form is useful when you want a modern input style without hiding field meaning after users start typing. The labels move above the typed value, which keeps the form compact while preserving clarity.

Use this pattern for contact forms, login forms, signup forms, quote forms, SaaS forms, app interfaces, and landing page lead forms where a polished input interaction can improve the user experience.

21. Glassmorphism Form

A glassmorphism form uses translucent backgrounds, soft blur, subtle borders, and layered gradients to create a modern glass-like interface. This style is popular in landing pages, SaaS websites, login screens, app interfaces, portfolio websites, and futuristic UI designs.

This example uses a blurred glass card with a colorful background, modern input fields, a service selector, message field, consent checkbox, and a strong gradient button. The form is decorative but still keeps labels, spacing, and focus states clear.

Perfect for modern landing pages, SaaS websites, portfolios, and app interfaces
Uses translucent glass card styling with blur
Includes labels, focus states, and responsive layout
Works well on colorful gradient backgrounds
Uses HTML and CSS only

Glassmorphism Form

Start a modern project

A translucent glass-style form with soft blur, subtle borders, and a colorful modern background.

HTML

<div class="form-glass-card">

  <div class="form-glass-inner">

    <div class="form-glass-header">

      <div class="form-glass-kicker">Glassmorphism Form</div>

      <h3 class="form-glass-title">Start a <span>modern project</span></h3>

      <p class="form-glass-text">A translucent glass-style form with soft blur, subtle borders, and a colorful modern background.</p>

    </div>

    <form class="form-glass-form" action="#" method="post">

      <div class="form-glass-grid">

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-name">Full name</label>
          <input class="form-glass-input" id="glass-name" type="text" name="name" placeholder="Your name">
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-email">Email address</label>
          <input class="form-glass-input" id="glass-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-service">Project type</label>
          <select class="form-glass-select" id="glass-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Dashboard UI</option>
            <option>Mobile app UI</option>
          </select>
        </div>

        <div class="form-glass-field">
          <label class="form-glass-label" for="glass-budget">Budget range</label>
          <select class="form-glass-select" id="glass-budget" name="budget">
            <option>$1,000 - $3,000</option>
            <option>$3,000 - $5,000</option>
            <option>$5,000 - $10,000</option>
            <option>$10,000+</option>
          </select>
        </div>

        <div class="form-glass-field form-glass-field-full">
          <label class="form-glass-label" for="glass-message">Project message</label>
          <textarea class="form-glass-textarea" id="glass-message" name="message" placeholder="Tell us about your project idea..."></textarea>
        </div>

      </div>

      <label class="form-glass-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this project request.</span>
      </label>

      <button class="form-glass-button" type="submit">Send Project Request</button>

      <p class="form-glass-note">Glassmorphism works best when the background has enough contrast and the form text remains readable.</p>

    </form>

  </div>

</div>

CSS

.form-glass-card{
position:relative;
z-index:2;
width:min(100%,720px);
padding:32px;
border-radius:32px;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 32px 100px rgba(0,0,0,.42);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
}

.form-glass-card::before{
content:"";
position:absolute;
inset:1px;
border-radius:31px;
background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
pointer-events:none;
}

.form-glass-inner{
position:relative;
z-index:2;
}

.form-glass-header{
text-align:center;
margin-bottom:26px;
}

.form-glass-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-glass-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,48px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-glass-title span{
background:linear-gradient(90deg,#67e8f9,#f9a8d4,#fde68a) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-glass-text{
margin:0 auto;
max-width:560px;
font-size:15px;
line-height:1.75;
color:#e2e8f0;
}

.form-glass-form{
display:grid;
gap:18px;
}

.form-glass-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-glass-field{
display:grid;
gap:8px;
}

.form-glass-field-full{
grid-column:1 / -1;
}

.form-glass-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-glass-input,
.form-glass-select,
.form-glass-textarea{
width:100%;
border:1px solid rgba(255,255,255,.22);
border-radius:16px;
background:rgba(255,255,255,.12);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-glass-input,
.form-glass-select{
min-height:52px;
padding:0 15px;
}

.form-glass-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#ffffff 50%),linear-gradient(135deg,#ffffff 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-glass-select option{
color:#0f172a;
}

.form-glass-textarea{
min-height:130px;
resize:vertical;
padding:13px 15px;
}

.form-glass-input::placeholder,
.form-glass-textarea::placeholder{
color:rgba(226,232,240,.76);
}

.form-glass-input:focus,
.form-glass-select:focus,
.form-glass-textarea:focus{
border-color:#67e8f9;
box-shadow:0 0 0 4px rgba(103,232,249,.14);
background:rgba(255,255,255,.16);
}

.form-glass-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.14);
font-size:14px;
line-height:1.55;
color:#e2e8f0;
}

.form-glass-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22d3ee;
}

.form-glass-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#22d3ee,#ec4899,#f59e0b);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(236,72,153,.28);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-glass-button:hover,
.form-glass-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,211,238,.30);
filter:saturate(1.08);
outline:none;
}

.form-glass-note{
margin:0;
font-size:13px;
line-height:1.55;
text-align:center;
color:#cbd5e1;
}

@media (max-width: 720px){
.form-glass-card{
padding:24px;
border-radius:26px;
}

.form-glass-card::before{
border-radius:25px;
}

.form-glass-grid{
grid-template-columns:1fr;
}

.form-glass-title{
font-size:32px;
}
}

@media (max-width: 480px){
.form-glass-card{
padding:22px;
}
}

This glassmorphism form is useful when you want a modern, premium, and visually rich design. The translucent form card works best on colorful backgrounds, but the labels, input contrast, and focus states should always remain readable.

Use this pattern for SaaS landing pages, app interfaces, startup websites, portfolio contact sections, login screens, lead forms, and futuristic website designs.

22. Dark Mode Form

A dark mode form is designed for websites, dashboards, apps, and landing pages that use a dark interface. A good dark form should not simply invert colors. It needs readable contrast, clear labels, visible borders, accessible focus states, and a button that stands out from the background.

This example uses a dark card layout with clean input fields, subtle borders, a plan selector, message textarea, notification preference toggle, and a bright call-to-action button. It is practical for SaaS dashboards, app settings, login screens, and dark landing page forms.

Perfect for dashboards, SaaS apps, dark landing pages, and account interfaces
Uses high-contrast labels and readable dark inputs
Includes select field, textarea, checkbox, and toggle-style options
Includes strong focus states for usability
Works with HTML and CSS only

D DarkForm Modern dashboard form UI

Online

Dark Mode Form

Update your account details

A clean dark mode form with readable labels, strong contrast, and clear focus states.

HTML

<div class="form-dark-shell">

  <div class="form-dark-header">

    <div class="form-dark-brand">
      <span class="form-dark-brand-icon">D</span>
      <span class="form-dark-brand-text">
        <strong>DarkForm</strong>
        <span>Modern dashboard form UI</span>
      </span>
    </div>

    <div class="form-dark-status">
      <span class="form-dark-status-dot"></span>
      Online
    </div>

  </div>

  <div class="form-dark-card">

    <div class="form-dark-card-header">

      <div class="form-dark-kicker">Dark Mode Form</div>

      <h3 class="form-dark-title">Update your account details</h3>

      <p class="form-dark-text">A clean dark mode form with readable labels, strong contrast, and clear focus states.</p>

    </div>

    <form class="form-dark-form" action="#" method="post">

      <div class="form-dark-grid">

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-name">Full name</label>
          <input class="form-dark-input" id="dark-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-email">Email address</label>
          <input class="form-dark-input" id="dark-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-role">Role</label>
          <select class="form-dark-select" id="dark-role" name="role">
            <option>Designer</option>
            <option>Developer</option>
            <option>Founder</option>
            <option>Marketing manager</option>
          </select>
        </div>

        <div class="form-dark-field">
          <label class="form-dark-label" for="dark-plan">Plan</label>
          <select class="form-dark-select" id="dark-plan" name="plan">
            <option>Starter</option>
            <option>Professional</option>
            <option>Business</option>
            <option>Enterprise</option>
          </select>
        </div>

        <div class="form-dark-field form-dark-field-full">
          <label class="form-dark-label" for="dark-message">Bio or message</label>
          <textarea class="form-dark-textarea" id="dark-message" name="message" placeholder="Write a short account bio or message..."></textarea>
        </div>

      </div>

      <div class="form-dark-field">
        <label class="form-dark-label">Notifications</label>

        <div class="form-dark-options">

          <label class="form-dark-option">
            <input type="radio" name="notifications" value="email" checked>
            <span>Email updates</span>
          </label>

          <label class="form-dark-option">
            <input type="radio" name="notifications" value="none">
            <span>No notifications</span>
          </label>

        </div>

      </div>

      <label class="form-dark-check">
        <input type="checkbox" name="terms">
        <span>I agree to receive important account updates and security notifications.</span>
      </label>

      <button class="form-dark-button" type="submit">Save Changes</button>

    </form>

  </div>

</div>

CSS

.form-dark-shell{
width:min(100%,760px);
display:grid;
gap:20px;
}

.form-dark-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:22px;
border-radius:26px;
background:rgba(15,23,42,.72);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 20px 60px rgba(0,0,0,.26);
}

.form-dark-brand{
display:flex;
align-items:center;
gap:12px;
min-width:0;
}

.form-dark-brand-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(37,99,235,.24);
}

.form-dark-brand-text{
min-width:0;
}

.form-dark-brand-text strong{
display:block;
font-size:18px;
line-height:1.25;
font-weight:950;
color:#ffffff;
}

.form-dark-brand-text span{
display:block;
margin-top:3px;
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.form-dark-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.26);
color:#86efac;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-dark-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.form-dark-card{
padding:30px;
border-radius:30px;
background:rgba(15,23,42,.88);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 30px 90px rgba(0,0,0,.42);
}

.form-dark-card-header{
margin-bottom:24px;
}

.form-dark-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(37,99,235,.14);
border:1px solid rgba(37,99,235,.28);
color:#93c5fd;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-dark-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-dark-text{
margin:0;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-dark-form{
display:grid;
gap:18px;
}

.form-dark-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-dark-field{
display:grid;
gap:8px;
}

.form-dark-field-full{
grid-column:1 / -1;
}

.form-dark-label{
font-size:13px;
font-weight:850;
color:#e2e8f0;
}

.form-dark-input,
.form-dark-select,
.form-dark-textarea{
width:100%;
border:1px solid rgba(148,163,184,.24);
border-radius:15px;
background:#020617;
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-dark-input,
.form-dark-select{
min-height:50px;
padding:0 14px;
}

.form-dark-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-dark-select option{
color:#0f172a;
}

.form-dark-textarea{
min-height:120px;
resize:vertical;
padding:13px 14px;
}

.form-dark-input::placeholder,
.form-dark-textarea::placeholder{
color:#64748b;
}

.form-dark-input:focus,
.form-dark-select:focus,
.form-dark-textarea:focus{
border-color:#60a5fa;
box-shadow:0 0 0 4px rgba(96,165,250,.14);
background:#020617;
}

.form-dark-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-dark-option{
position:relative;
cursor:pointer;
}

.form-dark-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-dark-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#020617;
border:1px solid rgba(148,163,184,.24);
color:#94a3b8;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-dark-option input:checked + span{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
background:rgba(34,197,94,.10);
color:#bbf7d0;
}

.form-dark-check{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#020617;
border:1px solid rgba(148,163,184,.18);
font-size:14px;
line-height:1.55;
color:#cbd5e1;
}

.form-dark-check input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#22c55e;
}

.form-dark-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-dark-button:hover,
.form-dark-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 720px){
.form-dark-header{
align-items:flex-start;
flex-direction:column;
}

.form-dark-card{
padding:24px;
border-radius:24px;
}

.form-dark-grid,
.form-dark-options{
grid-template-columns:1fr;
}

.form-dark-title{
font-size:32px;
}
}

This dark mode form is useful when the surrounding interface already uses a dark visual style. The key is to keep enough contrast between labels, inputs, borders, placeholder text, and buttons so the form remains easy to use.

Use this pattern for dashboards, SaaS settings pages, account forms, dark landing pages, app interfaces, admin panels, profile forms, and modern login or signup screens.

23. Gradient Form Design

A gradient form design uses modern color transitions to make a form section feel more energetic, branded, and visually memorable. Gradients are useful for landing pages, SaaS websites, lead forms, signup forms, contact sections, product pages, and marketing campaigns.

This example combines a bright gradient background with a clean white form card. The form includes name, email, company, project type, message, and consent fields. The layout stays professional while the surrounding gradient gives the section a stronger visual impact.

Perfect for landing pages, SaaS websites, lead forms, and marketing campaigns
Uses a colorful gradient background with a clean form card
Includes clear labels, focus states, and responsive spacing
Works well for contact, quote, and signup forms
Uses HTML and CSS only

Gradient Form

Build a brighter lead form

Use a strong gradient section when you want your form to stand out on a landing page, service page, or marketing campaign.

✓ Strong visual impact
✓ Clear white form card
✓ Responsive two-column layout

Request project details

Tell us what you want to build and we will send the next steps.

HTML

<div class="form-gradient-wrap">

  <div class="form-gradient-content">

    <div class="form-gradient-kicker">Gradient Form</div>

    <h3 class="form-gradient-title">Build a brighter lead form</h3>

    <p class="form-gradient-text">Use a strong gradient section when you want your form to stand out on a landing page, service page, or marketing campaign.</p>

    <ul class="form-gradient-points">
      <li><span class="form-gradient-check">✓</span> Strong visual impact</li>
      <li><span class="form-gradient-check">✓</span> Clear white form card</li>
      <li><span class="form-gradient-check">✓</span> Responsive two-column layout</li>
    </ul>

  </div>

  <div class="form-gradient-card">

    <div class="form-gradient-card-header">
      <h3 class="form-gradient-card-title">Request project details</h3>
      <p class="form-gradient-card-text">Tell us what you want to build and we will send the next steps.</p>
    </div>

    <form class="form-gradient-form" action="#" method="post">

      <div class="form-gradient-grid">

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-name">Full name</label>
          <input class="form-gradient-input" id="gradient-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-email">Email address</label>
          <input class="form-gradient-input" id="gradient-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-company">Company</label>
          <input class="form-gradient-input" id="gradient-company" type="text" name="company" placeholder="Your company">
        </div>

        <div class="form-gradient-field">
          <label class="form-gradient-label" for="gradient-type">Project type</label>
          <select class="form-gradient-select" id="gradient-type" name="project_type">
            <option>Landing page</option>
            <option>Website redesign</option>
            <option>Online store</option>
            <option>Custom UI project</option>
          </select>
        </div>

        <div class="form-gradient-field form-gradient-field-full">
          <label class="form-gradient-label" for="gradient-message">Project message</label>
          <textarea class="form-gradient-textarea" id="gradient-message" name="message" placeholder="Describe your project, goals, timeline, and main requirements..."></textarea>
        </div>

      </div>

      <label class="form-gradient-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this project request.</span>
      </label>

      <button class="form-gradient-button" type="submit">Send Request</button>

    </form>

  </div>

</div>

CSS

.form-gradient-wrap{
position:relative;
z-index:2;
width:min(100%,960px);
display:grid;
grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);
gap:24px;
align-items:center;
}

.form-gradient-content{
color:#ffffff;
}

.form-gradient-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
backdrop-filter:blur(12px);
}

.form-gradient-title{
margin:0 0 16px;
font-size:clamp(34px,5vw,58px);
line-height:1.02;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-gradient-text{
margin:0 0 24px;
max-width:520px;
font-size:16px;
line-height:1.8;
color:rgba(255,255,255,.86);
}

.form-gradient-points{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-gradient-points li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-gradient-check{
width:24px;
height:24px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(255,255,255,.18);
border:1px solid rgba(255,255,255,.28);
font-size:13px;
font-weight:950;
}

.form-gradient-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.28);
box-shadow:0 30px 90px rgba(15,23,42,.24);
}

.form-gradient-card-header{
margin-bottom:24px;
}

.form-gradient-card-title{
margin:0 0 9px;
font-size:30px;
line-height:1.1;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-gradient-card-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-gradient-form{
display:grid;
gap:18px;
}

.form-gradient-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-gradient-field{
display:grid;
gap:8px;
}

.form-gradient-field-full{
grid-column:1 / -1;
}

.form-gradient-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-gradient-input,
.form-gradient-select,
.form-gradient-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-gradient-input,
.form-gradient-select{
min-height:50px;
padding:0 14px;
}

.form-gradient-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-gradient-textarea{
min-height:126px;
resize:vertical;
padding:13px 14px;
}

.form-gradient-input::placeholder,
.form-gradient-textarea::placeholder{
color:#94a3b8;
}

.form-gradient-input:focus,
.form-gradient-select:focus,
.form-gradient-textarea:focus{
border-color:#7c3aed;
box-shadow:0 0 0 4px rgba(124,58,237,.12);
background:#ffffff;
}

.form-gradient-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-gradient-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#7c3aed;
}

.form-gradient-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#7c3aed,#ec4899);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(124,58,237,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-gradient-button:hover,
.form-gradient-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(236,72,153,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 900px){
.form-gradient-wrap{
grid-template-columns:1fr;
}

.form-gradient-card{
max-width:620px;
width:100%;
margin:0 auto;
}

.form-gradient-title{
font-size:38px;
}
}

@media (max-width: 640px){
.form-gradient-card{
padding:24px;
border-radius:24px;
}

.form-gradient-grid{
grid-template-columns:1fr;
}

.form-gradient-title{
font-size:32px;
}

.form-gradient-card-title{
font-size:28px;
}
}

This gradient form design is useful when you want a form section to feel more like a landing page block instead of a plain form card. The gradient creates visual energy, while the white card keeps the fields readable and practical.

Use this pattern for lead generation pages, SaaS landing pages, marketing campaigns, service websites, quote request sections, contact pages, and modern homepage call-to-action areas.

24. Split Screen Login Form

A split screen login form combines an authentication form with a visual or marketing panel. This layout works well when the login page should do more than show fields. It can reinforce brand identity, explain product benefits, show a short message, or create a more premium first impression.

This example uses a two-column layout with a dark visual panel on the left and a clean login card on the right. On mobile, the layout stacks into a single column so the login form stays easy to use.

Perfect for SaaS login pages, dashboards, web apps, and account portals
Combines a visual brand panel with a login form
Includes email, password, remember-me, and forgot-password options
Stacks cleanly on mobile screens
Uses HTML and CSS only

HTML

<div class="form-split-login-layout">

  <div class="form-split-login-panel">

    <div class="form-split-login-panel-inner">

      <div class="form-split-login-brand">
        <span class="form-split-login-brand-icon">S</span>
        <span>SecureSuite</span>
      </div>

      <div class="form-split-login-panel-content">

        <div class="form-split-login-kicker">Welcome Back</div>

        <h3 class="form-split-login-heading">Access your dashboard with confidence</h3>

        <p class="form-split-login-copy">A split screen login layout gives the sign-in page more brand presence and helps explain the product value.</p>

        <ul class="form-split-login-list">
          <li><span class="form-split-login-check">✓</span> Secure account access</li>
          <li><span class="form-split-login-check">✓</span> Fast dashboard login</li>
          <li><span class="form-split-login-check">✓</span> Clean responsive layout</li>
        </ul>

      </div>

      <div class="form-split-login-testimonial">
        <p>“This dashboard helps our team manage projects, clients, and reports from one place.”</p>
        <strong>Product Team</strong>
      </div>

    </div>

  </div>

  <div class="form-split-login-form-side">

    <div class="form-split-login-card">

      <div class="form-split-login-form-header">
        <h3 class="form-split-login-form-title">Sign in</h3>
        <p class="form-split-login-form-text">Enter your details to continue to your account.</p>
      </div>

      <form class="form-split-login-form" action="#" method="post">

        <div class="form-split-login-field">
          <label class="form-split-login-label" for="split-login-email">Email address</label>
          <input class="form-split-login-input" id="split-login-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-split-login-field">
          <label class="form-split-login-label" for="split-login-password">Password</label>
          <input class="form-split-login-input" id="split-login-password" type="password" name="password" placeholder="Enter your password">
        </div>

        <div class="form-split-login-options">

          <label class="form-split-login-check-label">
            <input type="checkbox" name="remember">
            <span>Remember me</span>
          </label>

          <a class="form-split-login-link" href="#">Forgot password?</a>

        </div>

        <button class="form-split-login-button" type="submit">Sign In</button>

        <div class="form-split-login-divider">or</div>

        <a class="form-split-login-secondary" href="#">Continue with Google</a>

      </form>

      <p class="form-split-login-signup">New here? <a href="#">Create an account</a></p>

    </div>

  </div>

</div>

CSS

.form-split-login-layout{
width:min(100%,980px);
display:grid;
grid-template-columns:minmax(300px,.92fr) minmax(0,1.08fr);
overflow:hidden;
border-radius:32px;
background:#ffffff;
border:1px solid rgba(15,23,42,.08);
box-shadow:0 30px 90px rgba(15,23,42,.16);
}

.form-split-login-panel{
position:relative;
min-height:620px;
padding:34px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
background:#0f172a;
}

.form-split-login-panel::before{
content:"";
position:absolute;
width:360px;
height:360px;
right:-150px;
top:-140px;
border-radius:999px;
background:radial-gradient(circle,rgba(37,99,235,.56),transparent 68%);
pointer-events:none;
}

.form-split-login-panel::after{
content:"";
position:absolute;
width:340px;
height:340px;
left:-150px;
bottom:-150px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.38),transparent 70%);
pointer-events:none;
}

.form-split-login-panel-inner{
position:relative;
z-index:2;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:28px;
}

.form-split-login-brand{
display:flex;
align-items:center;
gap:12px;
color:#ffffff;
font-size:19px;
font-weight:950;
letter-spacing:-.03em;
}

.form-split-login-brand-icon{
width:46px;
height:46px;
display:grid;
place-items:center;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
box-shadow:0 16px 36px rgba(37,99,235,.26);
color:#ffffff;
font-size:18px;
font-weight:950;
}

.form-split-login-panel-content{
max-width:380px;
}

.form-split-login-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-split-login-heading{
margin:0 0 14px;
font-size:clamp(32px,4vw,48px);
line-height:1.04;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-split-login-copy{
margin:0 0 20px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-split-login-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-split-login-list li{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
font-weight:850;
color:#ffffff;
}

.form-split-login-check{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.16);
border:1px solid rgba(34,197,94,.30);
color:#86efac;
font-size:13px;
font-weight:950;
}

.form-split-login-testimonial{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
}

.form-split-login-testimonial p{
margin:0 0 12px;
font-size:14px;
line-height:1.7;
color:#e2e8f0;
}

.form-split-login-testimonial strong{
display:block;
font-size:13px;
line-height:1.4;
font-weight:950;
color:#ffffff;
}

.form-split-login-form-side{
display:grid;
place-items:center;
padding:42px;
background:#ffffff;
}

.form-split-login-card{
width:min(100%,420px);
}

.form-split-login-form-header{
margin-bottom:24px;
}

.form-split-login-form-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-split-login-form-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-split-login-form{
display:grid;
gap:16px;
}

.form-split-login-field{
display:grid;
gap:8px;
}

.form-split-login-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-split-login-input{
width:100%;
min-height:52px;
padding:0 15px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-split-login-input::placeholder{
color:#94a3b8;
}

.form-split-login-input:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-split-login-options{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}

.form-split-login-check-label{
display:flex;
align-items:center;
gap:9px;
font-size:14px;
line-height:1.4;
color:#64748b;
cursor:pointer;
}

.form-split-login-check-label input{
width:17px;
height:17px;
margin:0;
accent-color:#2563eb;
}

.form-split-login-link{
font-size:14px;
font-weight:850;
color:#2563eb;
text-decoration:none;
}

.form-split-login-link:hover,
.form-split-login-link:focus{
text-decoration:underline;
outline:none;
}

.form-split-login-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:54px;
border:0;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-split-login-button:hover,
.form-split-login-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.24);
filter:saturate(1.06);
outline:none;
}

.form-split-login-divider{
display:flex;
align-items:center;
gap:12px;
color:#94a3b8;
font-size:13px;
font-weight:850;
}

.form-split-login-divider::before,
.form-split-login-divider::after{
content:"";
height:1px;
flex:1;
background:#e2e8f0;
}

.form-split-login-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:52px;
border:1px solid #dbe3ef;
border-radius:16px;
background:#ffffff;
color:#0f172a;
font-size:15px;
font-weight:900;
text-decoration:none;
transition:background .22s ease,border-color .22s ease,transform .22s ease;
}

.form-split-login-secondary:hover,
.form-split-login-secondary:focus{
background:#f8fafc;
border-color:#cbd5e1;
transform:translateY(-1px);
outline:none;
}

.form-split-login-signup{
margin:18px 0 0;
text-align:center;
font-size:14px;
line-height:1.6;
color:#64748b;
}

.form-split-login-signup a{
font-weight:950;
color:#2563eb;
text-decoration:none;
}

.form-split-login-signup a:hover,
.form-split-login-signup a:focus{
text-decoration:underline;
outline:none;
}

@media (max-width: 900px){
.form-split-login-layout{
grid-template-columns:1fr;
}

.form-split-login-panel{
min-height:430px;
}

.form-split-login-form-side{
padding:34px;
}
}

@media (max-width: 560px){
.form-split-login-layout{
border-radius:24px;
}

.form-split-login-panel,
.form-split-login-form-side{
padding:24px;
}

.form-split-login-panel{
min-height:390px;
}

.form-split-login-options{
align-items:flex-start;
flex-direction:column;
gap:10px;
}

.form-split-login-form-title{
font-size:32px;
}

.form-split-login-heading{
font-size:32px;
}
}

This split screen login form is useful when a basic login card feels too plain. The visual panel gives the page more brand personality, while the login form remains simple, focused, and easy to complete.

Use this pattern for SaaS login pages, dashboard authentication screens, web app sign-in pages, account portals, customer areas, membership websites, and startup product pages.

25. Dashboard Settings Form

A dashboard settings form is used inside admin panels, SaaS dashboards, account areas, membership websites, client portals, and web apps. It helps users update account settings, workspace preferences, notification options, privacy settings, billing preferences, or product configuration details.

This example uses a clean dashboard-style layout with a settings sidebar, grouped fields, toggle-style options, select fields, notification preferences, and a save button. The layout is practical for real web app interfaces and admin screens.

Perfect for SaaS dashboards, admin panels, client portals, and account settings pages
Includes grouped sections for profile, workspace, and notifications
Uses toggle-style options and standard form fields
Works well in modern dashboard UI layouts
Uses HTML and CSS only

Dashboard Settings

Manage workspace settings

Update workspace details, preferences, notifications, and account settings in one clean form.

Saved

HTML

<div class="form-settings-shell">

  <aside class="form-settings-sidebar">

    <div class="form-settings-brand">
      <span class="form-settings-brand-icon">S</span>
      <span class="form-settings-brand-text">
        <strong>Settings</strong>
        <span>Workspace control</span>
      </span>
    </div>

    <ul class="form-settings-nav">
      <li><a class="is-active" href="#"><span class="form-settings-nav-dot"></span> General</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Profile</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Security</a></li>
      <li><a href="#"><span class="form-settings-nav-dot"></span> Billing</a></li>
    </ul>

    <div class="form-settings-help">
      Use grouped settings forms to keep dashboard pages easier to scan and update.
    </div>

  </aside>

  <main class="form-settings-main">

    <div class="form-settings-header">

      <div>
        <div class="form-settings-kicker">Dashboard Settings</div>
        <h3 class="form-settings-title">Manage workspace settings</h3>
        <p class="form-settings-text">Update workspace details, preferences, notifications, and account settings in one clean form.</p>
      </div>

      <div class="form-settings-status">
        <span class="form-settings-status-dot"></span>
        Saved
      </div>

    </div>

    <form class="form-settings-form" action="#" method="post">

      <section class="form-settings-section">

        <div class="form-settings-section-head">
          <div>
            <h4 class="form-settings-section-title">Workspace details</h4>
            <p class="form-settings-section-text">Set the basic information for your account or workspace.</p>
          </div>
        </div>

        <div class="form-settings-grid">

          <div class="form-settings-field">
            <label class="form-settings-label" for="settings-workspace">Workspace name</label>
            <input class="form-settings-input" id="settings-workspace" type="text" name="workspace" placeholder="Acme Studio">
          </div>

          <div class="form-settings-field">
            <label class="form-settings-label" for="settings-timezone">Timezone</label>
            <select class="form-settings-select" id="settings-timezone" name="timezone">
              <option>Eastern Time</option>
              <option>Central Time</option>
              <option>Pacific Time</option>
              <option>UTC</option>
            </select>
          </div>

          <div class="form-settings-field form-settings-field-full">
            <label class="form-settings-label" for="settings-description">Workspace description</label>
            <textarea class="form-settings-textarea" id="settings-description" name="description" placeholder="Write a short description for this workspace..."></textarea>
          </div>

        </div>

      </section>

      <section class="form-settings-section">

        <div class="form-settings-section-head">
          <div>
            <h4 class="form-settings-section-title">Notification preferences</h4>
            <p class="form-settings-section-text">Choose what updates should be sent to your team.</p>
          </div>
        </div>

        <div class="form-settings-toggles">

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Email notifications</strong>
              <span>Receive important account updates by email.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="email_notifications" checked>
              <span class="form-settings-slider"></span>
            </span>
          </label>

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Weekly reports</strong>
              <span>Send a weekly performance summary to admins.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="weekly_reports" checked>
              <span class="form-settings-slider"></span>
            </span>
          </label>

          <label class="form-settings-toggle">
            <span class="form-settings-toggle-text">
              <strong>Product updates</strong>
              <span>Notify users about new features and releases.</span>
            </span>
            <span class="form-settings-switch">
              <input type="checkbox" name="product_updates">
              <span class="form-settings-slider"></span>
            </span>
          </label>

        </div>

      </section>

      <div class="form-settings-actions">
        <button class="form-settings-button-secondary" type="button">Cancel</button>
        <button class="form-settings-button-primary" type="submit">Save Settings</button>
      </div>

    </form>

  </main>

</div>

CSS

.form-settings-shell{
width:min(100%,1040px);
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:22px;
align-items:start;
}

.form-settings-sidebar,
.form-settings-main{
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-settings-sidebar{
padding:22px;
position:sticky;
top:20px;
}

.form-settings-brand{
display:flex;
align-items:center;
gap:12px;
padding-bottom:18px;
margin-bottom:18px;
border-bottom:1px solid #e2e8f0;
}

.form-settings-brand-icon{
width:44px;
height:44px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:16px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:18px;
font-weight:950;
box-shadow:0 16px 34px rgba(37,99,235,.22);
}

.form-settings-brand-text strong{
display:block;
font-size:16px;
line-height:1.25;
font-weight:950;
color:#0f172a;
}

.form-settings-brand-text span{
display:block;
margin-top:3px;
font-size:12px;
line-height:1.4;
color:#64748b;
}

.form-settings-nav{
display:grid;
gap:8px;
margin:0;
padding:0;
list-style:none;
}

.form-settings-nav a{
display:flex;
align-items:center;
gap:10px;
min-height:42px;
padding:0 12px;
border-radius:14px;
color:#64748b;
font-size:14px;
font-weight:850;
text-decoration:none;
transition:background .22s ease,color .22s ease;
}

.form-settings-nav a:hover,
.form-settings-nav a:focus{
background:#f8fafc;
color:#0f172a;
outline:none;
}

.form-settings-nav a.is-active{
background:#eff6ff;
color:#1d4ed8;
}

.form-settings-nav-dot{
width:8px;
height:8px;
border-radius:999px;
background:currentColor;
opacity:.7;
}

.form-settings-help{
margin-top:18px;
padding:14px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:13px;
line-height:1.6;
color:#64748b;
}

.form-settings-main{
padding:30px;
}

.form-settings-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
padding-bottom:22px;
margin-bottom:22px;
border-bottom:1px solid #e2e8f0;
}

.form-settings-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-settings-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,44px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-settings-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-settings-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:#f0fdf4;
border:1px solid #bbf7d0;
color:#15803d;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-settings-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.14);
}

.form-settings-form{
display:grid;
gap:20px;
}

.form-settings-section{
display:grid;
gap:16px;
padding:20px;
border-radius:22px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-settings-section-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
}

.form-settings-section-title{
margin:0 0 5px;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#0f172a;
}

.form-settings-section-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-settings-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-settings-field{
display:grid;
gap:8px;
}

.form-settings-field-full{
grid-column:1 / -1;
}

.form-settings-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-settings-input,
.form-settings-select,
.form-settings-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-settings-input,
.form-settings-select{
min-height:50px;
padding:0 14px;
}

.form-settings-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-settings-textarea{
min-height:104px;
resize:vertical;
padding:13px 14px;
}

.form-settings-input::placeholder,
.form-settings-textarea::placeholder{
color:#94a3b8;
}

.form-settings-input:focus,
.form-settings-select:focus,
.form-settings-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-settings-toggles{
display:grid;
gap:10px;
}

.form-settings-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:14px;
border-radius:16px;
background:#ffffff;
border:1px solid #e2e8f0;
}

.form-settings-toggle-text strong{
display:block;
font-size:14px;
line-height:1.35;
font-weight:950;
color:#0f172a;
}

.form-settings-toggle-text span{
display:block;
margin-top:3px;
font-size:13px;
line-height:1.5;
color:#64748b;
}

.form-settings-switch{
position:relative;
display:inline-flex;
width:48px;
height:28px;
flex:0 0 auto;
}

.form-settings-switch input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-settings-slider{
position:absolute;
inset:0;
border-radius:999px;
background:#cbd5e1;
cursor:pointer;
transition:background .22s ease;
}

.form-settings-slider::before{
content:"";
position:absolute;
width:22px;
height:22px;
left:3px;
top:3px;
border-radius:999px;
background:#ffffff;
box-shadow:0 4px 12px rgba(15,23,42,.20);
transition:transform .22s ease;
}

.form-settings-switch input:checked + .form-settings-slider{
background:#22c55e;
}

.form-settings-switch input:checked + .form-settings-slider::before{
transform:translateX(20px);
}

.form-settings-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.form-settings-button-secondary,
.form-settings-button-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-settings-button-secondary{
border:1px solid #dbe3ef;
background:#ffffff;
color:#0f172a;
}

.form-settings-button-secondary:hover,
.form-settings-button-secondary:focus{
transform:translateY(-2px);
background:#f8fafc;
outline:none;
}

.form-settings-button-primary{
border:0;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
box-shadow:0 18px 42px rgba(37,99,235,.22);
}

.form-settings-button-primary:hover,
.form-settings-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
outline:none;
}

@media (max-width: 940px){
.form-settings-shell{
grid-template-columns:1fr;
}

.form-settings-sidebar{
position:relative;
top:auto;
}

.form-settings-nav{
grid-template-columns:repeat(2,minmax(0,1fr));
}

.form-settings-header{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width: 640px){
.form-settings-sidebar,
.form-settings-main{
padding:22px;
border-radius:24px;
}

.form-settings-nav{
grid-template-columns:1fr;
}

.form-settings-grid{
grid-template-columns:1fr;
}

.form-settings-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-settings-button-secondary,
.form-settings-button-primary{
width:100%;
}

.form-settings-title{
font-size:32px;
}
}

This dashboard settings form is useful when a simple card layout is not enough and the form needs to feel like part of a full product interface. The sidebar navigation, grouped sections, toggles, and status badge make the layout feel closer to a real SaaS dashboard.

Use this pattern for admin panels, SaaS dashboards, account settings pages, client portals, workspace settings, notification settings, and web app preference screens.

26. Profile Edit Form

A profile edit form allows users to update personal details, profile photo, public bio, contact information, social links, and account preferences. It is common in membership websites, SaaS apps, dashboards, social platforms, communities, online courses, and client portals.

This example uses a profile card with avatar upload styling, basic information fields, bio textarea, social profile fields, and account visibility options. The layout is clean, responsive, and suitable for modern user account pages.

Perfect for user dashboards, membership sites, communities, and SaaS apps
Includes avatar area, profile fields, bio, and social links
Uses grouped sections for easier scanning
Includes visibility preference options
Uses HTML and CSS only

HTML

<div class="form-profile-card">

  <div class="form-profile-cover">

    <div class="form-profile-cover-content">

      <div>
        <div class="form-profile-kicker">Profile Form</div>
        <h3 class="form-profile-title">Edit your public profile</h3>
        <p class="form-profile-text">Update personal details, bio, social links, and profile visibility in a clean account form.</p>
      </div>

      <div class="form-profile-status">
        <span class="form-profile-status-dot"></span>
        Public
      </div>

    </div>

  </div>

  <div class="form-profile-body">

    <div class="form-profile-side">

      <div class="form-profile-avatar-card">
        <div class="form-profile-avatar">AM</div>
        <strong>Alex Morgan</strong>
        <span>Product designer</span>
        <button class="form-profile-upload" type="button">Upload Photo</button>
      </div>

      <div class="form-profile-tips">
        A strong profile helps other users understand who you are, what you do, and how to contact you.
      </div>

    </div>

    <form class="form-profile-form" action="#" method="post">

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Basic information</h4>
        <p class="form-profile-section-text">Update the main information shown on your profile.</p>

        <div class="form-profile-grid">

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-first">First name</label>
            <input class="form-profile-input" id="profile-first" type="text" name="first_name" placeholder="Alex">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-last">Last name</label>
            <input class="form-profile-input" id="profile-last" type="text" name="last_name" placeholder="Morgan">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-title-field">Professional title</label>
            <input class="form-profile-input" id="profile-title-field" type="text" name="title" placeholder="Product designer">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-location">Location</label>
            <input class="form-profile-input" id="profile-location" type="text" name="location" placeholder="New York, USA">
          </div>

          <div class="form-profile-field form-profile-field-full">
            <label class="form-profile-label" for="profile-bio">Bio</label>
            <textarea class="form-profile-textarea" id="profile-bio" name="bio" placeholder="Write a short profile bio..."></textarea>
          </div>

        </div>

      </section>

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Social links</h4>
        <p class="form-profile-section-text">Add optional public links to your profile.</p>

        <div class="form-profile-grid">

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-website">Website</label>
            <input class="form-profile-input" id="profile-website" type="url" name="website" placeholder="https://example.com">
          </div>

          <div class="form-profile-field">
            <label class="form-profile-label" for="profile-linkedin">LinkedIn</label>
            <input class="form-profile-input" id="profile-linkedin" type="url" name="linkedin" placeholder="https://linkedin.com/in/username">
          </div>

        </div>

      </section>

      <section class="form-profile-section">

        <h4 class="form-profile-section-title">Profile visibility</h4>
        <p class="form-profile-section-text">Choose whether your profile should be visible to others.</p>

        <div class="form-profile-visibility">

          <label class="form-profile-visibility-option">
            <input type="radio" name="visibility" value="public" checked>
            <span>
              <strong>Public profile</strong>
              <small>Visible to other users and visitors.</small>
            </span>
          </label>

          <label class="form-profile-visibility-option">
            <input type="radio" name="visibility" value="private">
            <span>
              <strong>Private profile</strong>
              <small>Only visible to your account.</small>
            </span>
          </label>

        </div>

      </section>

      <div class="form-profile-actions">
        <button class="form-profile-button-secondary" type="button">Cancel</button>
        <button class="form-profile-button-primary" type="submit">Save Profile</button>
      </div>

    </form>

  </div>

</div>

CSS

.form-profile-card{
width:min(100%,920px);
overflow:hidden;
border-radius:32px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 30px 90px rgba(0,0,0,.42);
backdrop-filter:blur(18px);
}

.form-profile-cover{
position:relative;
min-height:190px;
padding:30px;
overflow:hidden;
background:
radial-gradient(circle at 18% 24%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,#8b5cf6,#0ea5e9 52%,#22c55e);
}

.form-profile-cover::after{
content:"";
position:absolute;
width:280px;
height:280px;
right:-120px;
top:-120px;
border-radius:999px;
background:rgba(255,255,255,.18);
pointer-events:none;
}

.form-profile-cover-content{
position:relative;
z-index:2;
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
}

.form-profile-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.16);
border:1px solid rgba(255,255,255,.24);
color:#ffffff;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-profile-title{
margin:0 0 10px;
font-size:clamp(30px,4vw,46px);
line-height:1.05;
font-weight:950;
letter-spacing:-.05em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-profile-text{
margin:0;
max-width:560px;
font-size:15px;
line-height:1.75;
color:rgba(255,255,255,.88);
}

.form-profile-status{
display:inline-flex;
align-items:center;
gap:8px;
min-height:36px;
padding:0 12px;
border-radius:999px;
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.22);
color:#ffffff;
font-size:13px;
font-weight:900;
white-space:nowrap;
}

.form-profile-status-dot{
width:8px;
height:8px;
border-radius:999px;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.16);
}

.form-profile-body{
display:grid;
grid-template-columns:260px minmax(0,1fr);
gap:24px;
padding:30px;
}

.form-profile-side{
display:grid;
align-content:start;
gap:16px;
}

.form-profile-avatar-card{
padding:20px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
text-align:center;
}

.form-profile-avatar{
width:110px;
height:110px;
display:grid;
place-items:center;
margin:0 auto 14px;
border-radius:32px;
background:
linear-gradient(135deg,rgba(168,85,247,.32),rgba(14,165,233,.32)),
#111827;
border:1px solid rgba(255,255,255,.16);
color:#ffffff;
font-size:36px;
font-weight:950;
box-shadow:0 18px 46px rgba(0,0,0,.26);
}

.form-profile-avatar-card strong{
display:block;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-profile-avatar-card span{
display:block;
margin-top:4px;
font-size:13px;
line-height:1.5;
color:#94a3b8;
}

.form-profile-upload{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
margin-top:16px;
border-radius:14px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#ffffff;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:background .22s ease,transform .22s ease;
}

.form-profile-upload:hover,
.form-profile-upload:focus{
background:rgba(255,255,255,.12);
transform:translateY(-1px);
outline:none;
}

.form-profile-tips{
padding:16px;
border-radius:20px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
font-size:13px;
line-height:1.65;
color:#cbd5e1;
}

.form-profile-form{
display:grid;
gap:20px;
}

.form-profile-section{
display:grid;
gap:16px;
padding:20px;
border-radius:24px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
}

.form-profile-section-title{
margin:0;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-profile-section-text{
margin:-8px 0 0;
font-size:14px;
line-height:1.65;
color:#94a3b8;
}

.form-profile-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-profile-field{
display:grid;
gap:8px;
}

.form-profile-field-full{
grid-column:1 / -1;
}

.form-profile-label{
font-size:13px;
font-weight:850;
color:#ffffff;
}

.form-profile-input,
.form-profile-select,
.form-profile-textarea{
width:100%;
border:1px solid rgba(255,255,255,.14);
border-radius:15px;
background:rgba(255,255,255,.07);
color:#ffffff;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-profile-input,
.form-profile-select{
min-height:50px;
padding:0 14px;
}

.form-profile-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#94a3b8 50%),linear-gradient(135deg,#94a3b8 50%,transparent 50%);
background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-profile-select option{
color:#0f172a;
}

.form-profile-textarea{
min-height:118px;
resize:vertical;
padding:13px 14px;
}

.form-profile-input::placeholder,
.form-profile-textarea::placeholder{
color:#94a3b8;
}

.form-profile-input:focus,
.form-profile-select:focus,
.form-profile-textarea:focus{
border-color:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.14);
background:rgba(255,255,255,.10);
}

.form-profile-visibility{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-profile-visibility-option{
position:relative;
cursor:pointer;
}

.form-profile-visibility-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-profile-visibility-option span{
display:grid;
gap:4px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-profile-visibility-option strong{
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-profile-visibility-option small{
font-size:12px;
line-height:1.45;
color:#94a3b8;
}

.form-profile-visibility-option input:checked + span{
border-color:#38bdf8;
box-shadow:0 0 0 4px rgba(56,189,248,.12);
background:rgba(14,165,233,.14);
}

.form-profile-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}

.form-profile-button-secondary,
.form-profile-button-primary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
padding:0 18px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-profile-button-secondary{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.07);
color:#ffffff;
}

.form-profile-button-secondary:hover,
.form-profile-button-secondary:focus{
transform:translateY(-2px);
background:rgba(255,255,255,.11);
outline:none;
}

.form-profile-button-primary{
border:0;
background:linear-gradient(135deg,#8b5cf6,#0ea5e9,#22c55e);
color:#ffffff;
box-shadow:0 18px 42px rgba(14,165,233,.24);
}

.form-profile-button-primary:hover,
.form-profile-button-primary:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
outline:none;
}

@media (max-width: 920px){
.form-profile-body{
grid-template-columns:1fr;
}

.form-profile-side{
grid-template-columns:1fr 1fr;
}

.form-profile-cover-content{
align-items:flex-start;
flex-direction:column;
}
}

@media (max-width: 640px){
.form-profile-card{
border-radius:24px;
}

.form-profile-cover,
.form-profile-body{
padding:22px;
}

.form-profile-side{
grid-template-columns:1fr;
}

.form-profile-grid,
.form-profile-visibility{
grid-template-columns:1fr;
}

.form-profile-actions{
align-items:stretch;
flex-direction:column-reverse;
}

.form-profile-button-secondary,
.form-profile-button-primary{
width:100%;
}

.form-profile-title{
font-size:32px;
}
}

This profile edit form is useful when users need to update several personal details without feeling overwhelmed. The cover area creates a strong profile header, while the grouped form sections keep basic information, social links, and visibility settings easy to understand.

Use this pattern for membership websites, user dashboards, SaaS account areas, client portals, communities, online course profiles, marketplace accounts, and social profile edit pages.

27. Product Filter Form

A product filter form helps users narrow down products by category, price, rating, availability, brand, color, size, or other product attributes. It is one of the most important form patterns for eCommerce websites, marketplaces, product catalogs, booking platforms, directories, and comparison websites.

This example uses a modern product filter panel with search, category, price range, rating options, availability toggles, color swatches, and action buttons. The layout is designed to work as a sidebar filter on desktop and as a stacked filter block on mobile.

Perfect for eCommerce stores, marketplaces, directories, and product catalogs
Includes search, category, price, rating, availability, and color filters
Uses visual swatches and checkbox-style filter options
Stacks cleanly on mobile screens
Works with HTML and CSS only

HTML

<div class="form-product-filter-layout">

  <aside class="form-product-filter-panel">

    <div class="form-product-filter-header">
      <div class="form-product-filter-kicker">Product Filter</div>
      <h3 class="form-product-filter-title">Find the right product</h3>
      <p class="form-product-filter-text">Use filters to help customers narrow products by category, price, rating, availability, and color.</p>
    </div>

    <form class="form-product-filter-form" action="#" method="get">

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Search</h4>

        <div class="form-product-filter-field">
          <label class="form-product-filter-label" for="filter-search">Keyword</label>
          <input class="form-product-filter-input" id="filter-search" type="search" name="search" placeholder="Search products...">
        </div>

        <div class="form-product-filter-field">
          <label class="form-product-filter-label" for="filter-category">Category</label>
          <select class="form-product-filter-select" id="filter-category" name="category">
            <option>All categories</option>
            <option>Accessories</option>
            <option>Garden products</option>
            <option>Home products</option>
            <option>Digital products</option>
          </select>
        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Price range</h4>

        <div class="form-product-filter-price-row">

          <div class="form-product-filter-field">
            <label class="form-product-filter-label" for="filter-min">Min</label>
            <input class="form-product-filter-input" id="filter-min" type="number" name="min_price" placeholder="$0">
          </div>

          <div class="form-product-filter-field">
            <label class="form-product-filter-label" for="filter-max">Max</label>
            <input class="form-product-filter-input" id="filter-max" type="number" name="max_price" placeholder="$500">
          </div>

        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Availability and rating</h4>

        <div class="form-product-filter-checks">

          <label class="form-product-filter-check">
            <span>In stock</span>
            <span>
              <span class="form-product-filter-count">42</span>
              <input type="checkbox" name="stock" checked>
            </span>
          </label>

          <label class="form-product-filter-check">
            <span>On sale</span>
            <span>
              <span class="form-product-filter-count">18</span>
              <input type="checkbox" name="sale">
            </span>
          </label>

          <label class="form-product-filter-check">
            <span>4 stars and up</span>
            <span>
              <span class="form-product-filter-count">31</span>
              <input type="checkbox" name="rating">
            </span>
          </label>

        </div>

      </div>

      <div class="form-product-filter-group">

        <h4 class="form-product-filter-group-title">Color</h4>

        <div class="form-product-filter-swatches">

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="green" checked>
            <span class="form-product-filter-swatch-green"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="blue">
            <span class="form-product-filter-swatch-blue"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="purple">
            <span class="form-product-filter-swatch-purple"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="orange">
            <span class="form-product-filter-swatch-orange"></span>
          </label>

          <label class="form-product-filter-swatch">
            <input type="radio" name="color" value="gray">
            <span class="form-product-filter-swatch-gray"></span>
          </label>

        </div>

      </div>

      <div class="form-product-filter-actions">
        <button class="form-product-filter-reset" type="reset">Reset</button>
        <button class="form-product-filter-button" type="submit">Apply</button>
      </div>

    </form>

  </aside>

  <section class="form-product-filter-results">

    <div class="form-product-filter-results-head">

      <div>
        <h3 class="form-product-filter-results-title">Filtered products</h3>
        <p class="form-product-filter-results-text">Example product cards show how filtered results could appear next to the form.</p>
      </div>

      <select class="form-product-filter-sort" aria-label="Sort products">
        <option>Sort by popular</option>
        <option>Price low to high</option>
        <option>Newest first</option>
      </select>

    </div>

    <div class="form-product-filter-grid">

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Modern Product Kit</h4>
        <p>A clean product card with simple details and a clear price.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$89</span>
          <span class="form-product-filter-tag">In stock</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Premium Accessory</h4>
        <p>A useful accessory shown as part of the filtered product grid.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$49</span>
          <span class="form-product-filter-tag">Sale</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Starter Bundle</h4>
        <p>A bundle product that appears after filters are applied.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$129</span>
          <span class="form-product-filter-tag">Popular</span>
        </div>
      </article>

      <article class="form-product-filter-product">
        <div class="form-product-filter-thumb"></div>
        <h4>Compact Item</h4>
        <p>A compact example product for eCommerce filter layouts.</p>
        <div class="form-product-filter-product-footer">
          <span class="form-product-filter-price">$39</span>
          <span class="form-product-filter-tag">New</span>
        </div>
      </article>

    </div>

  </section>

</div>

CSS

.form-product-filter-layout{
width:min(100%,1040px);
display:grid;
grid-template-columns:330px minmax(0,1fr);
gap:22px;
align-items:start;
}

.form-product-filter-panel,
.form-product-filter-results{
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 24px 70px rgba(15,23,42,.12);
}

.form-product-filter-panel{
padding:26px;
position:sticky;
top:20px;
}

.form-product-filter-header{
margin-bottom:22px;
}

.form-product-filter-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-product-filter-title{
margin:0 0 9px;
font-size:clamp(28px,4vw,38px);
line-height:1.08;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-product-filter-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-product-filter-form{
display:grid;
gap:18px;
}

.form-product-filter-group{
display:grid;
gap:12px;
padding:16px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-product-filter-group-title{
margin:0;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-product-filter-field{
display:grid;
gap:8px;
}

.form-product-filter-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-product-filter-input,
.form-product-filter-select{
width:100%;
min-height:48px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:14px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-product-filter-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-product-filter-input::placeholder{
color:#94a3b8;
}

.form-product-filter-input:focus,
.form-product-filter-select:focus{
border-color:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.12);
background:#ffffff;
}

.form-product-filter-price-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-product-filter-checks{
display:grid;
gap:10px;
}

.form-product-filter-check{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px;
border-radius:15px;
background:#ffffff;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.4;
font-weight:800;
color:#475569;
cursor:pointer;
}

.form-product-filter-check input{
width:18px;
height:18px;
margin:0;
accent-color:#22c55e;
}

.form-product-filter-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:28px;
min-height:22px;
padding:0 7px;
border-radius:999px;
background:#f1f5f9;
color:#64748b;
font-size:12px;
font-weight:900;
}

.form-product-filter-swatches{
display:flex;
flex-wrap:wrap;
gap:10px;
}

.form-product-filter-swatch{
position:relative;
cursor:pointer;
}

.form-product-filter-swatch input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-product-filter-swatch span{
display:block;
width:34px;
height:34px;
border-radius:999px;
border:3px solid #ffffff;
box-shadow:0 0 0 1px #cbd5e1;
transition:box-shadow .22s ease,transform .22s ease;
}

.form-product-filter-swatch input:checked + span{
box-shadow:0 0 0 3px rgba(34,197,94,.42);
transform:translateY(-1px);
}

.form-product-filter-swatch-green{
background:#22c55e;
}

.form-product-filter-swatch-blue{
background:#2563eb;
}

.form-product-filter-swatch-purple{
background:#7c3aed;
}

.form-product-filter-swatch-orange{
background:#f97316;
}

.form-product-filter-swatch-gray{
background:#64748b;
}

.form-product-filter-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-product-filter-button,
.form-product-filter-reset{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:50px;
border-radius:16px;
font-size:14px;
font-weight:950;
cursor:pointer;
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
}

.form-product-filter-button{
border:0;
background:linear-gradient(135deg,#22c55e,#0ea5e9);
color:#ffffff;
box-shadow:0 18px 42px rgba(34,197,94,.22);
}

.form-product-filter-button:hover,
.form-product-filter-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(14,165,233,.24);
outline:none;
}

.form-product-filter-reset{
border:1px solid #dbe3ef;
background:#ffffff;
color:#0f172a;
}

.form-product-filter-reset:hover,
.form-product-filter-reset:focus{
transform:translateY(-2px);
background:#f8fafc;
outline:none;
}

.form-product-filter-results{
padding:26px;
}

.form-product-filter-results-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}

.form-product-filter-results-title{
margin:0 0 7px;
font-size:26px;
line-height:1.15;
font-weight:950;
letter-spacing:-.04em;
color:#0f172a;
}

.form-product-filter-results-text{
margin:0;
font-size:14px;
line-height:1.65;
color:#64748b;
}

.form-product-filter-sort{
min-height:42px;
padding:0 36px 0 12px;
border:1px solid #dbe3ef;
border-radius:14px;
background:#ffffff;
color:#0f172a;
font-size:13px;
font-weight:850;
outline:none;
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
}

.form-product-filter-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.form-product-filter-product{
padding:14px;
border-radius:20px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-product-filter-thumb{
height:130px;
border-radius:16px;
background:
radial-gradient(circle at 24% 20%,rgba(255,255,255,.68),transparent 28%),
linear-gradient(135deg,rgba(34,197,94,.22),rgba(14,165,233,.22));
border:1px solid #e2e8f0;
margin-bottom:12px;
}

.form-product-filter-product h4{
margin:0 0 6px;
font-size:16px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-product-filter-product p{
margin:0 0 10px;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-product-filter-product-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.form-product-filter-price{
font-size:16px;
font-weight:950;
color:#15803d;
}

.form-product-filter-tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:12px;
font-weight:900;
}

@media (max-width: 940px){
.form-product-filter-layout{
grid-template-columns:1fr;
}

.form-product-filter-panel{
position:relative;
top:auto;
}

.form-product-filter-grid{
grid-template-columns:1fr 1fr;
}
}

@media (max-width: 640px){
.form-product-filter-panel,
.form-product-filter-results{
padding:22px;
border-radius:24px;
}

.form-product-filter-results-head{
flex-direction:column;
}

.form-product-filter-price-row,
.form-product-filter-actions,
.form-product-filter-grid{
grid-template-columns:1fr;
}

.form-product-filter-title{
font-size:32px;
}
}

This product filter form is useful when users need to narrow a large product list into a smaller, more relevant set of results. The form works well as a sidebar on desktop and can become a full-width filter panel on mobile.

Use this pattern for WooCommerce stores, product catalogs, marketplaces, directories, booking websites, comparison pages, real estate listings, course catalogs, and any website where users need to filter many items.

28. Pricing / Plan Selection Form

A pricing or plan selection form helps users choose between different subscription tiers, packages, service levels, or product plans. It is useful for SaaS websites, membership platforms, hosting companies, agencies, online tools, digital products, and service businesses.

This example uses three selectable pricing cards with radio inputs, billing cycle options, a small add-on selector, and a checkout-style summary. The design helps users compare plans visually before submitting their selection.

Perfect for SaaS pricing pages, membership websites, hosting plans, and service packages
Uses selectable pricing cards with radio inputs
Includes monthly / yearly billing options
Includes add-on options and a summary area
Uses HTML and CSS only

Plan Selection Form

Choose the right pricing plan

A selectable pricing form helps users compare plans, choose billing options, add extras, and submit their preferred package.

Monthly billing Yearly billing - Save 20%

Starter $19 /mo Best for simple websites, small projects, and personal use.

✓ 1 workspace
✓ Basic support
✓ 5 projects

Professional Popular $49 /mo Best for growing teams, client work, and advanced workflows.

✓ 5 workspaces
✓ Priority support
✓ 50 projects

Business $99 /mo Best for companies, agencies, and larger product teams.

✓ Unlimited workspaces
✓ Dedicated support
✓ Unlimited projects

Optional add-ons

Advanced analytics Track deeper user and product insights. +$12/mo Extra storage Add more space for files and assets. +$8/mo Priority onboarding Get guided setup for your team. +$29

Plan summary

Selected plan Professional

Billing Monthly

Estimated total $49/mo

This is a static UI example. Connect the selected plan values to your checkout or billing system in a real project.

HTML

<div class="form-pricing-shell">

  <div class="form-pricing-header">

    <div class="form-pricing-kicker">Plan Selection Form</div>

    <h3 class="form-pricing-title">Choose the right <span>pricing plan</span></h3>

    <p class="form-pricing-text">A selectable pricing form helps users compare plans, choose billing options, add extras, and submit their preferred package.</p>

  </div>

  <form class="form-pricing-form" action="#" method="post">

    <div class="form-pricing-billing">

      <label class="form-pricing-billing-option">
        <input type="radio" name="billing" value="monthly" checked>
        <span>Monthly billing</span>
      </label>

      <label class="form-pricing-billing-option">
        <input type="radio" name="billing" value="yearly">
        <span>Yearly billing - Save 20%</span>
      </label>

    </div>

    <div class="form-pricing-grid">

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="starter">
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Starter</span>
          </span>

          <span class="form-pricing-price">
            <strong>$19</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for simple websites, small projects, and personal use.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> 1 workspace</li>
            <li><span class="form-pricing-check">✓</span> Basic support</li>
            <li><span class="form-pricing-check">✓</span> 5 projects</li>
          </ul>

        </span>
      </label>

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="pro" checked>
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Professional</span>
            <span class="form-pricing-badge">Popular</span>
          </span>

          <span class="form-pricing-price">
            <strong>$49</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for growing teams, client work, and advanced workflows.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> 5 workspaces</li>
            <li><span class="form-pricing-check">✓</span> Priority support</li>
            <li><span class="form-pricing-check">✓</span> 50 projects</li>
          </ul>

        </span>
      </label>

      <label class="form-pricing-card">
        <input type="radio" name="plan" value="business">
        <span class="form-pricing-card-body">

          <span class="form-pricing-plan-top">
            <span class="form-pricing-plan-name">Business</span>
          </span>

          <span class="form-pricing-price">
            <strong>$99</strong>
            <span>/mo</span>
          </span>

          <span class="form-pricing-description">Best for companies, agencies, and larger product teams.</span>

          <ul class="form-pricing-features">
            <li><span class="form-pricing-check">✓</span> Unlimited workspaces</li>
            <li><span class="form-pricing-check">✓</span> Dedicated support</li>
            <li><span class="form-pricing-check">✓</span> Unlimited projects</li>
          </ul>

        </span>
      </label>

    </div>

    <div class="form-pricing-bottom">

      <div class="form-pricing-addons">

        <h4 class="form-pricing-section-title">Optional add-ons</h4>

        <div class="form-pricing-addon-list">

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Advanced analytics</strong>
              <span>Track deeper user and product insights.</span>
            </span>
            <span class="form-pricing-addon-price">+$12/mo</span>
            <input type="checkbox" name="addon_analytics">
          </label>

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Extra storage</strong>
              <span>Add more space for files and assets.</span>
            </span>
            <span class="form-pricing-addon-price">+$8/mo</span>
            <input type="checkbox" name="addon_storage">
          </label>

          <label class="form-pricing-addon">
            <span class="form-pricing-addon-text">
              <strong>Priority onboarding</strong>
              <span>Get guided setup for your team.</span>
            </span>
            <span class="form-pricing-addon-price">+$29</span>
            <input type="checkbox" name="addon_onboarding">
          </label>

        </div>

      </div>

      <div class="form-pricing-summary">

        <h4 class="form-pricing-section-title">Plan summary</h4>

        <div class="form-pricing-summary-row">
          <span>Selected plan</span>
          <span>Professional</span>
        </div>

        <div class="form-pricing-summary-row">
          <span>Billing</span>
          <span>Monthly</span>
        </div>

        <div class="form-pricing-summary-row">
          <span>Estimated total</span>
          <strong>$49/mo</strong>
        </div>

        <p class="form-pricing-summary-note">This is a static UI example. Connect the selected plan values to your checkout or billing system in a real project.</p>

        <button class="form-pricing-button" type="submit">Continue with Plan</button>

      </div>

    </div>

  </form>

</div>

CSS

.form-pricing-shell{
width:min(100%,1040px);
display:grid;
gap:24px;
}

.form-pricing-header{
text-align:center;
max-width:760px;
margin:0 auto;
}

.form-pricing-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:14px;
padding:8px 12px;
border-radius:999px;
background:rgba(168,85,247,.14);
border:1px solid rgba(168,85,247,.28);
color:#d8b4fe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-pricing-title{
margin:0 0 10px;
font-size:clamp(32px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-pricing-title span{
background:linear-gradient(90deg,#93c5fd,#d8b4fe,#86efac) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-pricing-text{
margin:0 auto;
max-width:640px;
font-size:15px;
line-height:1.75;
color:#cbd5e1;
}

.form-pricing-form{
display:grid;
gap:20px;
}

.form-pricing-billing{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.form-pricing-billing-option{
position:relative;
cursor:pointer;
}

.form-pricing-billing-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-pricing-billing-option span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:999px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
color:#cbd5e1;
font-size:14px;
font-weight:900;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-pricing-billing-option input:checked + span{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14);
background:rgba(168,85,247,.18);
color:#ffffff;
}

.form-pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}

.form-pricing-card{
position:relative;
cursor:pointer;
}

.form-pricing-card input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-pricing-card-body{
display:grid;
gap:16px;
height:100%;
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,transform .22s ease;
}

.form-pricing-card input:checked + .form-pricing-card-body{
border-color:#a855f7;
box-shadow:0 0 0 4px rgba(168,85,247,.14),0 28px 80px rgba(168,85,247,.18);
background:rgba(168,85,247,.13);
transform:translateY(-3px);
}

.form-pricing-plan-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}

.form-pricing-plan-name{
margin:0;
font-size:20px;
line-height:1.2;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-pricing-badge{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:0 10px;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.24);
color:#86efac;
font-size:12px;
font-weight:900;
white-space:nowrap;
}

.form-pricing-price{
display:flex;
align-items:flex-end;
gap:5px;
color:#ffffff;
}

.form-pricing-price strong{
font-size:40px;
line-height:1;
font-weight:950;
letter-spacing:-.05em;
}

.form-pricing-price span{
padding-bottom:5px;
font-size:13px;
font-weight:850;
color:#94a3b8;
}

.form-pricing-description{
margin:0;
font-size:14px;
line-height:1.65;
color:#cbd5e1;
}

.form-pricing-features{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
}

.form-pricing-features li{
display:flex;
align-items:flex-start;
gap:9px;
font-size:13px;
line-height:1.5;
color:#e2e8f0;
}

.form-pricing-check{
width:20px;
height:20px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.14);
color:#86efac;
font-size:12px;
font-weight:950;
}

.form-pricing-bottom{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:16px;
align-items:start;
}

.form-pricing-addons,
.form-pricing-summary{
padding:22px;
border-radius:26px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
}

.form-pricing-section-title{
margin:0 0 12px;
font-size:18px;
line-height:1.25;
font-weight:950;
letter-spacing:-.03em;
color:#ffffff;
}

.form-pricing-addon-list{
display:grid;
gap:10px;
}

.form-pricing-addon{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px;
border-radius:17px;
background:rgba(15,23,42,.70);
border:1px solid rgba(255,255,255,.10);
cursor:pointer;
}

.form-pricing-addon input{
width:18px;
height:18px;
margin:0;
accent-color:#a855f7;
}

.form-pricing-addon-text{
display:grid;
gap:3px;
}

.form-pricing-addon-text strong{
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-pricing-addon-text span{
font-size:13px;
line-height:1.45;
color:#94a3b8;
}

.form-pricing-addon-price{
font-size:14px;
font-weight:950;
color:#86efac;
white-space:nowrap;
}

.form-pricing-summary{
display:grid;
gap:14px;
}

.form-pricing-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
font-size:14px;
line-height:1.5;
color:#cbd5e1;
}

.form-pricing-summary-row strong{
font-size:20px;
color:#ffffff;
}

.form-pricing-summary-note{
margin:0;
padding:14px;
border-radius:16px;
background:rgba(34,197,94,.10);
border:1px solid rgba(34,197,94,.20);
color:#bbf7d0;
font-size:13px;
line-height:1.55;
}

.form-pricing-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#a855f7,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(168,85,247,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-pricing-button:hover,
.form-pricing-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 940px){
.form-pricing-grid{
grid-template-columns:1fr;
}

.form-pricing-bottom{
grid-template-columns:1fr;
}
}

@media (max-width: 640px){
.form-pricing-grid{
gap:14px;
}

.form-pricing-card-body,
.form-pricing-addons,
.form-pricing-summary{
padding:20px;
border-radius:24px;
}

.form-pricing-billing{
align-items:stretch;
flex-direction:column;
}

.form-pricing-billing-option span{
width:100%;
}

.form-pricing-title{
font-size:32px;
}
}

This pricing and plan selection form is useful when users need to compare options before continuing to checkout, signup, or a quote request. The selectable cards make the choice visual, while the add-on and summary sections make the decision feel clearer.

Use this pattern for SaaS pricing pages, hosting packages, membership plans, service packages, agency retainers, digital product tiers, subscription forms, and pricing comparison sections.

29. Payment Card Form UI

A payment card form UI is used when a website needs to collect card-style payment details, billing information, or checkout information. Even when the real payment is handled by a secure provider like Stripe, PayPal, or another gateway, the visual payment form still needs to feel trustworthy, simple, and easy to complete.

This example uses a modern payment card preview with cardholder details, card number, expiry date, CVC, billing email, and a secure payment button. It is a front-end UI example only and should be connected to a real secure payment processor in production.

Perfect for checkout pages, SaaS billing forms, subscription pages, and payment screens
Includes card number, cardholder name, expiry, CVC, and billing email fields
Uses a visual card preview for a more premium payment UI
Stacks cleanly on mobile screens
Uses HTML and CSS only

Secure Pay

1234 5678 9012 3456

Cardholder Alex Morgan

Expires 12/28

Secure payment experience

A visual payment card can make a checkout or billing page feel more polished, but real payments must always be handled through a secure payment gateway.

Payment Form

Enter payment details

Use this payment card UI for checkout, subscription, or billing form layouts.

HTML

<div class="form-payment-layout">

  <div class="form-payment-visual">

    <div class="form-payment-card-preview">

      <div class="form-payment-card-inner">

        <div class="form-payment-card-top">
          <div class="form-payment-card-chip"></div>
          <div class="form-payment-card-brand">Secure Pay</div>
        </div>

        <div class="form-payment-card-number">1234 5678 9012 3456</div>

        <div class="form-payment-card-bottom">

          <div class="form-payment-card-meta">
            <span>Cardholder</span>
            <strong>Alex Morgan</strong>
          </div>

          <div class="form-payment-card-meta">
            <span>Expires</span>
            <strong>12/28</strong>
          </div>

        </div>

      </div>

    </div>

    <div class="form-payment-info">
      <h3>Secure payment experience</h3>
      <p>A visual payment card can make a checkout or billing page feel more polished, but real payments must always be handled through a secure payment gateway.</p>
    </div>

  </div>

  <div class="form-payment-form-card">

    <div class="form-payment-header">
      <div class="form-payment-kicker">Payment Form</div>
      <h3 class="form-payment-title">Enter payment details</h3>
      <p class="form-payment-text">Use this payment card UI for checkout, subscription, or billing form layouts.</p>
    </div>

    <form class="form-payment-form" action="#" method="post">

      <div class="form-payment-grid">

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-email">Billing email</label>
          <input class="form-payment-input" id="payment-email" type="email" name="email" placeholder="you@example.com">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-country">Country</label>
          <select class="form-payment-select" id="payment-country" name="country">
            <option>United States</option>
            <option>Canada</option>
            <option>United Kingdom</option>
            <option>Australia</option>
          </select>
        </div>

        <div class="form-payment-field form-payment-field-full">
          <label class="form-payment-label" for="payment-card-number">Card number</label>
          <input class="form-payment-input" id="payment-card-number" type="text" name="card_number" placeholder="1234 5678 9012 3456">
        </div>

      </div>

      <div class="form-payment-card-row">

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-card-name">Name on card</label>
          <input class="form-payment-input" id="payment-card-name" type="text" name="card_name" placeholder="Alex Morgan">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-expiry">Expiry</label>
          <input class="form-payment-input" id="payment-expiry" type="text" name="expiry" placeholder="MM/YY">
        </div>

        <div class="form-payment-field">
          <label class="form-payment-label" for="payment-cvc">CVC</label>
          <input class="form-payment-input" id="payment-cvc" type="text" name="cvc" placeholder="123">
        </div>

      </div>

      <div class="form-payment-secure">
        <span class="form-payment-secure-icon">✓</span>
        <span>This is a static UI demo. In a real project, never store raw card data yourself. Use a secure payment processor.</span>
      </div>

      <div class="form-payment-summary">

        <div class="form-payment-summary-row">
          <span>Plan</span>
          <span>Professional</span>
        </div>

        <div class="form-payment-summary-row">
          <span>Billing</span>
          <span>Monthly</span>
        </div>

        <div class="form-payment-summary-row">
          <strong>Total</strong>
          <strong>$49/mo</strong>
        </div>

      </div>

      <button class="form-payment-button" type="submit">Pay Securely</button>

    </form>

  </div>

</div>

CSS

.form-payment-layout{
width:min(100%,960px);
display:grid;
grid-template-columns:minmax(300px,.86fr) minmax(0,1.14fr);
gap:24px;
align-items:center;
}

.form-payment-visual{
display:grid;
gap:18px;
}

.form-payment-card-preview{
position:relative;
min-height:230px;
padding:26px;
border-radius:30px;
overflow:hidden;
background:
radial-gradient(circle at 18% 18%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,#2563eb,#7c3aed 52%,#22c55e);
box-shadow:0 30px 90px rgba(37,99,235,.28);
border:1px solid rgba(255,255,255,.18);
}

.form-payment-card-preview::before{
content:"";
position:absolute;
width:260px;
height:260px;
right:-120px;
top:-120px;
border-radius:999px;
background:rgba(255,255,255,.18);
}

.form-payment-card-preview::after{
content:"";
position:absolute;
width:200px;
height:200px;
left:-90px;
bottom:-110px;
border-radius:999px;
background:rgba(255,255,255,.13);
}

.form-payment-card-inner{
position:relative;
z-index:2;
min-height:178px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
}

.form-payment-card-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
}

.form-payment-card-chip{
width:52px;
height:40px;
border-radius:12px;
background:
linear-gradient(135deg,rgba(255,255,255,.74),rgba(255,255,255,.24));
border:1px solid rgba(255,255,255,.28);
}

.form-payment-card-brand{
font-size:15px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
color:#ffffff;
}

.form-payment-card-number{
font-size:clamp(20px,3vw,28px);
line-height:1.2;
font-weight:900;
letter-spacing:.08em;
color:#ffffff;
}

.form-payment-card-bottom{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
}

.form-payment-card-meta span{
display:block;
margin-bottom:5px;
font-size:10px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:rgba(255,255,255,.70);
}

.form-payment-card-meta strong{
display:block;
font-size:14px;
line-height:1.3;
font-weight:950;
color:#ffffff;
}

.form-payment-info{
padding:20px;
border-radius:24px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
box-shadow:0 24px 70px rgba(0,0,0,.24);
backdrop-filter:blur(18px);
}

.form-payment-info h3{
margin:0 0 10px;
font-size:28px;
line-height:1.12;
font-weight:950;
letter-spacing:-.04em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-payment-info p{
margin:0;
font-size:14px;
line-height:1.7;
color:#cbd5e1;
}

.form-payment-form-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(255,255,255,.18);
box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.form-payment-header{
margin-bottom:24px;
}

.form-payment-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:12px;
padding:8px 12px;
border-radius:999px;
background:#dbeafe;
color:#1d4ed8;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-payment-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-payment-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-payment-form{
display:grid;
gap:18px;
}

.form-payment-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-payment-field{
display:grid;
gap:8px;
}

.form-payment-field-full{
grid-column:1 / -1;
}

.form-payment-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-payment-input,
.form-payment-select{
width:100%;
min-height:52px;
padding:0 14px;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-payment-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-payment-input::placeholder{
color:#94a3b8;
}

.form-payment-input:focus,
.form-payment-select:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-payment-card-row{
display:grid;
grid-template-columns:1fr .46fr .34fr;
gap:14px;
}

.form-payment-secure{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f0fdf4;
border:1px solid #bbf7d0;
font-size:13px;
line-height:1.55;
color:#166534;
}

.form-payment-secure-icon{
width:22px;
height:22px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:#dcfce7;
color:#15803d;
font-size:13px;
font-weight:950;
}

.form-payment-summary{
display:grid;
gap:10px;
padding:16px;
border-radius:18px;
background:#f8fafc;
border:1px solid #e2e8f0;
}

.form-payment-summary-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
font-size:14px;
line-height:1.45;
color:#64748b;
}

.form-payment-summary-row strong{
font-size:18px;
color:#0f172a;
}

.form-payment-button{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:56px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.24);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-payment-button:hover,
.form-payment-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

@media (max-width: 920px){
.form-payment-layout{
grid-template-columns:1fr;
}

.form-payment-visual{
max-width:620px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.form-payment-form-card{
padding:24px;
border-radius:24px;
}

.form-payment-grid,
.form-payment-card-row{
grid-template-columns:1fr;
}

.form-payment-title{
font-size:32px;
}
}

This payment card form UI is useful when a checkout or billing page needs to feel secure and polished. The card preview makes the form more visual, while the actual input fields remain clear and easy to complete.

Use this pattern for checkout pages, SaaS billing pages, subscription forms, payment screens, invoice payment pages, donation forms, and account upgrade flows. For production payments, always connect the UI to a secure payment provider and avoid storing raw card data yourself.

30. Complete Responsive Form Layout

A complete responsive form layout combines multiple useful form patterns into one polished section. It can include a strong heading, contact information, service selection, budget fields, message area, consent checkbox, supporting cards, and a clear call-to-action button.

This final example works as a complete contact or quote request section for a modern website. It uses a two-column layout on desktop and stacks into a clean single-column form on mobile screens.

Perfect for contact pages, agency websites, quote request pages, and landing pages
Includes contact information, service selection, budget, message, and consent fields
Uses a complete responsive section layout
Includes supporting info cards beside the form
Uses HTML and CSS only

Complete Form Layout

Let’s build your next website section

Use this complete responsive form layout for contact pages, quote requests, landing pages, and service websites that need a polished conversion section.

✓ Clean responsive two-column structure
✓ Practical fields for real project requests
✓ Strong supporting content beside the form

Fast reply Use a form layout that tells users what happens after they submit.

Clear details Collect the service, budget, timeline, and message in one form.

Send project request

Fill out the form and we will respond with the next steps.

HTML

<section class="form-complete-section">

  <div class="form-complete-content">

    <div class="form-complete-intro">

      <div class="form-complete-intro-inner">

        <div class="form-complete-kicker">Complete Form Layout</div>

        <h3 class="form-complete-title">Let’s build your <span>next website section</span></h3>

        <p class="form-complete-text">Use this complete responsive form layout for contact pages, quote requests, landing pages, and service websites that need a polished conversion section.</p>

        <ul class="form-complete-list">
          <li><span class="form-complete-check">✓</span> Clean responsive two-column structure</li>
          <li><span class="form-complete-check">✓</span> Practical fields for real project requests</li>
          <li><span class="form-complete-check">✓</span> Strong supporting content beside the form</li>
        </ul>

      </div>

    </div>

    <div class="form-complete-info-grid">

      <div class="form-complete-info-card">
        <div class="form-complete-info-icon">1</div>
        <strong>Fast reply</strong>
        <span>Use a form layout that tells users what happens after they submit.</span>
      </div>

      <div class="form-complete-info-card">
        <div class="form-complete-info-icon">2</div>
        <strong>Clear details</strong>
        <span>Collect the service, budget, timeline, and message in one form.</span>
      </div>

    </div>

  </div>

  <div class="form-complete-form-card">

    <div class="form-complete-form-header">
      <h3 class="form-complete-form-title">Send project request</h3>
      <p class="form-complete-form-text">Fill out the form and we will respond with the next steps.</p>
    </div>

    <form class="form-complete-form" action="#" method="post">

      <div class="form-complete-grid">

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-name">Full name</label>
          <input class="form-complete-input" id="complete-name" type="text" name="name" placeholder="Alex Morgan">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-email">Email address</label>
          <input class="form-complete-input" id="complete-email" type="email" name="email" placeholder="alex@example.com">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-phone">Phone number</label>
          <input class="form-complete-input" id="complete-phone" type="tel" name="phone" placeholder="+1 555 123 4567">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-company">Company</label>
          <input class="form-complete-input" id="complete-company" type="text" name="company" placeholder="Company name">
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-service">Service</label>
          <select class="form-complete-select" id="complete-service" name="service">
            <option>Website design</option>
            <option>Landing page</option>
            <option>Online store</option>
            <option>Custom form UI</option>
          </select>
        </div>

        <div class="form-complete-field">
          <label class="form-complete-label" for="complete-budget">Budget</label>
          <select class="form-complete-select" id="complete-budget" name="budget">
            <option>$1,000 - $3,000</option>
            <option>$3,000 - $5,000</option>
            <option>$5,000 - $10,000</option>
            <option>$10,000+</option>
          </select>
        </div>

        <div class="form-complete-field form-complete-field-full">
          <label class="form-complete-label">Project urgency</label>
          <div class="form-complete-options">

            <label class="form-complete-option">
              <input type="radio" name="urgency" value="standard" checked>
              <span>Standard timeline</span>
            </label>

            <label class="form-complete-option">
              <input type="radio" name="urgency" value="urgent">
              <span>Urgent request</span>
            </label>

          </div>
        </div>

        <div class="form-complete-field form-complete-field-full">
          <label class="form-complete-label" for="complete-message">Project message</label>
          <textarea class="form-complete-textarea" id="complete-message" name="message" placeholder="Tell us about your project, goals, pages, features, and timeline..."></textarea>
        </div>

      </div>

      <label class="form-complete-consent">
        <input type="checkbox" name="consent">
        <span>I agree to be contacted about this request and understand that this form does not create a contract automatically.</span>
      </label>

      <div class="form-complete-actions">
        <button class="form-complete-button" type="submit">Send Request</button>
        <p class="form-complete-note">Most forms work better when users know what happens after submission.</p>
      </div>

    </form>

  </div>

</section>

CSS

.form-complete-section{
width:min(100%,1080px);
display:grid;
grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
gap:26px;
align-items:start;
}

.form-complete-content{
display:grid;
gap:18px;
}

.form-complete-intro{
padding:30px;
border-radius:30px;
background:#0f172a;
position:relative;
overflow:hidden;
box-shadow:0 28px 80px rgba(15,23,42,.20);
}

.form-complete-intro::before{
content:"";
position:absolute;
width:320px;
height:320px;
right:-130px;
top:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(37,99,235,.42),transparent 70%);
}

.form-complete-intro::after{
content:"";
position:absolute;
width:260px;
height:260px;
left:-120px;
bottom:-130px;
border-radius:999px;
background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);
}

.form-complete-intro-inner{
position:relative;
z-index:2;
}

.form-complete-kicker{
display:inline-flex;
align-items:center;
gap:8px;
margin-bottom:16px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.16);
color:#bfdbfe;
font-size:13px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
}

.form-complete-title{
margin:0 0 14px;
font-size:clamp(34px,5vw,56px);
line-height:1.04;
font-weight:950;
letter-spacing:-.06em;
color:#ffffff !important;
-webkit-text-fill-color:#ffffff !important;
}

.form-complete-title span{
background:linear-gradient(90deg,#93c5fd,#86efac,#f9a8d4) !important;
-webkit-background-clip:text !important;
background-clip:text !important;
color:transparent !important;
-webkit-text-fill-color:transparent !important;
}

.form-complete-text{
margin:0 0 22px;
font-size:15px;
line-height:1.8;
color:#cbd5e1;
}

.form-complete-list{
display:grid;
gap:12px;
margin:0;
padding:0;
list-style:none;
}

.form-complete-list li{
display:flex;
align-items:flex-start;
gap:10px;
font-size:14px;
line-height:1.55;
font-weight:800;
color:#ffffff;
}

.form-complete-check{
width:23px;
height:23px;
display:grid;
place-items:center;
flex:0 0 auto;
border-radius:999px;
background:rgba(34,197,94,.14);
border:1px solid rgba(34,197,94,.28);
color:#86efac;
font-size:13px;
font-weight:950;
}

.form-complete-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-complete-info-card{
padding:18px;
border-radius:22px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 18px 46px rgba(15,23,42,.10);
}

.form-complete-info-icon{
width:38px;
height:38px;
display:grid;
place-items:center;
margin-bottom:12px;
border-radius:14px;
background:#dbeafe;
color:#1d4ed8;
font-size:15px;
font-weight:950;
}

.form-complete-info-card strong{
display:block;
margin-bottom:5px;
font-size:15px;
line-height:1.3;
font-weight:950;
color:#0f172a;
}

.form-complete-info-card span{
display:block;
font-size:13px;
line-height:1.55;
color:#64748b;
}

.form-complete-form-card{
padding:30px;
border-radius:30px;
background:rgba(255,255,255,.96);
border:1px solid rgba(15,23,42,.08);
box-shadow:0 28px 80px rgba(15,23,42,.14);
}

.form-complete-form-header{
margin-bottom:24px;
}

.form-complete-form-title{
margin:0 0 9px;
font-size:clamp(30px,4vw,42px);
line-height:1.06;
font-weight:950;
letter-spacing:-.05em;
color:#0f172a;
}

.form-complete-form-text{
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

.form-complete-form{
display:grid;
gap:18px;
}

.form-complete-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

.form-complete-field{
display:grid;
gap:8px;
}

.form-complete-field-full{
grid-column:1 / -1;
}

.form-complete-label{
font-size:13px;
font-weight:850;
color:#0f172a;
}

.form-complete-input,
.form-complete-select,
.form-complete-textarea{
width:100%;
border:1px solid #dbe3ef;
border-radius:15px;
background:#ffffff;
color:#0f172a;
font-size:15px;
line-height:1.4;
outline:none;
box-sizing:border-box;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease;
}

.form-complete-input,
.form-complete-select{
min-height:52px;
padding:0 14px;
}

.form-complete-select{
appearance:none;
background-image:linear-gradient(45deg,transparent 50%,#64748b 50%),linear-gradient(135deg,#64748b 50%,transparent 50%);
background-position:calc(100% - 18px) 22px,calc(100% - 13px) 22px;
background-size:5px 5px,5px 5px;
background-repeat:no-repeat;
padding-right:38px;
}

.form-complete-textarea{
min-height:138px;
resize:vertical;
padding:13px 14px;
}

.form-complete-input::placeholder,
.form-complete-textarea::placeholder{
color:#94a3b8;
}

.form-complete-input:focus,
.form-complete-select:focus,
.form-complete-textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#ffffff;
}

.form-complete-options{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}

.form-complete-option{
position:relative;
cursor:pointer;
}

.form-complete-option input{
position:absolute;
opacity:0;
pointer-events:none;
}

.form-complete-option span{
display:flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 12px;
border-radius:15px;
background:#f8fafc;
border:1px solid #dbe3ef;
color:#475569;
font-size:13px;
font-weight:850;
text-align:center;
transition:border-color .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}

.form-complete-option input:checked + span{
border-color:#2563eb;
box-shadow:0 0 0 4px rgba(37,99,235,.12);
background:#eff6ff;
color:#1d4ed8;
}

.form-complete-consent{
display:flex;
align-items:flex-start;
gap:10px;
padding:14px;
border-radius:16px;
background:#f8fafc;
border:1px solid #e2e8f0;
font-size:14px;
line-height:1.55;
color:#64748b;
}

.form-complete-consent input{
width:18px;
height:18px;
margin-top:2px;
accent-color:#2563eb;
}

.form-complete-actions{
display:flex;
align-items:center;
gap:12px;
}

.form-complete-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:56px;
padding:0 20px;
border:0;
border-radius:17px;
background:linear-gradient(135deg,#2563eb,#22c55e);
color:#ffffff;
font-size:15px;
font-weight:950;
cursor:pointer;
box-shadow:0 18px 42px rgba(37,99,235,.22);
transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}

.form-complete-button:hover,
.form-complete-button:focus{
transform:translateY(-2px);
box-shadow:0 24px 52px rgba(34,197,94,.25);
filter:saturate(1.08);
outline:none;
}

.form-complete-note{
margin:0;
font-size:13px;
line-height:1.55;
color:#64748b;
}

@media (max-width: 960px){
.form-complete-section{
grid-template-columns:1fr;
}

.form-complete-content{
max-width:720px;
width:100%;
margin:0 auto;
}

.form-complete-form-card{
max-width:720px;
width:100%;
margin:0 auto;
}
}

@media (max-width: 640px){
.form-complete-intro,
.form-complete-form-card{
padding:24px;
border-radius:24px;
}

.form-complete-info-grid,
.form-complete-grid,
.form-complete-options{
grid-template-columns:1fr;
}

.form-complete-actions{
align-items:stretch;
flex-direction:column;
}

.form-complete-button{
width:100%;
}

.form-complete-title{
font-size:32px;
}

.form-complete-form-title{
font-size:32px;
}
}

This complete responsive form layout is useful as a final reusable section for real website projects. It combines strong content, supporting trust points, practical form fields, responsive behavior, and a clear call-to-action into one polished layout.

Use this pattern for contact pages, quote request pages, agency websites, service landing pages, SaaS lead forms, consultation forms, homepage contact sections, and any conversion-focused form area that needs more context than a simple form card.

Form Accessibility Best Practices

Modern CSS forms should not only look good. They should also be easy to use for as many people as possible. Accessibility is important for keyboard users, screen reader users, mobile users, people with low vision, and anyone who needs a clear and predictable form experience.

A form can have beautiful gradients, cards, shadows, animations, and modern layouts, but if users cannot understand the fields, reach the submit button, read the labels, or see the active focus state, the form is not working well enough for a real website.

Use these best practices when adapting the form examples from this guide into production websites.

Always Use Clear Labels

Every important input should have a visible label. Placeholder text can support the label, but it should not be the only way to explain the field. Once a user starts typing, placeholder text disappears, and the field meaning can become unclear.

For example, use labels like Full name, Email address, Phone number, Project message, or Billing address. Clear labels reduce mistakes and make forms easier to scan.

Connect Labels to Inputs

Use the for attribute on labels and match it with the input id. This makes the form more accessible and allows users to click the label to focus the related field.

<label for="user-email">Email address</label>
<input id="user-email" type="email" name="email">

This simple connection is especially useful for checkboxes, radio buttons, login forms, checkout forms, filters, and longer multi-field forms.

Make Focus States Easy to See

Focus states show which field is active. They are important for keyboard navigation and general usability. A good focus state can use a visible border, outline, glow, background change, or another clear visual signal.

Do not remove focus outlines without replacing them with another visible focus style. If users cannot see where they are in the form, the experience becomes frustrating and less accessible.

Use Enough Color Contrast

Form labels, placeholder text, helper text, error messages, buttons, and input values should be readable against the background. This is especially important for dark mode forms, glassmorphism forms, gradient forms, and image-based form sections.

Light gray text on a white background may look subtle, but it can become hard to read. On dark backgrounds, low-contrast gray text can also disappear. Always test forms on desktop and mobile before publishing.

Keep Tap Targets Large Enough

Mobile users need comfortable tap targets. Inputs, buttons, dropdowns, checkboxes, radio cards, filter chips, and plan selection cards should not be too small. A form may look clean on desktop but become difficult to use on a phone if the fields are too short or too close together.

As a practical rule, use comfortable input heights, enough spacing between fields, and full-width buttons on small screens where it improves usability.

Write Helpful Button Text

The submit button should describe the action clearly. Instead of only using Submit, use more specific text such as Send Message, Create Account, Request Quote, Book Appointment, Save Settings, or Continue with Plan.

Specific button text helps users understand what will happen after they click.

Show Helpful Error Messages

If a user makes a mistake, the form should explain what happened and how to fix it. Avoid vague messages like “Invalid input” when you can write something clearer, such as “Please enter a valid email address” or “Password must be at least 8 characters long.”

Error messages should appear close to the field they belong to. This makes the problem easier to understand and fix.

Do Not Ask for More Than You Need

Every extra field adds friction. A newsletter form may only need an email address. A contact form may need name, email, subject, and message. A quote request form may need more details, but it should still avoid unnecessary questions.

If a form becomes long, split it into sections, group related fields, or use a multi-step layout when it makes the form easier to complete.

Recommended Tool

Need fast hosting for WordPress forms, landing pages, and CSS-heavy websites?

Modern forms, landing pages, UI examples, and code-heavy tutorials work best on fast, reliable hosting. If you build WordPress websites, client sites, or content-heavy blogs, managed hosting can help with performance, security, and easier maintenance.

Explore Kinsta Hosting

Common Form Design Mistakes

Even small form design mistakes can reduce trust, create confusion, and stop users from completing an action. A modern form should feel simple, focused, and easy to understand. The following mistakes are common on contact pages, checkout pages, signup pages, dashboards, and landing pages.

Using Placeholder Text Instead of Labels

Placeholder-only forms may look minimal, but they are often harder to use. Once the user starts typing, the instruction disappears. This can be especially confusing in long forms, checkout forms, account settings, and quote request forms.

Use visible labels whenever clarity matters. Floating labels can also work well, as long as the label remains visible after the user enters text.

Making Forms Too Long

Long forms can work, but only when the extra fields are truly useful. If the form asks for too much information too early, users may leave before submitting. This is common with quote request forms, signup forms, checkout forms, and survey forms.

Ask for the most important details first. Optional details can be added later, placed in a separate section, or moved into a follow-up step.

Weak Mobile Layouts

A form that looks good on desktop can still fail on mobile. Two-column fields may become too narrow, buttons may be hard to tap, labels may wrap badly, and input spacing may feel crowded.

Most forms should stack into one column on smaller screens. Buttons should often become full width, and inputs should have comfortable height and spacing.

Poor Contrast on Dark or Image Backgrounds

Glassmorphism forms, image contact forms, dark mode forms, and gradient forms can look impressive, but they can also become hard to read if the contrast is too weak. Labels, buttons, and input values must remain clear.

If the background is busy, add an overlay, blur, stronger card background, or darker/lighter surface behind the form.

Generic Submit Buttons

A generic “Submit” button does not always tell users what they are doing. A stronger button label can increase clarity and trust. For example, use “Send Message”, “Request Quote”, “Create Account”, “Book Appointment”, “Submit Ticket”, “Save Profile”, or “Pay Securely”.

No Success or Confirmation Message

After users submit a form, they should know what happened. A simple success message can confirm that the message was sent, the booking was requested, the account was created, or the payment step was completed.

For business forms, it also helps to tell users what happens next. For example: “We usually reply within one business day.”

Not Testing Real Form Behavior

Static HTML and CSS are only the visual part of the form. Real forms also need validation, spam protection, email delivery, database storage, security checks, file upload limits, and backend handling.

Before publishing a production form, test it on multiple devices and browsers. Submit the form yourself, check error states, test required fields, confirm email delivery, and make sure mobile users can complete it comfortably.

FAQ About Modern CSS Forms

Here are answers to common questions about building modern CSS forms for websites, landing pages, dashboards, online stores, and WordPress projects.

What is a CSS form?

A CSS form is an HTML form that is styled with CSS. HTML creates the form structure, labels, inputs, textareas, dropdowns, checkboxes, radio buttons, and buttons. CSS controls the layout, spacing, colors, borders, typography, focus states, shadows, responsive behavior, and overall visual design.

Can I build modern forms with only HTML and CSS?

Yes. Many form layouts can be built with only HTML and CSS, including contact forms, login forms, signup forms, newsletter forms, quote forms, checkout layouts, dark mode forms, floating label forms, and product filter UI. JavaScript is only needed when the form requires dynamic behavior, such as multi-step navigation, live validation, file previews, or interactive ratings.

Do CSS forms actually send emails or save data?

No. HTML and CSS create the visible form interface, but they do not handle form submissions by themselves. To send emails, save entries, upload files, process payments, or create accounts, you need backend code, a form plugin, an API, or a third-party service.

What is the best layout for a contact form?

The best contact form layout depends on the page. A simple contact page may only need a centered card with name, email, subject, and message fields. A service website or landing page can use a two-column form with supporting text, trust points, or an image panel. On mobile, most contact forms should stack into a single column.

Should form labels be visible?

Yes, visible labels are usually better for clarity and accessibility. Placeholder text can be useful, but it should not be the only label in important forms. Floating labels are a good modern option when you want a clean design while still keeping the label visible after typing.

How do I make forms responsive?

Use flexible widths, CSS Grid or Flexbox, media queries, comfortable input heights, and mobile-friendly spacing. A common approach is to use two columns on desktop and switch to one column on smaller screens. Buttons often work better as full-width elements on mobile.

What makes a form look modern?

A modern form usually has clean spacing, readable labels, consistent input styles, rounded corners, clear focus states, strong buttons, responsive behavior, and a layout that matches the website design. Visual styles like gradients, glassmorphism, dark mode, floating labels, and card layouts can help, but usability should always come first.

Are dark mode forms good for websites?

Dark mode forms can work very well when the surrounding website or app also uses a dark interface. The most important thing is contrast. Labels, input values, placeholders, borders, helper text, and buttons must remain easy to read.

Can I use these form examples in WordPress?

Yes. You can use these examples inside WordPress custom HTML blocks, Gutenberg templates, custom themes, landing pages, or plugin templates. If you want the form to actually submit data, connect the HTML structure to WordPress form handling, a contact form plugin, WooCommerce, a custom plugin, or backend code.

What is the most important part of form design?

The most important part of form design is clarity. Users should immediately understand what the form is for, what information is needed, which fields are required, and what will happen after they submit it. A beautiful form that is confusing will not perform as well as a simple form that is clear and easy to complete.

Hosting for WordPress Projects

Building CSS-heavy tutorials, landing pages, forms, and UI libraries? Fast hosting helps your pages load smoothly and keeps your WordPress website easier to maintain.

Learn more about Kinsta

Conclusion: Build Modern CSS Forms That Are Clear, Responsive, and Easy to Use

Modern CSS forms are one of the most important parts of a website. They help users contact businesses, create accounts, sign in, subscribe to newsletters, request quotes, book appointments, submit feedback, filter products, complete checkout, and manage account settings.

The best forms are not only visually attractive. They are also clear, responsive, accessible, and easy to complete. A strong form uses readable labels, comfortable spacing, visible focus states, mobile-friendly inputs, helpful button text, and a logical field structure.

In this guide, we covered 30 practical form examples, including contact forms, login forms, signup forms, newsletter forms, search forms, quote request forms, checkout forms, booking forms, support ticket forms, feedback forms, review forms, file upload forms, floating label forms, glassmorphism forms, dark mode forms, product filter forms, pricing forms, payment card forms, and complete responsive form layouts.

You can use these examples as starting points for real projects. Copy the structure, adjust the colors, change the typography, add your own fields, connect the form to a backend, and adapt the layout to your website or WordPress theme.

If you are building a complete website, forms should not be designed alone. They should match the navigation, layout, content sections, cards, buttons, and overall visual style of the website. For that reason, it is useful to combine this guide with related CSS layout and navigation examples.

30 Modern CSS Forms for Websites – Contact, Login, Checkout & UI Form Examples

Table of Contents

What Are Modern CSS Forms?

Why Form Design Matters for Websites

Common Types of Website Forms

Contact Forms

Login and Signup Forms

Newsletter Forms

Checkout and Payment Forms

Booking and Appointment Forms

Feedback, Survey, and Review Forms

Search and Filter Forms

CSS Form Design Principles

Use Clear Labels

Keep Enough Spacing Between Fields

Make Inputs Easy to Tap on Mobile

Use Visible Focus States

Group Related Fields

Make the Submit Button Clear

Design Helpful Error and Success States

Do Not Add Unnecessary Fields

30 Modern CSS Form Examples

1. Modern Contact Form

Let’s talk about your project

HTML

CSS

2. Responsive Contact Form with Image

Start a better conversation today

Tell us what you need

HTML

CSS

3. Minimal Contact Form

Send a simple message

HTML

CSS

4. Login Form UI

Welcome back

HTML

CSS

5. Signup / Registration Form

Create your account

HTML

CSS

6. Newsletter Signup Form

Get better web design ideas

HTML

CSS

7. Inline Newsletter Form

Get weekly CSS ideas

HTML

CSS

8. Search Form Design

Find the right website resource

HTML

CSS

9. Hero Section Lead Form

Turn visitors into qualified leads

Get a free estimate

HTML

CSS

10. Quote Request Form

Tell us about your project

1 Contact details

2 Project information

HTML

CSS

11. Multi-Step Form

Complete your request in 3 steps

Contact details

Project details

Review and submit

HTML

CSS

JavaScript

12. Checkout Form UI

Complete your order

1 Contact information

2 Shipping address

3 Payment method

HTML