So fügen Sie HTML-Formulare in WordPress hinzu (2 Methoden)

Möchten Sie Ihr eigenes Formular-Markup schreiben, anstatt Felder in einem visuellen Builder zu verschieben?

Gute Nachrichten: Sie müssen kein PHP schreiben, damit dieses Formular funktioniert. Sie können ein leichtgewichtiges Plugin die Verarbeitung übernehmen lassen, während Sie jeden Tag selbst schreiben. Alternativ können Sie das Formular visuell erstellen und benutzerdefiniertes HTML genau dort einfügen, wo Sie es benötigen.

In dieser Anleitung zeigen wir Ihnen, wie Sie ein benutzerdefiniertes HTML-Formular erstellen, das in WordPress funktioniert.

Was sind HTML-Formulare und warum sollte man eines erstellen?

Ein HTML-Formular sammelt Besucherinformationen wie Namen, E-Mails und Feedback, genau wie jedes andere Formular im Web. Was es auszeichnet, ist, *wie* es erstellt wird. Anstatt sich auf einen schweren Drag-and-Drop-Visual-Editor zu verlassen, erstellen Sie ein HTML-Formular mit reinem Code. Das bedeutet, dass Sie die Felder (wie Textfelder, Kontrollkästchen und Dropdown-Menüs) selbst eingeben.

Leute, die HTML-Formulare anstelle eines Drag-and-Drop-Formular-Builders verwenden, tun dies normalerweise, um die Leistung ihrer Website zu maximieren. Reine HTML-Formulare sorgen dafür, dass Ihre Webseiten etwas schneller geladen werden. Über die Geschwindigkeit hinaus gibt Ihnen das Schreiben des Codes selbst die volle Designkontrolle. Anstatt durch die starren Einstellungen eines Builders eingeschränkt zu sein, können Sie das Layout genau an Ihre Bedürfnisse anpassen.

Die meisten WordPress-Benutzer stellen fest, dass Drag-and-Drop-Plugins für Formular-Builder die beste Benutzererfahrung bieten. Sie erhalten die volle HTML-Anpassung ohne den Aufwand einer manuellen Serverkonfiguration.

Hier ist alles, was wir in diesem Leitfaden behandeln werden:

Methode 1: Hinzufügen von HTML-Formularen in WordPress mit einem Plugin

🎖️ Am besten für: Entwickler und Site-Manager, die volle HTML-Kontrolle mit einer schlanken, leistungsorientierten Lösung wünschen. Das Plugin legt Wert auf Einfachheit und Geschwindigkeit gegenüber visuellen Formular-Buildern.

Sie können ein HTML-Formular mit einem kostenlosen Formular-Plugin wie HTML Forms zu WordPress hinzufügen. Dieses Plugin verwaltet das PHP und ein kleines bisschen JavaScript, das zum Ausführen eines HTML-Formulars in WordPress erforderlich ist, während Sie gleichzeitig die volle Freiheit haben, das HTML selbst zu schreiben.

Die kostenlose Version deckt alles ab, was in diesem Tutorial behandelt wird, einschließlich des Sendens von E-Mail-Benachrichtigungen und des Speicherns Ihrer Einreichungen. Spam-Schutz ist ebenfalls kostenlos.

Um zu beginnen, installieren Sie das Plugin auf Ihrer WordPress-Website. Wenn Sie Hilfe benötigen, folgen Sie unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung gehen Sie zu HTML Forms » Neu hinzufügen, um mit der Erstellung Ihres Formulars zu beginnen.

Geben Sie einen Namen für Ihr Formular in das Feld „Formulartitel“ ein. In dieser Anleitung erstellen wir ein einfaches Kontaktformular, daher haben wir unseres „Kontaktformular“ genannt.

Klicken Sie dann auf die Schaltfläche „Formular erstellen“.

Sobald Sie dies getan haben, erscheint die Seite „Formular bearbeiten“, und Sie können mit der Anpassung Ihres HTML-Formulars beginnen.

Oben auf der Seite sehen Sie die Details Ihres Formulars, einschließlich des Formulartitels, Slugs und Shortcodes. Unter diesen Details finden Sie fünf Registerkarten: „Felder“, „Nachrichten“, „Einstellungen“, „Aktionen“ und „Einreichungen“.

Die Registerkarte „Felder“ enthält zehn Schaltflächen, die Ihren Feldcode generieren.

Am unteren Rand dieser Registerkarte finden Sie ein vorgefertigtes HTML-Formular zusammen mit einer Vorschau.

Das Standardformular ist ziemlich einfach. Es hat 4 Felder, in die Benutzer ihren Namen, ihre E-Mail-Adresse, einen kurzen Betreff und eine Nachricht eingeben können.

Um ein neues Feld hinzuzufügen, klicken Sie auf die entsprechende Schaltfläche direkt über dem Feld „Formularcode“.

Wir werden das Feld „Betreff“ in diesem Tutorial durch ein Dropdown-Feld ersetzen.

Klicken Sie auf „Dropdown“, um dessen Einstellungen zu öffnen. Geben Sie dann Ihre Frage in das Feld „Feldbezeichnung“ ein und fügen Sie eine Option pro Anfrageart hinzu, z. B. „Allgemeine Frage“, „Vertrieb“ und „Support“.

Nachdem Sie diese Informationen eingegeben haben, klicken Sie auf „Feld zum Formular hinzufügen“.

Sie sehen dann den neuen Dropdown-Tag im Feld „Formularcode“. Scrollen Sie einfach nach unten, um Ihre aktualisierte Markierung zu überprüfen.

Um das Formular benutzerfreundlich zu gestalten, platzieren wir das Dropdown-Feld direkt unter dem Feld „Ihre E-Mail“. Da dieses Plugin keinen Drag-and-Drop-Builder hat, müssen Sie den Code aus dem Code-Builder ausschneiden und dort einfügen, wo Sie ihn platzieren möchten.

Um das Feld „Betreff“ zu entfernen, löschen Sie den gesamten Absatzblock, der das Feld „Betreff“ enthält.

Wenn Sie fertig sind, sollten Sie das Bedienfeld „Formularvorschau“ überprüfen.

Wenn Sie es nicht sehen können, klicken Sie auf den Link „Formularvorschau anzeigen“.

Diese Live-Vorschau ermöglicht es Ihnen zu bestätigen, dass Ihre Änderungen funktioniert haben, ohne das Layout zu beeinträchtigen.

Sie können schnell überprüfen, ob das Feld „Betreff“ verschwunden ist, und testen, ob Ihr neues Dropdown richtig funktioniert.

Klicken Sie als Nächstes auf die blaue Schaltfläche „Änderungen speichern“.

Nun möchten Sie vielleicht die Konfiguration des Formulars überprüfen. Klicken Sie auf die Registerkarte „Nachrichten“, um zu sehen, wie HTML Forms die Bestätigungsnachrichten für die Formularübermittlung konfiguriert.

Diese Registerkarte ermöglicht es Ihnen, die Bestätigungsnachrichten anzupassen, die Benutzer sehen werden.

Wenn Sie mit dem Standardtext zufrieden sind, können Sie ihn belassen. Andernfalls nehmen Sie Ihre Änderungen vor und klicken Sie dann auf „Änderungen speichern“.

Standardmäßig speichert ein neues Formular Ihre Einträge in der Datenbank, aber es wird Ihnen keine E-Mail gesendet, wenn jemand es übermittelt.

Um dies zu beheben, klicken Sie auf die Registerkarte „Aktionen“. Sie sehen eine Benachrichtigung mit der Aufschrift „Für dieses Formular sind keine Formularaktionen konfiguriert.“

Klicken Sie auf „E-Mail senden“.

Die Felder „Von“, „An“ und „Nachricht“ sind alle erforderlich. Sie können die Variablenfelder, die direkt unter dem Nachrichtenfeld aufgeführt sind, verwenden, um automatisch Informationen einzufügen, die der Besucher in Ihr Formular eingegeben hat.

Nachdem Sie diese ausgefüllt haben, klicken Sie auf „Änderungen speichern“. Sie erhalten nun jedes Mal eine E-Mail, wenn jemand Ihr Formular übermittelt.

Sobald alles konfiguriert ist, müssen Sie nur noch Ihr HTML-Formular veröffentlichen. Gehen Sie zu der Seite oder dem Beitrag, auf dem Sie das Formular einbetten möchten. Bewegen Sie dann den Mauszeiger über den Bereich, in dem Sie das Formular einfügen möchten, und klicken Sie auf das „+“-Symbol.

Geben Sie von hier aus „HTML Forms“ in die Suchleiste ein. Wenn der richtige Block erscheint, klicken Sie darauf, um ihn zu Ihrer Seite oder Ihrem Beitrag hinzuzufügen.

Klicken Sie innerhalb des HTML Forms-Blocks auf das Dropdown-Menü und wählen Sie das Formular aus, das Sie anzeigen möchten.

Nachdem Sie das Formular aus dem Dropdown-Menü ausgewählt haben, klicken Sie auf die Schaltfläche „Aktualisieren“.

Ihr Kontaktformular ist jetzt live. So wird es für Ihre Besucher aussehen:

Bevor Sie das Formular irgendwo bewerben, empfehlen wir, es selbst zu testen, indem Sie einen Beispiel-Eintrag übermitteln. So bestätigen Sie, dass das Formular nicht nur angezeigt wird, sondern auch tatsächlich liefert.

Nachdem Sie einen Test-Eintrag übermittelt haben, gehen Sie zu HTML Forms » Alle Formulare. Klicken Sie hier auf den Link „Übermittlungen“ Ihres Formulars.

Dies zeigt alle Ihre Formularübermittlungen an. Ihr Test-Eintrag wird in der Tabelle angezeigt, und Sie sollten auch eine Benachrichtigung in Ihrem Posteingang erhalten.

Die Tabelle „Übermittlungen“ öffnet sich mit einer Spalte „Zeitstempel“, die angibt, wann das Formular gesendet wurde, gefolgt von einer Spalte für jedes Feld.

Methode 2: Hinzufügen von benutzerdefiniertem HTML zu Formularen mit Drag & Drop

🎖️ Am besten für: Jeder, der ein Formular visuell erstellen möchte, aber dennoch spezifisches HTML darin einfügen muss, wie z. B. einen Tooltip, einen Link oder eine formatierte Notiz.

Wenn es um die Erstellung von Formularen geht, empfehlen wir WPForms. Es bietet Ihnen einen Drag-and-Drop-Builder, mit dem Sie trotzdem Ihr eigenes Markup einfügen können, sodass ein Link, eine formatierte Notiz oder ein Tooltip genau dort landet, wo Sie ihn haben möchten.

Wir verwenden WPForms auf unseren eigenen Websites für Kontaktformulare, Lead-Generierung, Jahresumfragen und mehr.

WPForms Lite ist komplett kostenlos, aber das HTML-Feld, das in dieser Methode verwendet wird, ist eine kostenpflichtige Funktion. Es ist im Basic-Plan (39,60 $/Jahr) und höher verfügbar.

In dieser Methode zeigen wir Ihnen, wie Sie HTML-Code-Snippets hinzufügen, um Ihre WordPress-Formulare mit WPForms anzupassen.

Installieren und aktivieren Sie zunächst WPForms.

Sobald Sie fertig sind, können Sie mit der Erstellung von Formularen und dem Hinzufügen von benutzerdefiniertem HTML beginnen. In dieser Anleitung zeigen wir Ihnen, wie Sie Ihrem Kontaktformular einen einfachen Tooltip hinzufügen.

Um zu beginnen, erstellen wir das Kontaktformular, indem wir zu WPForms » Neu hinzufügen gehen.

Geben Sie im Einrichtungsbereich zunächst Ihrem Formular einen Namen.

Dieser Name dient nur zur internen Referenz, sodass Sie alles verwenden können, was Sie möchten.

Der nächste Schritt ist die Entscheidung, wie Sie Ihr Formular erstellen möchten. Mit WPForms können Sie mit einer vorgefertigten Vorlage beginnen, von Grund auf neu erstellen oder beschreiben, was Sie benötigen, und den KI-Formularersteller es für Sie zusammenstellen lassen.

Wenn Sie den KI-gestützten Builder verwenden möchten, geben Sie einfach eine einfache Eingabeaufforderung ein. Die KI erstellt dann das Formular in wenigen Sekunden für Sie.

Für dieses Tutorial verwenden wir eine vorgefertigte Vorlage.

Da es über 2.100 Formularvorlagen zur Auswahl gibt, können Sie die Suchleiste verwenden, um sie schnell zu filtern. Geben Sie dazu einfach „Kontaktformular“ ein und warten Sie, bis die Suche abgeschlossen ist.

Um eine Vorlage genauer anzusehen, können Sie die integrierte Vorschaufunktion verwenden. Bewegen Sie einfach den Mauszeiger über eine beliebige Formularvorlage und klicken Sie auf „Demo anzeigen“.

Sobald Sie das perfekte Kontaktformular für Ihre Bedürfnisse gefunden haben, fahren Sie erneut mit der Maus darüber und klicken Sie auf „Vorlage verwenden“.

Dadurch wird der Formularersteller gestartet. Sie sehen alle Anpassungswerkzeuge im linken Bereich und eine Live-Vorschau auf der rechten Seite.

Sie können Elemente aus dem linken Bereich ziehen und in der Live-Vorschau ablegen. Sie können Elemente in der Vorschau auch per Drag & Drop neu anordnen.

Scrollen Sie im linken Bereich nach unten zur Gruppe „Fancy Fields“ und ziehen Sie dann das HTML-Feld direkt in Ihr Formular.

Nachdem Sie das HTML-Feld hinzugefügt haben, klicken Sie darauf, um seine Anpassungsoptionen zu öffnen.

Geben Sie zunächst eine „Beschriftung“ ein, um dieses Feld zu identifizieren. Dies dient nur Ihrer Referenz und wird den Besuchern nicht angezeigt, sodass Sie alles verwenden können, was Sie möchten. Sie können das Feld auch leer lassen.

Dann fügen Sie den benutzerdefinierten HTML-Code in das Feld „Code“ ein.

Um einen Tooltip zu erstellen, können Sie das <span> -Tag verwenden oder einfach den folgenden Code kopieren und in das Feld „Code“ einfügen:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Dies ist nur Beispielcode, also bearbeiten Sie ihn gerne nach Ihren Bedürfnissen. Der Teil title="" des Codes ist genau das, was den Webbrowser anweist, den Hover-Pop-up-Effekt zu erzeugen, sodass Sie den Tooltip erhalten, ohne CSS zu Ihrer Website hinzuzufügen.

Beachten Sie, dass WPForms den HTML-Code nicht in der Vorschau des Formularerstellers anzeigt. Um den Tooltip zu testen, klicken Sie auf „Vorschau“.

Dadurch wird ein neuer Tab geöffnet.

Hier können Sie testen, ob der HTML-Code-Schnipsel für Ihren Tooltip ordnungsgemäß funktioniert, indem Sie mit der Maus über den Text fahren. Nach einigen Momenten sollte der Tooltip erscheinen.

Wenn Sie mit den Ergebnissen zufrieden sind, können Sie zum Formular-Generator zurückkehren, um Ihr Formular zu finalisieren.

WPForms konfiguriert Ihre Benachrichtigungs- und Bestätigungseinstellungen automatisch für Sie. Wenn Sie diese jedoch anpassen möchten, wählen Sie „Einstellungen“ und dann entweder „Benachrichtigungen“ oder „Bestätigungen“.

Im Abschnitt „Benachrichtigungen“ können Sie mehrere Empfänger für Ihre Kontaktformularübermittlung hinzufügen.

Um mehrere Empfänger hinzuzufügen, trennen Sie E-Mail-Adressen durch Kommas, z. B. email1@example.com, email2@example.com, email3@example.com.

Sobald Sie Ihre Benachrichtigungen und andere Einstellungen angepasst haben, ist es an der Zeit, das WordPress-Formular zu veröffentlichen und einzubetten.

Klicken Sie auf die Schaltfläche „Einbetten“ in der oberen rechten Ecke des Formular-Generators.

WPForms fragt Sie dann, ob Sie das Formular zu einer vorhandenen oder einer neuen Seite hinzufügen möchten.

In dieser Anleitung wählen wir „Vorhandene Seite auswählen“.

Wählen Sie im nächsten Pop-up-Fenster eine Seite aus der Liste der verfügbaren Seiten aus. Danach können Sie auf „Los geht’s!“ klicken, um den Block-Editor zu öffnen.

Hovern Sie nun über den Bereich, in dem Sie das Formular hinzufügen möchten, und klicken Sie auf die Schaltfläche „+“. Wählen Sie dann den WPForms-Block aus.

Sie können nun das Formular auswählen, das Sie anzeigen möchten, über das Dropdown-Menü.

Nachdem Sie Ihr Formular ausgewählt haben, lädt WPForms es im Block-Editor.

Wenn Sie mit der Einrichtung zufrieden sind, klicken Sie auf die Schaltfläche „Aktualisieren“.

Und fertig! Sie haben benutzerdefiniertes HTML zu Ihrem WPForms-Kontaktformular hinzugefügt und es auf Ihrer WordPress-Website live geschaltet.

Bevor Sie echte Besucher an das Formular senden, empfehlen wir, einen schnellen Testeintrag zu übermitteln, um sicherzustellen, dass alles funktioniert.

Nachdem Sie einen Test übermittelt haben, gehen Sie zu WPForms » Alle Formulare. Hovern Sie hier über Ihr Kontaktformular und klicken Sie auf „Einträge“, wenn es erscheint.

Auf dem nächsten Bildschirm sehen Sie alle Ihre Formularübermittlungen.

Die Tabelle zeigt jede Information an, die Benutzer übermittelt haben, zusammen mit der genauen Übermittlungszeit.

FAQs: Wie fügt man HTML-Formulare in WordPress hinzu

Warum funktioniert mein HTML-Formular auf WordPress nicht?

Höchstwahrscheinlich zeigt WordPress Ihr Formular an, verarbeitet es aber nicht. Das einfache Einfügen eines HTML-Formulars auf einer Seite reicht nicht aus, damit es funktioniert.

Während das Formular korrekt angezeigt werden mag, verarbeitet WordPress Formularübermittlungen nicht automatisch. Im Gegensatz zu einer einfachen HTML-Website gibt es kein integriertes Skript, das die Daten verarbeitet, wenn jemand auf „Senden“ klickt.

Um das Formular funktionsfähig zu machen, müssen Sie benutzerdefinierten PHP-Code hinzufügen, um Übermittlungen zu verarbeiten, oder ein Plugin verwenden, das dies für Sie übernimmt.

Kann ich meine Formulare noch anpassen, wenn ich HTML verwende?

Ja, absolut. Die Verwendung von HTML gibt Ihnen die volle Kontrolle darüber, wie Ihr Formular aussieht und funktioniert. Beachten Sie jedoch, dass Sie auch für alles andere verantwortlich sind, wie zum Beispiel:

• Styling des Formulars mit eigenem CSS
• Hinzufügen von Validierung, Fehlermeldungen oder bedingter Logik mit benutzerdefiniertem Code
• Sicherstellen, dass das Formular auf verschiedenen Geräten und Browsern ordnungsgemäß funktioniert

Ja, Sie haben also volle Flexibilität, aber auch volle Verantwortung.

Zusätzliche Ressourcen: Weitere WordPress-Formularanleitungen

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie HTML-Formulare in WordPress hinzufügen. Als Nächstes möchten Sie vielleicht unsere Anleitungen zu folgenden Themen lesen:

• So exportieren Sie WordPress-Formulareinträge als CSV und Excel
• So passen Sie Ihre WordPress-Formulare an und gestalten sie
• Die besten WordPress Kontaktformular-Plugins

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.