Form Adapt
First name / Last name / Email form that puts First and Last name side by side once its column reaches 280 px, and stacks them below — no media query.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Utilities has 43 effects, including 3 free. Explore the category →
3 usage examples
How it works
The .fx-0753-root element is the queried container (container: cqf-form / inline-size) and holds a real <form class="cqf-form" method="post">. First and last name sit together in .cqf-row; Email and the .cqf-submit button follow. Each field is a <label class="cqf-group"> wrapping its .cqf-label text and its <input class="cqf-input">: the label is tied to the field without an id, so two forms on one page never clash.
Below 280 px of root width, .cqf-row is a column: the fields stack 10 px apart. The @container cqf-form (min-width: 280px) rule turns the row horizontal and gives both fields flex: 1, so they share the width. The column you place the form in is what counts: full-page it uses two columns, in a pop-up or a narrow sidebar it stacks, with the same code.
No JavaScript: submission is the browser's own. Add your form service's action attribute to the <form>. Fields already carry name and autocomplete (given-name, family-name, email) and Email is required: the browser stops a submission with no address.
Accessibility
- Tied labels: each
<label>wraps its field; the screen reader announces “First name, edit text” and clicking the label puts the cursor in the field. - Autofill:
autocompletelets the browser and password managers offer name and address, handy with a finger on mobile. - Visible focus:
#a78bfaborder and 2 px halo on fields, 2 px outline on the button. Tab order follows the visual order in both layouts. - Contrast: labels in 60 % white on
#0a0a0f(about 7:1), placeholder text in 48 % white on the field background (4.9:1), typed text in white. - Motion: no animation; switching layouts is instant, so there is nothing to cut under
prefers-reduced-motion.
Browser compatibility
Container queries (Chrome 105, Firefox 110, Safari 16). Measured in Chromium 151, Firefox 153 and WebKit 26.5: fields stacked at 170, 250 and 279 px, first and last name side by side at 281, 350, 500 and 800 px; the root fills the whole area (800/800 px); Tab goes First name, Last name, Email, Send; 0 errors.
Without container queries, fields stay stacked at every width: the form remains complete and usable.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0753-root">
<form class="cqf-form" method="post">
<div class="cqf-row">
<label class="cqf-group"><span class="cqf-label">…</span><input class="cqf-input" …></label>
<label class="cqf-group"><span class="cqf-label">…</span><input class="cqf-input" …></label>
</div>
<label class="cqf-group"><span class="cqf-label">…</span><input class="cqf-input" type="email" …></label>
<button type="submit" class="cqf-submit">…</button>
</form>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Breakpoint (CSS — @container cqf-form (min-width: 280px)) |
280 px | Raise it if your labels are long or your fields wider. |
Submission (HTML — action and method on the <form>) |
method="post", no action (posts to the page itself) |
Point it to your form service or wire your own script. |
Fields (HTML — .cqf-group) |
First name, Last name, Email (required) | Any <label class="cqf-group"> placed in .cqf-row joins the same line beyond the breakpoint; outside the row it stays full width. |
Button colour (CSS — .cqf-submit) |
Gradient #8453f5 → #7631ec |
Replace the background. |
Field colours (CSS — .cqf-input) |
Background rgba(255,255,255,.06), border rgba(255,255,255,.1), focus #a78bfa |
On a light background, make the fields white with a warm grey border, as in the Fendrille example. |
Background (CSS — .fx-0753-root) |
#0a0a0f with 16 px corners |
Set background: transparent to take your section's colour. |
FAQ
<form> with no action: add your service's address (or your own sending code). The effect only handles the layout.<label class="cqf-group"> inside .cqf-row and raise the breakpoint (around 420 px) so each field keeps a comfortable width.
