Blog

Ga naar onze formulier analyse tool om inzicht te krijgen in je web formulieren. Het is gratis, en de resultaten verschijnen direct op je scherm.

Waarom deze tool gebruiken?

Formulieren zijn een van de belangrijkste elementen die vrijwel altijd tussenin verkennende bezoeker en een betalende klant in staan. Voor lead-generatie website zijn het contactformulieren, evenementen en Software-as-a-Service bedrijven hebben registratie formulieren en voor e-commerce websites zijn het checkouts. Hierom is het belangrijk ervoor te zorgen dat je formulieren zo goed mogelijk opgesteld zijn. Wij geloven dat onze formulieren tool hierbij kan helpen.

Hoe gebruik je deze tool?

1. Ga naar onze formulier analyse tool.
2. Vul je URL in (bijv. example.org/register).
3. Bekijk de aanbevelingen voor je formulier.

Wanneer gebruik je ‘use HTML source’

Nadat je jouw URL hebt ingevoerd zal de tool proberen de HTML op te halen net zoals wanneer de pagina weergegeven zou worden in een web browser. Hoewel dit in de meeste gevallen zal werken zijn er enkele uitzonderingen die hieronder zijn weergegeven,

• Formulieren op de pagina die gegenereerd worden door frameworks zoals NodeJS of AngularJS kunnen niet aan de hand van hun URL geanalyseerd worden.
• Pagina’s die niet publiek toegankelijk zijn zoals checkout pagina (die een item in de winkelwagen vereisen) of ‘Account voorkeuren’ formulieren (die vereisen dat je bent ingelogd) zijn ook niet beschikbaar.

Hoe gebruik je “use HTML source”

Wanneer je de formulieren op dergelijke pagina’s wilt analyseren dan doe je het volgende: ga naar de betreffende pagina in de web browser, bekijk de HTML bron (ctrl-u, cmd-u or cmd-option-u), selecteer alles, kopieer, en plak in het tekstveld dat verschijnt nadat je hebt geklikt op de ‘use HTML source’ link.

Wat analyseert deze tool?

Disclaimer: Al de aanbevelingen zijn geen universele waarheden maar slechts A/B test ideeën.

Hoewel de meeste als best practices voor formulieren gelden raden wij aan elk van deze aanbevelingen te A/B testen om jezelf ervan te verzekeren dat ze ook op jouw website goed werken. We raden aan tools zoals Formisimo of Optimizely hiervoor in te zetten.

HTTPS op de pagina

Wanneer een pagina wordt weergegeven gebruik makende van het reguliere HTTP protocol, dan wordt de informatie die daar op staat niet versleuteld.

Aanbeveling: Beveilig je pagina’s middels HTTPS om zo de informatie die daarop staat te versleutelen. Dit toegevoegde niveau van vertrouwen zal er waarschijnlijk voor zorgen dat zowel het aantal mensen dat start aan je formulier als het voltooid zal toenemen.

Mobiel-vriendelijke viewport

Met een juist ingestelde viewport maak je het eenvoudiger voor bezoekers op mobiele apparaten om je formulier in te vullen. Dit zou kunnen leiden tot een stijging van het aantal conversies.

Aanbeveling: Voeg de viewport meta tag toe aan je pagina en gebruik CSS media queries om deze responsive te maken.

Vereiste of optionele velden

Je bezoekers specifiek vertellen welke velden verplicht of optioneel zijn (meer dan door alleen een * er bij te zetten) kan frustratie verminderen en geeft hen een aanvullend gevoel van controle over het formulier.

Aanbeveling: Toon vereist of optioneel door velden te markeren met (vereist), (optioneel) of een * en wanneer je de * gebruikt een legenda waarin wordt uitgelegd dat velden gemarkeerd met een * verplicht zijn.

Verstuur je formulieren middels HTTPS

Wanneer formulier informatie verstuurd wordt naar een niet-HTTPS pagina, dan kan deze data mogelijk gelezen worden door kwaadwillenden.

Aanbeveling: Verstuur formulieren naar HTTPS om de informatie die verstuurd wordt te versleutelen en de data veilig te houden.

Tabellen

Tabel tags in HTML dienen alleen gebruikt te worden om tabulaire data weer te geven. Deze tags gebruiken om formulieren vorm te geven maakt het moeilijk de code te onderhouden en de formulieren in te vullen op mobiele apparaten.

Aanbeveling: Verwijder alle formulier tags en stijl het formulier in plaats daarvan met divisies.

ARIA attributen

Door deze attributen op formulier velden te gebruiken kun je ze meer toegankelijk maken voor bezoekers met beperkingen.

Aanbeveling: Voeg ARIA attributen toe zoals aria-hidden of aria-required aan je formulier velden toe.

Maxlength

Wanneer de ‘maxlength’ incorrect is ingesteld zorgt dit ervoor dat bezoekers niet in staat zullen zijn hun informatie juist in te vullen. Verder geeft het geen enkele feedback terug aan bezoekers.

Aanbeveling: Verwijder het ‘maxlength’ attribuut van input velden.

Inline Javascript

Inline Javascript zorgt voor slechte toegankelijkheid, maakt het onderhouden van code moeilijk, en browser caching onmogelijk.

Aanbeveling: Verwijder inline javascript van formulier velden.

Aantal opties in dropdowns

Wanneer je een select element gebruikt dat meer dan 3 opties heeft, kunnen mobiele bezoekers het moeilijk hebben om het juiste item te selecteren omdat ze geen goed overzicht van alle items kunnen zien.

Aanbeveling: Geef minder opties weer, overweeg een autocomplete te gebruiken of maak gebruik van een ander formulier element dan select.

Lengte van de opties in dropdowns

Wanneer opties aanwezig zijn van meer dan 25 karakters in lengte, kunnen mobiele bezoekers moeite hebben het juiste item te selecteren omdat zij deze niet volledig kunnen lezen.

Aanbeveling: Geef kortere opties weer, of overweeg van een ander formulier element dan select gebruik te maken.

Labels

Labels bieden bezoekers de mogelijkheid om te zien welke informatie er van hen gevraagd wordt en laat hen eenvoudig een veld selecteren door op het label te klikken.

Aanbeveling: Voeg een label toe aan formulier velden.

Elements buiten formulier tags

Internet browsers zijn niet in staat velden te verwerken die niet zijn omsloten door formulier tags.

Aanbeveling: Voeg valide form tags in rondom alle invul velden op de pagina. Zorg ervoor dat losse formulieren ook losse form tags hebben.

Hulp tekst

Bezoekers weten vaak niet wat, hoe, waar en waarom ze bepaalde velden in moeten vullen. Door hulp tekst aan te bieden (automatisch of door de gebruiker geactiveerd) kan dit probleem deels verholpen worden.

Aanbeveling: Voeg een icoon toe aan onduidelijk velden, bijvoorbeeld een blauwe (i) die een kleine tekstballon zichtbaar maakt.

‘Reset’ knoppen

Een invul veld met type=”reset” is op de pagina gevonden. De actie van dit formulier element kan niet ongedaan worden, wat kan zorgen voor grote frustratie bij bezoekers die er (per ongeluk) op klikken.

Aanbeveling: Verwijder reset knoppen van de pagina en vervang ze indien benodigd door Javascript alternatieven.

CAPTCHA

CAPTCHA velden zijn berucht om de complexiteit die het vereist om ze juist in te vullen. Wanneer een bezoeker niet in staat is om een CAPTCHA juist over te typen, verlies je mogelijk een toekomstige klant hierdoor.

Aanbeveling: Verwijder CAPTCHA velden van alle formulieren op de pagina.

IDs

Een ‘id’ attribuut instellen voor alle formulier elementen stelt je in staat ze te identificeren en targeten. Dit zorgt er vervolgens voor dat je er eenvoudig labels aan kunt hangen en tevens clicks kunt meten als gebeurtenissen in Google Analytics of deze element als click doelen kunt gebruiken in A/B testing software.

Aanbeveling: Voeg een ‘id’ attribuut toe aan je velden.

‘Submit’

De knop tekst ‘Submit’ legt niet uit aan een gebruiker wat er gaat gebeuren zodra ze klikken. Het is daarom aan te raden duidelijk te beschrijven wat er gebeurt zodra een bezoeker op een knop klikt.

Aanbeveling: Kies een alternatieve tekst voor alle knoppen die gebruik maken van de tekst ‘Submit’.

Checkboxes aanvinken

Bezoekers hebben de behoefte om in controle te zijn over een website. Door vantevoren checkboxes aan te vinken (en hierdoor bezoekers te verplichte opt-out gedrag te vertonen) neem je een deel van deze controle van hen af.

Aanbeveling: Verwijder het ‘checked’ attribuut van formulier velden.

Twee wachtwoord velden

Een wachtwoord twee maal intypen is onhandig voor gebruikers. Omdat ze het wachtwoord niet kunnen zien wanneer ze het typen, neemt het risico op fouten met twee velden toe.

Aanbeveling: Verwijder één wachtwoord veld en stap gebruikers toe een knop om te zetten die hen in staat stelt hun wachtwoord dat zij hebben ingevoerd in het veld te lezen.

Multiple

Select elementen met het ‘multiple’ attribuut worden beschouwd als lastig om te voltooien, zeker voor minder gevorderde internet gebruikers.

Aanbeveling: Verwijder het ‘multiple’ attribuut van formulier velden (door bijvoorbeeld over te stappen op checkboxes).

---

Engelse vertaling: How to Optimize Your Forms - Free Tool

---