Form Adapt
Formulaire Prénom / Nom / Email qui place Prénom et Nom côte à côte dès que sa colonne atteint 280 px, et les empile en dessous — sans media query.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Utilitaires comprend 43 effets, dont 3 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
La racine .fx-0753-root est le conteneur interrogé (container: cqf-form / inline-size) et contient un vrai <form class="cqf-form" method="post">. Prénom et Nom sont réunis dans .cqf-row ; Email et le bouton .cqf-submit suivent. Chaque champ est un <label class="cqf-group"> qui englobe son texte .cqf-label et son <input class="cqf-input"> : l'étiquette est reliée au champ sans identifiant, donc deux formulaires dans la même page ne se gênent pas.
Sous 280 px de largeur de racine, .cqf-row est en colonne : les champs s'empilent avec 10 px d'écart. La règle @container cqf-form (min-width: 280px) passe la rangée en ligne et donne flex: 1 aux deux champs, qui se partagent la largeur. C'est la colonne où vous posez le formulaire qui compte : en pleine page il est sur deux colonnes, dans une pop-in ou une barre latérale étroite il s'empile, avec le même code.
Aucun JavaScript : l'envoi est celui du navigateur. Ajoutez l'attribut action de votre service d'envoi sur le <form>. Les champs portent déjà name et autocomplete (given-name, family-name, email) et l'Email est required : un envoi sans adresse est arrêté par le navigateur.
Accessibilité
- Étiquettes reliées : chaque
<label>englobe son champ ; le lecteur d'écran annonce « Prénom, zone de texte » et un clic sur l'étiquette place le curseur dans le champ. - Remplissage automatique :
autocompletepermet au navigateur et aux gestionnaires de mots de passe de proposer nom et adresse, utile au doigt sur mobile. - Focus visible : bordure
#a78bfaet halo de 2 px sur les champs, contour de 2 px sur le bouton. L'ordre de tabulation suit l'ordre visuel dans les deux mises en page. - Contraste : étiquettes en blanc à 60 % sur
#0a0a0f(environ 7:1), texte d'exemple en blanc à 48 % sur le fond du champ (4,9:1), texte saisi en blanc. - Mouvement : aucune animation ; le passage d'une mise en page à l'autre est instantané, il n'y a rien à couper sous
prefers-reduced-motion.
Compatibilité navigateur
Requêtes de conteneur (Chrome 105, Firefox 110, Safari 16). Mesuré dans Chromium 151, Firefox 153 et WebKit 26.5 : champs empilés à 170, 250 et 279 px, Prénom et Nom côte à côte à 281, 350, 500 et 800 px ; la racine remplit toute la zone (800/800 px) ; Tab parcourt Prénom, Nom, Email, Envoyer ; 0 erreur.
Sans requêtes de conteneur, les champs restent empilés à toutes les largeurs : le formulaire reste complet et utilisable.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<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>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Palier (CSS — @container cqf-form (min-width: 280px)) |
280 px | Relevez-le si vos étiquettes sont longues ou vos champs plus larges. |
Envoi (HTML — attributs action et method du <form>) |
method="post", pas d'action (envoi vers la page elle-même) |
Indiquez l'adresse de votre service d'envoi ou branchez votre propre script. |
Champs (HTML — .cqf-group) |
Prénom, Nom, Email (obligatoire) | Tout <label class="cqf-group"> placé dans .cqf-row se met sur la même ligne au-delà du palier ; hors de la rangée, il reste pleine largeur. |
Couleur du bouton (CSS — .cqf-submit) |
Dégradé #8453f5 → #7631ec |
Remplacez le background. |
Couleurs des champs (CSS — .cqf-input) |
Fond rgba(255,255,255,.06), bordure rgba(255,255,255,.1), focus #a78bfa |
Pour un fond clair, passez les champs en blanc et la bordure en gris chaud, comme dans l'exemple Fendrille. |
Fond (CSS — .fx-0753-root) |
#0a0a0f arrondi à 16 px |
Mettez background: transparent pour reprendre la couleur de votre section. |
FAQ
<form> sans action : ajoutez l'adresse de votre service (ou votre propre code d'envoi). L'effet ne gère que la mise en page.<label class="cqf-group"> dans .cqf-row et relevez le palier (vers 420 px) pour que chaque champ garde une largeur confortable.
