TurnConcepts — Forms

Form
Patterns

Input and form UI patterns for web applications. Login screens, multi-step wizards, settings panels, and more — the essential interaction patterns for collecting user data.

Login Signup Settings Wizard Checkout Search Contact Pricing
Welcome back
Sign in to your account
EMAIL
[email protected]
PASSWORD
••••••••
Remember me
Forgot password?
Sign in
Continue with Google
login

Login Form

A centered login form with email/password fields, remember-me checkbox, forgot password link, primary sign-in button, and a social login alternative. The most common auth pattern.

LoginAuthSocial Sign-inCentered
Create account
Start your 14-day free trial
FIRST NAME
Jane
LAST NAME
Doe
EMAIL
[email protected]
PASSWORD
••••••••••
Min 8 characters
I agree to the Terms of Service
Create account
signup

Signup Form

A registration form with first/last name row, email, password with hint text, terms checkbox, and call-to-action. The focused input shows an active border state.

SignupRegistrationValidationTwo-column Row
Account Settings
DISPLAY NAME
Jane Doe
EMAIL
[email protected]
Email notifications
Marketing emails
Two-factor authentication
Cancel
Save changes
settings

Settings Panel

An account settings form with text inputs, toggle switches for preferences, section dividers, and save/cancel action buttons. Commonly found in user preference pages.

SettingsTogglesPreferencesSections
✓
2
3
Shipping Details
Step 2 of 3
ADDRESS
123 Main Street
CITY
San Francisco
ZIP
94102
COUNTRY
United States
Back
Continue
wizard

Multi-step Wizard

A step indicator with numbered circles connected by lines, showing progress through a multi-page form. Step 1 is complete (green ✓), step 2 is active (blue), step 3 is pending.

WizardStepsProgressMulti-page
Payment
Enter your card details
CARD NUMBER
4242 4242 4242 4242
EXPIRY
12 / 26
CVC
•••
NAME ON CARD
Jane Doe
Total $49.00
Pay $49.00
checkout

Checkout / Payment

A Stripe-style payment form with card number, expiry/CVC row, cardholder name, order total, and a prominent pay button. Monospace font for card fields.

CheckoutPaymentStripeCard Input
Search & Filter
🔍 Search products, categories…
CATEGORY
All Categories
SORT BY
Relevance
PRICE RANGE
$0
to
$500
In Stock
On Sale
Free Shipping
Clear All
Apply Filters
search

Search & Filter

A search bar with dropdown selects, price range inputs, checkbox filters, and apply/clear buttons. The standard pattern for e-commerce filtering and faceted search.

SearchFiltersDropdownsRange Input
Get in touch
We'll respond within 24 hours
NAME
EMAIL
Email is required
SUBJECT
General Inquiry
MESSAGE
Email reply
Phone call
Send message
contact

Contact Form

A contact form with name/email row, subject dropdown, textarea for message, radio button preference, and validation error state on the email field (red border + error message).

ContactTextareaRadio ButtonsValidation
Choose your plan
Billed monthly · Cancel anytime
🚀
Starter
$9/mo
⚡
Pro
$29/mo
🏢
Team
$79/mo
Monthly
Annual (save 20%)
Start free trial
pricing

Pricing Selection

A plan selection form with three pricing cards (selectable), a monthly/annual toggle switch, and a CTA button. The selected plan is highlighted with an accent border.

PricingCard SelectionToggleSaaS