HEY

Neem deel aan de volgende Webflow uitdaging!

12 tips om een efficiënt Webflow-formulier te maken (voor meer conversies)

Webdesign is meer dan een kwestie van design. Het moet rekening houden met de functionele kant van een site, namelijk: het Webflow-formulier. Hoe moet ik het ontwerpen?

Bijgewerkt op

4/2/2021

12 tips voor het creëren van een effectief Webflow-formulier

Webdesign gaat niet alleen over design, en dat weet je heel goed. Om uw kansen om klanten te vinden of te behouden te vergroten, moet u een functionele website kunnen ontwerpen. Met functioneel heb ik het over één element in het bijzonder: het webflow formulier. Alle formulieren op de sites die u maakt, moeten efficiënt werken. Hoe kun je daar zeker van zijn? Deze gids over Webflow-formulieren en alles wat u erover moet weten, zal u zeker helpen!

🌈Sondage

Zijn de formulieren naar uw mening verplicht of niet voor een website?

Wat een vraag! Natuurlijk is het dat!
Nee, ze kunnen heel goed vervangen worden door andere functies.
Andere? Voel je vrij om je mening te delen in commentaren.

Samenvatting

Hoe voeg ik een Webflow-formulier toe?

Welke elementen moeten in de vorm worden opgezet?

Wijziging van het formulier

Inzoomen op vormelementen

Configuratie van succes en foutmeldingen

Tips voor het maken van formulieren

  1. Niet overlopen
  2. Maak de inhoud niet ingewikkeld
  3. Laat potentiële klanten niet in het ongewisse
  4. Verberg niets voor de bezoekers van de site
  5. Beperk u niet tot één formulier
  6. Gebruik geen meerdere kolommen
  7. Maak het proces niet ingewikkelder
  8. Maak de teksten niet onleesbaar
  9. Laat zien wat ze moeten doen
  10. Toon de vraaglabels boven de invulvelden
  11. Maak geen misbruik van bepaalde elementen
  12. Neem geen genoegen met een levenloze vorm

Conclusie

Video

Hoe voeg ik een Webflow-formulier toe?

Niets is eenvoudiger, als je eenmaal de pagina hebt geopend waarop je een formulier wilt invoegen, ga dan naar het paneel 'Elementen toevoegen' en vervolgens naar 'Elementen toevoegen'. Tot slot zie je"vorm". Ik hoop dat je het niet vergeten bent: op Webflow is het drag and drop systeem erg populair. Om dit formulier in te voegen, moet u er op klikken, niet loslaten, maar onmiddellijk slepen en neerzetten op de pagina. De beperking van Webflow is dat je het naar de juiste plaats moet slepen, maar als je Webflow beheert, weet je waar ik het over heb.

Welke elementen moeten in de vorm worden opgezet?

Ik ben er zeker van dat de gecreëerde Webflow vorm, in zijn ruwe staat, niet zal passen bij uw smaak. Je hebt iets meer gepersonaliseerd nodig. U zult deze 3 parameters moeten aanpassen (we zullen ze allemaal zien tijdens deze gids):

  • Wijziging van het formulier zelf (de velden die moeten worden toegevoegd of verwijderd, al dan niet aangepast)
  • Het bevestigingsbericht
  • De foutmelding van het formulier

Wijziging van het formulier

Standaard bevat een formulier alleen de essentiële elementen (naam, bericht, knop). Hier zijn echter nog enkele andere elementen die kunnen worden toegevoegd:

  • Invoer: Is degene die de door de internetgebruikers ingevoerde gegevens verzamelt. Alleen het wordt in één regel gepresenteerd.
  • Tekstveld: Ziet eruit als 2 druppels water bij de invoer . Het enige verschil is dat je er een lange tekst (meerdere regels) in kunt schrijven. Het wordt meestal gebruikt om berichten van internetgebruikers te ontvangen.
  • Bestandsupload: Zoals de naam al aangeeft, is deze ingesteld om bijlagen te ontvangen.
  • Selectievakje: Is een optie-keuzeschakelaar. Bezoekers hebben de keuze om slechts één optie of meerdere opties te selecteren.
  • Radioknop: Dit item is vergelijkbaar met het selectievakje, maar bezoekers kunnen slechts één optie selecteren.
  • Selecteer: Het werkt als een uitklaplijst. Uw klant vertelt u vervolgens welke informatie hij aan deze lijst wil toevoegen, zodat zijn prospects hun keuze kunnen maken.
  • ReCAPTCHA: U heeft waarschijnlijk al met reCAPTCHA te maken gehad tijdens het surfen op verschillende sites. Dit is een dienst van Google die wordt gebruikt om spam te voorkomen. Ik ken niemand die blij is om e-mails te ontvangen die hen op de hoogte stellen van spam van de formulieren die ze op hun site hebben geïnstalleerd!
  • Tot slot de indieningsknop: Het is MANDATORIE . Het is het enige element dat absoluut MANDATORIEEL is om in het formulier te worden opgenomen, omdat het het element is dat de actie in gang zet.

Niet al deze elementen zullen noodzakelijkerwijs op een site verschijnen. Afhankelijk van de wensen van uw klanten heeft u ze misschien niet allemaal nodig; het kan zijn dat u tevreden bent met de wensen die standaard aanwezig zijn. Als webdesigner die voor verschillende soorten bedrijven werkt, vind ik het belangrijk om al deze begrippen op zak te hebben!

Als u een of meer van deze velden in een formulier moet invoegen, gaat u gewoon naar Form Wrapper, dan naar Form element, en sleept u het betreffende element naar beneden.

Merk op dat deze elementen alleen kunnen worden toegevoegd in het blok dat is gereserveerd voor het Webflow-formulier.

Gratis Webflow Training

Inzoomen op Webflow-formulierelementen

Het enige wat we hebben gedaan is de verschillende elementen die Webflow voorstelt citeren en uitleggen. Hoe zit het met hun aanpassing? Elk van hen kan inderdaad worden gewijzigd. Om dit te doen, hoeft u alleen maar te dubbelklikken op het betreffende element. Een andere manier om dit te doen is door dat element te selecteren en vervolgens de entertoets op het toetsenbord in te drukken.

Voor elk element zijn hier de mogelijke aanpassingen:

  • Label: Dit is de beschrijving van de functie van het betreffende veld.
  • Vereiste optie: Om de keuze te laten of niet, aan de internetgebruikers, om een veld in te vullen (laten we veronderstellen dat uw klant het e-mailadres van zijn prospect wil hebben. In dit geval moet u de vereiste optie van het e-mailveld aanvinken).
  • Plaatshouder : Tekst wordt meestal weergegeven in formuliervelden. In het e-mailveld worden bijvoorbeeld termen als exemple@tondomaine.com ingevuld. Ik zou dus zeggen dat de plaatshouders zijn gezet om de gebruiker te begeleiden bij het schrijven. Het kan een simpel woord zijn of een lange zin.
  • Teksttype: Dit is het type gegevens dat in een veld kan worden ingevoegd (e-mail, wachtwoord, telefoonnummer...). Voor het wachtwoordveld bijvoorbeeld worden de ingevoerde teksten direct verborgen. Voor het veld telefoonnummer accepteert het alleen gecodeerde gegevens. Kortom, het betreffende veld accepteert alleen inhoud die overeenkomt met het ingevoerde type. Indien nodig wordt er een foutmelding weergegeven wanneer de verzendknop wordt ingedrukt.
  • Autofocus: Door deze optie op een element in te schakelen, leidt de webpagina automatisch naar dat formulierelement als het klaar is met laden.
  • Submit-knop: Voor deze knop zijn de enige parameters die moeten worden geconfigureerd de teksten die worden weergegeven in de normale modus, en in de stand-bymodus verzenden. Standaard worden ze respectievelijk ingediend en wachten ze alstublieft.

Configuratie van succes en foutmeldingen

Hoe weet ik of de gegevens correct worden verzonden of niet?

Aan de kant van de prospect verschijnt er een melding in de vorm van een bericht. Het geeft aan of de informatie al dan niet wordt doorgegeven aan de eigenaar of beheerder van de site. U kunt deze berichten dus aanpassen, door in de vorm van een wrapper te gaan , elementen in te stellen (snelkoppeling: D, op het toetsenbord), en ten slotte de toestandsopties te tonen . Er worden 3 staten getoond:

  • Normaal om de huidige status van het Webflow-formulier te tonen, precies zoals u het ziet in de bewerkingsmodus.
  • Succes om de mensen te laten weten dat de boodschap goed is gegaan.
  • Fout om te zeggen dat er een probleem was met het indienen van formulieren.

Indien mogelijk, adviseer ik u om een e-mailadres op te nemen om de verantwoordelijke persoon te bereiken in de foutmelding. Dit om te voorkomen dat prospects het contact met de eigenaar van de site opgeven onder het voorwendsel dat er een fout is gemaakt. Dat zou jammer zijn!

Aan uw kant (of die van uw klant) wordt u een bericht gestuurd wanneer het bericht is verzonden. Om aan te geven naar wie deze melding wordt gestuurd, hoeft u alleen maar te specificeren in de instellingen(projectinstellingen met formuliertabblad). Laten we precies uw zaak nemen (u, die de site heeft gemaakt). Ook u heeft recht op meldingen op dit formulier op uw Webflow dashboard. Niets is eenvoudiger. Nog beter is dat de bestanden die u hebt verzameld, kunnen worden geëxporteerd als een CSV-bestand.

Tips voor het maken van formulieren

1. Niet overlopen

Het is waar dat er niets beter is dan een goede hoeveelheid informatie over prospects om ze beter te begrijpen. Alleen, ik adviseer u niet om te proberen ze te verzamelen door middel van een formulier. Alleen al door het zien van het aantal in te vullen velden is het ontmoedigend! Soms heb je niets meer nodig dan het e-mailadres en de voornaam.

Uit studies blijkt namelijk dat door het aantal in te vullen velden in een formulier te verminderen (tot maximaal 4), de omrekeningskoers van de sites met 120% stijgt.

2. Maak de inhoud van het Webflow-formulier niet ingewikkeld

Heb je er ooit over nagedacht waarom je een formulier op je site wilde zetten? Is het om de lezers aan te moedigen om u te schrijven, om uw prospects om te zetten in klanten of iets anders? Wat ik je wil zeggen is dat elke vorm een specifiek doel heeft. Je moet er dus voor zorgen dat je deze doelstelling zo duidelijk mogelijk uitlegt.

Daarom wordt de voorkeur gegeven aan korte zinnen . Ik heb het over zinnen die het formulier beschrijven of die mensen aansporen het formulier in te vullen. Verknoei het dan niet met triviale dingen, dingen die je waarschijnlijk niet nodig hebt. Als u uw klanten vraagt om een inschrijvingsformulier voor de nieuwsbrief in te vullen, wat heeft het dan voor zin om hun telefoonnummer te vragen?

Eindelijk komt de submit-knop. Het heeft ook zijn rol te spelen. En bovenal moet het expliciet zijn. Het feit dat je een professionele website maakt, betekent niet dat je op een heel formele manier moet schrijven. Een eenvoudige zin kan de truc doen (als die maar expliciet genoeg is). Bijvoorbeeld: ik registreer me, krijg mijn code, koop, enz.

3. Laat potentiële klanten niet in het ongewisse

U moet uitleggen dat door het invullen van een formulier, mensen zeker iets terugkrijgen. Voor een contactformulier bijvoorbeeld, zullen zij begrijpen dat de webmaster of uw klant hun e-mail zal beantwoorden, d.w.z. dat zij informatie zullen ontvangen over een specifiek onderwerp. Hoe zit het met andere soorten vormen?

Bij het abonneren op een nieuwsbrief willen potentiële klanten zeker weten wat de verzendfrequentie is (wekelijks of maandelijks), de inhoud van de e-mails die ze zullen ontvangen (hulp, blog of promotie), het aantal bestaande abonnees, enz. Indien mogelijk zou een voorbeeld van een reeds eerder geschreven nieuwsbrief een pluspunt zijn!

Bovendien, als u van plan bent om alle informatie die u verzamelt vertrouwelijk te houden, des te beter! Het is zelfs het verstandigste om te doen. Maar hoe weten de toekomstperspectieven dat hun gegevens goed beschermd zijn? Dit is ook het vermelden waard. Een manier om hun vertrouwen te winnen.

Webstroomformulier

4. Verberg niets voor de bezoekers van de site

Dit advies is enigszins verwant aan het vorige, maar we richten ons vooral op de bescherming van de privacy en persoonsgegevens. Als je gevoelige informatie moet vragen (e-mail, telefoon, salaris...), kan je dat best met veel tact doen. Waarom leg je ze niet duidelijk uit wat je ermee gaat doen? Misschien ga je een telefoontje plegen, ze een e-mail sturen, je hebt het nodig voor een studie...?

5. Beperk u niet tot één formulier

Je kent de site goed, dat is normaal, want jij bent degene die het ontworpen heeft. Maar dat is niet het geval voor alle andere gebruikers van de site. Om een of andere reden (o.a. door onoplettendheid) kunnen sommigen van hen de vorm missen. Vandaar het belang om zich niet te beperken tot slechts één! Op verschillende (strategische) plaatsen van de site moet je wat plaatsen.

Als we het voorbeeld van de Yoast.com site nemen, als ik geen fout heb gemaakt in mijn account, dan heeft het 3 formulieren. Misschien is dat een van de redenen waarom ze erin geslaagd zijn om meer dan 96.000 abonnees te hebben (ja, het staat vermeld op hun site; ik heb het niet verzonnen).

6. Gebruik geen meerdere kolommen

Ik weet niet hoe het met jou zit, maar ik vond het nooit leuk dat ik van de ene naar de andere kolom moest stuiteren als ik een formulier moest invullen. Het maakt de dingen alleen maar ingewikkelder, een grote tijdverspilling als je het mij vraagt. Tenzij u dat moet doen (omdat uw klant veel informatie wil verzamelen en één kolom niet genoeg is), adviseer ik u om het eenvoudig te houden. In feite kan een formulier met eenvoudige kolommen "eenvoudig" worden genoemd. Precies zoals internetgebruikers ze graag hebben!

7. Maak het proces niet ingewikkelder

Wat als uw klant echt veel informatie wil? In plaats van de kolom in twee of drie te splitsen, geef ik je een betere oplossing. Verdeel het inleverproces van het formulier in verschillende stappen. Dat is wat e-commercesites doen als ze veel informatie over hun klanten nodig hebben.

Als potentiële klanten in het eerste deel een deel van hun contactgegevens hebben ingevuld, is de kans groot dat ze tot het einde toe zullen volgen en de aanvullende gegevens zullen verstrekken. Ook hier geldt weer een bepaalde strategie: begin met het vragen naar de belangrijkste informatie.

8. Maak de teksten niet onleesbaar

Zolang de teksten getypt zijn, is er geen kans dat ze onleesbaar zijn. Is dat wat je denkt? Nou, dat is het niet! Als je alle teksten in hoofdletters zet, is niet alleen de vorm niet mooi om naar te kijken, maar de tekst zorgt er ook niet voor dat je het wilt lezen. Het is niet verboden om hoofdletters te gebruiken, vooral niet voor korte woorden of zinnen. Ze kunnen zelfs worden gebruikt om bepaalde dingen te benadrukken. Ik denk niet dat we moeten overdrijven.

9. Laat zien wat ze moeten doen

Hebt u ooit een gewenst wachtwoord in een veld ingevoerd en te horen gekregen dat het niet genoeg was? Heb je het meer dan eens geprobeerd? Doe dit niet met mensen die je registratieformulieren proberen te gebruiken.

Maak de wachtwoordvereisten ook niet te ingewikkeld, aangezien gebruikers graag dezelfde wachtwoorden gebruiken voor hun online registraties, en als ze worden gedwongen om een wachtwoord in te voeren dat te ingewikkeld is, zullen ze het de volgende keer dat ze langskomen vergeten, en kunnen ze maar één keer bij u bestellen in plaats van meerdere keren.

10. Toon de vraaglabels boven de invulvelden

Als u klaar bent met een ontwerp van het formulier, zet u zich dan even in de schoenen van de internetgebruikers. Is het gemakkelijk in te vullen? Kunt u het nog makkelijker maken, bijvoorbeeld door etiketten boven elk veld te plaatsen? We maken meestal de fout om geen labels te plaatsen omdat we denken dat dit afbreuk doet aan het ontwerp van de site. Maar is dit echt het geval?

Er is zelfs onderzoek naar gedaan. Het is gebleken dat door het aanbrengen van labels bovenop de velden, de tijd om een veld te vullen sneller is. Internetgebruikers hoeven maar heel weinig oogbewegingen te maken. Daarom.

En dus, naast de velden, is het niet raadzaam? Om eerlijk te zijn, er zijn geen precieze regels over. Maar als u besluit om deze etiketten op de zijkant te plaatsen, zet ze dan bij voorkeur op een manier die de leesbaarheid ten goede komt.

11. Maak geen misbruik van bepaalde elementen

Uw doel blijft tot nu toe onveranderd: het invullen van formulieren en het invullen van formulieren vergemakkelijken. Om het nog gemakkelijker te maken, vermijdt u het gebruik van onnodige elementen. Herinnert u zich nog 3 elementen waarover ik u aan het begin van dit artikel heb verteld? Deselectievakjes, de radioknoppen en dekeuzelijst? Heb je je ooit afgevraagd wanneer je ze moet gebruiken, want ze lijken een beetje op elkaar.

Ter herinnering, de radioknoppen worden geplaatst wanneer u wilt dat bezoekers slechts één antwoord selecteren. De selectievakjes staan meerdere antwoorden toe uit een reeds gegeven lijst. Tot slot dient de selectie alleen te worden aangevraagd wanneer er meer dan 7 mogelijke antwoordkeuzes zijn waaruit de bezoeker zal moeten kiezen. Kortom, maak geen misbruik van deze 3 elementen.

12 Neem geen genoegen met een levenloze vorm

Wanneer u het kunt toestaan, gebruik dan klikbare afbeeldingen. Dit maakt het invullen van het formulier aangenamer, intuïtiever en eenvoudiger! We zijn nog steeds webdesigners!

Conclusie

Kortom, het ontwerpen van een formulier op Webflow is helemaal niet moeilijk. Het drag-and-drop concept maakt het altijd makkelijker! U hoeft alleen maar het formulierblok te verslepen en vervolgens hetzelfde te doen voor de formulierelementen en velden. Het overtuigen van mensen om ze in te vullen is echter een ander verhaal. Door de 12 tips toe te passen die ik je net heb gegeven in deze gids, kun je er zeker van zijn dat je je doel (en je klanten ook) gemakkelijk kunt bereiken!

Opmerkingen

Koffiepauze

4 items die je misschien leuk vindt

VRIJE TRAINING

Schrijf je hier in om de gratis Discovery Training te ontvangen
.

Begin met de Discovery Training, waar u de basis van Webflow leert en een voorproefje krijgt van wat u kunt verwachten in de Start Weblow training.

Start de gratis training