Multi-step formulier maken in WordPress met Elementor

Een multi-step formulier maken in WordPress kun je maken met Elementor Pro. Sinds juni 2020 heeft Elementor een nieuwe functie geïntroduceerd voor de formulieren widget: de mult-step functie. Een multi-step formulier is vaak gebruiksvriendelijker (zeker bij lange formulieren) en kan leiden tot hogere conversie op je website. Reden genoeg dus om een multi step formulier te gebruiken! In dit artikel leg ik uit hoe je een multi-step formulier instelt met behulp van Elementor Pro.

Een formulier maken

Ik ga er even vanuit dat je al weet hoe je een contactformulier kunt maken met Elementor Pro. Zo niet, lees dan eerst het artikel ‘Contactformulier maken met Elementor‘. Als je een formulier hebt gemaakt kun je vervolgens verder met het toevoegen van stappen aan het formulier.

Stappen toevoegen aan het formulier

Een stap toe voegen werkt niet anders dan het toevoegen van een veld aan het formulier.

Om een stap toe te voegen klik je dus op ‘Item toevoegen’. Vervolgens zie je een lijst met opties. Kies voor ‘Step’

Vervolgens kun je de stap een label geven. Bijvoorbeeld ‘Persoonlijke gegevens’. Ook kun je de volgende- en volgende buttons een tekst geven. Bijvoorbeeld: ‘Volgende stap’ of ‘Stap terug’.

Tekst, iconen, nummers of voortgangsbalk

Hoe je de stappen wilt tonen, kun je aanpassen in het tabje ‘Step settings’. Hier zie je een aantal opties voor de weergave van de stappen. Standaard staat de multi step functionaliteit op ‘numbers & tekst’. Dit betekent dat de eerste stap automatisch een ‘1’ krijgt, stap 2 een ‘2’ etc. Maar je kunt ook voor andere opties kiezen:

• Text: Geeft alleen de tekst weer die je invult bij ‘label’
• Icon: toont het icoon dat je hebt gekozen bij het step veld
• Progress bar: toont een voortgangsbalk voor het formulier
• Numbers & text: toont bovenin een nummer en daaronder de tekst
• Icon & text: toont boven een (gekozen) icoon en daaronder de tekst.

Als je dus kiest voor een een type met ‘Icoon’ erin, moet je bij elke stap zelf bepalen welk icoon je wilt gebruiken. Je kunt ook zelf svg iconen uploaden.

Vorm van de stap

Daarnaast kun je kiezen of je de stap wilt weergeven in een bepaalde vorm: circle, square, rounded of geen vorm.

De opmaak van de stappen aanpassen

Zoals je gewend bent van Elementor, kun je de stappen via het tabblad ‘Stijl’ ook volledig naar wens opmaken. Zo kun je de typografie aanpassen, de ruimte tussen de stappen, de kleur van iconen / achtergrond en tekst. Ook kun je de actieve stap of afgeronde stap een andere kleur geven.

Vergeet vervolgens niet om ook de stap-buttons stijl aan te passen. Deze kun je aanpassen onder het tabje ‘Buttons’.

Heb je het formulier klaar? Vergeet deze dan niet te testen.

Tip: koppel je formulier met een mailingtool!