Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Multi-step formulier maken in WordPress met Elementor

Inhoud van dit artikel:

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.

multi step formulieren maken wordpress elementor

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.

formulier toevoegen met Elementor

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’

multi step formulieren wordpress maken met elementor

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’.

multi step formulieren buttons stijlen

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

Tip: koppel je formulier met een mailingtool!

Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor en heeft een achtergrond in marketing- en communicatie.
Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.

Offerte aanvragen

Een nieuwe website laten bouwen? Of hulp nodig bij een probleem of het bouwen van je website? Laat ons weten wat je precies nodig hebt en je ontvangt zo snel mogelijk een prijsindicatie: