Naar inhoud
FFrosthaven Lab

12 — 12 varianten

Formulieren

Floating labels, vanishing placeholder, multi-step, dropzone, OTP en validatie-states die niet lelijk zijn.

Floating label

cssa11y

Label kruipt naar boven zodra er wordt getypt. Behoudt het label altijd zichtbaar, in tegenstelling tot een placeholder-only veld dat na invullen niets meer uitlegt.

Roterende placeholder

js
Waar zit uw woning?

Voorbeeldvragen wisselen elkaar af in het lege veld. Helpt bij een open tekstveld waar mensen niet weten wat ze moeten schrijven.

Gloeiende focusrand

css

Rand plus zachte gloed bij focus. Maakt duidelijk waar je bent zonder de standaard focus-outline weg te halen; dat laatste breekt toetsenbordnavigatie.

Multi-step wizard

jsconversie

Dienst

Woning

Contact

Stap 1: Dienst

Drie korte stappen in plaats van één lang formulier. Verhoogt het invulpercentage bij offerteaanvragen; meer dan vier stappen werkt weer averechts.

Inline validatie

jsa11y

Vul een geldig e-mailadres in

Fout tonen bij blur, niet bij elke toetsaanslag. Zet aria-invalid en koppel de melding met aria-describedby, anders hoort een screenreader niets.

Dropzone

jsupload

Sleep foto's hierheen

jpg, png · max 10 mb

Sleep hier foto's naartoe. Voor offerteaanvragen waar een foto van de situatie enorm scheelt. Voeg altijd ook een gewone bestandskiezer toe.

OTP-invoer

jsauth

Zes losse vakjes met automatische focussprong. Voor inlogcodes en reserveringsbevestigingen. Backspace moet naar het vorige vakje terugspringen.

Zoeken met suggesties

js

Suggesties verschijnen tijdens het typen. Bij meer dan twintig diensten of producten onmisbaar; filter client-side zolang de lijst onder de paar honderd blijft.

Keuzekaarten

jsconversie

Aanklikbare vlakken in plaats van vinkjes. Groter klikoppervlak, duidelijker op mobiel, en het formulier voelt minder als een formulier.

Budget-schuif

conversie
Budget€ 2.500
€ 500€ 10.000

Bereik kiezen in plaats van een bedrag typen. Mensen die geen exact budget hebben haken af op een leeg getalveld; met een schuif niet.

Sterbeoordeling

js
4 / 5

Hover licht de sterren tot die positie op. Voor een review-formulier na oplevering; koppel de score aan Review-schema voor rich results.

Volledig contactformulier

conversiespam

Naam, e-mail, telefoon, bericht plus een verborgen honeypot. Een honeypot vangt in de praktijk vrijwel alle formulierspam en kost geen enkele bezoeker moeite, in tegenstelling tot een captcha.