Hoe toon ik een formulier in een pop-up?

Wat heb je nodig?

• Een formulier in Gravity Forms en het ID ervan. Zie een formulier op een pagina plaatsen.
• Een pagina met een knop of tekstlink die de pop-up moet openen.

Stap 1: Maak een pop-up

Ga in het menu links naar Popup’s → Nieuwe popup toevoegen. Geef de pop-up een titel die je zelf herkent, bijvoorbeeld “Offerte aanvragen”. Die titel ziet de bezoeker niet.

Een pop-up bouw je net als een pagina: met een sectie, een kolom en blokken. Hoe pop-ups in het algemeen werken, lees je in een pop-up maken.

Stap 2: Zet het formulier erin

Voeg in de kolom een Tekst-blok toe. Zet bovenaan een korte kop, bijvoorbeeld “Vraag een offerte aan”, en daaronder de shortcode:

[gravityform id=1 title=false description=false ajax=true]

Vervang de 1 door het ID van jouw formulier. Laat ajax=true staan: dan wordt het formulier verstuurd zonder dat de pagina opnieuw laadt, en blijft de bedanktekst netjes in de pop-up staan. Zonder ajax laadt de pagina opnieuw en is de pop-up weg.

Stap 3: Publiceer en zoek het ID van de pop-up

Klik op Publiceren. Een pop-up die nog een concept is, opent niet.

Boven de editor van een pop-up staat een melding met precies wat je in de knop moet invullen: “Om deze popup te laten openen, vul in het URL veld van de desbetreffende knop of link het volgende in:” gevolgd door de link. Je vindt dezelfde link ook in het overzicht Popup’s, in de kolom Popup link. De link bestaat uit #lef-popup- met daarachter het nummer (ID) van de pop-up.

Stap 4: Link een knop naar de pop-up

Open de pagina waar de knop moet komen. Voeg een Knoppen-blok toe (zie een knop toevoegen) of kies een bestaande knop. Plak in het linkveld van de knop de link uit stap 3, dus #lef-popup- met het ID van jouw pop-up. Geef de knop een duidelijke tekst, zoals “Offerte aanvragen”.

Een gewone tekstlink in een Tekst-blok werkt ook: selecteer de tekst, klik op de linkknop en plak dezelfde link.

Testen

Sla de pagina op en bekijk hem op de website. Klik op de knop: de pop-up opent met het formulier. Vul het formulier één keer in. Je ziet de bedanktekst in de pop-up, en de melding komt binnen op het adres dat je hebt ingesteld (zie wie de formulierberichten krijgt).

Werkt niet vanuit het menu

Het thema zoekt bij het laden van een pagina naar knoppen en links met #lef-popup- in de inhoud van die pagina, en zet alleen die pop-ups klaar. Een link in het menu wordt daarbij niet gevonden. Ook een link in de topbar of in een footer-widget werkt daardoor niet altijd. Zet de knop dus in de inhoud van de pagina. Wil je de knop op elke pagina? Zet hem dan in een sectie die op elke pagina terugkomt, zie een sectie op elke pagina boven de footer.

Lukt het niet?

• Er gebeurt niets als je op de knop klikt. Controleer de link: #lef-popup- plus het juiste ID, zonder spatie en zonder webadres ervoor. En is de pop-up gepubliceerd?
• De pagina laadt opnieuw na verzenden en de pop-up is weg. Zet ajax=true in de shortcode.
• De knop staat in het menu en werkt niet. Dat kan niet vanuit het menu. Gebruik een knop of tekstlink op de pagina.
• De pop-up opent, maar is leeg. Kijk of het formulier-ID in de shortcode klopt en of het formulier actief is.

Kom je er niet uit? Neem contact met ons op of bel 06 35 66 47 73. We kijken graag even mee.

Veelgestelde vragen