Google Forms, Calendly und Typeform auf deiner Website einbetten
Google Forms, Calendly und Typeform einbetten
Google Forms, Calendly und Typeform auf einer Website einbetten | We.Inc
Wo du den Einbettungscode in Google Forms, Calendly und Typeform findest, wie jeder auf Handys passt, und ein Builder, der das Snippet für dich aufräumt.
Jeder Dienst gibt dir ein Snippet, das du in deine Seite einfügst. Google Forms liefert über die Option Embed HTML ein iframe; Calendly gibt dir über Add to website ein div plus ein Script; Typeform gibt dir ein div mit data-tf-widget plus sein Einbettungs-Script. Lege eine sinnvolle Höhe, einen Titel und width 100% fest, damit es auf Handys passt.
Wo der jeweilige Einbettungscode zu finden ist (Stand Oktober 2026)
Dienst
Wo du klickst
Was du einfügst
Google Forms
Menü Mehr (drei Punkte) > Embed HTML > Kopieren
Ein iframe
Calendly
Terminseite > drei Punkte > Add to website
Ein div und ein script-Tag
Typeform
Die Einbettungsoptionen in den Freigabeeinstellungen deines Formulars
Ein div mit data-tf-widget und ein script-Tag
Den Code zu kopieren ist der einfache Teil. Die Probleme zeigen sich danach: ein Formular, das auf Handys abgeschnitten ist, eine doppelte Scrollleiste, ein iframe ohne Titel für Screenreader oder ein Buchungs-Widget, das die Seite ausbremst. Diese Anleitung zeigt, wo jeder Code zu finden ist und wie er sich richtig verhält.
Wähle den Dienst im Builder unten.
Füge ein, was dir der Dienst gegeben hat: den iframe-Code von Google, deinen Calendly-Link oder deinen Typeform-Link.
Lege die Höhe und einen kurzen Titel fest, der das Formular beschreibt, und aktiviere Lazy Loading, wenn das Formular weiter unten auf der Seite steht.
Kopiere das bereinigte Snippet in einen HTML- oder Embed-Block auf deiner Website und teste es auf einem Handy.
Gib jedem iframe einen Titel wie Kontaktformular oder Gespräch buchen. Screenreader-Nutzer hören ihn, bevor sie entscheiden, ob sie hineingehen.
Füge loading="lazy" zu iframes hinzu, die weiter unten auf der Seite stehen, damit das Formular erst lädt, wenn jemand dorthin scrollt.
Setze width auf 100% und begrenze sie mit max-width statt einer festen Pixelbreite, sonst läuft das Formular auf kleinen Bildschirmen über.
Teste nach dem Einbetten eine echte Übermittlung. Ein Formular, das richtig aussieht, kann trotzdem an das falsche Konto oder eine Entwurfsversion senden.
Häufige Fragen
Warum hat mein eingebettetes Google-Formular zwei Scrollleisten?
Das iframe ist kürzer als das Formular, also scrollt das Formular darin, während auch die Seite scrollt. Erhöhe das height-Attribut, bis das ganze Formular hineinpasst, und prüfe es erneut, wenn du Fragen hinzufügst, denn der Rahmen wächst nicht von selbst.
Kann ich ein eingebettetes Google-Formular mit eigenem CSS gestalten?
Nein. Das Formular ist eine von Google ausgelieferte Seite in einem Rahmen, und dein Stylesheet kommt nicht hinein. Du kannst das Design in Google Forms ändern oder ein eigenes Formular bauen, das woanders hin sendet.
Wie verhindere ich, dass das Calendly-Inline-Widget abgeschnitten wird?
Calendlys eigener Code setzt eine Mindestbreite von 320px und eine feste Höhe. Erhöhe die Höhe, wenn dein Termin zusätzliche Fragen stellt, oder nutze die Optionen Popup-Text oder Popup-Widget, damit sich der Terminplaner über der Seite öffnet.
Welche Typeform-Einbettung sollte ich verwenden?
Typeform bietet Inline, Vollbild, Popup, Slider, Popover und Side Tab als Einbettungen an. Nutze Inline, wenn das Formular der Zweck der Seite ist, und ein Popup oder einen Slider, wenn es eine Nebenaktion neben anderem Inhalt ist.
Funktionieren diese Einbettungen auf einer mit We.Inc erstellten Website?
Ja. Füge das Snippet in einen HTML- oder Embed-Block ein oder bitte den Editor, das Formular in einem Abschnitt zu platzieren. Das Snippet ist normales HTML, es verhält sich also wie auf jeder anderen Website.
Google Forms
Öffne das Formular, wähle oben rechts das Menü Mehr, klicke auf Embed HTML und dann auf Kopieren. Googles Hilfeseite beschreibt diese Schritte. Du bekommst ein einzelnes iframe, das auf dein Formular zeigt.
Das kopierte iframe hat feste Pixelmaße. Ersetze die Breite durch 100% mit einer max-width, damit es auf Handys schrumpft, halte die Höhe groß genug für die längste Version des Formulars und füge einen Titel hinzu.
Calendly
Öffne auf deiner Terminseite das Drei-Punkte-Menü neben dem Termin und wähle Add to website. Calendly bietet dann drei Varianten: Inline-Einbettung, Popup-Widget (ein schwebender Button) und Popup-Text (ein Link). Vor dem Kopieren kannst du auch dein Foto oder die Termindetails ausblenden.
Der Inline-Code ist ein div mit der Klasse calendly-inline-widget, deinem Link in data-url und einem Script von assets.calendly.com. Lade dieses Script nur einmal pro Seite, auch wenn du mehrere Widgets zeigst.
Typeform
Typeforms Einbettungsbibliothek liest jedes Element mit data-tf-widget und macht daraus das Formular, das Snippet ist also ein div plus ein Script. Die Formular-ID ist der letzte Teil deiner Typeform-Adresse nach /to/.
Für einen Button, der das Formular in einem Popup öffnet, stellt die Bibliothek window.tf.createPopup bereit. Es liefert Funktionen zum Öffnen, Schließen und Umschalten, die du an deinen eigenen Button hängen kannst.
Geschwindigkeit und Datenschutz
Jede Einbettung lädt Code einer anderen Website und kann deren Cookies setzen, also erwähne die Dienste in deiner Datenschutzerklärung. Steht ein Formular weit unten auf der Seite, halten Lazy Loading oder ein Button, der es öffnet, den ersten Seitenaufbau schnell.
Die drei im Vergleich
Einbettungsvarianten der einzelnen Dienste (laut ihren Hilfeseiten, Oktober 2026)
Dienst
Einbettungsvarianten
Passt die Größe sich selbst an?
Google Forms
Inline-iframe
Nein, du legst die Höhe fest
Calendly
Inline, Popup-Widget, Popup-Text
Die Inline-Höhe ist fest, außer du nutzt die erweiterte JavaScript-Einbettung mit Größenanpassung
Typeform
Inline, Vollbild, Popup, Slider, Popover, Side Tab
Inline füllt die Box, die du ihm gibst
Saubere Snippets als Ausgangspunkt
Ersetze die Platzhalteradressen durch deine eigenen. Jedes Snippet ist so bemessen, dass es auf Handys passt.
Google-Formular, volle Breite mit Titel
Behalte die src, die Google dir gibt; nur Größe, Titel und Lazy Loading ändern sich.
Calendly-Terminplaner inline
Der Aufbau von Calendlys Inline-Einbettung: ein div mit deinem Link und ein Script.
Typeform inline
Ersetze abc123 durch deine Formular-ID. Das Script gestaltet das Widget selbst.
Wähle Google Forms, Calendly oder Typeform, füge den Code oder Link ein, den dir der Dienst gegeben hat, und erhalte ein Snippet mit Titel, handytauglicher Breite und der von dir festgelegten Höhe. Der Builder schreibt nur Text um; er lädt das Formular nicht.
Füge den iframe-Code aus Embed HTML ein
Füge deinen Termin-Link ein
Füge deinen Typeform-Link oder die Formular-ID ein
Füge den iframe-Code aus Google Forms ein (er zeigt auf docs.google.com/forms).
Füge deinen Calendly-Termin-Link ein, zum Beispiel https://calendly.com/your-name/30min.
Füge deinen Typeform-Link ein, zum Beispiel https://form.typeform.com/to/abc123, oder nur die Formular-ID.