✶ 9 form designs · live preview · copy & ship

Form designs & UX patterns

Popup widgets, multi-step surveys, NPS, masked phone inputs, dark mode, drag-and-drop file upload — every pattern shipping in production splitforms accounts. Live preview, full HTML + CSS + JS, no SDK.

Filter9 / 9

HTMLCSS

Basic styled contact form

Card layout · single-column

Modern card design with soft glassmorphism and a gradient backdrop. The drop-in starter for any landing page.

Open preview ↗

HTMLCSSDark mode

Dark mode contact form

Card layout · dark theme

Editorial dark theme with subtle radial accent. Perfect for portfolios, devtool sites, and product pages.

Open preview ↗

HTMLCSS

Multi-column contact form

Two-column responsive grid

First name / last name / email / phone laid out in a 2-column grid. Stacks to single column on mobile.

Open preview ↗

HTMLCSSJavaScript

Masked phone input

Phone formatter · intl dial codes

Country dial-code dropdown with auto-formatting on the phone field — formats to (XXX) XXX-XXXX as the user types.

Open preview ↗

HTMLCSSJavaScript

Popup contact widget

Modal popup · bottom-right trigger

Floating chat-style trigger in the bottom-right corner that opens a centred modal. Closes on outside click and Escape.

Open preview ↗

HTMLCSSJavaScript

Popover feedback widget

Popover · emoji rating

Slim feedback widget anchored to the corner. Emoji rating, optional email, and a popover that slides up over your page.

Open preview ↗

HTMLCSSJavaScript

Multi-step Typeform-style survey

Multi-step · one question / screen

One question per screen, large editorial type, progress bar, keyboard-friendly. Works as a contact survey or onboarding flow.

Open preview ↗

HTMLCSSJavaScript

Multi-step NPS survey

Multi-step · NPS score + reason

0–10 score buttons that reveal a context-aware follow-up — "What did we do right?" for promoters, "What went wrong?" for detractors.

Open preview ↗

🔒 Pro

HTMLCSSJavaScriptPro

File upload (attachments)

Drag-and-drop · multi-file

Drag-and-drop file upload zone with a removable file list. Supports multiple files, type filtering, and size limits.

Open preview ↗

✦ Last step

Pick a design, swap in your access key, ship.

Replace YOUR_ACCESS_KEY in any snippet — every form posts to the same endpoint.

Get free access key →