Du hast ein Google-Formular, das funktioniert. Jetzt willst du es auf deiner eigenen Seite haben, und zwar am liebsten so, dass es aussieht wie der Rest deiner Seite und nicht wie Google.
Der Weg über die Einbettung ist in zwei Minuten erledigt, und in manchen Situationen ist er die richtige Wahl. Aber er hat eine harte Grenze, die kein CSS umgeht, und das solltest du wissen, bevor du einen Nachmittag dagegen ankämpfst.
Was die Einbettung wirklich liefert
In Google Forms gibt dir Senden → <> einen iframe:
<iframe
src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
width="640"
height="800"
frameborder="0"
></iframe>Setz das in deine Seite und das Formular erscheint. Es funktioniert, Einsendungen landen in deinem Sheet, fertig.
Jetzt der Teil, den man verstehen sollte: Ein iframe ist ein eigenes Dokument. Das CSS deiner Seite kann nicht hineinreichen. Nicht mit Nachfahren-Selektoren, nicht mit !important, auch nicht indem du das iframe-Element selbst ansprichst. Die Same-Origin-Policy des Browsers verhindert das, und zwar als Sicherheitsgrenze, nicht als vergessene Einschränkung.
Ändern kannst du also nur, was Google dir in der Forms-Oberfläche gibt: eine Themenfarbe, ein Kopfbild und eine von einer Handvoll Schriftarten. Nicht ändern kannst du das Layout, das Styling der Felder, das Button-Design, die Abstände oder den “Powered by Google”-Hinweis. Wenn deine Seite eine eigene Optik hat, wird das Formular nicht dazu passen. Es wird aussehen wie ein Google-Formular, das in deiner Seite sitzt, denn genau das ist es.
Zwei kleinere Kosten, die man leicht übersieht:
- Seitengewicht. Der iframe lädt Googles eigenes CSS und JavaScript, völlig getrennt von den Assets deiner Seite. Auf einer schnellen statischen Seite ist das oft das Schwerste überhaupt.
- Feste Höhe. Du setzt
heightin Pixeln. Zu klein, und das Formular scrollt innerhalb seines eigenen Kastens, was sich kaputt anfühlt. Zu groß, und du hast toten Weißraum. Es kann sich nicht selbst an seinen Inhalt anpassen, und auf dem Handy sieht es dadurch meist am schlechtesten aus.
Wann die Einbettung wirklich die richtige Antwort ist
Es ist nicht so, dass die Einbettung immer falsch wäre. Sie passt gut, wenn:
- Es intern ist. Eine Team-Umfrage, eine Terminabfrage, eine Mittagsbestellung im Büro. Niemand beurteilt deine Marke, und das Sheet ist genau da, wo du die Antworten haben willst.
- Es temporär ist. Eine einmalige Event-Anmeldung, die du in drei Wochen löschst. Sie nachzubauen ist verschwendete Mühe.
- Du ein Sheet als Ziel brauchst. Wenn die Antworten in einen Tabellen-Workflow fließen, bekommst du das mit Google Forms ohne jede Einrichtung.
- Du Googles Fragetypen brauchst. Lineare Skalen, Antwortvalidierung, Abschnitte mit Verzweigungslogik. Das in HTML nachzubauen ist echte Arbeit.
Wenn einer dieser Fälle zutrifft, bette es ein und mach weiter. Der Rest dieses Beitrags ist für den Fall, dass keiner zutrifft.
Wann du es stattdessen als HTML neu baust
Bau es neu, wenn das Formular kundenseitig ist und einer dieser Punkte zählt:
- Es muss zu deinem Design passen. Das ist der große Punkt, und genau den kann die Einbettung überhaupt nicht lösen.
- Es steht auf einer Seite, deren Conversion dir wichtig ist. Ein Kontakt- oder Angebotsformular, das sichtbar zu einer anderen Firma gehört, erzeugt Reibung in genau dem Moment, in dem du sie nicht willst.
- Du willst Antworten in deinem Postfach. Google Forms schreibt Zeilen in ein Sheet. E-Mail-Hinweise sind optional und fassen die Antwort nicht zusammen, du klickst also zurück in Forms, um zu lesen, was jemand geschrieben hat.
- Du bekommst Spam. Google Forms hat keinen eingebauten Spam-Filter. Bots zu stoppen heißt, ein Add-on eines Drittanbieters aus dem Workspace Marketplace zu installieren.
Es gibt noch einen feineren Punkt: die URL-Übergabe. Ein geteiltes Google-Formular liegt auf docs.google.com oder forms.gle. Wer auf deiner Seite liest und dann auf eine Google-Domain klickt, merkt das, und die freundlichste Lesart ist “diese Firma nutzt Google Forms”. Für eine interne Abstimmung völlig okay, für ein Kunden-Aufnahmeformular weniger.
Deine Felder auf HTML abbilden
Der Nachbau ist überwiegend mechanisch. Jeder Fragetyp in Google Forms hat ein direktes HTML-Gegenstück:
| Google Forms | HTML |
|---|---|
| Kurzantwort | <input type="text"> |
| Absatz | <textarea> |
| Multiple Choice | <input type="radio"> |
| Kontrollkästchen | <input type="checkbox"> |
| Dropdown | <select> |
| Kurzantwort mit E-Mail-Validierung | <input type="email"> |
| Datum | <input type="date"> |
| Datei-Upload | <input type="file"> |
| Lineare Skala | <input type="range">, oder Radios für ein diskretes 1 bis 5 |
Aus einer Kurzantwort-Frage mit aktiviertem “Erforderlich” wird:
<div>
<label for="name">Dein Name</label>
<input type="text" id="name" name="name" required />
</div>Zwei Dinge, die man beim Nachbau leicht verliert und mitnehmen sollte:
Echte <label>-Elemente, korrekt verknüpft. Google Forms macht das für dich. In handgeschriebenem HTML musst du es selbst tun: Jedes <label> braucht ein for, das zur id des Inputs passt. Ohne das liest ein Screenreader ein Feld ohne Bezeichnung vor, und ein Klick auf den Text fokussiert das Feld nicht. Platzhaltertext ist kein Ersatz für ein Label.
Deine Pflichtfelder. Ein required-Attribut gibt dir browsereigene Validierung ohne eine Zeile JavaScript.
Multiple Choice braucht ein gemeinsames name über die ganze Gruppe, und genau das wird am häufigsten falsch gemacht:
<fieldset>
<legend>Wie hast du von uns erfahren?</legend>
<input type="radio" id="src-search" name="source" value="search" />
<label for="src-search">Suchmaschine</label>
<input type="radio" id="src-friend" name="source" value="friend" />
<label for="src-friend">Über Bekannte</label>
</fieldset>Gleiches name, unterschiedliche value und id. <fieldset> und <legend> gruppieren sie, damit assistive Technik die Frage zusammen mit den Optionen vorliest.
Wo die Antworten landen
Das ist die eigentliche Entscheidung, und es lohnt sich, sie bewusst zu treffen statt einfach beim Standard zu bleiben.
Google Forms schickt Antworten in ein Sheet, E-Mail ist Nebensache. Ein Formular-Backend dreht das um: Die Einsendung mailt dir, typischerweise mit Reply-to auf die Person, die das Formular ausgefüllt hat, sodass du aus deinem eigenen Postfach antwortest und sie eine Antwort von einem Menschen bekommt statt von einer No-Reply-Adresse.
Wenn du wirklich beides willst, kannst du beides haben. Formpaste hat eine Google-Sheets-Synchronisation, die jede Einsendung als neue Zeile anhängt, sodass der Tabellen-Workflow den Umzug übersteht. Gut zu wissen: Das ist eine Pro-Funktion, während E-Mail-Benachrichtigungen im kostenlosen Tarif funktionieren.
Der ehrliche Kompromiss in die andere Richtung: Google Forms ist unbegrenzt und kostenlos. Die meisten Formular-Backends haben im kostenlosen Tarif eine monatliche Obergrenze, Formpaste mit 250 pro Monat eingeschlossen. Wenn du Tausende Antworten sammelst und das Aussehen des Formulars keine Rolle spielt, gewinnt Google Forms beim Preis, und zwar deutlich.
Eine Umzugs-Checkliste
Wenn du ein Formular im Livebetrieb umstellst, kommt es auf die Reihenfolge an:
- Exportiere zuerst das bestehende Sheet. Der Umzug betrifft nur neue Einsendungen, und deine alten Antworten bleiben, wo sie sind, aber mach das Backup, bevor du irgendetwas änderst.
- Bau das Formular nach, auf einer Seite, die noch nicht verlinkt ist, oder hinter einer Staging-URL.
- Schick einen echten Test ab und prüfe, dass er in deinem Postfach ankommt, nicht bloß, dass die Seite eine Erfolgsmeldung gezeigt hat.
- Prüfe es auf dem Handy. Dort braucht ein handgebautes Formular meist die meiste Aufmerksamkeit, und dort war der alte iframe am schlechtesten.
- Tausche Link oder Einbettung gegen das neue Formular.
- Lass das Google-Formular bestehen, aber für Antworten geschlossen, für eine oder zwei Wochen. Stell es so ein, dass es keine Antworten mehr annimmt, mit einem Hinweis auf die neue Seite, damit niemand mit dem alten Link im Nichts landet.
- Lösche es, wenn dort eine Weile nichts mehr angekommen ist.
Schritt 6 ist der, den die meisten überspringen. Alte Links leben in E-Mail-Signaturen, PDFs und den Lesezeichen anderer Leute noch sehr lange weiter.
Die Kurzfassung
Ein Google-Formular einzubetten ist in Ordnung, wenn niemand das Design beurteilt und ein Sheet dort ist, wo du die Daten haben willst. Es lässt sich nicht so hinbiegen, dass es wie deine Seite aussieht, weil ein iframe ein eigenes Dokument ist und dein CSS diese Grenze nicht überschreiten kann.
Wenn das Formular kundenseitig ist, dauert der Nachbau als echtes HTML meist unter einer Stunde, und du bekommst ein Formular, das zu deiner Seite passt, in deinem Postfach landet und nach Spam gefiltert werden kann.
Wenn du ein Markup zum Anfangen willst: Die Anleitung für ein Kontaktformular auf einer statischen Seite enthält ein komplettes barrierefreies Formular. Und weil ein öffentliches Formular Bots anzieht, zeigt Spam stoppen ohne CAPTCHA, was du dagegen tun kannst. Es gibt außerdem einen ausführlicheren Google-Forms-Vergleich, falls du die beiden direkt gegeneinander abwägst.