Een formulier insluiten op je website

Je kunt een formulier direct op een pagina van je website zetten, zodat contacten zich aanmelden zonder die pagina te verlaten. Elk formulier biedt 3 manieren om het in te sluiten, allemaal op de pagina Formulier insluiten van het formulier. Gebruik Insluiten op je website, tenzij je een reden hebt om dat niet te doen.

De insluitcode vinden

1. Ga naar CRM → Formulieren en open het formulier.
2. Klik in de zijbalk op Formulier insluiten.

De pagina begint met Manieren om je formulier te gebruiken. Daar staat De eigen pagina van je formulier, het adres waarop wij het formulier hosten, met een knop om het te kopiëren, en een tegel voor elke manier om het formulier te gebruiken. Deel een link brengt je naar de pagina Deel formulier voor de link en de QR-code. De andere 3 tegels springen naar hun onderdeel verderop: Insluiten op je website, Insluiten zonder script en Geavanceerd insluiten.

Weet je niet waar de code op je website moet? Klik in hetzelfde blok op Vraag Leat AI. Leat AI vraagt op welk platform je website draait en helpt je er stap voor stap doorheen.

Insluiten op je website

Dit is de optie met het label Aanbevolen. De code bestaat uit 2 regels: een leeg element waar het formulier komt, en een script dat het formulier erin laadt. Kopieer de code en plak hem in je pagina op de plek waar het formulier moet verschijnen.

• Voeg in Shopify een Custom Liquid-sectie toe en plak daar de code.
• Gebruik in WordPress een Custom HTML-blok.
• Gebruik in Wix of Squarespace een Embed code-blok.

Het formulier neemt precies de hoogte die het nodig heeft. Het groeit mee als er een foutmelding verschijnt of de volgende stap langer is, en je bezoekers scrollen je pagina zoals gewoonlijk, ook met de muis boven het formulier. Gaat een contact naar de volgende stap terwijl de bovenkant van het formulier uit beeld is, dan scrolt de pagina er weer naartoe.

Het formulier houdt de uitstraling die je het in de formuliereditor hebt gegeven. De CSS van je eigen website heeft er geen invloed op, en het verandert ook niets aan je website.

Voordat je de code kopieert, kun je instellen:

• Formulierachtergrond tonen: staat dit uit, dan staat de formulierkaart op de eigen achtergrond van je pagina. Zet het aan om de achtergrondkleur van het formulier rond de kaart te tonen, zoals op de eigen pagina van het formulier.
• Volledige breedte: rek het formulier op tot de breedte van de ruimte waarin je het plaatst, in plaats van de breedte die op het formulier is ingesteld.
• Bron: elke inzending die via deze insluitcode binnenkomt, toont deze bron, bijvoorbeeld homepage. Gebruik een andere bron voor elke pagina waarop je het formulier zet, zodat je ziet welke de meeste aanmeldingen oplevert.

De code verandert mee met elke instelling. Voorbeeld, naast de instellingen, laat zien hoe het formulier er op je pagina uitziet.

Gebruikt je formulier je eigen domein, dan verwijst de code daar al naar.

Je hebt al eerder een formulier ingesloten

Staat op je pagina de code van Insluiten zonder script (een iframe), dan scrolt het formulier binnen zijn eigen frame en kan het worden afgekapt. Vervang die code door de code onder Insluiten op je website.

Insluiten zonder script

Gebruik dit alleen als je websitebouwer geen scripts toestaat. Kopieer de code en plak hem in de HTML van je pagina, op de plek waar het formulier moet verschijnen.

Het formulier staat in een frame met een vaste hoogte. Dat groeit niet mee met het formulier, dus stel Hoogte iframe in voordat je de code kopieert. Die begint op 980 pixels. Maak hem hoog genoeg voor het hele formulier, inclusief foutmeldingen, anders moeten bezoekers binnen het frame scrollen.

Geavanceerd insluiten

Gebruik dit als je het formulier met je eigen CSS wilt stylen, of je eigen code wilt uitvoeren als er iets in het formulier gebeurt. De code tekent het formulier direct in je pagina, zonder eigen opmaak, dus het neemt de lettertypes, kleuren en knoppen van je website over.

Kopieer de code onder Geavanceerd insluiten en plak hem in je pagina. Hij begint met een leeg element, <div id="your-custom-id"></div>, waar het formulier verschijnt, en bevat portalId: "your-custom-id". Die twee moeten hetzelfde zijn. Verander je de id van het element, verander dan ook de waarde in de code. Zonder bijpassend element verschijnt het formulier niet.

Callbacks

Zet Gebruik callbacks aan om 2 callbacks aan de code toe te voegen:

• onError wordt uitgevoerd als er een fout optreedt.
• onSubmit wordt uitgevoerd elke keer dat een stap van het formulier met succes is verzonden.

In de code die je kopieert tonen ze allebei een browsermelding. Vervang die meldingen door je eigen code.

Google Tag Manager

Op welke van de 3 manieren je het formulier ook insluit, het stuurt zijn events naar de Google Tag Manager die al op je website staat: leat_form_view, leat_form_step, leat_form_submit_success en leat_form_submit_error. Bij Insluiten op je website en Insluiten zonder script geeft het formulier ze vanuit zijn frame door aan je pagina. Bij Geavanceerd insluiten zet het ze direct in de data layer van je pagina. De Google Tag Manager die je op het formulier zelf instelt, draait alleen op de eigen link van het formulier.

Wat elk event betekent en hoe je een aanmelding als conversie telt, lees je in Formulierweergaven en aanmeldingen meten in Google Tag Manager.

Voordat je live gaat

Het formulier moet actief zijn om gegevens te verzamelen. Het overzicht onder CRM → Formulieren toont de status van elk formulier. Om die te wijzigen open je het formulier, klik je op de optieknop (de drie puntjes) naast Formulier bewerken en kies je Activeren.

Een privéformulier vraagt elke bezoeker eerst om zijn e-mailadres en stuurt een inloglink voordat hij het kan invullen. Wil je mensen op je website laten aanmelden, sluit dan een openbaar formulier in.