Tutorials

Tutorial: Google Forms erstellen und auf einer Webseite einbinden

Melden

Dieses Tutorial führt dich Schritt für Schritt durch den Prozess: von der Erstellung eines Google Formulars bis hin zur Einbettung auf deiner eigenen Webseite.

Google Forms ist ein kostenloses und mächtiges Tool, um Umfragen, Kontaktformulare oder Anmeldungen zu erstellen.

Teil 1: Das Google Formular erstellen

  1. Google Forms öffnen: Gehe auf forms.google.com und melde dich mit deinem Google-Konto an.
  2. Neues Formular starten: Klicke auf das große „+“ (Leer), um ein neues Formular zu erstellen.
  3. Titel und Beschreibung:
    • Klicke auf „Unbenanntes Formular“ und gib ihm einen Namen (z. B. „Kontaktformular“).
    • Füge optional eine kurze Beschreibung hinzu.
  4. Fragen hinzufügen:
    • Klicke auf die erste Frage, um sie zu bearbeiten.
    • Wähle rechts im Dropdown-Menü den Fragetyp aus (z. B. Kurzantwort für den Namen, E-Mail oder Multiple-Choice).
    • Aktiviere den Schalter „Pflichtfeld“, wenn die Beantwortung zwingend erforderlich ist.
    • Nutze das „+“-Icon in der rechten Seitenleiste, um weitere Fragen hinzuzufügen.

Teil 2: Design und Einstellungen anpassen

  1. Design anpassen: Klicke oben rechts auf das Paletten-Symbol (Design anpassen). Hier kannst du Farben ändern oder ein Header-Bild hochladen.
  2. Einstellungen prüfen: Klicke auf den Tab Einstellungen (oben in der Mitte):
    • Antworten: Hier kannst du festlegen, ob E-Mail-Adressen automatisch gesammelt werden sollen.
    • Bestätigungsnachricht: Unter „Präsentation“ kannst du den Text ändern, den Nutzer nach dem Absenden sehen.

Teil 3: Den Einbettungscode (Embed Code) erhalten

Damit das Formular direkt auf deiner Webseite erscheint, benötigst du einen HTML-Code.

  1. Klicke oben rechts auf die Schaltfläche Senden.
  2. Ein Fenster öffnet sich. Wähle in der Mitte das Icon mit den spitzen Klammern aus: < > (Einbetten).
  3. Größe anpassen: Du kannst hier die Breite (Width) und Höhe (Height) in Pixeln einstellen.
    • Tipp: Eine Breite von 100% (manuell im Code änderbar) ist oft besser für mobile Geräte.
  4. Klicke unten rechts auf Kopieren. Der HTML-Code (iframe) befindet sich nun in deiner Zwischenablage.

Teil 4: Das Formular auf deiner Webseite einbinden

Je nachdem, welches System du nutzt, funktioniert das Einfügen leicht unterschiedlich:

A. In WordPress einbinden

  1. Öffne die Seite oder den Beitrag, auf dem das Formular erscheinen soll.
  2. Füge einen neuen Block hinzu und suche nach „Individuelles HTML“.
  3. Füge den kopierten Google-Forms-Code in das Feld ein.
  4. Speichere oder aktualisiere die Seite.

B. In einem Website-Baukasten (Wix, Squarespace, Jimdo)

  1. Suche nach einer Funktion wie „Element hinzufügen“ oder „Widget“.
  2. Wähle „HTML-Code“, „Embed“ oder „Code einbetten“.
  3. Füge den Code dort ein und bestätige.

C. In klassischem HTML/Programmierung

Füge den <iframe>-Code einfach an der gewünschten Stelle innerhalb des <body>-Tags ein.

Teil 5: Antworten verwalten

Sobald Personen das Formular auf deiner Webseite ausfüllen, landen die Daten direkt bei Google:

  1. Gehe zurück zu deinem Formular in Google Forms.
  2. Klicke oben auf den Tab Antworten.
  3. Hier siehst du eine Zusammenfassung.
  4. Profi-Tipp: Klicke auf das grüne Icon „In Sheets verknüpfen“, um alle Antworten automatisch in einer Google Excel-Tabelle (Sheets) zu sammeln. So kannst du die Daten viel besser auswerten.

Tipps für ein besseres Ergebnis:

  • Transparenz: Wenn das Formular auf deiner Seite etwas abgeschnitten aussieht, erhöhe im Einbettungscode den Wert für height="800" (oder höher).
  • Datenschutz (DSGVO): Da Google Forms Daten auf US-Servern verarbeitet, solltest du dies in deiner Datenschutzerklärung erwähnen und ggf. eine Checkbox zur Einwilligung im Formular hinzufügen.
0