Google Forms, Calendly en Typeform insluiten op uw website
Google Forms, Calendly en Typeform insluiten
Google Forms, Calendly en Typeform insluiten op een website | We.Inc
Waar u de insluitcode vindt in Google Forms, Calendly en Typeform, hoe u elk ervan op telefoons laat passen, en een builder die het fragment voor u opschoont.
Elke dienst geeft u een fragment om in uw pagina te plakken. Google Forms geeft u een iframe via de optie Embed HTML; Calendly geeft een div plus een script via Add to website; Typeform geeft een div met data-tf-widget plus het eigen insluitscript. Stel een redelijke hoogte in, een titel en width 100% zodat het op telefoons past.
Waar elke insluitcode staat (stand oktober 2026)
Dienst
Waar u klikt
Wat u plakt
Google Forms
Menu Meer (drie puntjes) > Embed HTML > Copy
Een iframe
Calendly
Planningspagina > drie puntjes > Add to website
Een div en een script-tag
Typeform
De insluitopties in de deelinstellingen van uw formulier
Een div met data-tf-widget en een script-tag
De code kopiëren is het makkelijke deel. De problemen komen daarna: een formulier dat op telefoons wordt afgesneden, een dubbele scrollbalk, een iframe zonder titel voor schermlezers, of een boekingswidget die de pagina vertraagt. Deze gids laat zien waar elke code staat en hoe u die netjes laat werken.
Kies de dienst in de builder hieronder.
Plak wat de dienst u gaf: de iframe-code van Google, uw Calendly-link of uw Typeform-link.
Stel de hoogte in en een korte titel die het formulier beschrijft, en kies lazy loading als het formulier onder de vouw staat.
Kopieer het opgeschoonde fragment naar een HTML- of embedblok op uw site en test het op een telefoon.
Geef elk iframe een titel zoals Contactformulier of Plan een gesprek. Gebruikers van schermlezers horen die voordat ze besluiten of ze verdergaan.
Voeg loading="lazy" toe aan iframes die lager op de pagina staan, zodat het formulier pas laadt als een bezoeker ernaartoe scrolt.
Zet de breedte op 100% en begrens die met max-width in plaats van een vaste breedte in pixels, anders loopt het formulier buiten kleine schermen.
Test na het insluiten een echte inzending. Een formulier dat er goed uitziet, kan nog steeds naar het verkeerde account of een conceptversie versturen.
Veelgestelde vragen
Waarom heeft mijn ingesloten Google-formulier twee scrollbalken?
Het iframe is korter dan het formulier, dus het formulier scrolt erbinnen terwijl de pagina ook scrolt. Verhoog het height-attribuut tot het hele formulier past, en controleer opnieuw na het toevoegen van vragen, want het frame groeit niet vanzelf mee.
Kan ik een ingesloten Google-formulier stylen met mijn eigen CSS?
Nee. Het formulier is een pagina die Google in een frame serveert, en uw stylesheet kan daar niet bij. U kunt het thema binnen Google Forms aanpassen, of uw eigen formulier bouwen dat elders verstuurt.
Hoe voorkom ik dat de inline widget van Calendly wordt afgesneden?
De eigen code van Calendly stelt een minimale breedte van 320px en een vaste hoogte in. Verhoog de hoogte als uw afspraaktype extra vragen stelt, of gebruik de opties popup text of popup widget zodat de planner boven de pagina opent.
Welke Typeform-embed moet ik gebruiken?
Typeform biedt inline, full page, popup, slider, popover en side tab als embeds. Gebruik inline als het formulier het doel van de pagina is, en een popup of slider als het een bijkomende actie is naast andere inhoud.
Werken deze embeds op een site die met We.Inc is gebouwd?
Ja. Voeg het fragment toe in een HTML- of embedblok, of vraag de editor om het formulier in een sectie te plaatsen. Het fragment is gewone HTML, dus het gedraagt zich net als op elke andere site.
Google Forms
Open het formulier, kies rechtsboven het menu Meer, kies Embed HTML en druk op Copy. De helppagina van Google noemt deze stappen. U krijgt één iframe dat naar uw formulier verwijst.
Het gekopieerde iframe heeft vaste afmetingen in pixels. Vervang de breedte door 100% met een max-width zodat het op telefoons krimpt, houd de hoogte groot genoeg voor de langste versie van het formulier, en voeg een titel toe.
Calendly
Open op uw planningspagina het menu met drie puntjes naast het afspraaktype en kies Add to website. Calendly biedt dan drie stijlen: inline embed, popup widget (een zwevende knop) en popup text (een link). U kunt ook uw foto of de afspraakdetails verbergen voordat u kopieert.
De inline code is een div met de class calendly-inline-widget, uw link in data-url, en één script van assets.calendly.com. Laad dat script één keer per pagina, ook als u meerdere widgets toont.
Typeform
De embedbibliotheek van Typeform leest elk element met data-tf-widget en maakt er het formulier van, dus het fragment is een div plus een script. Het formulier-id is het laatste deel van uw Typeform-adres na /to/.
Voor een knop die het formulier in een popup opent, biedt de bibliotheek window.tf.createPopup, dat de functies open, close en toggle teruggeeft die u aan uw eigen knop kunt koppelen.
Snelheid en privacy
Elke embed laadt code van een andere site en kan cookies van die site plaatsen, dus vermeld de diensten in uw privacybeleid. Staat een formulier ver onderaan de pagina, dan houden lazy loading of een knop die het opent de eerste weergave snel.
De drie vergeleken
Embedstijlen die elke dienst biedt (uit hun helpdocumentatie, oktober 2026)
Dienst
Embedstijlen
Past de grootte zichzelf aan?
Google Forms
Inline iframe
Nee, u stelt de hoogte in
Calendly
Inline, popup widget, popup text
De inline hoogte is vast, tenzij u de geavanceerde JavaScript-embed met resize gebruikt
Typeform
Inline, full page, popup, slider, popover, side tab
Inline vult het vak dat u het geeft
Schone fragmenten om mee te beginnen
Vervang de voorbeeldadressen door uw eigen adressen. Elk fragment is zo ingesteld dat het op telefoons past.
Google-formulier, volle breedte met een titel
Behoud de src die Google u geeft; alleen de afmetingen, titel en lazy loading veranderen.
Calendly inline planner
De opbouw van de inline embed van Calendly: één div met uw link en één script.
Typeform inline
Vervang abc123 door uw formulier-id. Het script stylet de widget zelf.
Kies Google Forms, Calendly of Typeform, plak de code of link die de dienst u gaf, en krijg een fragment met een titel, een telefoonvriendelijke breedte en de hoogte die u instelt. De builder herschrijft alleen tekst; het laadt het formulier niet.
Plak de iframe-code uit Embed HTML
Plak uw planningslink
Plak uw Typeform-link of formulier-id
Plak de iframe-code uit Google Forms (die verwijst naar docs.google.com/forms).
Plak uw Calendly-planningslink, bijvoorbeeld https://calendly.com/your-name/30min.
Plak uw Typeform-link, bijvoorbeeld https://form.typeform.com/to/abc123, of alleen het formulier-id.