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 :
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
Selecteer daarna de structuur. Wij kiezen voor 2 kolommen.
Er worden nu 2 kolommen aangemaakt door Elementor.
Klik nu aan de linkerkant van het scherm op de 9 puntjes :
Typ nu in het zoekvenster : “Formulier” in.
Sleep nu het formulier naar de linkerkolom.
Dit verschijnt er nu op het scherm :
Wanneer je aan de linkerkant op 1 van de formuliervelden klikt, bijvoorbeeld naam openen de instellingen van dit veld :
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”.
Bij type kies je nu voor : “Step”
Boven het formulier verschijnt nu het volgende :
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.
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”.
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”.
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.
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 : 
Bij het tabje “Additonal Options” kun je wanneer je “custom messages” aanvinkt de diverse meldingen aanpassen naar eigen goesting.
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.
