Anleitung

Formular in WordPress einbinden: 3 Wege im Vergleich

Formular in WordPress einbinden: Embed-Code, iframe und Link im Vergleich – mit Anleitung für den HTML-Block, Ladezeit-Tipps und Pflegeaufwand.

Formenio Team7 Min. Lesezeit
Formenio – Online-Formular in eine WordPress-Seite einbinden

Du hast ein Formular fertig und willst es auf deiner WordPress-Seite zeigen. Ein Formular in WordPress einbinden kannst du auf drei Arten: per Embed-Code, per iframe oder als Link beziehungsweise Button. Die drei unterscheiden sich in Aufwand, Ladezeit und vor allem darin, wer später Änderungen macht. Dieser Vergleich zeigt dir, wann welcher Weg der richtige ist – und wie du ihn konkret in WordPress umsetzt.

Die drei Wege im Überblick

Embed-CodeiframeLink / Button
Formular erscheintdirekt auf deiner Seitedirekt auf deiner Seiteauf einer eigenen Seite
Aufwand beim EinrichtenCode kopieren, einfügenCode kopieren, Höhe anpassenLink kopieren
Höhe passt sich anjanein, feste Höheentfällt
Ladezeit deiner Seitekleines zusätzliches Skriptein zusätzlicher Seitenaufrufunverändert
Änderungen am Formularohne Anfassen der Websiteohne Anfassen der Websiteohne Anfassen der Website
Gut fürKontakt-, Anfrage-, Anmeldeformularestrenge Vorgaben, statische FormulareNewsletter, Kampagnen, QR-Codes

Allen drei Wegen ist eines gemeinsam: Das Formular selbst liegt weiterhin außerhalb von WordPress. Du änderst ein Feld im Editor, und die Website zeigt sofort die neue Fassung – ohne dass jemand eine Seite bearbeiten oder ein Plugin aktualisieren muss.

Weg 1: Embed-Code – das Formular wird Teil deiner Seite

Der Embed-Code ist ein kurzer Schnipsel, den du im Formular-Editor unter „Veröffentlichen“ kopierst und an der Stelle einfügst, an der das Formular erscheinen soll. Er lädt das Formular nach und passt seine Höhe automatisch an den Inhalt an – auch dann, wenn während des Ausfüllens Felder ein- oder ausgeblendet werden oder eine Fehlermeldung auftaucht.

So bindest du ihn im Block-Editor ein:

  1. Öffne die Seite, auf der das Formular stehen soll, und setze den Cursor an die gewünschte Stelle.
  2. Füge einen Block vom Typ „Individuelles HTML“ ein (nicht „Absatz“ und nicht „Code“ – „Code“ zeigt den Schnipsel nur an, statt ihn auszuführen).
  3. Kopiere den Embed-Code aus dem Formular-Editor in den Block.
  4. Klick auf „Vorschau“ im Block, um das Ergebnis direkt im Editor zu sehen, und veröffentliche die Seite.

Arbeitest du noch mit dem Classic Editor, wechselst du oben rechts auf den Reiter „Text“ und fügst den Code dort ein. Im Reiter „Visuell“ wird er als sichtbarer Text behandelt und beim Speichern zerlegt.

Wenn der Code beim Speichern verschwindet

WordPress entfernt script- und iframe-Tags aus Beiträgen und Seiten, wenn dem Konto die Berechtigung unfiltered_html fehlt. Laut der WordPress-Dokumentation zu Rollen und Berechtigungen haben sie nur Administratoren und Redakteure – in einer Multisite-Installation sogar ausschließlich Super-Admins. Melde dich in dem Fall mit einem Administrator-Konto an oder lass die Seite einmal von jemandem mit dieser Rolle anlegen.

Weg 2: iframe – volle Kontrolle, mehr Handarbeit

Ein iframe ist ein Rahmen, in dem eine zweite Seite innerhalb deiner Seite geladen wird. Du kommst ohne zusätzliches Skript aus, was in Umgebungen mit strengen Vorgaben – etwa einer restriktiven Content-Security-Policy – ein Argument sein kann.

<iframe
  src="DEINE-FORMULAR-URL"
  width="100%"
  height="900"
  style="border:0"
  loading="lazy"
  title="Kontaktformular"
></iframe>

Der Einbau läuft wie bei Weg 1 über den Block „Individuelles HTML“. Vier Details entscheiden darüber, ob das Ergebnis gut aussieht:

  • Die Höhe musst du selbst setzen. Der Rahmen weiß nicht, wie lang das Formular ist. Wähle sie großzügig für den längsten Zustand – mit Fehlermeldungen und mit allen bedingt eingeblendeten Feldern. Zu knapp bemessen, bekommt das Formular eine eigene Scrollleiste, was auf dem Handy unangenehm ist.
  • width="100%" statt einer festen Pixelbreite, damit der Rahmen auf schmalen Displays nicht über den Rand hinausragt.
  • title ist kein Detail für Perfektionisten: Screenreader kündigen den Rahmen damit an. Ohne Titel bleibt er unbeschriftet.
  • loading="lazy" lädt den Rahmen erst, wenn er in Sichtweite kommt. Sinnvoll, wenn das Formular weit unten auf einer langen Seite steht.

Die feste Höhe ist der eigentliche Haken. Sobald sich das Formular ändert, musst du sie nachziehen – und genau das wird in der Praxis vergessen.

Manchmal ist der beste Einbau gar kein Einbau. Ein Link auf die eigenständige Formularseite reicht überall dort, wo das Formular nicht Teil eines Seiteninhalts sein muss: in einem Newsletter, in der E-Mail-Signatur, in einem Social-Media-Profil, hinter einem QR-Code auf einem Flyer oder als auffälliger Button in einer Kampagne.

Die Vorteile: null Ladezeit auf deiner Seite, keine HTML-Rechte nötig, keine Höhenprobleme. Der Nachteil: Es ist ein Seitenwechsel, und jeder Wechsel kostet einen Teil der Interessenten. Für ein Kontaktformular auf der Kontaktseite ist das der falsche Weg – für eine Anmeldung, die du ohnehin per E-Mail verschickst, der richtige.

In WordPress brauchst du dafür nichts weiter als einen normalen Link- oder Button-Block. Wenn du magst, kannst du die Formularadresse über eine eigene Subdomain laufen lassen, damit sie zu deiner Marke passt.

Ladezeit: was die drei Wege wirklich kosten

Die Sorge, ein eingebettetes Formular mache die Seite langsam, ist verbreitet – und in dieser Pauschalität falsch. Entscheidend ist, was wann geladen wird:

  • Der Embed-Code lädt ein kleines Skript und danach das Formular selbst. Deine Seite wird davon nicht blockiert; das Formular erscheint kurz nach dem übrigen Inhalt.
  • Der iframe startet einen vollständigen zusätzlichen Seitenaufruf. Mit loading="lazy" passiert das erst, wenn der Rahmen sichtbar wird.
  • Der Link kostet nichts.

Ein Formular pro Seite reicht

Wenn du dasselbe Formular auf einer Seite mehrfach einbaust – oben, in der Mitte und im Footer – lädst du es auch mehrfach. Setze es an eine Stelle und verlinke von den übrigen dorthin. Das ist schneller und macht die Auswertung eindeutiger.

Der größere Hebel für die gefühlte Geschwindigkeit liegt ohnehin im Formular selbst: Wie viele Felder es hat, ob Pflichtfelder sinnvoll gesetzt sind und wie die Fehlermeldungen aussehen. Welche Stellschrauben es dabei gibt, steht in Formular-Conversion optimieren.

Pflegeaufwand: wer ändert was, wenn sich das Formular ändert

Dieser Punkt wird bei der Entscheidung meist unterschätzt, macht aber über die Jahre den größten Unterschied.

Baust du das Formular direkt in WordPress, gehören Formular und Website zusammen: Ein neues Feld heißt Seite bearbeiten, ein Plugin-Update kann das Layout verschieben, und wer das Formular ändern soll, braucht einen WordPress-Zugang mit ausreichenden Rechten.

Bei allen drei hier beschriebenen Wegen ist das entkoppelt. Das Formular lebt außerhalb, die WordPress-Seite enthält nur den Verweis darauf. Praktisch heißt das:

  • Ein neues Feld ergänzt die Kollegin im Formular-Editor – die Website bleibt unangetastet.
  • Dasselbe Formular kann gleichzeitig eingebettet, verlinkt und hinter einem QR-Code stehen. Alle Einsendungen landen an einer Stelle.
  • Wer Formulare pflegt, braucht keinen Website-Zugang. Das ist ein Sicherheitsgewinn, kein Umweg.

Ausgenommen ist die feste iframe-Höhe: Sie ist die einzige Einstellung, die du bei größeren Änderungen in WordPress nachziehen musst. Ein Grund mehr, im Zweifel den Embed-Code zu nehmen.

Und was ist mit Formular-Plugins?

Ein Plugin, das Formulare direkt in WordPress baut, ist ein legitimer vierter Weg – mit anderen Kompromissen. Du bleibst in einer Oberfläche, dafür hängen Formulare an Plugin-Updates, an der Erreichbarkeit deiner Website und an deren Backups. Der E-Mail-Versand läuft über deinen Webserver, was ohne zusätzlichen Versanddienst regelmäßig im Spam-Ordner endet. Und die Einsendungen liegen in der WordPress-Datenbank, also dort, wo bei einem Sicherheitsvorfall zuerst gesucht wird.

Ein extern gehostetes Formular verlagert das: Erreichbarkeit, Versand, Spam-Schutz und Aufbewahrung sind Sache des Dienstes. Dafür kommt ein Anbieter ins Spiel, mit dem du einen Auftragsverarbeitungsvertrag brauchst und dessen Serverstandort in deine Datenschutzbewertung gehört. Was dabei zu klären ist, ordnet DSGVO-konforme Online-Formulare ein – eine Rechtsberatung ersetzt weder jener Artikel noch dieser.

So entscheidest du

  • Nimm den Embed-Code, wenn das Formular Teil einer Seite sein soll – Kontakt, Anfrage, Anmeldung, Bewerbung. Das ist der Standardfall.
  • Nimm den iframe, wenn dein Setup kein zusätzliches Skript erlaubt und das Formular stabil bleibt, seine Länge sich also nicht ständig ändert.
  • Nimm den Link, wenn du außerhalb deiner Website verteilst: Newsletter, Signatur, Social Media, QR-Code.

Kombinieren ist ausdrücklich erlaubt. Dasselbe Formular auf der Kontaktseite einzubetten und zusätzlich in der E-Mail-Signatur zu verlinken, ist kein Widerspruch, sondern der Normalfall.

Fazit

Ein Formular in WordPress einbinden ist in fünf Minuten erledigt: Embed-Code kopieren, „Individuelles HTML“-Block einfügen, veröffentlichen. Der iframe ist die Handarbeitsvariante für Sonderfälle, der Link die richtige Wahl außerhalb der eigenen Website. Wichtiger als die Technik ist, dass Formular und Website getrennt bleiben – dann kostet jede spätere Änderung einen Klick im Editor statt eines Termins mit der Agentur. Wenn du noch kein Formular hast, ist der schnellste Einstieg eine Vorlage, die du auf deinen Fall zusammenstreichst; welche Funktionen dir danach zur Verfügung stehen, zeigt die Funktionsübersicht.

Häufige Fragen

Warum verschwindet mein Embed-Code, wenn ich die WordPress-Seite speichere?

WordPress entfernt `script`- und `iframe`-Tags aus Inhalten, wenn dein Benutzerkonto die Berechtigung `unfiltered_html` nicht hat. Laut der WordPress-Dokumentation haben diese Berechtigung nur Administratoren und Redakteure – und in einer Multisite-Installation ausschließlich Super-Admins. Melde dich also mit einem Administrator-Konto an und füge den Code in einen „Individuelles HTML“-Block ein, nicht in einen Absatz-Block.

Brauche ich ein Plugin, um ein Formular in WordPress einzubinden?

Nein. Ein extern gehostetes Formular bindest du über den Block „Individuelles HTML“ ein, den WordPress bereits mitbringt. Plugins brauchst du nur, wenn du das Formular direkt in WordPress bauen willst oder wenn dein Redaktionskonto keine HTML-Rechte hat. Jedes zusätzliche Plugin bedeutet Updates, mögliche Konflikte und eine weitere Stelle, die du sicherheitstechnisch im Blick behalten musst.

Wie hoch muss ein iframe für ein Formular sein?

Ein iframe hat eine feste Höhe und kennt den Inhalt des Formulars nicht. Du musst sie deshalb selbst setzen – großzügig genug für den längsten Zustand, also inklusive eingeblendeter Fehlermeldungen und bedingt sichtbarer Felder. Auf dem Smartphone braucht dasselbe Formular deutlich mehr Höhe als am Desktop. Wenn dir das zu fehleranfällig ist, nimm den Embed-Code: Der passt die Höhe automatisch an.

Ist ein extern eingebettetes Formular datenschutzkonform?

Es kommt darauf an, wer die Daten verarbeitet und wo. Sobald ein externer Dienst Formulardaten für dich speichert, brauchst du mit ihm einen Auftragsverarbeitungsvertrag, und der Serverstandort gehört in deine Bewertung. Bei Formenio werden die Daten auf Servern in Deutschland verarbeitet. Nenne den Dienst außerdem in deiner Datenschutzerklärung. Das ist keine Rechtsberatung – prüfe deinen konkreten Fall.

Teilen:
Formenio – Kontaktformular für die eigene Website erstellen
Anleitung6 Min.

Kontaktformular erstellen: Schritt für Schritt

Kontaktformular erstellen in unter 15 Minuten: Felder festlegen, Pflichtfelder, Spam-Schutz, Benachrichtigung per E-Mail und Einbinden auf deiner Website.

Formenio Team
Formenio – Typeform-Alternative mit Servern in Deutschland
Anleitung7 Min.

Typeform-Alternative: wann sich der Wechsel lohnt

Typeform-Alternative gesucht? Entscheidungshilfe zu Kosten pro Antwort, Serverstandort, Logik und Embed – mit klaren Kriterien, wann sich der Wechsel lohnt.

Formenio Team