Multistepformulier maken met Elementor

Multistepformulier maken met Wordpress en Elementor

Wat is een multistepformulier?

Bij een formulier waar er heel veel velden moeten worden ingevuld is het handig om dit op te splitsen in verschillende stappen. De bezoeker ziet dan niet onmiddellijk hoeveel velden hij moet invullen, waardoor hij het misschien sneller zal invullen. Tevens is een multistepformulier veel gebruiksvriendelijker en overzichtelijker.

Wanneer je bij de IMU een ebook wil downloaden moet je een aantal stappen doorlopen, zie afbeelding : 

voorbeeld multistepformulier

Dit is een soort multistepformulier.

Je kan de tutorial volgen via onderstaande You Tube video of via het stappenplan onder de video. Indien je de video bekijkt, vergeet niet om hem te liken en te delen.
Nog beter is het om je te abonneren op mijn kanaal om op de hoogte te blijven van de nieuwe tutorials.

Hoe maken we een formulier in Elementor?

Voordat we beginnen om een multistepformulier te maken in Elementor, starten we eerst met het maken van een gewoon formulier in Elementor.

Je hebt hier trouwens Elementor Pro voor nodig. Indien u nog niet beschikt voor Elementor Pro en u wil dit aanschaffen voor uw website, hier is de link om het aan te schaffen : Elementor Pro aanschaffen. Elementor pro kost 49 USD per jaar. Maar het is onwaarschijnlijk wat voor mooie websites je hier mee kan maken. Dus zeker een aanrader.

We starten met het aanmaken van een nieuwe sectie. Klik op het plusje

Sectie aanmaken in Elementor

Selecteer daarna de structuur. Wij kiezen voor 2 kolommen.

Er worden nu 2 kolommen aangemaakt door Elementor.

2 kolommen aangemaakt door Elementor

Klik nu aan de linkerkant van het scherm op de 9 puntjes : 

Widget toevoegen in elementor

Typ nu in het zoekvenster : “Formulier” in.

Formulier maken in elementor

Sleep nu het formulier naar de linkerkolom.
Dit verschijnt er nu op het scherm : 

Formulier maken in Elementor

Wanneer je aan de linkerkant op 1 van de formuliervelden klikt, bijvoorbeeld naam openen de instellingen van dit veld : 

instellingen formulierveld elementor

 

Bij type heb je verschillende mogelijkheden zoals tekst, cijfers, datums, emailveld,….

Bij Label kan je Name wijzigen in “Naam”.

Placeholder (Dit is de tekst die in het invulveld komt van het formulier), ook dit wijzigen we in “Naam”.

Required, of te wel “verplicht” vinken we aan.

Wanneer je een beetje naar onder scrolt zie je “Required mark” staan. Wanneer je dit aanzet, verschijnt er een sterretje bij de verplichte velden.

Je kan. nu ook de andere namen van de velden wijzigen.

Wil je een veld toevoegen? Klik dan op de knop “Item Toevoegen”.

Om de tekst op de “Submit” knop te wijzigen ga naar het tabje “Buttons”  en wijzig de tekst bij “Submit button” naar verzenden.

Multistepformulier maken in Elementor

We gaan nu van het gewone formulier een multistepformulier maken.
Klik op “Item Toevoegen”.

Item toevoegen

Bij type kies je nu voor : “Step”

Multistepformulier maken met elementor

Boven het formulier verschijnt nu het volgende : 

Multistepformulier maken

Aan de linkerzijde verschijnt er nu boven de naam een nieuw veld met de naam Item#1. Bij label kan je deze naam wijzigen in bijvoorbeeld Stap 1.

Multistepformulier maken met Elementor

Onder het veld “Bericht” is er ook een nieuw veld bijgekomen met de naam “Item#5”. Dit slepen we tussen het veld “Naam” en “Emailadres”. De naam wijzigen we in “Stap 2”.

Nu voegen we terug een item toe en slepen deze tussen het veld “Emailadres” en het veld “Bericht”. We geven het label de naam “Stap 3”.

Multistepformulier maken met Elementor

Ons multistepformulier is bijna klaar.

We gaan nu naar het tabje “Actions after submit”. Daar staat standaard “Email” ingevuld. Dit is voor dit formulier in orde. Je kan de bezoeker van je website eventueel na het invullen van het formulier ook nog doorverwijzen naar een andere pagina of een bevestigingsmail sturen. Dan moet je hier nog “Redirect” aan toevoegen en eventueel “email2”. Maar dat gaan we in deze post niet behandelen.
Dan gaan we over naar het tabje : “Email”.

Emailopties formulier Elementor

 

Bij het veld “To” vul je het emailadres in, waar je de formulieren ingevuld door de bezoeker, wil ontvangen.

Bij “Subject” geef je een omschrijving weer, zodat je weet dat de mail afkomstig is van je formulier op je website.

Bij Message staat standaard : “All-fields” ingevuld. Dit kan je in dit geval zo laten staan.

Over naar de volgende stap : Het instellen van de stappen.

multistepformulier maken met Elementor

Bij “Steps Settings” kies bij “Type” voor Number en bij “Shape” voor Circle. Je kan natuurlijk ook een andere keuze maken.

 


Het formulier is klaar en ziet er nu zo uit : 
Multistepformulier maken met Elementor

Bij het tabje “Additonal Options” kun je wanneer je “custom messages” aanvinkt de diverse meldingen aanpassen naar eigen goesting.
Multistepformulier maken in Elementor

Bovenaan bij het tabblad “Stijl” kan je de vormgeving van je formulier en knoppen aanpassen aan de opmaak van je website. Daar ga ik nu niet dieper op in. Het is een kwestie van experimenteren.

Multistepformulier maken met elementor pro

Facebook
Twitter
LinkedIn

Laat een reactie achter

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


De verificatie periode van reCAPTCHA is verlopen. Laad de pagina opnieuw.

Recente artikels

Website maken met Wordpress?