WordPress & Elementor Specialist

Alles om je eigen website te bouwen met WordPress en WooCommerce.

Elementor Formulieren met meerdere stappen

In elementor 2.10 zijn er twee geweldige, nieuwe functies uitgekomen. De formulieren met meerdere stappen en de Lottie animaties. In deze blog ga ik jou meenemen hoe jij zulke multi-step forms kan maken in Elementor pro. Een multi-step formulier is zeer gebruikvriendelijk en zal kunnen helpen om je conversie en leads te verhogen op je wesbite. Laten we samen de stappen doorlopen om te zorgen dat jij ook gemakkelijk en snel een super handig multi-step formulier kan maken.

Inhoudsopgave

Waarvoor gebruik je zo’n formulier?

Op het moment zal je nog niet al te veel multi-step formulieren tegen komen. Maar wel van die eindeloos lange formulieren waar je alles in een keer moet invullen. Merendeel van de bezoekers ziet het daarom ook vaak niet zitten om zo’n formulier helemaal in te vullen en zoekt naar alternatieve om je toch te bereiken of zal je pagina verlaten. Maar wat is er nou handiger dan zo’n eng, lang formulier op te splitsen in meerdere kleine stappen. Als je daarmee je klanten of bezoekers tot actie kan aanzetten. Tevens ziet zo’n formulier er met enkele stappen veel beter en gebruiksvriendelijker uit.

Meer conversies en leads

Er is geen twijfel over mogelijk dat een formulier dat er leuk uit ziet om naar te kijken en gemakkelijk doorheen te navigeren is, meer leads en conversies zal opleveren. Met meerdere stappen kan jij het conversieratio in alle oppervlakken verbeteren.

Het Formulier maken

We gaan je nu laten zien hoe je zo’n formulier gemakkelijk kan maken!

Stap 1 Log in:
Zorg dat je bent ingelogd op jouw WordPress website.

Stap 2 Ga naar pagina’s:
Ga dan met je muis naar Pagina’s en dan naar de juiste pagina waar je zo’n formulier wilt aanmaken, en klik op Bewerken met elementor

Stap 3 Pak de pagebuilder erbij:
Je komt nu in de page builder van elementor terecht. Maak een nieuwe rij aan en ga vervolgens naar je widgets toe en selecteer Formulieren. Dit is tevens de zelfde weg als je normaal een contact formulier wilt aanmaken in Elementor Pro

Stap 4 Formulier widget toevoegen:
Nu kan het echte werk beginnen! Klik op je formulier en voeg een nieuw item toe. Klik erop en ga naar type, als het goed is staat hier de manier om meerdere stappen toe te voegen. Klik op step. Hierdoor zal je een volgende stap toevoegen wat als het goed is nu verschijnt. 

Stap 5 Extra stap toegevoegd:

Nu je hebt ondervonden hoe je een extra stap toe kan passen in je elementor formulier kan je zelf aan de slag om jouw contact formulier te verbeteren. Als je nog enkele andere handigheden te weten wilt komen over hoe je de vorm van de stappen kan bewerken lees van verder bij stap 6.

Stap 6 Stijlen van de tussenstap:

Als je de stap hebt aangemaakt en je deze wilt stijlen ga je naar Stijl en onderaan de instellingen staat Steps.  Hier kan je zoals gebruikelijk je typografie, kleuren, spacing en paddings toevoegen om het helemaal naar wens te stijlen. 

Zoals je ziet in de afbeelding hierboven heb je 3 soorten knoppen om te stijlen. De knop die nog gestyled moet worden, de knop die actief is en de knop die al voltooid is. Geef elke stap een andere kleur om het zo duidelijk te creëren. 

Vond je dit interessant?

Wil je op de hoogte blijven over onderwerpen als WordPress & online marketing, meld je dan nu aan voor ons onze nieuwsbrief.