Gids · 6 min. leestijd
Een formulier insluiten op je website
Er zijn verschillende manieren om een formulier op je site te zetten, van een snippet van één regel tot een volledig aangepaste API-integratie. Deze gids behandelt inline insluitingen, popup-modals, het webcomponent en de JS SDK, en de publieke REST API, zodat je de aanpak kunt kiezen die bij jouw build past.
Inline insluiten
Een inline insluiting zet het formulier direct in de flow van je pagina, zodat het tussen je andere content staat als elke andere sectie. Je plakt een klein snippet op de plek waar je het formulier wilt tonen, en het rendert direct daar, geen redirect, geen aparte landingspagina.
De simpelste versie is een webcomponent: voeg de <yeetform-embed> tag toe met je formulier-slug en het formulier laadt inline. Als je dat liever hebt, kun je hetzelfde effect bereiken met één JS SDK-aanroep die rendert in een doelelement dat je zelf kiest.
Popup of modal
Soms wil je het formulier helemaal niet op de pagina tonen totdat iemand erom vraagt. Een popup of modal houdt je layout schoon en opent het formulier in een overlay wanneer een bezoeker op een knop klikt, ideaal voor contactknoppen, feedbackwidgets of een call-to-action in de hoek van het scherm.
Met de JS SDK koppel je een knop aan YeetForm.open(slug) en verschijnt het formulier in een gecentreerde modal over je pagina. De bezoeker vult het in zonder ooit weg te gaan, en de overlay sluit bij het verzenden, zodat het formulier nooit strijdt om ruimte met je hoofdinhoud.
Webcomponent en JS SDK
Voor de meeste sites dekken het webcomponent en de JS SDK alles. De <yeetform-embed> tag is de optie zonder build, hij werkt in gewone HTML, in een CMS-blok of binnen elk framework dat custom elements toestaat. De JS SDK geeft je programmatische controle wanneer je die nodig hebt.
De SDK (public/sdk.js) biedt een kleine set methoden:
- YeetForm.render(slug, target, options), sluit het formulier inline in een element van je keuze in.
- YeetForm.open(slug, options), opent het formulier in een modal popup.
- YeetForm.load(slug, lang), haalt het formulierschema headless op, bijvoorbeeld om velden te tellen of te inspecteren.
- YeetForm.submit(slug, answers), verstuurt een reactie programmatisch vanuit je eigen code.
API voor aangepaste integraties
Als je volledige controle nodig hebt, een op maat gemaakte frontend, een mobiele app of een serverside flow, gebruik dan de publieke REST API. Deze is CORS-enabled, dus je kunt hem direct vanuit browsercode aanroepen, en zonder authenticatie voor publieke formulieren, dus er is geen API-sleutel nodig om een schema te laden of een reactie te versturen.
Een typische integratie haalt het formulierschema op met een GET-verzoek, rendert de velden zoals je zelf wilt in je eigen UI, en stuurt de verzamelde antwoorden vervolgens terug als reactie via een POST. Omdat het schema gewoon JSON is, kun je volledig aangepaste layouts bouwen terwijl YeetForm op de achtergrond de opslag, meldingen en analyse blijft afhandelen.