Een formulier met meerdere stappen maken met Elementor

Wil je weten hoe je een formulier in verschillende stappen met Elementor ?

Ken je Typeform? Hij is een schepper van vormen populair online platform bekend om zijn interactieve stijl. In Typeform kun je een formulier interactief online spel met meerdere stappen voor een breed scala aan doeleinden.

Als u een op WordPress gebaseerde website heeft, mogelijk gemaakt door Elementor, integreert u moeiteloos uw vormen Typeform met behulp van essentiële add-ons.

Zie ook: Een prijsraster toevoegen in Elementor

Maar sinds versie 2.9, Elementor zelf heeft een functie die u kunt gebruiken om te maken vormen in verschillende fasen. In dit artikel laten we u zien hoe u dit kunt doen met behulp vanElementor.

Un formulier multi-step zelf is een geweldig idee om ruimte te besparen in uw ontwerp (of het nu een pagina of een themabouwer-sjabloon is). Hiermee kunt u een lang formulier inkorten tot een eenvoudiger formulier.

Een meerstapsformulier maken in Elementor

Voordat je begint, moet je ervoor zorgen dat je je Elementor hebt geüpgraded naar de pro-versie voor het geval je dat nog niet hebt gedaan, aangezien de Form-widget (de Elementor-widget voor het maken van formulieren) alleen beschikbaar is in de pro.

Lees ook: Hoe maak je een contactformulier in Elementor

In dit artikel gaan we meteen door met het toevoegen van de formulierwidget. Het meerstappenformulier dat we gaan maken, bestaat uit drie stappen als volgt:

• Stap 1: Naam en geslacht
• Stap 2: Telefoon en e-mail
• Stap 3: Keuzerondje

Sleep eerst de formulierwidget naar het invoervak ​​van Elementor.

Ga naar het instellingenpaneel aan de linkerkant om de instellingen te maken. In het blok Formuliervelden sous het tabblad Inhoud, definieer de velden volgens uw behoeften. In ons geval zijn de velden als volgt:

• Achternaam
• Genre
• Telefoon
• E-mail
• Hobby

Als u klaar bent met het toevoegen en definiëren van de formuliervelden die u nodig heeft, voegt u nog een veld toe en stelt u het veldtype in op Stap voor.

Zie ook: Hoe maak je een afgeronde afbeelding in Elementor

Deze stap voegt automatisch een nieuw veld toe in de bovenste volgorde en een nieuw veld onderaan. U kunt het label van het bovenste veld instellen op zoiets als stap 1.

Sleep vervolgens het onderste veld en plaats het net boven het veld uit de tweede stap (in dit geval het veld Telefoon).

Voeg nog een veld toe en stel het veldtype in op stap. Sleep het en plaats het net boven het veld in de derde stap (in dit geval het Hobby-veld).

Alstublieft. U kunt een voorbeeld van het resultaat bekijken voordat u het formulier aanpast. Het staptype is standaard ingesteld op nummer en tekst.

Je kunt vanuit het blok bewerken Stap parameters onder het tabblad Inhoud.

Je hebt toegang tot het tabblad Style om uw formulier aan te passen. Er zijn 5 aanpassingsblokken die je kunt openen.

• Formulier : u kunt dit blok openen om de ruimte tussen de kolommen en de lijnen van het formulier, de typografie (lettertypefamilie, lettergrootte, letterstijl, enz.) van de labels van het formulier en de kleur van de tekst van het laatste te definiëren .
• Velden : U kunt dit blok openen om de typografie van de formuliervelden, de tekstkleur van de velden, de achtergrond, de randbreedte, de randkleur en de randradius te definiëren.
• Knop: U kunt dit blok openen om de knoppen aan te passen. Of het nu de verzendknop, de vorige knop of de volgende knop is. U kunt elementen definiëren zoals de typografie van de tekst, de kleur van de tekst, de achtergrondkleur, enz.
• boodschap: U kunt dit blok openen om de typografie van de berichten en de kleur van de tekst te definiëren.
• Stappen: U kunt dit blok openen om de typografie van de stappen, de kleur, de breedte van het scheidingsteken, de ruimte van het scheidingsteken, enz. te definiëren ...

Als u klaar bent met het bewerken van uw sjabloon, kunt u deze publiceren of bijwerken.

Lees ook: Een teamledensectie maken met Elementor 

Als u het formulier dat u zojuist hebt gemaakt, wilt invoegen op een Gutenberg-pagina (of misschien wilt u het in een blogbericht invoegen), kunt u de formulierwidget opslaan als een algemene widget. U kunt de widget vervolgens importeren met behulp van de plug-in Elementorblokken voor Gutenberg.

Download Elementor Pro nu!

Conclusie

Alstublieft ! Dat is het voor dit artikel dat u laat zien hoe u een formulier met meerdere stappen maakt met Elementor.  Als u zich zorgen maakt over hoe er te komen flaat het ons weten in de commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

...