Multi-step formulier maken in WordPress met Elementor

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

Inhoud van dit artikel:

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%🥳

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!

Pssst, bevalt Elementor Pro?

En wil je meer sites bouwen met Elementor Pro? Upgrade nu je licentie en profiteer van kortingen tot 60%🥳

2 reacties

  1. Kun je met een formulier ook een “post comments” maken?
    Dus dat de berichten op de pagina blijven staan?

    1. Hoi Karin,

      Daarvoor kun je het beste de standaard WordPress comments gebruiken. Zoals we hier ook voor onze blogartikelen gebruiken.

      Groet,

      Sanne

Reacties zijn gesloten.

Share on linkedin
Share on facebook
Share on twitter
Share on email
Share on whatsapp
Deze vind je misschien ook interessant:

Linken binnen dezelfde pagina met anchorlinks

Linken binnen dezelfde pagina kun je doen met anchorlinks. Anchorlinks worden vaak gebruikt wanneer je veel content op een pagina hebt staan. Daarnaast zie je

Nieuwsbrief inschrijfformulier in WordPress koppelen aan mailingtool

Je nieuwsbrief inschrijfformulier in WordPress koppelen aan je mailingtool, zoals bijvoorbeeld MailChimp, MailerLite of Active Campaign doe je eenvoudig met Elementor Pro. Natuurlijk zijn er

Social media iconen in menu toevoegen met Elementor

Social media iconen in menu toevoegen op je WordPress website? Als je Elementor Pro gebruikt, kun je eenvoudig de social media iconen toevoegen aan je