Het boekingsformulier in een pop-up openen via een knop

Je kunt het boekingsformulier verborgen op een pagina plaatsen en het pas laten verschijnen als een bezoeker op een knop klikt — het formulier opent dan in een pop-upvenster. Dat werkt met een gedeelde sleutel: een naam die je zówel aan het formulier (als trigger) áls aan de knop (als id of class) geeft. Wil je weten hoe je het formulier plaatst en instelt welke diensten het toont? 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 met het boekingsformulier 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. Stel de pop-up in op het boekingsformulier

In het instellingenvenster staan drie instellingen die samen de pop-up regelen.

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 wáármee de knop het formulier opent:
   • Id — de knop krijgt een uniek id. Precies die éne knop opent de pop-up (een id hoort maar één keer per pagina voor te komen).
   • Class — de knop krijgt een class. Elke knop met die class opent de pop-up — handig als je op meerdere plekken of pagina's 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 (onder Type trigger). Het formulier verschijnt nu in een pop-upvenster in plaats van vast op de pagina.

   

3. Koppel een knop aan de pop-up

Voeg op dezelfde pagina een Knop-module toe (hoe je een knop plaatst, lees je in Hoe voeg ik een knop toe op mijn pagina?). Geef die knop vervolgens dezelfde sleutel — als id of class, afhankelijk van wat je bij Type trigger koos.

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

   

2. 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). Koos je Class, dan kun je diezelfde class op meerdere knoppen plakken, zodat ze allemaal dezelfde pop-up openen.

   

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

Werkt ook voor de eventkalender en eventlijst

Dezelfde drie instellingen — handmatig laden, type trigger en pop-up-weergave — vind je niet alleen op het boekingsformulier, maar ook op de eventkalender- en eventlijst-module. Zo laat je op precies dezelfde manier een evenement in een pop-up openen wanneer een bezoeker op een knop klikt. Hoe je die modules op een pagina plaatst, lees je in De eventkalender en eventlijst op een pagina plaatsen.