Een pop-up boekingsformulier voor één dienst maken

Je kunt een boekingsformulier zo instellen dat het maar één dienst toont, en het pas laten verschijnen als een bezoeker op een knop klikt — het formulier opent dan in een pop-upvenster. Handig voor een pagina rond één behandeling. Je combineert daarvoor twee dingen: je beperkt het formulier tot één dienst, en je koppelt het via een gedeelde sleutel aan een knop. Wil je meer weten over alle instellingen van het formulier? Zie Het boekingsformulier plaatsen en instellen.

Op de afbeeldingen in dit artikel is telkens het relevante onderdeel oranje gemarkeerd; de overige in de tekst vetgedrukte onderdelen vind je op dezelfde pagina of in hetzelfde venster.

1. Open de instellingen van het boekingsformulier

1. Schakel de Visual Builder in
   Ga naar de pagina waar je het formulier wilt tonen en klik in de balk bovenaan op Visual Builder inschakelen.

   

2. Voeg een module toe
   Klik op het + icoontje op de plek waar je het formulier wilt plaatsen om de modulekiezer te openen.

   

3. Kies de module Boekingsformulier
   Klik in de modulekiezer op de tegel Boekingsformulier. Het instellingenvenster opent.

   

2. Beperk het formulier tot één dienst

Standaard toont het formulier je hele aanbod en kiest de bezoeker zelf. Met de reserveringsopties leg je dat vast op één dienst.

1. Zet de reserveringsopties aan
   Zet de schakelaar Selecteer reserveringsopties aan. Er verschijnen dan de velden waarmee je vooraf bepaalt wat het formulier toont.

   

2. Kies de ene dienst
   Vink bij Kies dienst precies één dienst aan. Het formulier toont dan alleen die dienst en de bezoeker kan niet meer wisselen. Laat je dit veld leeg, dan ziet de bezoeker juist het volledige aanbod.

   

3. Zet het formulier in een pop-up

Drie instellingen in hetzelfde venster regelen samen de pop-up.

1. Geef de trigger een naam
   Vul bij Boekingsformulier handmatig laden een herkenbare naam in, bijvoorbeeld afspraak-popup. Dit is de sleutel die je straks ook aan de knop geeft. Zolang dit veld is ingevuld, blijft het formulier verborgen tot de knop wordt aangeklikt.

   

2. Kies het type trigger
   Bij Type trigger bepaal je waarmee de knop het formulier opent:
   • Id — precies één knop opent de pop-up (een id hoort maar één keer per pagina voor te komen).
   • Class — elke knop met die class opent de pop-up — handig als je op meerdere plekken een knop wilt die hetzelfde formulier opent.
   In dit voorbeeld kiezen we Id.

   

3. Zet pop-up-weergave aan
   Zet de schakelaar voor pop-up-weergave aan. Het formulier verschijnt nu in een pop-upvenster in plaats van vast op de pagina.

   

4. Voeg een knop toe en koppel hem aan de pop-up

Voeg op dezelfde pagina een knop toe en geef die dezelfde sleutel — als id (omdat we hierboven Id kozen).

1. Voeg een knop-module toe
   Klik opnieuw op een + icoontje, nu op de plek waar je de knop wilt plaatsen.

   

2. Kies de module Knop
   Klik in de modulekiezer op de tegel Knop. De knop verschijnt op de pagina en het instellingenvenster opent.

   

3. Geef de knop een tekst
   Vul bij Knoptekst de tekst voor je knop in, bijvoorbeeld Maak een afspraak. De knop toont je tekst meteen op de pagina.

   

4. Open de groep Attributen
   Open in de knopinstellingen het tabblad Geavanceerd en de groep Attributen. Klik op + Attribuut Toevoegen en kies id (één knop) of class (meerdere knoppen).

   

5. Vul de sleutel in
   Vul als Attribuutwaarde exact dezelfde sleutel in als bij de trigger van het formulier: afspraak-popup (zonder hekje of punt ervoor).

   

6. Sla de pagina op
   Klik rechtsboven op Opslaan om het formulier en de knop op de pagina vast te leggen.

   

Klaar! Wanneer een bezoeker nu op de knop klikt, opent in een pop-up het boekingsformulier voor die ene dienst. Let op dat de naam bij de trigger en het id van de knop exact gelijk zijn, anders vindt de knop het formulier niet.