Hoe een WordPress-formulier met meerdere stappen met voortgangsbalk te bouwen

Rifat WordPress-zelfstudies Jun 21, 2023

Het creëren van een aantrekkelijk en gebruiksvriendelijk formulier is een essentieel aspect van het succes van elke website, vooral als het gaat om het verzamelen van waardevolle informatie of het genereren van leads. Een effectieve manier om de gebruikerservaring te verbeteren en de voltooiingspercentages van formulieren te verbeteren, is door een formulier met meerdere stappen en een voortgangsbalk te implementeren. Dit dynamische formulierontwerp verdeelt langdurige of complexe processen in beheersbare stappen, leidt gebruikers door elke fase en geeft hen een duidelijke indicatie van hun voortgang.

Als u een WordPress-gebruiker bent en geïnteresseerd bent in het opnemen van deze krachtige formulierfunctie in uw website, bent u op de juiste plek. In deze gids zullen we u door het proces leiden van het maken van een meerstapsformulier met een voortgangsbalk met behulp van de veelzijdige mogelijkheden van WordPress.

Door gebruik te maken van de flexibiliteit van WordPress en het uitgebreide ecosysteem van plug-ins en tools, kunt u eenvoudig meerstapsformulieren maken en aanpassen aan uw specifieke vereisten. Of u nu gebruikersfeedback wilt verzamelen, klantinformatie wilt verzamelen, enquêtes wilt houden of online aankopen wilt vergemakkelijken, een meerstapsformulier met een voortgangsbalk kan de gebruikerservaring aanzienlijk verbeteren en het voltooiingspercentage verhogen.

Belang van meerstapsformulier

Meerstapsformulieren zijn aanzienlijk populairder geworden in webdesign en -ontwikkeling vanwege hun effectiviteit bij het verbeteren van de gebruikerservaring en het verhogen van de conversieratio's. In tegenstelling tot traditionele formulieren met één pagina, splitsen meerstapsformulieren complexe processen op in kleinere, beter beheersbare secties, waarbij gebruikers door een reeks opeenvolgende stappen worden geleid.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

De belangrijkste reden waarom formulieren met meerdere stappen zo populair zijn geworden, is hun vermogen om gebruikersbetrokkenheid en voltooiingspercentages te verbeteren. Door informatie op een gestructureerde en progressieve manier te presenteren, verminderen deze vormen de cognitieve overbelasting en maken ze de algehele ervaring intuïtiever en gebruiksvriendelijker. Gebruikers voelen zich minder overweldigd wanneer ze worden geconfronteerd met een lang, intimiderend formulier, wat resulteert in hogere voltooiingspercentages en minder verlaten formulieren.

Bovendien bieden formulieren met meerdere stappen een uitstekende gelegenheid om meer gedetailleerde en nauwkeurige informatie van gebruikers te verzamelen. Door het formulier te segmenteren in logische secties, elk gericht op specifieke details, is de kans groter dat gebruikers nauwkeurige antwoorden geven en het volledige formulier invullen. Dit leidt tot een betere gegevenskwaliteit en stelt bedrijven in staat om beter geïnformeerde beslissingen te nemen op basis van de verzamelde informatie.

Naast voordelen voor de gebruikerservaring kunnen formulieren met meerdere stappen de conversieratio's aanzienlijk beïnvloeden. Door het conversieproces op te splitsen in kleinere stappen, kunnen bedrijven aan het einde van elke sectie op strategische wijze overtuigende call-to-actions (CTA's) plaatsen. Deze aanpak zorgt voor een betere targeting, omdat de CTA's kunnen worden aangepast aan de voortgang en intentie van de gebruiker. Bovendien worden gebruikers door een voortgangsbalk of -indicator gemotiveerd om door te gaan met de stappen, waardoor de kans op succesvolle conversies toeneemt.

Gezien het belang van meerstapsformulieren bij het verbeteren van de gebruikerservaring, het verhogen van voltooiingspercentages en het verbeteren van conversiepercentages, is het van cruciaal belang voor personen die betrokken zijn bij webontwikkeling, met name in WordPress, om over de kennis en vaardigheden te beschikken om dergelijke formulieren te bouwen. Door in WordPress meerstapsformulieren met voortgangsbalken te kunnen maken, kunnen ontwikkelaars en website-eigenaren hun online formulieren optimaliseren, wat resulteert in een hogere gebruikerstevredenheid, meer conversies en uiteindelijk betere bedrijfsresultaten.

Bouw een meerstapsformulier met voortgangsbalk in WordPress

Als het gaat om het maken van een meerstapsformulier in WordPress, is het gebruik van een van de beschikbare WordPress-plug-ins de eenvoudigste oplossing. Onder de vele opties valt WPForms op als de ultieme tool voor de klus, waardoor het de beste plug-in voor WordPress-contactformulieren op de markt is.

WPForms staat bekend om zijn beginnersvriendelijke aanpak en heeft al zijn stempel gedrukt op meer dan 5 miljoen websites. Deze krachtige plug-in stelt je in staat om moeiteloos WordPress-formulieren voor verschillende doeleinden te bouwen, waardoor codering niet meer nodig is. Of u nu op zoek bent naar gebruiksvriendelijke registratieformulieren, aanmeldingsformulieren, enquêteformulieren, formulieren voor het uploaden van bestanden, bestelformulieren of aanvraagformulieren, WPForms heeft het voor u.

Dankzij de intuïtieve formulierbouwer met slepen en neerzetten en een reeks vooraf gebouwde formuliersjablonen, wordt het maken van aangepaste formulieren een fluitje van een cent. Bovendien biedt WPForms handige add-ons voor populaire betalingsverwerkers zoals Stripe en PayPal, waardoor naadloze betalingsacceptatie in uw WooCommerce-winkel mogelijk wordt.

Bovendien kan WPForms naadloos worden geïntegreerd met toonaangevende WordPress-plug-ins voor het maken van pagina's, zoals Elementor, Divi en SeedProd. Dit zorgt voor een probleemloze weergave van formulieren op de voorkant van uw website, waardoor handmatige codering of CSS niet meer nodig is.

Terwijl de gratis versie van WPForms voldoende is voor standaard contactformulieren, ontgrendelt de WPForms Pro- versie geavanceerde functionaliteit. Door te upgraden naar WPForms Pro krijgt u toegang tot functies zoals voorwaardelijke logica, enquêteformulieren, geavanceerde formuliersjablonen en, cruciaal, meerstapsformulieren—essentieel voor onze zelfstudie.

Voor deze handleiding gebruiken we de WPForms Pro-versie , uitgerust met alle benodigde tools om moeiteloos meerstapsformulieren te maken in WordPress.

Maak een nieuw meerstapsformulier in WordPress

Na het succesvol installeren van de WPForms-plug-in, kunt u eenvoudig toegang krijgen tot de functies door naar de sectie WPForms » Add New in uw WordPress-dashboard te gaan. Deze actie zal onmiddellijk de pagina met formuliersjablonen weergeven, waardoor u een keuze kunt maken uit verschillende formuliertypen.

Het opsplitsen van elk formulier in een meerstapsformulier kan moeiteloos worden bereikt met behulp van de WPForms-plug-in. Om dit proces te verduidelijken, zullen we ons concentreren op het transformeren van een contactformulier.

Begin met het toewijzen van een naam aan het nieuw gemaakte formulier en ga vervolgens verder met het selecteren van het sjabloon "Eenvoudig contactformulier".


Na selectie zal WPForms doorgaan met het laden van de aangewezen sjabloon in zijn intuïtieve formulierbouwer met slepen en neerzetten.

Bij observatie wordt het duidelijk dat het basiscontactformulier al formuliervelden bevat voor Naam, E-mail en Opmerking of Bericht. Door gebruik te maken van de functionaliteit voor klikken, slepen en neerzetten, hebt u de flexibiliteit om de volgorde van deze velden aan te passen aan uw voorkeuren.

Bovendien is het toevoegen van extra tekstvelden aan het formulier moeiteloos. Dit kan worden bereikt door in het linkerpaneel het gewenste tekstveld te selecteren en dit vervolgens aan de rechterkant van het formulier te plaatsen. Het aanwijzen van verplichte velden kan worden bereikt door een veld te selecteren en de bijbehorende instellingen aan te passen.

Zodra u tevreden bent met de indeling en selectie van velden, gaat u alstublieft verder met het opslaan van de wijzigingen en gaat u verder met de volgende stap.

Splits uw formulier op in meerdere stappen

Om uw formulier op te splitsen in afzonderlijke fasen, is het noodzakelijk om het formulierveld Pagina-einde te gebruiken.

Om dit te bereiken, gaat u verder naar het gedeelte Fancy Fields in het linkerdeelvenster en gaat u verder met het selecteren van het veld Pagina-einde. Sleep vervolgens het gekozen veld naar de gewenste plek binnen je formulier.

Om uw formulier op een specifiek punt te verdelen, heeft u de mogelijkheid om strategisch een pagina-einde te plaatsen.

Volg de bovenstaande procedure om de gewenste pagina-einden in uw formulier te implementeren. Vervolgens kunt u die respectieve secties uitbreiden door aanvullende velden op te nemen om het proces voor het maken van formulieren te voltooien.

WPForms biedt u de flexibiliteit om meerdere formulierpagina's te genereren op basis van uw vereisten. Desalniettemin is het raadzaam om discretie te betrachten en te voorkomen dat uw websitebezoekers worden overspoeld met een buitensporig aantal formuliersecties. Het wordt aanbevolen om alleen essentiële informatieverzoeken op te nemen, aangezien eventuele aanvullende details later in een later stadium kunnen worden verzameld.

Pas uw multi-pagina aan vanuit de voortgangsbalk

Om tegemoet te komen aan uw specifieke bedrijfs- en websitevereisten, kunt u overwegen een voortgangsbalk op uw formulieren te implementeren. Voortgangsindicatoren dienen om gebruikers te informeren over de huidige fase waarin ze zich binnen het formulier bevinden en om een ​​schatting te maken van de resterende tijd die nodig is om het formulier in te vullen.

Door de voortgang aan gebruikers weer te geven, geeft u hen een visuele weergave van hun vorderingen, wat hen aanzienlijk kan motiveren om het formulier af te ronden en in te dienen. Deze aanpak komt effectief tegemoet aan de algemene neiging van individuen om te voorkomen dat taken onafgemaakt blijven.


WPForms biedt drie verschillende voortgangsbalken die kunnen worden opgenomen in uw meerdelige formulier. Deze opties omvatten:

  1. Connectoren: deze stijl lijkt op een broodkruimelbalk, die de verschillende secties van uw formulier visueel met elkaar verbindt via een reeks balken die de overeenkomstige paginatitels weergeven.
  2. Cirkels: dit alternatief bevat individuele cirkels, elk gelabeld met de titel van de respectieve formulierstap. Gebruikers kunnen hun voortgang eenvoudig volgen door de gevulde cirkels te observeren.
  3. Voortgangsbalk: Met deze optie wordt een gedeeltelijk gekleurde balk gebruikt om de voortgang van gebruikers binnen uw formulier te illustreren. Dit dynamische visuele hulpmiddel geeft een duidelijke indicatie van hun huidige positie.

Om de voortgangsbalk op uw meerstappenformulier in te schakelen en aan te passen, klikt u eenvoudig op het gedeelte Eerste pagina-einde. Van daaruit hebt u toegang tot de nodige instellingen om het uiterlijk aan te passen aan uw voorkeuren.

Bij het openen van de formulierbouwer wordt een nieuw paneel zichtbaar, waarmee u de stijl en kleur van uw voorkeur voor de voortgangsindicator kunt selecteren.

In het geval dat u kiest voor de voortgangsindicatorstijl Connectors of Cirkels, heeft u de mogelijkheid om de paginatitel te wijzigen, waardoor gebruikers kunnen aangeven in welke fase van het formulier ze zich momenteel bevinden.

Als alternatief biedt de voortgangsbalkstijl een conventionele voortgangsbalk die gebruikers door de resterende stappen leidt die nodig zijn om het formulier in te vullen.

Om de titel van de volgende pagina en de knop Volgende, die gebruikers naar het volgende gedeelte van het formulier leidt, te personaliseren, klikt u eenvoudig op het gedeelte Pagina-einde dat is ingevoegd tijdens de eerste configuratie van het formulier. De opties voor aanpassing worden weergegeven in het linkerdeelvenster van de formulierbouwer.


Om gebruikers de mogelijkheid te bieden om naar de vorige pagina te navigeren, is het mogelijk om een ​​"Vorige" knop op te nemen. Dit kan worden bereikt door het selectievakje "Vorige weergeven" te activeren en vervolgens de titel van de knop aan te passen aan uw voorkeur.

Zodra u de plaatsing van pagina-einden en voortgangsindicatoren naar tevredenheid heeft voltooid, is het raadzaam om verder te gaan door de knop "Opslaan" te selecteren.

Configureer uw meerstapsformulierinstellingen

In deze fase onderzoeken we de configuratiemogelijkheden van uw meerdelige formulier. Ga in eerste instantie verder door op het tabblad "Instellingen" te klikken en vervolgens de optie "Algemeen" te selecteren.

Binnen deze interface heeft u de mogelijkheid om een ​​nieuwe naam toe te wijzen en een beschrijving voor uw formulier te geven. Bovendien is maatwerk van de verzendknop ook mogelijk, samen met de mogelijkheid om anti-spam functionaliteiten zoals Google Recaptcha te activeren.

Daarnaast heb je de mogelijkheid om AJAX-instellingen in te schakelen en de opslag van informatie uit te schakelen om naleving van de AVG-regelgeving te garanderen.

Zodra u uw gewenste instellingen naar tevredenheid heeft aangepast, vergeet dan niet om uw wijzigingen op te slaan door op de knop "Opslaan" te klikken.

Stel uw formuliermeldingen in

Navigeer naar het gedeelte Meldingen aan de linkerkant van de instellingenpagina in WordPress. In deze sectie vindt u de opties om meldingen voor uw formulier met meerdere pagina's te configureren.

Meldingen verwijzen naar de e-mailberichten die naar u worden verzonden wanneer gebruikers een formulier op uw website indienen. WPForms maakt standaard meldingen mogelijk. Als u echter liever geen e-mailmeldingen ontvangt, kunt u de optie "Uit" selecteren in het vervolgkeuzemenu.

Bovendien heeft u de mogelijkheid om Smart Tags te gebruiken, waarmee u een e-mail kunt sturen naar het opgegeven e-mailadres van elke gebruiker bij het indienen van het formulier. Deze functie kan nuttig zijn om gebruikers te verzekeren dat hun antwoorden zijn ontvangen. Met name voor formulieren met meerdere fasen kunnen gebruikers deze bevestiging zeer op prijs stellen, omdat het elke onzekerheid wegneemt of het indienen van het formulier succesvol was.

Nadat u uw gewenste formuliermeldingen heeft geconfigureerd, vergeet dan niet op de knop Opslaan te klikken om de wijzigingen toe te passen.

Bevestigingsbericht

De volgende stap omvat het selecteren van de bevestigingsberichten voor uw meerfasenformulier. Om toegang te krijgen tot de opties, navigeert u naar de pagina Instellingen en klikt u op de kop Bevestigingen.

Formulierbevestigingen dienen om gebruikers te informeren dat het indienen van het formulier succesvol was en om instructies te geven over de vervolgacties die ze moeten ondernemen.

Binnen WPForms zijn er drie beschikbare bevestigingstypes:

  1. Bericht: dit is het standaardbevestigingstype, dat een eenvoudig succesbericht weergeeft na het indienen van het formulier door de gebruiker.
  2. Toon pagina: door dit bevestigingstype te gebruiken, worden gebruikers naar een andere pagina op uw website geleid, zoals een bedankpagina.
  3. Ga naar URL (omleiding): door dit bevestigingsbericht te gebruiken, kunt u gebruikers omleiden naar een pagina op een andere website dan uw eigen.

Ga nu verder met het selecteren van het bevestigingstype van uw voorkeur in het meegeleverde vervolgkeuzemenu en ga verder met het aanpassen door uw gewenste bericht of URL's toe te voegen.

Als u tevreden bent met het uiterlijk en de instellingen, klikt u op de knop Opslaan.

Meerstapsformulier toevoegen aan WordPress

Nadat u uw meerstappenformulier heeft gemaakt, is de volgende stap om het op te nemen in uw WordPress-website. WPForms biedt de flexibiliteit om uw formulier toe te voegen aan verschillende delen van uw website, zoals een pagina, bericht, zijbalk of zelfs binnen uw WordPress-thema door een shortcode te gebruiken.

De meest gebruikte benadering is om het formulier in te sluiten in een WordPress-bericht of -pagina. Laten we nu het proces onderzoeken om dit te bereiken.

Maak om te beginnen een nieuw bericht of pagina in WordPress of selecteer een bestaande en klik op de optie "Bewerken". Zodra u zich in de WordPress-editor bevindt, klikt u op het pluspictogram (+) om een ​​nieuw inhoudsblok toe te voegen.

Blader door het pop-upmenu totdat u bij het gedeelte "Widgets" komt en klik vervolgens op de WPForms-widget om het blok in WordPress in te sluiten.

Klik daarna op het vervolgkeuzemenu en kies het gewenste meerstappenformulier.

WPForms presenteert het formulier in de WordPress-editor, zodat u een voorbeeld van het uiterlijk kunt bekijken voordat u het publiceert.

Klik ten slotte op "Publiceren" of "Bijwerken" om uw formulier live te zetten. Hier is een voorbeeld van hoe het wordt weergegeven aan uw gebruikers:

Afsluiten


Meerstapsformulieren hebben bewezen een effectief middel te zijn om formulierconversies binnen het domein van WordPress te verbeteren. Door het formulier in verschillende stadia te segmenteren, krijgen gebruikers een meer benaderbare en beheersbare ervaring aangeboden, waardoor het gevoel van overweldiging wordt verminderd en de kans op het invullen van het formulier wordt vergroot. Empirisch onderzoek heeft substantiële verbeteringen in conversieratio's aangetoond bij de implementatie van formulieren met meerdere stappen, met name wanneer het formulier uit meer dan drie velden bestaat.

Tot slot vertrouwen we erop dat dit artikel u heeft voorzien van de kennis die nodig is om meerstapsformulieren in WordPress te maken. Wat nog opmerkelijker is, is dat u dit kunt bereiken zonder dat u zich hoeft te verdiepen in een enkele regel code! WPForms , een gerenommeerde WordPress-plug-in, biedt een gebruiksvriendelijk platform voor het moeiteloos genereren van meerstapsformulieren, waardoor het proces nog naadlooser en handiger wordt.

Divi WordPress Theme