Webformulier Design: 15 Voorbeelden Om Het Goed Te Doen

Websiteformulieren zijn een essentieel onderdeel van elke website, landing page, of webwinkel. Of het doel van het formulier nu is om contact op te nemen met de website-eigenaar, een vragenlijst in te vullen, in te loggen op een account, iets te kopen, een nieuw account aan te maken, een reservering te boeken, of je in te schrijven voor een gratis proefperiode – elk detail van het design en de layout van het webformulier is cruciaal.

Je hebt jezelf misschien deze vragen in het verleden gesteld: Welke design layout werkt het beste voor mijn formulier? Wat zal gebruikers het meest aanspreken? Hoe kan ik mijn design motieven en merkidentiteit implementeren? Moet ik het formulier in een website popup plaatsen, of zou een footer formulier beter werken?

Met de lange lijst van websiteformulier-types en hun toepassingen, kan het behoorlijk intimiderend zijn om te bepalen waar je op moet letten bij je formulierontwerp. Wees gerust, het maken van een goed presterend websiteformulier zal binnenkort een stressvrije, uitdagende, maar toch lonende web creatie ervaring zijn.

Om onze webdesign strategie en workflows te versterken, hebben we een lijst samengesteld van 15 voorbeelden die je laten zien waar de allerbeste formulieren van gemaakt zijn.

Inhoudsopgave

15 Onvergetelijke Voorbeelden van Formulier Design

We staan op het punt om een bomvolle reis te maken door websiteformulieren van alle vormen, kleuren, layouts en maten. Bereid je voor om versteld te staan van deze lijst van 15 websiteformulieren waarvan het design en de structuur je web creatie skills zullen revolutioneren.

Contact Formulieren

Als je vastbesloten bent om elke gebruiker op ‘Verzenden’ te laten klikken voordat ze je site verlaten, kan je contactformulier het verschil maken tussen succes en falen. Basisbeslissingen zoals of en wanneer je animaties of voortgangsindicatoren toevoegt, hoe groot of vetgedrukt je koppen moeten zijn, hoe breed je formuliervelden moeten zijn – al deze factoren dragen bij aan het voltooiingspercentage van elk formulier en beïnvloeden de gebruikerservaring van je website.

#1 Brandingo

Brandingo is een Armeens designbureau en school die we in januari 2021 hebben gekozen voor onze Top 10 Elementor sites van de maand showcase. De Brandingo website is gebouwd om “het talent en de kennis van het bureau op het gebied van design, illustratie, UI/UX en branding te laten zien aan potentiële klanten en studenten.”

Wat ons altijd opvalt aan Brandingo’s site is het gebruik van zoveel beweging en interactieve effecten die allemaal perfect bij elkaar passen. Ze hebben duidelijk de kunst beheerst om een balans te vinden in boeiende interactieve functies die niet te veel zijn voor het menselijk oog.

Onze Favoriete Dingen:

De vele toepassingen van Lottie animaties die verschijnen terwijl je naar beneden scrolt op de pagina.
Het tekstpad dat rond de cirkelvormige achtergrond van het formulier draait zodra je het einde bereikt.

#2 De Space Cube

De Space Cube is een desktoporganisatieproduct gemaakt door Carol Havener uit Sydney, Australië. Ontworpen met zowel huiseigenaren als kantoren in gedachten, richt het product zich op het probleem van het organiseren van beperkte ruimtes (zoals een bureaublad, een studeerkamer, een familiekamer, enz.).

Carol bouwde haar productwebsite met Elementor, gebruikmakend van de WooCommerce builder om aan haar e-commerce behoeften te voldoen. Gezien het brede doelpubliek, gebruikt de productsite een slim wit en zwart kleurenschema. De motieven houden rekening met het moderne, slanke en minimalistische ontwerp van het product, en de contactpagina en het formulier bereiken hetzelfde doel.

Onze Favoriete Dingen:

De elegante lettertypecombinatie die kalligrafie, handgeschreven stijl combineert met het schreefloze lettertype “Bodoni”.

De verfijnde achtergrondafbeelding geplaatst achter de solide, vierkante witte achtergrond van het formulier. Dit brengt echt de gebruikssituatie van het product tot leven, en herinnert de gebruiker subtiel aan hoe fijn het is om aan een schoon, opgeruimd bureau te zitten dat rust uitstraalt.

#3 Metropolis Moving

Metropolis Moving is een verhuisbedrijf in New York City, gevestigd in Brooklyn, NY. Hun website kleurenschema en ontwerp gebruiken NYC-thema kleuren zoals taxigeel, marineblauw en grijs om de essentie van hun op maat gemaakte verhuisservice binnen de bruisende “Big Apple” te visualiseren. Het Contactformulier op de site is een kort, meerstapsformulier voor de potentiële klant om in te vullen en een prijsopgave te ontvangen.

Onze Favoriete Dingen:

De gemarkeerde kaartroute en locatiepunten vangen de onvoorspelbare ervaring (route) tussen het verhuizen van het ene adres naar het andere.

De formulier velden zijn ontworpen met alle webformulier vuistregels:

- Minimaal aantal formulier velden
- Links uitgelijnde formulier velden en plaatsaanduidingen
- Enkelkoloms lay-out
- Duidelijk gemarkeerde stapindicator

Vragenlijst Formulieren

Je publiek vragen stellen over hun interesses, voorkeuren, doelen, enz. is een goede manier om een dialoog aan te gaan. Maar wat zijn de beste manieren om je vragen te presenteren? Moet je een informele sfeer creëren? Welk formaat werkt het beste voor je publiek? Al deze overwegingen zijn even belangrijk, maar de opties om elk ervan aan te pakken zijn ongelooflijk gevarieerd.

#4 Spotify Pets

Spotify Pets is een afspeellijstfunctie binnen de Spotify digitale muziek-, podcast- en videoservice. Deze uniek eigenzinnige toevoeging aan Spotify gebruikt het algoritme van het platform om afspeellijsten te maken voor het huisdier en de huisdiereigenaar om naar te luisteren — gebaseerd op de luistergewoonten van de gebruiker en de eigenschappen van het huisdier.

Onze Favoriete Dingen:

De verstelbare sleepbalkanimatie die de gebruiker aanpast om de kenmerken van zijn huisdier te beschrijven — is een boeiende invoermethode die ook typactiviteiten elimineert.
De voortgangsindicator past perfect in de vrolijke, geïllustreerde achtergrond.
Het meerstaps vragenlijstformulier heeft één vraag per scherm, elk super mobielvriendelijk.

#5 RedBull

Red Bull is een internationaal verkrijgbare energiedrank waarvan de slogan is “Red Bull geeft je vleugels.” Op hun productpagina op de website betrekt Red Bull de bezoeker in merkverhalen, met een interactieve quiz over duurzaamheid en milieubescherming — twee van de pijlerwaarden van het merk.

Onze Favoriete Dingen:

De timer met aftelling voor elke vraag creëert spanning en urgentie om te antwoorden.
De grote selecteerknoppen maken de antwoordkeuzes super toegankelijk en gemakkelijk aan te klikken.
De geanimeerde achtergrondvideo van de quiz op de homepage.

Inlog Formulieren

Inlogformulieren zijn echt een ontzettend belangrijk onderdeel van de interface van je product of dienst. Gebruikers zullen dit formulier waarschijnlijk keer op keer zien, dus vertrouwdheid en eenvoud zijn cruciaal. Je formulier moet uitnodigend, intuïtief en simpel zijn – maar tegelijkertijd de gebruiker zo veel mogelijk enthousiasmeren. Vaak kunnen de kleinste details en illustraties een groot verschil maken.

#6 gidimo

gidimo is een Nigeriaans EdTech-bedrijf met een online leerplatform voor leerlingen van alle achtergronden en levensfases. De technologie van het platform gebruikt gamificatietechnieken en aangepaste gebruikerstrajecten die ‘het leuk en makkelijk maken om onderweg van alles te leren’.

De inlogpagina van gidimo’s Elementor-gebouwde website (een winnaar van onze maart 2021 showcase) heeft een strakke lay-out met een slider gallery naast het inlogformulier. Dit geeft de pagina een extra laag betrokkenheid en aantrekkingskracht: gebruikers kunnen door wisselende illustraties navigeren die de positieve vibe van het platform versterken.

Onze favoriete dingen:

De achtergrondkleur van de slider wisselt tussen groen en wit terwijl de gebruiker erdoorheen navigeert.
Elke rij van het formulier heeft dezelfde breedte, wat zorgt voor een uniforme, georganiseerde lay-out die duidelijkheid en consistentie bevordert.

#7 Snappet

Snappet is een online educatief platform voor tablets, gebruikt door wiskundedocenten die individuele leertrajecten van leerlingen willen personaliseren en tegelijkertijd hun prestaties willen monitoren. Het leermiddel is bedoeld voor basisschoolleerlingen, wat makkelijk te begrijpen is door het vriendelijke, kleurrijke kleurenschema en de vectorillustraties van de site.

Onze favoriete dingen

De geïllustreerde use-case op de inlogpagina voor leerlingen brengt een emotionele boodschap over: het herinnert leerlingen aan de bemoedigende (zij het virtuele) high-five en positiviteit die ze zullen voelen door het platform te gebruiken.
Het typografieschema met één lettertype gebruikt variaties van één font (verschillende kleuren en groottes). Om eentonigheid te voorkomen, geven twee verschillende kleuren en groottes de informatiehiërarchie tussen de tekstelementen aan.

Product Landing Page Formulieren

Product landing pages zijn ontzettend belangrijk in website formulierontwerp, omdat zoveel van het koopgedrag van bezoekers een direct gevolg is van het ontwerp van de productpagina. Gezien alle informatie die consumenten willen weten over elk individueel product, moet er zorgvuldig worden omgegaan met de beslissing wat en hoe op elke productpagina op te nemen.

#8 Bram

Een winnaar van onze WooCommerce sites showcase, Bram is een handgemaakte leren portemonnee fabrikant gevestigd in Barcelona. De lay-out van het productpagina-ontwerp (in wezen een inzendformulier) was voor ons bijzonder inspirerend.

Onze favoriete dingen:

De grote verscheidenheid aan kleurkeuzes wordt in één regel getoond voor gelijktijdige weergave, geen noodzaak om op een dropdown-menu te klikken om elke kleuroptie te zien.
De “Toevoegen aan winkelwagen”-knop is makkelijk te vinden, bovenaan de inhoud geplaatst in plaats van als laatste onderdeel op de pagina (na de productdetails en inklapbare tabbladen).
De overvloedige witruimte op de pagina maakt de productdetails duidelijk en leesbaar, en het leerdetail van het product is goed zichtbaar.

#9 ABATTOIR VÉGÉTAL

ABATTOIR VÉGÉTAL is een veganistisch bistro en kruidenier in Parijs, Frankrijk. De e-commerce site (gebouwd met Elementor en WooCommerce, en een winnaar van de augustus 2020 showcase) bevat zowel de bistro afhaal- als de kruideniersmenu’s, waar de gebruiker ingrediënten en gerechten kan kiezen om online te bestellen.

Onze favoriete dingen:

Het gebruik van WordPress custom fields; De productpagina en het bestelformulier bevatten alle basisinformatie van de maaltijd in een efficiënt, aantrekkelijk formaat.
De aantrekkelijke formaten gebruikt in de WooCommerce winkelwagen van de pagina: de artikelindicator en de “Toevoegen aan winkelwagen”-knop hebben een felle achtergrondkleur, wat plezier en flair toevoegt aan de checkout gebruikersstroom en de algehele online winkelervaring.
De felgekleurde fonts en gedetailleerde foto’s communiceren de verbale en visuele informatie duidelijk – een opwindende manier om een culinaire winkelervaring te beginnen.

Aanmeldformulieren

Een succesvol aanmeldproces vervult de wensen van elke webcreator die een websiteformulier bouwt. Dus, is het echt mogelijk om deze droom werkelijkheid te maken? Alles is mogelijk, maar de stappen die je zet om je bezoekers tevreden te stellen kunnen krachtige gevolgen hebben. Elk detail, van de zichtbaarheid van knoppen tot het contrast tussen elementen, zal de resultaten van het invullen van het formulier aangeven.

#10 Duolingo

Duolingo is een website en mobiele app voor het leren van talen. Als merk is de missie van het bedrijf om ‘onderwijs gratis, leuk en toegankelijk voor iedereen te maken’. Het scherm hierboven verschijnt tijdens het onboardingproces van het platform, waar de gebruiker zijn taalleer-doel instelt en een leerpad kiest.

Onze favoriete dingen:

De flat design avatars en illustraties die door de hele site worden gebruikt, als afbeelding-thumbnail knoppen binnen het formulier.
De justified grid layout stroomlijnt de zeven illustraties — en verbindt hun verschillende maten, kleuren en vormen.

#11 Stripe

Stripe is een betalingsverwerkingssoftware die wordt gebruikt door e-commerce websites en mobiele applicaties. Met Stripe kunnen bedrijven betalingen accepteren, uitbetalingen doen en hun bedrijf online beheren. De accountregistratie is eenvoudig en gemakkelijk, mogelijk gemaakt door een simpel, maar aantrekkelijk aanmeldformulier.

Onze favoriete dingen:

De slagschaduw rond de achtergrond van het inzendformulier onderscheidt het aanmeldformulier van de opsommingstekens aan de linkerkant van de pagina.
De georganiseerde, beknopte opsommingstekens die drie belangrijke voordelen van het product vermelden, versterken de toegevoegde waarde van het aanmaken van een Stripe-account.

Boekingsformulieren

Succesvolle online boekingsformulieren gedijen op positieve, bemoedigende sferen. Wanneer je bezoekers op het punt staan om te kijken hoe ze jouw dienst kunnen boeken, moet je alles doen wat je kunt om ze attent, geïnteresseerd en blij te houden over wat ze binnenkort gaan ervaren.

#12 Be A Roshan

Be A Roshan is een energietherapie- en meditatiecentrum op het eiland Mauritius. De Elementor-site van Be A Roshan biedt online afspraken en evenementenboeking voor klanten. De ontwerpmotieven (zoals de zonnige dag homepage achtergrond) die voor de site zijn gekozen, weerspiegelen de sfeer van de rustgevende Reiki- en meditatie-ervaringen.

Onze favoriete dingen:

De visuele kalenderinterface die de beschikbare Reiki-behandelingen voor de hele maand toont.
De informatieve tekstelementen boven de kalender informeren de gebruiker over belangrijke details die van invloed zijn op zijn beslissing hoe het formulier in te vullen.
Het evenementregistratieformulier is ontworpen om de gegevens snel te verzamelen en een soepele ervaring te creëren voor de deelnemers zonder hen in verwarring te brengen of af te leiden

#13 Presidio

Presidio Speech and Learning is een kindertherapiepraktijk in San Francisco die zich richt op kinderen die support nodig hebben bij spraak, taal, lezen en schrijven. De met Elementor gebouwde Presidio-site werd uitgelicht in onze November 2020 showcase, geprezen om zijn pastelkleurige aquarel, kindvriendelijke ontwerpmotieven. Deze details komen tegemoet aan het doelpubliek van het centrum: ouders die op zoek zijn naar advies en attente, gevoelige input over de individuele behoeften van hun kind.

Onze favoriete dingen:

Het blauwe en groene kleurenpalet dat in het boekingsformulier wordt gebruikt, breidt de opbeurende sfeer van de website uit over de hele afspraak-boekings-gebruikersstroom.
De achtergrondkleur van de formuliervelden zorgt voor een aantrekkelijke, uitnodigende lay-out voor een aangenaam indieningsproces.

Gratis proefperiode formulieren

Gratis proefperiodes worden altijd gewaardeerd door potentiële klanten. Bovenal helpt het benadrukken van de voordelen en toegevoegde waarde van het uitproberen van je dienst of product bezoekers bij het nemen van hun uiteindelijke beslissing. Hoe meer stimulans je ze geeft om door te gaan, hoe waarschijnlijker het is dat ze dat ook doen.

#14 Hone

Nog een winnaar van de November 2020 showcase, Hone is een online leerplatform dat live lessen aanbiedt over onderwerpen zoals teamleiderschap, management en interpersoonlijke communicatievaardigheden. Het platform faciliteert een empowerende, proactieve benadering van teamleiderschap en interne communicatie. Deze idealen worden succesvol overgebracht door het opgewekte, energieke roze en paarse kleurenschema van de website, en door de stem en toon van de geschreven inhoud van hun site.

Onze favoriete dingen:

Het roze onderstreepeffect zorgt voor een visuele aanwijzing om de krachtige woorden van het formulier te benadrukken — het benadrukt voor de potentiële gebruiker dat Hone’s proefperiode van 30 dagen helemaal gratis is.
De opsommingstekens naast het formulier laten de toegevoegde waarde en belangrijkste voordelen van het product zien.
De icoontjes die voor elk opsommingsteken worden gebruikt, lijken op de gebruikerservaring en interface van het product.

Abonnementsformulieren

Zodra je je gebruiker hebt overtuigd dat jouw content het waard is om op te abonneren, rekent hij erop dat je content levert die hij wil blijven lezen. Transparant zijn over wat je van plan bent hem te sturen, kan altijd helpen zodat hij weet wat hij kan verwachten en ernaar uitkijkt.

#15 Codepuffin

Codepuffin is de zakelijke en portfolio website van Amy Nortje, een webontwikkelaar uit Nieuw-Zeeland. Amy heeft haar website gebouwd met Elementor, waar ze haar diensten opsomt en haar portfolio en persoonlijke blog toont. Amy’s blogberichten focussen op haar “geleerde lessen” uit verschillende projecten en klantrelaties, en dienen als een persoonlijke, informele bron van inzicht en support voor haar lezers.

Onze favoriete dingen:

De inhoud en taal van het abonnementsformulier sluiten aan bij de boodschap van de blog zelf: grappige anekdotes die verweven zijn met waardevolle professionele inzichten.
De kop van het formulier, “Wil je iets cools?” komt meteen ter zake. Deze vraag formuleert het voordeel voor de gebruiker om zich te abonneren op de nieuwsbrief op een conversationele toon, waardoor er een band ontstaat met de bezoeker die interesse wekt in Amy’s inzichten en gevarieerde ervaringen.

Maak een meesterwerk

Er is geen twijfel over mogelijk: niets is bevredigender dan een dashboard dat succesvolle formulierinzendingen laat zien. Nu we hebben geleerd van de allerbesten, kunnen we met zekerheid zeggen dat het beste nog moet komen. Je zult ongetwijfeld veel websiteformulieren maken tijdens je webcreatiecarrière, en nu je 15 kunstwerken van websiteformulieren hebt gezien, is het tijd om het webformulier van je dromen te gaan bedenken, ontwerpen en bouwen.

Originally posted 2021-05-03 04:00:00.

Webformulier Design: 15 Voorbeelden om het Goed te Doen

Inhoudsopgave