Pop-up inschrijfformulier openen via een knop

Je kunt een inschrijfformulier verborgen houden totdat een bezoeker op een knop klikt — pas dan verschijnt het formulier als pop-up. Dat werkt met een gedeelde sleutel: een naam die je zówel aan het formulier (als CSS-selector) áls aan de knop (als id-attribuut) geeft. Zorg dat je eerst een pop-up-inschrijfformulier hebt aangemaakt voordat je verder gaat — hoe dat werkt, lees je in Inschrijfformulieren aanmaken.

Let op: dit werkt alleen met een losse Knop-module — niet met een knop in een prijstabel of in de header.

1. Stel de trigger in op het inschrijfformulier

1. Open E-mailmarketing
   Open in het menu links Marketing → E-mailmarketing.

   

2. Open je pop-up-inschrijfformulier
   Beweeg met je muis over de rij van je pop-up-inschrijfformulier en klik op het bewerk-icoon (Inschrijfformulier aanpassen).

   

3. Open het tabblad Weergave
   Open het tabblad Weergave.

   

4. Zet de trigger op klikken aan en geef de CSS-selector op
   Vink Trigger op klikken aan, zodat het formulier verborgen blijft totdat een bezoeker op de knop klikt. Vul daarna bij CSS Selector (string) in naar welke knop het formulier moet luisteren, bijvoorbeeld a#inschrijf-popup. Dit is de sleutel die je zo dadelijk ook aan de knop geeft. Gebruik je een id-selector (zoals hier), dan opent alleen de ene knop met exact dat id de pop-up; gebruik je een class-selector (bijvoorbeeld a.inschrijf-popup), dan opent elke knop met die class dezelfde pop-up.

   

5. Sla de instellingen op
   Klik op Opslaan & afsluiten om de instellingen te bewaren.

   

2. Koppel een knop aan de pop-up

Voeg op de gewenste 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 een id-attribuut met dezelfde sleutel als de CSS-selector van het formulier — zonder het a#-gedeelte ervoor.

1. Open het tabblad Geavanceerd
   Open in de knopinstellingen het tabblad Geavanceerd en de groep Attributen. Klik daar op + Attribuut Toevoegen en kies id.

   

2. Vul de sleutel in
   Bij Attribuutwaarde vul je dezelfde sleutel in als bij de CSS Selector van het formulier, zonder het a#-gedeelte ervoor: dus inschrijf-popup.

   

Klaar! Wanneer een bezoeker nu op de knop klikt, opent het inschrijfformulier in een pop-up. Let op dat de CSS-selector van het formulier en het id (of de class) van de knop exact op elkaar aansluiten, anders vindt de knop het formulier niet.