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

Sie haben ein HTML-Formular einsatzbereit, aber das Hinzufügen zu WordPress kann knifflig sein und erfordert viel Tests.

Der Grund ist einfach: Das Hinzufügen von HTML-Formularen zu WordPress erfordert den richtigen Ansatz, um sicherzustellen, dass sie ordnungsgemäß funktionieren und nahtlos in Ihre Website integriert werden.

WordPress verarbeitet Formulare nicht auf die gleiche Weise wie eine normale HTML-Website. Wenn Sie den Formularcode einfach kopieren und einfügen, funktioniert er oft nicht richtig, ohne ein paar zusätzliche Schritte.

Auf unseren eigenen Websites verwenden wir das WPForms-Plugin, da es die gesamte Einrichtung für uns übernimmt. Dennoch wissen wir, dass viele Benutzer benutzerdefinierte HTML-Formulare bevorzugen, um die Dinge schlank zu halten, die volle Kontrolle über ihren Code zu behalten oder die Hinzufügung eines weiteren Plugins zu vermeiden.

In diesem Leitfaden zeigen wir Ihnen 2 einfache Möglichkeiten, HTML-Formulare in WordPress hinzuzufügen, damit Ihr Formular korrekt angezeigt wird, wie erwartet funktioniert und Ihre Website nicht beschädigt. 💡

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

HTML-Formulare funktionieren ähnlich wie andere Website-Formulare. Sie ermöglichen es Besuchern, Informationen wie Namen, E-Mail-Adressen, Feedback, Bestellungen und mehr einzugeben und zu übermitteln.

Was sie unterscheidet, ist, dass HTML-Formulare mit Code anstelle eines Drag-and-Drop-visuellen Editors wie einem Formular-Plugin erstellt werden. Das bedeutet, dass Sie Felder wie Textfelder, Kontrollkästchen, Optionsfelder und Dropdown-Felder selbst definieren müssen.

Hier sind einige Vorteile der Erstellung von Formularen von Grund auf mit HTML:

• Optimierte Leistung. HTML-Formulare laden tendenziell schneller und verbrauchen weniger Speicher, da der Code schlank ist.
• Kontrolle. Sie haben die vollständige Kontrolle über das Design und die Funktionalität des Formulars, da Sie nicht durch die Funktionen eines Formular-Builders eingeschränkt sind.
• Anpassung. HTML-Formulare können genau an Ihre Bedürfnisse angepasst werden und bieten eine flexiblere Formularanpassung.

Während die Erstellung von HTML-Formularen von Grund auf eine großartige Möglichkeit ist, Programmieren zu lernen und zu üben, hat sie ihre eigenen Herausforderungen.

Möglicherweise haben Sie Probleme mit der browserübergreifenden Kompatibilität, bei der das Formular in verschiedenen Webbrowsern unterschiedlich funktioniert.

Außerdem kann die Handhabung der Formularvalidierung mit JavaScript nach unserer Erfahrung knifflig sein. Sie erfordert gründliche Tests, um sicherzustellen, dass Sie alle Benutzereingaben korrekt erfassen und verarbeiten können.

Zusammenfassend lässt sich sagen, dass hier die wichtigsten Vorteile und Herausforderungen der manuellen Codierung von HTML-Formularen aufgeführt sind:

✅ Vorteile	🛑 Herausforderungen
Schnellere Ladezeiten der Seite mit schlankem Code	Sicherstellung der Kompatibilität über verschiedene Browser hinweg
Vollständige Kontrolle über Design und Funktionalität	Erstellung von Formularvalidierung und Fehlerbehandlung
Präzise Anpassung für spezifische Anforderungen	Manuelle Einrichtung von Spam-Schutz
Bessere Möglichkeiten zur Leistungsoptimierung	Handhabung der serverseitigen Konfiguration und Verarbeitung

Die meisten WordPress-Benutzer stellen fest, dass Plugins den besten Kompromiss bieten. Es gibt Ihnen HTML-Anpassungsoptionen, ohne die Komplexität der manuellen Serverkonfiguration.

Dennoch gibt es Möglichkeiten, HTML-Formulare ohne diese Komplexität hinzuzufügen. Egal, ob Sie einen WordPress-Blog, eine Geschäftswebsite oder einen Online-Shop verwalten, Sie können HTML-Formulare problemlos zu Ihrer Website hinzufügen, ohne von Grund auf neu codieren zu müssen.

In den folgenden Abschnitten zeigen wir Ihnen, wie Sie HTML-Formulare zu WordPress hinzufügen. Hier ist ein kurzer Überblick über die 2 Methoden, die wir in dieser Anleitung behandeln werden:

• Methode 1: Hinzufügen von HTML-Formularen in WordPress mit dem HTML Forms Plugin (Einfach)
• Methode 2: Benutzerdefiniertes HTML zu WordPress-Formularen mit WPForms hinzufügen
• Bonustipp: Hochladen einer benutzerdefinierten HTML-Seite nach WordPress
• FAQs: Wie fügt man HTML-Formulare in WordPress hinzu
• Zusätzliche Ressourcen: Weitere WordPress-Formularanleitungen

Bereit? Legen wir los.

Methode 1: Hinzufügen von HTML-Formularen in WordPress mit dem HTML Forms Plugin (Einfach)

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

Da WordPress standardmäßig keine rohen HTML-Formularübermittlungen verarbeitet, ist eine einfache Möglichkeit, ein HTML-Formular zu einer WordPress-Website hinzuzufügen, die Verwendung eines kostenlosen Formular-Plugins wie HTML Forms. Dies bietet den notwendigen Backend-Code, um die Daten zu sammeln und Ihnen per E-Mail zuzusenden, während Sie den HTML-Code selbst schreiben können.

Mit über 10.000 aktiven Installationen und einer Bewertung von 4,9 von 5 Sternen auf WordPress.org ist es ein vertrauenswürdiges Werkzeug zur Erstellung und Konfiguration von HTML-Formularen an einem Ort, sodass Sie sich nicht mit serverseitigen Konfigurationen befassen müssen.

Um loszulegen, stellen Sie sicher, dass Sie das Plugin auf Ihrer WordPress-Website installiert haben.

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins » Neues Plugin hinzufügen in der linken Seitenleiste und verwenden Sie das Suchfeld, um das Plugin zu finden.

Wenn Sie es in den Suchergebnissen sehen, klicken Sie auf „Jetzt installieren“ und dann auf „Aktivieren“. Wenn Sie Hilfe benötigen, können Sie unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins folgen.

Nach der Aktivierung können Sie in Ihrem WordPress-Admin-Dashboard von der linken Seitenleiste zu HTML Forms » Neues Formular hinzufügen navigieren, um mit der Erstellung Ihres Kontaktformulars zu beginnen.

Dies leitet Sie zur Seite 'Neues Formular hinzufügen' weiter.

Von hier aus müssen Sie als Erstes Ihrem Formular einen Namen geben, indem Sie den Namen in das Feld „Formulartitel“ eingeben. Wir haben unser Formular beispielsweise „Newsletter-Anmeldung“ genannt.

Klicken Sie als Nächstes auf die Schaltfläche „Formular erstellen“ unter dem Feld.

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

Oben auf der Seite sehen Sie die Details Ihres Formulars, einschließlich des Formulartitels, Slugs und Shortcodes. Sie müssen sich diese Details nicht merken, da sie im HTML Forms-Dashboard verfügbar sind, wenn Sie sie benötigen.

Unter diesen Details finden Sie die Menü-Tabs. Im Tab „Felder“ sehen Sie verschiedene Feld-Schaltflächen wie „Text“, „Daten“, „Kontrollkästchen“ und „Optionsfelder“, die Sie Ihren Formularen hinzufügen können.

Scrollen Sie nun etwas weiter nach unten.

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

Dieses Kontaktformular 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.

Nehmen wir nun an, Sie möchten ein neues Feld mit einer E-Mail-Newsletter-Anmeldung hinzufügen. Klicken Sie dann einfach auf eine der Feld-Schaltflächen über „Formular-Code“.

Zum Beispiel verwenden wir ein Dropdown-Feld und erstellen eine „Ja/Nein“-Option für die Newsletter-Anmeldung.

Von hier aus möchten Sie auf „Dropdown“ klicken, und dies öffnet die Konfigurationsoptionen für das Dropdown-Feld. Sie können mit der Eingabe der Details beginnen, einschließlich des Felds „Label“ und der Auswahlmöglichkeiten.

Nach Eingabe der Details können Sie auf „Feld zum Formular hinzufügen“ klicken.

Dann sollten Sie den Dropdown-Feld-Tag im Abschnitt „Formularcode“ sehen. Scrollen Sie einfach nach unten im Tab, um ihn anzusehen.

Der nächste Schritt ist die Neuanordnung des Kontaktformulars.

Um einen guten Fluss beizubehalten, möchten Sie, dass die Dropdown-Felder direkt unter dem Feld „E-Mail“ stehen.

Da dieses Plugin keinen Drag-and-Drop-Builder hat, müssen Sie den Code manuell verschieben. Schneiden Sie den Code für das Dropdown-Feld vom öffnenden <p>-Tag bis zum schließenden </p>-Tag aus.

Fügen Sie dann einfach diesen Codeausschnitt direkt nach dem schließenden Tag des Feldes „E-Mail“ ein (dieser sieht normalerweise so aus: </p> oder </label>).

Das Standardfeld 'Betreff' ist für ein Newsletter-Anmeldeformular möglicherweise nicht erforderlich. Daher empfehlen wir, das Feld zu entfernen.

Sie können dies tun, indem Sie den gesamten Absatzblock löschen, der die Beschriftung und das Eingabefeld für das Betreff-Feld enthält, einschließlich der öffnenden <p>- und schließenden </p>-Tags.

Nachdem Sie Tags verschoben und gelöscht haben, möchten Sie nach unten zum Abschnitt „Formularvorschau“ scrollen.

In diesem Abschnitt können Sie überprüfen, ob Sie die Felder erfolgreich verschoben und gelöscht haben, ohne etwas zu beschädigen. In der unten stehenden Formularvorschau können Sie überprüfen, ob das Betreff-Feld verschwunden ist, ohne das Formularlayout zu beeinträchtigen. Sie können auch überprüfen, ob das Dropdown-Menü ordnungsgemäß funktioniert.

Wenn Sie mit den Ergebnissen zufrieden sind, klicken Sie auf die blaue Schaltfläche „Änderungen speichern“ im Abschnitt „Formularcode“.

Sobald der Speicherprozess abgeschlossen ist, sollten Sie oben auf dieser Seite eine Benachrichtigung 'Formular aktualisiert.' sehen.

Nun möchten Sie vielleicht die Konfiguration des Formulars überprüfen. Gehen wir zum Tab „Nachrichten“, um zu sehen, wie HTML-Formulare die Bestätigungsnachrichten für die Formularübermittlung konfiguriert.

Klicken Sie einfach auf 'Nachrichten', um den Tab zu öffnen.

Dieser Tab ermöglicht es Ihnen, den vorgefertigten Text für erfolgreiche Formularübermittlungen von Benutzern und ähnliche Situationen zu bearbeiten.

Wenn alles gut aussieht, können Sie es so belassen. Wenn Sie Änderungen vornehmen, vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, damit Sie Ihren Fortschritt nicht verlieren.

Als Nächstes gehen wir zum Tab „Einstellungen“.

Standardmäßig setzt HTML Forms „Ja“ zum Speichern jeder Formularübermittlung und „Nein“ zum Ausblenden des Formulars nach erfolgreicher Übermittlung. Sie können dies nach Bedarf anpassen.

Dann können Sie im Feld „Nach erfolgreicher Anmeldung weiterleiten zu URL“ die URL einer Live-Webseite von Ihrer WordPress-Website kopieren und einfügen. Alternativ können Sie das Feld leer lassen oder 0 eingeben, um die Benutzer nach einer erfolgreichen Formularübermittlung auf der aktuellen Seite zu belassen.

Wenn alles eingestellt ist, müssen Sie nur noch das HTML-Formular zu einer WordPress-Seite hinzufügen.

Gehen wir im WordPress-Dashboard zu Beiträge oder Seiten » Alle Beiträge oder Alle Seiten.

Für diese Anleitung fügen wir das HTML-Formular zu unserer „Kontakt“-Seite hinzu.

Wir fahren also mit der Maus über die Seite „Kontakt“ in der Liste und klicken auf „Bearbeiten“, wenn sie erscheint.

Dies startet den Block-Editor der Seite „Kontakt“.

Im Editor können Sie einen Bereich auswählen, um das Formular hinzuzufügen. Fahren Sie dann einfach mit der Maus über einen Bereich zwischen den Blöcken und klicken Sie auf die Schaltfläche „+“, um den HTML-Formulare-Block hinzuzufügen, oder klicken Sie auf das Block-Einfüge-Symbol in der oberen linken Symbolleiste.

Geben Sie nun im Suchfeld oben im Block-Einfüge-Panel „HTML-Formulare“ ein, um den Block schnell zu finden. Sobald Sie das Suchergebnis haben, klicken Sie darauf.

Sie sehen dann ein Dropdown im 'HTML-Formulare'-Block. Erweitern Sie es einfach und wählen Sie das Formular aus, das Sie anzeigen möchten. Hier wählen wir das gerade erstellte Formular 'Newsletter-Anmeldung' aus.

Das Formular wird angezeigt, wenn Sie Ihre Inhalte veröffentlichen. Sobald Sie das Formular aus dem Dropdown-Menü ausgewählt haben, können Sie auf die Schaltfläche „Aktualisieren“ klicken.

Ihr Formular ist jetzt live und Benutzer können sich für Ihren Newsletter anmelden. So könnte es auf Ihrer Website aussehen:

Um Formularübermittlungen anzuzeigen, können Sie zuerst zu HTML-Formulare » Alle Formulare navigieren. Dies führt Sie zur Liste aller Ihrer HTML-Formulare.

Fahren Sie dann einfach mit der Maus über ein Formular und klicken Sie auf die Schaltfläche „Einsendungen“, wenn sie erscheint.

Von hier aus können Sie alle Ihre Formulareinreichungen sehen.

Die Tabelle 'Einreichungen' listet alle Informationen auf, die Benutzer in Ihr Formular eingegeben haben. Dann gibt es die Spalte 'Zeitstempel', die angibt, wann sie das Formular eingereicht haben.

Zum Beispiel wurde hier die erste Einreichung von „Benutzer 1“ vorgenommen.

Aus der Tabelle können wir ersehen, dass der Benutzer das Formular am 25. Juni gegen 13:00 Uhr eingereicht hat. Außerdem hat „Benutzer 1“ die Frage „Möchten Sie unseren Newsletter abonnieren?“ mit „Vielleicht später“ beantwortet. In diesem Fall sollten Sie ihre E-Mail-Adresse nicht zu Ihrer Mailingliste hinzufügen.

Methode 2: Benutzerdefiniertes HTML zu WordPress-Formularen mit WPForms hinzufügen

🎖️ Am besten für: Nicht-technische Benutzer, die in wenigen Minuten professionelle Formulare ohne Programmierung wünschen. WPForms wird von Benutzern dafür gelobt, dass es möglich ist, mit seiner intuitiven Drag-and-Drop-Oberfläche schnell schöne Formulare zu erstellen.

Ein anderer Ansatz ist die Verwendung eines visuellen Kontaktformular-Builders wie WPForms, dem am besten bewerteten WordPress-Formular-Plugin mit über 6 Millionen aktiven Installationen und einer Bewertung von 4,8 von 5 Sternen aus über 14.000 Bewertungen.

Dies ist die beste Option, wenn Sie das Formular visuell erstellen möchten, aber bestimmte HTML-Elemente wie einen Link, ein Textformat oder einen Tooltip per Code einfügen müssen.

Sie könnten beispielsweise benutzerdefiniertes HTML verwenden, um eine kurze Warnmeldung auf einem Checkout-Formular mit einem Link zu Ihrer Seite „Rückerstattungs- und Rückgabebedingungen“ anzuzeigen.

Oder Sie können eine Fortschrittsleiste hinzufügen, damit Benutzer wissen, wie weit sie vom Ausfüllen des Formulars entfernt sind. Benutzerdefinierter HTML-Code kann sogar Emojis einfügen oder einen Tooltip hinzufügen.

In dieser Methode zeigen wir Ihnen, wie Sie HTML-Code-Schnipsel hinzufügen, um Ihre WordPress-Formulare mit WPForms, dem besten Formularersteller für WordPress, anzupassen.

Mehr über WPForms

WPForms ist der beliebteste WordPress-Formularersteller mit über 6 Millionen aktiven Installationen.

Über seinen Drag-and-Drop-Builder hinaus enthält es eine große Bibliothek von Add-ons und Integrationen, die Ihre Formulare erweitern können, ohne dass eine benutzerdefinierte Entwicklung erforderlich ist. Sie können zum Beispiel:

• Formularabbrüche verfolgen und wiederherstellen (Elite-Plan)
• Konversationsformulare erstellen (Pro-Plan)
• Umfragen und Abstimmungen durchführen (Pro-Plan)
• Zahlungen akzeptieren über Stripe, PayPal, Square und Authorize.Net (Plus-Plan)
• Digitale Signaturen sammeln (Pro-Plan)
• WordPress-Benutzer automatisch registrieren (Pro-Plan)

Die kostenlose WPForms Lite-Version enthält den Kern-Formularersteller und grundlegende Felder. Das in diesem Tutorial verwendete HTML-Feld erfordert eine Premium-Lizenz (Basic oder höher). Die Verfügbarkeit variiert je nach Plan: Das HTML-Feld ist ab Basic (49,50 $/Jahr) verfügbar, und die meisten erweiterten Add-ons erfordern Pro (199,50 $/Jahr) oder Elite (299,50 $/Jahr).

Bei WPBeginner verwenden wir WPForms für Kontaktformulare, jährliche Umfragen und Formulare für Website-Migrationsanfragen, da die Erstellung und Verwaltung von Formularen damit viel einfacher ist, als sie von Hand zu codieren.

Erfahren Sie mehr über dieses Plugin in unserem detaillierten WPForms-Testbericht.

Stellen Sie vor Beginn sicher, dass Sie ein WPForms-Konto mit einer Premium-Lizenz haben, die das HTML-Feld enthält (Basic-Plan oder höher).

Klicken Sie auf der WPForms-Website auf die Schaltfläche „WPForms jetzt erhalten“, wählen Sie einen Plan, der das HTML-Feld enthält (Lizenz Basic oder höher für 49,50 $/Jahr oder mehr), und schließen Sie den Kauf ab.

Nach der Anmeldung haben Sie Ihr eigenes WPForms-Dashboard, auf dem Sie Ihre WPForms-ZIP-Datei herunterladen und Ihren Lizenzschlüssel kopieren können.

Jetzt können Sie WPForms auf Ihrer WordPress-Website installieren und aktivieren.

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins » Installieren und klicken Sie oben auf die Schaltfläche „Plugin hochladen“.

Sie sollten nun den Datei-Uploader sehen.

Klicken Sie auf „Datei auswählen“, um Ihre WPForms-ZIP-Datei von Ihrem lokalen Computer hochzuladen. Klicken Sie danach einfach auf „Jetzt installieren“ und dann auf „Aktivieren“.

Wenn Sie Hilfe benötigen, lesen Sie bitte unsere Anleitung zur Installation eines WordPress-Plugins.

Nach der Aktivierung können Sie zu WPForms » Einstellungen navigieren, um Ihren Lizenzcode einzugeben. Klicken Sie nach Eingabe des Schlüssels einfach auf die Schaltfläche „Schlüssel überprüfen“, um die Verifizierung zu starten.

Sobald Sie fertig sind, können Sie mit der Erstellung Ihres Formulars beginnen und benutzerdefinierten HTML-Code hinzufügen.

In dieser Anleitung zeigen wir Ihnen, wie Sie Ihrem Kontaktformular einen einfachen Tooltip hinzufügen.

Ein Tooltip ist wie ein kleines Pop-up-Fenster, das erscheint, wenn Sie mit der Maus über ein Web-Element fahren. Es ist praktisch, da es den Benutzern ermöglicht, mehr über ein bestimmtes Web-Element zu erfahren, ohne klicken oder die Seite verlassen zu müssen, auf der sie sich befinden.

Aber zuerst, lassen Sie uns das Kontaktformular erstellen. Gehen Sie einfach zu WPForms » Neu hinzufügen in Ihrem WordPress-Adminbereich, um loszulegen.

Dies öffnet das 'Setup'-Panel, wo Sie zuerst Ihrem Formular einen Namen geben müssen. Dieser Name dient nur zur internen Referenz, sodass Sie verwenden können, was Sie möchten.

Der nächste Schritt ist die Auswahl, wie Sie Ihr Formular erstellen möchten.

Mit WPForms können Sie Formulare mit dem KI-Formularersteller (Basic-Tarif oder höher), einer vorgefertigten Vorlage oder von Grund auf neu erstellen.

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

Für dieses Tutorial verwenden wir jedoch 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.

Wenn Sie jedes Suchergebnis erkunden möchten, um zu sehen, wie das Formular aussieht, können Sie die Vorschaufunktion nutzen. Bewegen Sie einfach den Mauszeiger über die 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“.

Dies startet den Formular-Editor.

Jetzt befinden sich alle Anpassungswerkzeuge im linken Bereich und die Live-Vorschau des Formulars auf der rechten Seite Ihres Bildschirms.

Auf dieser Seite können Sie mit der Drag-and-Drop-Funktion Elemente aus dem linken Bereich in die Live-Vorschau ziehen. Sie können die Funktion auch verwenden, um Felder in der Live-Vorschau zu verschieben.

Versuchen wir, das HTML-Feld zum Formular hinzuzufügen. Alles, was Sie tun müssen, ist, nach unten im linken Bereich zu scrollen und dann „HTML“ per Drag & Drop auf das Formular zu ziehen.

Nach dem Einfügen des HTML-Feldes können Sie darauf klicken, um dessen Anpassungsoptionen zu öffnen. Hier ist das Erste, was Sie tun müssen, das Feld 'Label' auszufüllen. Sie können es 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 den Text gerne nach Ihren Wünschen. Der Teil title="" im Code ist genau das, was dem Webbrowser sagt, dass er den Hover-Pop-up-Effekt erzeugen soll!

Beachten Sie, dass WPForms den HTML-Code nicht in der Vorschau des Formular-Builders anzeigt. Um das Feld in der Vorschau anzuzeigen und sicherzustellen, dass alles richtig ist, können Sie die Änderungen zuerst speichern und auf „Vorschau“ klicken.

Dies führt Sie zu einem neuen Tab.

Testen wir nun, ob der HTML-Code-Schnipsel für Ihren Tooltip ordnungsgemäß funktioniert. Bewegen Sie einfach den Mauszeiger über den Text und warten Sie einige Sekunden, bis der Tooltip erscheint.

Wenn Sie mit dem Ergebnis zufrieden sind, können Sie zum Formular-Builder zurückkehren, um Ihr Formular zu finalisieren.

Ihre Benachrichtigungs- und Bestätigungseinstellungen sind in WPForms bereits eingerichtet. Wenn Sie sie jedoch anpassen möchten, gehen Sie zu „Einstellungen“ und dann zu „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 die E-Mail-Adressen mit Kommas: email1@example.com, email2@example.com, email3@example.com. Sie können auch mit der Maus über das Fragezeichen-Symbol neben dem Feld „An E-Mail-Adresse senden“ fahren, um zusätzliche Anweisungen zu erhalten.

Sie können auch den vorgefertigten Text für Ihre E-Mail-Betreffzeile bearbeiten.

Zum Beispiel haben wir unseren von 'Neue Einreichung: Kontaktformular' in 'Sie haben Post: Neuer Kontakt' geändert.

Sobald Sie Ihre Benachrichtigungen angepasst haben, möchten Sie zum Panel 'Bestätigung' wechseln.

Standardmäßig setzt WPForms Ihren Bestätigungstyp auf „Nachricht“ und hat den vorgefertigten Text für Sie bereit. Sie können diese Einstellungen definitiv ändern, wenn Sie möchten.

Neben der Anzeige einer Bestätigungsnachricht können Sie Benutzer auf eine neue Seite oder eine bestimmte URL weiterleiten.

Sobald alles eingestellt ist, ist es an der Zeit, das WordPress-Formular zu veröffentlichen und einzubetten.

Klicken Sie auf die orangefarbene Schaltfläche „Einbetten“ in der oberen rechten Ecke des Formularerstellers, um mit der Veröffentlichung zu beginnen.

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“.

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

Nun können Sie mit der Maus über einen Bereich zwischen den Blöcken fahren und auf die Schaltfläche „+“ klicken oder auf das Symbol zum Einfügen von Blöcken in der oberen linken Symbolleiste klicken. Wählen Sie dann den WPForms-Block aus.

Dann können Sie ein Formular aus dem Dropdown-Menü des WPForms-Blocks auswählen.

Sobald Sie ein Formular ausgewählt haben, lädt WPForms es in den ausgewählten Inhaltsbereich. Wenn Sie den Titel des Formulars anzeigen möchten, können Sie zum Tab 'Block' im rechten Bedienfeld gehen und den Schieberegler 'Titel anzeigen' aktivieren.

Wenn Sie mit allem 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.

Jetzt können Benutzer mit dem Ausfüllen des Formulars beginnen und sich möglicherweise für Ihren E-Mail-Newsletter anmelden.

Um alle Ihre WPForms-Formularübermittlungen anzuzeigen, navigieren Sie zu WPForms » Alle Formulare.

Dann können Sie mit der Maus über „Kontaktformular“ oder ein beliebiges Formular aus der Liste fahren und auf „Einträge“ klicken, wenn die Schaltfläche erscheint.

Auf dem nächsten Bildschirm sollten Sie alle Ihre Formulareingaben sehen können.

Die Tabelle enthält alle Informationen, die Benutzer mit dem Formular übermittelt haben, sowie die Übermittlungszeit.

Zum Beispiel sagte am 2. Juli gegen 8 Uhr 'Benutzer 3', dass er den E-Mail-Newsletter abonnieren möchte und hinterließ eine Frage, wie er unser Kundensupport-Team erreichen kann.

Wir können auch die Spalte „Aktionen“ sehen. In dieser Spalte gibt es mehrere Schaltflächen: „Anzeigen“, „Bearbeiten“, „Spam“ und „Papierkorb“.

Wenn Sie auf 'Anzeigen' klicken, bringt Sie WPForms zu einer speziellen Übersichtsseite eines Eintrags. Auf dieser Seite empfiehlt das Plugin die Aktivierung von zwei Add-ons.

Das erste ist das Geolocation Add-on zum Verfolgen, von wo aus der Benutzer das Formular übermittelt. Das zweite ist das User Journey Add-on, das Ihnen helfen kann, den Weg des Benutzers durch Ihre Website zu analysieren, bis er auf die Schaltfläche „Senden“ klickt.

Wir empfehlen die Installation und Aktivierung dieser Add-ons für eine optimierte Formularleistung. Beachten Sie, dass beide Add-ons in der Pro-Lizenz (199,50 $/Jahr) oder höher verfügbar sind.

Die Schaltflächen „Spam“ und „Papierkorb“ sind praktisch, um gefälschte Übermittlungen zu markieren und aus Ihren Einträgen zu entfernen. Um mehr darüber zu erfahren, wie Sie gefälschte Formularübermittlungen reduzieren können, lesen Sie unseren Leitfaden zur Sperrung von Kontaktformular-Spam.

Bonustipp: Hochladen einer benutzerdefinierten HTML-Seite nach WordPress

Möglicherweise suchen Sie auch nach einer Möglichkeit, eine benutzerdefinierte HTML-Seite auf Ihre WordPress-Website hochzuladen. Dies kann nützlich sein, wenn Sie eine statische Vorlage verwenden möchten oder eine HTML-Seite von einer alten Website.

Im Allgemeinen können Sie eine einzelne HTML-Seite ohne separate CSS- oder Bilddateien mit einem Dateimanager-Plugin oder einem FTP-Client hochladen.

Wenn die Seite, die Sie hochladen möchten, jedoch separate CSS-Dateien und Bilder enthält, müssen Sie diese in einem Ordner hochladen und dabei die gleiche Verzeichnisstruktur beibehalten, die in Ihrer HTML-Datei verwendet wird.

AIOSEO, das beste SEO-Plugin für WordPress, kann Suchmaschinen helfen, Ihre benutzerdefinierte HTML-Seite zu finden, indem es sie zu Ihren XML-Sitemaps hinzufügt.

Weitere Informationen finden Sie in unserem Leitfaden für Anfänger zum Hochladen einer HTML-Seite in WordPress ohne 404-Fehler.

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

Wir haben einige häufig gestellte Fragen beantwortet, um Ihnen zu helfen, HTML-Formulare einfach zu WordPress hinzuzufügen.

Warum funktioniert mein HTML-Formular auf WordPress nicht?

Dies ist ein häufiges Problem. In WordPress reicht es normalerweise nicht aus, einfach ein HTML-Formular einzufügen, 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.

Wie kann ich sicherstellen, dass meine Formularübermittlungen durchgehen?

Die einfachste Option ist die Verwendung eines Kontaktformular-Plugins wie WPForms oder Formidable Forms. Diese Plugins kümmern sich um alles im Hintergrund, einschließlich des Speicherns von Einträgen, des Sendens von E-Mail-Benachrichtigungen und des Blockierens von Spam, sodass Sie nicht alles selbst einrichten müssen.

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

Ja, absolut. Mit HTML haben Sie 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 erstellen Sie ein Buchungsformular in WordPress (einfache Methoden)
• So erstellen Sie mehrsprachige Formulare in WordPress
• So erstellen Sie konversationelle Formulare in WordPress
• So exportieren Sie WordPress-Formulareinträge als CSV und Excel
• Ultimativer Leitfaden zur Verwendung von WordPress-Formularen

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.