Het maken van een een multistep formulier
Het maken van een Multistep Formulier kan ideaal zijn als je langere formulieren met meerdere vragen wil opdelen om het dragelijker te maken voor je bezoeker. Multistep formulieren zijn ideaal voor het verzamelen van klantgegevens om klantprofielen aan te maken of te verrijken.
Binnen de AdPage Tool klik je op "+ Nieuw Project"
Kies voor de optie "Interactieve Funnel"
Geef je Multistep formulier een naam (deze naam is alleen zichtbaar voor jou in je workspace) en klik op "Maak".
Je ziet dan een voorbeeld formulier geopend worden. Je kan zien dat het een multistep formulier is aan de tekst in de linkerbovenhoek en de balk met cijfers bovenin.
In de balk bovenin kan je bestaande stappen dupliceren en verwijderen, je kan de volgorde middels de pijltjes aanpassen en je kan een nieuwe stap aanmaken met het grote plus-pictogram.
Via het blauwe plus-pictogram linksboven de sectie-inhoud kan je onderdelen toevoegen aan je multistep-stap. In dit artikel zullen het formulierveld, het QA-element en de knop uitgelegd worden. Voor alle andere mogelijkheden om in een sectie toe te voegen ga je naar dit artikel.
Om je bezoeker één onderdeel in te laten vullen, kies je voor de optie "Form veld". Om je bezoekers meer antwoordmogelijkheden te geven, kies je voor de optie "QA". Om een multistep-stap door te laten gaan naar de volgende stap of de multistep te beëindigen, kies je voor de optie "Knop".
Wanneer je een Form veld in je multistep-stap plaatst, wordt er een placeholder form veld geplaatst.
Wanneer je dit form veld selecteert en op het tandwiel-pictogram klikt, kan je de technische instellingen aanpassen.
Je kan het formulierveld verplichten waardoor bezoekers het veld in moeten vullen voordat ze naar de volgende stap kunnen. Je kan ook het type formulierveld kiezen.
Ook kan je een label invoeren die boven het invoerveld verschijnt, wat vooral handig is bij standaard formulieren. Verder kan je een input naam invoeren, dit is het stuk tekst wat de bezoekers in het formulierveld zien.
Verder kan je door op het kleurenvakje te klikken de achtergrondkleur van het invoerveld aanpassen. Door op de pijltjes te klikken kan je de breedte van het invoerveld percentueel aanpassen ten opzichte van de sectie-inhoud. Door op het vierkantje met rondjes op de hoeken te klikken kan je de radius aanpassen wat de hoeken van het invoerveld ronder maakt.
Door op het toetsenbord te klikken kan je een statische waarde, query parameter of waarde vanuit een integratie meegeven.
Wanneer je een QA-element toevoegt worden er 2 standaard antwoorden aan je multistep-stap toegevoegd.
Wanneer je op deze antwoorden klikt, kan je op het puzzelstukje-pictogram klikken om de Quiz Builder te openen.
In de Quiz Builder geef je allereerst een naam op voor de antwoordenreeks. Ook selecteer je of het gaat om een multiselect of niet, multiselect houdt in dat bezoekers meerdere antwoorden mogen selecteren.
Onder "Afbeeldingen" binnen de Quiz Builder kan je de antwoordmogelijkheden aanpassen en toevoegen. Zo kan je kiezen tussen het toevoegen van een afbeelding of embed-code aan de antwoorden, maar je bent niet verplicht om één van deze twee opties toe te voegen.
De andere opties binnen de Quiz Builder kan je gebruiken om de kleuren van een antwoordveld aan te passen zoals de standaard kleur, de tekstkleur en de kleur wanneer de optie geselecteerd is. Ook kan je een foutmelding invoeren die gegeven wordt wanneer iemand naar de volgende stap wil gaan zonder een antwoord te selecteren.
Daarnaast kan je ook de algemene styling van het QA-element aanpassen. Zo kan je de uitlijning aanpassen, of de antwoorden een aanvink-optie krijgen, verschillende bewerkingen voor mobiel en desktop aan kan zetten, het aantal antwoorden per rij aanpassen, de ruimte tussen antwoorden aanpassen, de vorm van de antwoorden aanpassen, de breedte van de antwoorden aanpassen en de afronding van de hoeken kan aanpassen.
Wanneer je een knop toevoegt, verschijnt er een standaard knop in je project.
Als je op het ketting-pictogram klikt, kan je aangeven waar de knop naar toe moet linken. Aangezien dit een multistep is, wil je de knop waarschijnlijk door laten linken naar de volgende sectie of een specifieke sectie.
Daarnaast kan je met het hamburger-pictogram de uitlijning aanpassen, met het kleur-pictogram de achtergrondkleur aanpassen en met het tandwiel-pictogram de overige styling instellingen aanpassen.
Wil je weten hoe je een sectie op een landingspagina om kan toveren tot multistep? Bekijk dan dit artikel.
Binnen de AdPage Tool klik je op "+ Nieuw Project"
Kies voor de optie "Interactieve Funnel"
Geef je Multistep formulier een naam (deze naam is alleen zichtbaar voor jou in je workspace) en klik op "Maak".
Je ziet dan een voorbeeld formulier geopend worden. Je kan zien dat het een multistep formulier is aan de tekst in de linkerbovenhoek en de balk met cijfers bovenin.
In de balk bovenin kan je bestaande stappen dupliceren en verwijderen, je kan de volgorde middels de pijltjes aanpassen en je kan een nieuwe stap aanmaken met het grote plus-pictogram.
Via het blauwe plus-pictogram linksboven de sectie-inhoud kan je onderdelen toevoegen aan je multistep-stap. In dit artikel zullen het formulierveld, het QA-element en de knop uitgelegd worden. Voor alle andere mogelijkheden om in een sectie toe te voegen ga je naar dit artikel.
Om je bezoeker één onderdeel in te laten vullen, kies je voor de optie "Form veld". Om je bezoekers meer antwoordmogelijkheden te geven, kies je voor de optie "QA". Om een multistep-stap door te laten gaan naar de volgende stap of de multistep te beëindigen, kies je voor de optie "Knop".
Form veld
Wanneer je een Form veld in je multistep-stap plaatst, wordt er een placeholder form veld geplaatst.
Wanneer je dit form veld selecteert en op het tandwiel-pictogram klikt, kan je de technische instellingen aanpassen.
Je kan het formulierveld verplichten waardoor bezoekers het veld in moeten vullen voordat ze naar de volgende stap kunnen. Je kan ook het type formulierveld kiezen.
Ook kan je een label invoeren die boven het invoerveld verschijnt, wat vooral handig is bij standaard formulieren. Verder kan je een input naam invoeren, dit is het stuk tekst wat de bezoekers in het formulierveld zien.
Verder kan je door op het kleurenvakje te klikken de achtergrondkleur van het invoerveld aanpassen. Door op de pijltjes te klikken kan je de breedte van het invoerveld percentueel aanpassen ten opzichte van de sectie-inhoud. Door op het vierkantje met rondjes op de hoeken te klikken kan je de radius aanpassen wat de hoeken van het invoerveld ronder maakt.
Door op het toetsenbord te klikken kan je een statische waarde, query parameter of waarde vanuit een integratie meegeven.
QA
Wanneer je een QA-element toevoegt worden er 2 standaard antwoorden aan je multistep-stap toegevoegd.
Wanneer je op deze antwoorden klikt, kan je op het puzzelstukje-pictogram klikken om de Quiz Builder te openen.
In de Quiz Builder geef je allereerst een naam op voor de antwoordenreeks. Ook selecteer je of het gaat om een multiselect of niet, multiselect houdt in dat bezoekers meerdere antwoorden mogen selecteren.
Onder "Afbeeldingen" binnen de Quiz Builder kan je de antwoordmogelijkheden aanpassen en toevoegen. Zo kan je kiezen tussen het toevoegen van een afbeelding of embed-code aan de antwoorden, maar je bent niet verplicht om één van deze twee opties toe te voegen.
De andere opties binnen de Quiz Builder kan je gebruiken om de kleuren van een antwoordveld aan te passen zoals de standaard kleur, de tekstkleur en de kleur wanneer de optie geselecteerd is. Ook kan je een foutmelding invoeren die gegeven wordt wanneer iemand naar de volgende stap wil gaan zonder een antwoord te selecteren.
Daarnaast kan je ook de algemene styling van het QA-element aanpassen. Zo kan je de uitlijning aanpassen, of de antwoorden een aanvink-optie krijgen, verschillende bewerkingen voor mobiel en desktop aan kan zetten, het aantal antwoorden per rij aanpassen, de ruimte tussen antwoorden aanpassen, de vorm van de antwoorden aanpassen, de breedte van de antwoorden aanpassen en de afronding van de hoeken kan aanpassen.
Knop
Wanneer je een knop toevoegt, verschijnt er een standaard knop in je project.
Als je op het ketting-pictogram klikt, kan je aangeven waar de knop naar toe moet linken. Aangezien dit een multistep is, wil je de knop waarschijnlijk door laten linken naar de volgende sectie of een specifieke sectie.
Daarnaast kan je met het hamburger-pictogram de uitlijning aanpassen, met het kleur-pictogram de achtergrondkleur aanpassen en met het tandwiel-pictogram de overige styling instellingen aanpassen.
Wil je weten hoe je een sectie op een landingspagina om kan toveren tot multistep? Bekijk dan dit artikel.
Bijgewerkt op: 15/05/2023
Dankuwel!