So fügen Sie in WordPress ein Formular hinzu: Vollständiger Leitfaden

Früher oder später wachsen die meisten WordPress-Websites über die Grundlagen hinaus. Sie müssen Buchungen vornehmen, Projektbriefs sammeln, Menschen für eine Veranstaltung anmelden lassen, Feedback nach einem Kauf einholen oder Bestellwünsche mit individuellen Spezifikationen akzeptieren. Jeder dieser Anwendungsfälle erfordert eine andere Art von Formular – unterschiedliche Felder, unterschiedliche Logik, unterschiedliches Layout – und WordPress liefert keinen integrierten Formular-Builder, der das alles abdeckt.

Diese Anleitung zeigt Ihnen, wie Sie in WordPress mithilfe des Elfsight Form Builder – einem No-Code-Visuellen Editor, der auf jeder WordPress-Installation funktioniert, ohne Plugin-Installation. Wir decken den gesamten Prozess von der Auswahl des Formulartyps bis zur Einbettung auf einer Live-Seite ab, zusammen mit alternativen Methoden und wann welche Methode sinnvoller ist.

5-Minuten-Setup: Formular in WordPress hinzufügen

Wenn Sie schon wissen, was Sie brauchen und es einfach live schalten möchten, hier ist der Schnellweg, Formulare zu WordPress in nur wenigen Schritten hinzuzufügen:

1. Öffnen Sie den Form Builder-Editor und wählen Sie eine Vorlage
2. Formular-Widget konfigurieren und anpassen
3. Klicken Sie auf „Zur Website hinzufügen“ und kopieren Sie den Einbettungscode
4. Fügen Sie das Snippet in Ihr WordPress-Backend ein → Veröffentlichen

🚀 Erstellen Sie Ihr eigenes WordPress-Formular sofort im interaktiven Editor!

Wann (und warum) Formulare zu Ihrer WordPress-Website hinzufügen

Du brauchst uns wahrscheinlich nicht zu erklären, wieso Formulare nützlich sind – du bist hier, weil du bereits eins brauchst. Doch der Typ des Formulars, das du erstellst, und der Ort seiner Platzierung sind genauso wichtig wie die Schritt-für-Schritt-Anleitung. Hier sind die gängigsten Situationen und worauf du in jedem Fall achten solltest.

💬 Kontakt und Lead-Erfassung

Der häufigste Einstiegspunkt – ein Kontaktformular, ein Newsletter-Anmeldeformular oder ein Lead-Generierungsformular auf einer Landing Page. Das eine, was die meisten Menschen übersehen: Das Hinzufügen eines einzigen strukturierten Felds wie eines Dropdowns „Worum geht es hier?“ spart Stunden beim Sortieren des Posteingangs. Für Lead-Erfassung ohne dedizierte Seite funktionieren Popup- und Floating-Panel-Formulare gut – sie lösen sich durch einen Button-Klick aus oder sitzen am Bildschirmrand, ohne wertvollen Platz auf der Seite zu beanspruchen.

📅 Buchungen, Reservierungen und Termine

Restaurants, Friseursalons, Vermietungen, Berater — wenn Ihr Geschäft auf festen Terminen basiert, ersetzt ein Buchungsformular das ständige Hin- und Hertelefonieren. Sammeln Sie das Wesentliche (Datum, Uhrzeit, Art der Dienstleistung, Kontaktinformationen) und widerstehen Sie dem Drang, Felder hinzuzufügen, die Ihren internen Abläufen dienen, aber den Besucher nerven.

💲 Bestellungen und Spenden

Bestellformulare decken Szenarien ab, in denen der Kauf kein einfaches Hinzufügen zum Warenkorb ist – individuelle Druck-, Catering-, Großhandels- oder Servicepakete mit konfigurierbaren Optionen. Kombinieren Sie sie mit Dateiupload-Feldern, wenn Kunden Logos oder Design-Briefe anhängen müssen. Spendenformulare sind strukturell einfach, aber bedingte Felder helfen hier auch – zeigen Sie Wiederholungsoptionen nur, wenn der Spender zustimmt.

📋 Feedback, Bewertungen und Umfragen

Rating-Felder (Sterne, Zahlen-Skalen, Smiley-Gesichter) plus eine optionale Kommentarbox. Halte diese kurz — ein Feedback-Formular mit drei Feldern erzielt deutlich mehr Antworten als eines mit zehn Feldern. Wenn du strukturierte Testimonials möchtest, die sich auf deiner Website verwenden lassen, füge Namen, Rolle und eine Sternbewertung neben dem Kommentar hinzu, damit du veröffentlichbare Zitate erhältst, keine vagen Einzeiler.

📑 Registrierungen, Mitgliedschaften und Bewerbungen

Veranstaltungsanmeldungen, Mitgliedschaftsformulare, Bewerbungen, Zulassungen für Programme – diese Formulare sind in der Regel länger, und genau hier zahlen sich mehrstufige Layouts aus. Ein 12-Felder-Formular in drei Schritte mit einem Fortschrittsbalken zu unterteilen, reduziert Abbruchraten deutlich. Bewerbungsformulare profitieren insbesondere von bedingter Logik (zeigen Sie je nach Rolle oder Programm unterschiedliche Fragen) und von Feldern zum Hochladen von Lebensläufen oder Portfolios.

Die Komplexität sollte der Entscheidung entsprechen: Ein Newsletter-Anmeldeformular hat ein Feld, ein Kontaktformular drei Felder, und ein Förderantrag könnte sich über vier Schritte mit insgesamt fünfzehn Feldern erstrecken. Konfigurieren Sie entsprechend.

Jetzt erstellen wir das eigentliche Formular.

Schritt-für-Schritt: So fügen Sie ein Formular in WordPress hinzu

Dieses Tutorial verwendet den Elfsight Form Builder, der vollständig in Ihrem Browser läuft – nichts auf WordPress zu installieren. Sie konfigurieren alles im visuellen Editor, erhalten einen Einbettungscode und fügen ihn auf Ihrer Seite ein.

Schritt 1: Wähle einen Startpunkt

Öffnen Sie den Editor, dort sehen Sie über 300 Vorlagenoptionen für verschiedene Anwendungsfälle, gruppiert nach Kategorien. Die von Ihnen gewählte Vorlage ist kein Festlegungsvertrag – sie füllt den Editor lediglich mit einem relevanten Feldsatz vor. Sie können danach Felder hinzufügen, entfernen oder neu ordnen – wählen Sie also das aus, was Ihren Anforderungen am nächsten kommt, und passen Sie es anschließend an.

Schritt 2: Feldsatz erstellen

Hier nimmt das Formular Gestalt an. Der Editor unterstützt 15+ Feldtypen: Texteingaben, Kontaktinformationen, Dropdowns, Kontrollkästchen, Optionsfelder, Datumsauswahlen, Dateiuploads, Bewertungsskalen und mehr. Für jedes Feld legen Sie das Label, den Platzhaltertext, die Beschreibung fest und geben an, ob es erforderlich oder optional ist.

Einige wichtige Entscheidungen hier:

Pflichtfelder vs. optionale Felder. Markieren Sie nur das, was Sie wirklich benötigen. Jedes Pflichtfeld erhöht die Hürde. Wenn Sie ein Kontaktformular erstellen, sind Name und E-Mail Pflicht – eine Nachricht könnte es auch sein. Telefonnummer? Machen Sie sie optional, es sei denn, Sie planen tatsächlich, Leute anzurufen.

Bedingte Logik. Wenn Ihr Formular mehrere Zwecke erfüllt, können Sie je nach Auswahl des Besuchers verschiedene Folgefelder anzeigen. Zum Beispiel könnte das Terminformular eines Fotostudios „Event-Typ“ und „Gästeanzahl“ nur dann anzeigen, wenn der Besucher aus dem Dropdown-Menü für Dienstleistungen „Eventfotografie“ auswählt, während bei Anfragen zu Produktaufnahmen „Produktbeschreibung“ angezeigt wird. Aktivieren Sie dies pro Feld in den Editor-Einstellungen.

Dateiuploads. Praktisch für Design-Briefs, Lebensläufe, Referenzbilder oder jede Situation, in der Besucher Dokumente anhängen müssen. Beachten Sie, dass das Erfordernis von Dateiuploads im ersten Kontaktformular Reibung verursacht — ziehen Sie in Erwägung, es optional zu machen, mit einem Hinweis wie “Dateien bei Bedarf anhängen.”

Schritt 3: Mehrstufige Navigation hinzufügen (Falls Ihr Formular lang ist)

Wenn dein Formular mehr als fünf oder sechs Felder hat, teile es in Schritte auf. Wechsle zum Layout tab, falls du noch kein mehrstufiges Template gewählt hast, kehre dann zum Build Form zurück, um jede Seite separat auszufüllen. Jede Seite wird zu einem eigenen Schritt mit Weiter- und Zurück-Buttons und einer visuellen Fortschrittsanzeige, die den Abschlussstatus anzeigt.

Wenn du keine Mehrstufigkeit benötigst: Einfache Kontaktformulare (3–4 Felder), Newsletter-Anmeldungen und kurze Feedback-Formulare funktionieren besser als Ein-Schritt-Formulare. Das Hinzufügen weiterer Schritte zu einem kurzen Formular erzeugt unnötige Klicks.

Schritt 4: E-Mail-Benachrichtigungen einrichten

Navigieren Sie zur E-Mail-Registerkarte, um zu steuern, was nach dem Absenden passiert. Hier legen Sie die Empfänger-E-Mail fest (oder mehrere Adressen – sinnvoll, wenn Vertrieb und Support bestimmte Einsendungen sehen sollen), Betreffzeile und welche Formularwerte in die Benachrichtigungs-E-Mail aufgenommen werden.

Zwei Dinge, die hier sinnvollerweise konfiguriert werden sollten – doch viele übersehen sie:

Automatische Antwort an den Besucher. Aktivieren Sie dies. Eine einfache Bestätigung wie „Danke, wir haben Ihre Nachricht erhalten und melden uns innerhalb von 24 Stunden“ schafft Vertrauen und reduziert die Unsicherheit, ob das Formular durchgegangen ist. Sie bietet außerdem einen natürlichen Ort, um Erwartungen an die Reaktionszeit festzulegen.

Individuelle Betreffzeilen mit Feldwerten. Statt einer generischen “Neue Formulareinsendung” im Betreff den Namen des Besuchers oder die Art der Anfrage verwenden: „Neue Anfrage von {Name} — {Service Type}.“ Wenn Sie 20 Einsendungen pro Tag erhalten, lässt sich Ihr Posteingang leichter durchsuchen, ohne jede E-Mail öffnen zu müssen.

Schritt 5: Layout auswählen und Design anpassen

Unter Layout sehen Sie zwei Einbettungsoptionen, die direkt beeinflussen, wie Ihr Formular auf Ihrer Website erscheint:

• Standard (Inline) — Wird direkt im Seiteninhalt gerendert, an der Stelle, an der Sie den Embed-Code einfügen. Am besten geeignet für dedizierte Formularseiten oder Abschnitte innerhalb einer Landing Page.
• Schwebendes Fenster — Ein feststehendes Formular, das von der Seite des Bildschirms hereinschiebt. Ideal für Formulare wie „Rückruf anfordern“ oder „Angebot anfordern“, die von jeder Scrollposition erreichbar sein sollten, ohne Seitenfläche zu beanspruchen.

Für die Inline-Option können Sie aus drei Feldanordnungen wählen: vertikal, horizontal und mehrstufig (je nach Navigation).

Sobald Sie die Position festgelegt haben, wechseln Sie zu Aussehen, um Farben, Schriftarten, Feldabstände, Button-Stile und Eckradius an das WordPress-Theme anzupassen. Falls Ihre Markenrichtlinien spezielle Gestaltungswünsche jenseits der integrierten Optionen verlangen, verwenden Sie das Feld Custom CSS.

Schritt 6: Festlegen, was nach dem Absenden passiert

Über E-Mail-Benachrichtigungen hinaus, legen Sie fest, was Besucher sehen, nachdem sie auf Senden geklickt haben. Zwei Optionen:

• Inline-Dankesnachricht — Eine Bestätigung erscheint direkt im Formular. Einfach und kompakt. Funktioniert für Sidebar- oder Footer-Formulare, bei denen eine Weiterleitung zu einer neuen Seite störend wäre.
• Zu einer URL weiterleiten — Leitet Besucher nach dem Absenden auf eine dedizierte Danke-Seite weiter.

Schritt 7: Integrationen verbinden (Optional)

Wenn deine Formulareinsendungen in andere Tools fließen sollen, öffne den Integrationen-Tab. Der Form Builder unterstützt direkte Verbindungen zu:

• Google Sheets — Automatisch jede Einsendung in eine Tabelle übertragen. Nützlich, wenn Ihr Team Leads, Bestellungen oder Registrierungen bereits in Sheets verfolgt und CSV-Exporte manuell vermeiden möchte.
• Mailchimp — Leite E-Mail-Anmeldungen und Newsletter-Abonnements direkt in Ihre Mailchimp-Zielgruppe weiter, mit Feldzuordnung für Segmente und Tags.
• Zapier / Make.com — Connect to 5,000+ apps. Send submissions to your CRM, create Trello cards from project intake forms, trigger Slack notifications for new bookings — whatever your workflow needs.
• Webhooks — Für benutzerdefinierte Setups: Senden Sie Rohdaten des Formulars an jeden Endpunkt, den Sie kontrollieren.

Sie können diesen Schritt vollständig überspringen, falls E-Mail-Benachrichtigungen ausreichen, und später Integrationen einrichten, ohne das Formular erneut einzubetten.

Schritt 8: Das Formular auf deiner WordPress-Seite einbetten

„Auf der Website hinzufügen“ oder klicken Sie, um den Installationscode zu erzeugen.

So fügen Sie ein Formular in WordPress ein:

1. Melden Sie sich im WordPress-Backend an und gehen Sie zu Seiten, dann öffnen Sie die Zielseite zum Bearbeiten.
2. Im Block-Editor klicken Sie auf das +-Symbol, um einen neuen Block hinzuzufügen.
3. Suchen Sie nach und wählen Sie Eigenes HTML.
4. Fügen Sie den vollständigen Elfsight-Installationscode in den Block ein.
5. Klicken Sie auf Veröffentlichen oder Aktualisieren.

Ihr Formular erscheint sofort auf der Live-Seite.

Um Ihr Formular seitenweit (z. B. in der Seitenleiste oder Fußzeile) hinzuzufügen, gehen Sie zu Aussehen → Widgets, fügen Sie an der gewünschten Stelle ein Benutzerdefiniertes HTML-Widget hinzu, den Installationscode ein und speichern Sie.

Für WordPress-Websites, die Elementor verwenden, ziehen Sie das HTML-Element (nicht “Custom HTML”) auf die Seite und fügen Sie den Code ein. Detaillierte plattformbezogene Anleitungen finden Sie in unserem Hilfecenter-Anleitung.

Weitere Möglichkeiten, Formulare in WordPress hinzuzufügen.

Elfsight ist nicht der einzige Weg, ein Formular in WordPress einzubetten, und je nach Situation könnte eine andere Lösung besser passen. Hier ist eine ehrliche Einschätzung.

WPForms oder Contact Form 7 (WordPress-Plugins)

Der gängigste Ansatz: WPForms bietet im WordPress-Dashboard einen Drag-and-Drop-Builder; Contact Form 7 ist eine schlanke, code-orientierte Alternative, die es seit 2007 gibt.

1. Gehen Sie im WordPress-Dashboard zu Plugins → Neu hinzufügen.
2. Suchen Sie nach „WPForms“ (oder „Contact Form 7“) und installieren/aktivieren.
3. Erstellen Sie ein neues Formular mit dem integrierten Editor des Plugins.
4. Bette das Formular auf einer Seite ein – verwende dazu den Shortcode oder Block des Plugins.

Wann ist das die bessere Wahl: Wenn Sie alles innerhalb von WordPress verwalten möchten und mit der Wartung von Plugins vertraut sind, ist WPForms ein solides Tool mit bedingter Logik, mehrstufigen Formularen und Zahlungsintegrationen. Contact Form 7 lässt sich kaum schlagen, wenn Sie Entwickler sind, die eine minimale, kostenlose Lösung suchen und kein Problem damit haben, CSS zu schreiben.

Manuelles HTML-Formular

Für Entwickler, die gern mit Code arbeiten: Erstellen Sie ein Formular aus reinem HTML und verarbeiten Sie die Einsendungen über ein eigenes PHP-Skript oder einen Drittanbieter-Endpunkt wie Formspree.

1. Fügen Sie im Block-Editor Ihrer Seite einen benutzerdefinierten HTML-Block hinzu.
2. Schreiben Sie das HTML-<form>-Markup mit den von Ihnen gewünschten Feldern.
3. Setzen Sie das Attribut action auf Ihre PHP-Handler-Datei oder einen externen Dienst.
4. Stilen Sie das Styling mit CSS im Theme-Customizer oder im Stylesheet Ihres Child-Themes.

Wenn dies die bessere Wahl ist: Wenn du volle Kontrolle über Markup und Verhalten brauchst, oder wenn dein Formular mit einem benutzerdefinierten Backend verbunden ist. Auch nützlich für sehr einfache Formulare (ein oder zwei Felder), bei denen ein vollständiges Widget oder Plugin überflüssig ist.

Google-Formulare (Iframe-Einbettung)

Kostenlos, schnell und erfordert keinerlei technische Kenntnisse. Erstellen Sie ein Formular auf <a href=”https://forms.google.com”>forms.google.com</a>, holen Sie sich den Einbettungscode und fügen Sie ihn in einen benutzerdefinierten HTML-Block ein.

Wann ist das die bessere Wahl: Interne Umfragen, kurze Abstimmungen oder jede Situation, in der dir die visuelle Integration mit deiner Website egal ist. Google Forms ist außerdem die einfachste Option, wenn du bereits mit Google Workspace arbeitest und Antworten automatisch in Google Sheets übertragen werden sollen.

Tools vergleichen

<strong>Die Kurzversion</strong>: Wenn Sie fortgeschrittene Formularfunktionen ohne Plugin-Overhead oder Coding wünschen, deckt Elfsight das ab. Wenn Sie alles im WordPress-Ökosystem haben möchten und bereit sind, für Pro-Funktionen zu zahlen, ist WPForms stark. Wenn Ihr Formular einfach und intern ist, reichen Google-Formulare oder ein manuelles HTML-Formular möglicherweise aus.

Optimierungstipps für Ihr WordPress-Formular

Ihr Formular ist live — stellen Sie sicher, dass es wirklich funktioniert. Die meisten Formularabbrüche lassen sich auf wenige behebare Fehler zurückführen.

Häufig gestellte Fragen

Abschließende Gedanken

Sie haben jetzt alles, was Sie brauchen, um ein Formular zu Ihrer WordPress-Website hinzuzufügen — von der Vier-Schritte-Einbettung bis hin zu einer vollständigen Anleitung zur Feldkonfiguration, mehrstufigen Layouts, Benachrichtigungen und Design. Noch wichtiger: Sie wissen welche Entscheidungen in jedem Schritt wichtig sind und wie Sie sie für Ihren konkreten Anwendungsfall konfigurieren, ob es sich um ein einfaches Kontaktformular oder eine mehrstufige Projekterfassung handelt.

Wenn Sie bereit sind zu starten, öffnen Sie den Elfsight Form Builder und testen Sie ihn kostenlos. Wählen Sie eine Vorlage, konfigurieren Sie Ihre Felder und erstellen Sie in wenigen Minuten ein funktionsfähiges Formular auf Ihrer WordPress-Seite.

Artikel von

Kseniia Burmagina

Content-Manager

Ich bin Content-Manager bei Elfsight und erstelle praxisnahe Leitfäden zu cleveren Website-Lösungen, damit Nutzer ihre Online-Projekte verbessern können. Meine Artikel sind darauf ausgelegt, einfach zu erklären, wie Widgets Webseiten verbessern und sie effektiver machen.

Auf LinkedIn folgen