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

Haben Sie jemals ein HTML-Formular zu Ihrer WordPress-Website hinzugefügt, nur um festzustellen, dass es gut aussieht, aber nicht funktioniert? Sie sind nicht allein.

Viele Website-Besitzer stoßen auf dieses frustrierende Problem und fragen sich, warum ihr Formular keine Übermittlungen sendet oder keine ordnungsgemäße Verbindung herstellt.

Der Grund ist einfach: WordPress behandelt Formulare nicht auf die gleiche Weise wie eine normale HTML-Website. Wenn Sie also nur ein rohes HTML-Formular kopieren und einfügen, funktioniert es normalerweise nicht ohne zusätzliche Schritte.

Auf unseren eigenen Websites verwenden wir das WPForms-Plugin, da es die gesamte Einrichtung im Hintergrund für uns übernimmt. Dennoch wissen wir, dass viele Benutzer es vorziehen, mit benutzerdefinierten HTML-Formularen zu arbeiten, um die Dinge schlank zu halten, die volle Kontrolle über den Code zu behalten und die Abhängigkeit von Plugins zu verringern.

In diesem Leitfaden zeigen wir Ihnen 2 bewährte Methoden, um HTML-Formulare zu WordPress hinzuzufügen – und sicherzustellen, dass sie tatsächlich funktionieren. Egal, ob Sie gerade erst anfangen oder sich mit Code auskennen, Sie können ein funktionierendes Formular ohne all das Ausprobieren erstellen. 💡

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 HTML-Code erstellt werden und nicht mit einem Drag-and-Drop-Visualleditor wie einem Formular-Plugin. Sie müssen also Felder wie Textfelder, Kontrollkästchen, Optionsfelder und Dropdown-Menüs selbst definieren. Sie entscheiden, wie sie aussehen und legen bestimmte Regeln für ihre Funktionsweise fest.

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.

Das Erstellen von HTML-Formularen von Grund auf ist zwar eine großartige Möglichkeit, das Programmieren zu lernen und zu üben, birgt aber auch eigene Herausforderungen.

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

Außerdem ist es unserer Erfahrung nach schwierig, die Formularvalidierung mit JavaScript zu handhaben. Es erfordert gründliche Tests, um sicherzustellen, dass Sie alle Benutzereingaben korrekt erfassen und verarbeiten können.

Das heißt, es gibt Möglichkeiten, HTML-Formulare ohne diese Komplexität hinzuzufügen. Egal, ob Sie einen WordPress-Blog, eine Geschäftsseite oder einen Online-Shop verwalten, Sie können problemlos HTML-Formulare 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:

Bereit? Legen wir los.

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

Eine einfache Möglichkeit, ein HTML-Formular zu einer WordPress-Website hinzuzufügen, ist die Verwendung eines kostenlosen Formular-Plugins wie HTML Forms. Es ist ein großartiges Werkzeug zum Erstellen und Konfigurieren von HTML-Formularen an einem Ort, sodass Sie sich nicht mit serverseitigen Konfigurationen befassen müssen.

In dieser Anleitung verwenden wir die kostenlose Version des Plugins, die alles enthält, was Sie zum Erstellen eines HTML-Formulars benötigen.

Um zu beginnen, stellen Sie sicher, dass das Plugin auf Ihrer WordPress-Website installiert ist. 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 zu HTML-Formulare » Neu 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 zuerst Ihrem Formular einen Namen geben, indem Sie den Namen einfach 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 dem Tab sehen Sie die Details Ihres Formulars, einschließlich des Formularnamens, des Slugs und des 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.

Lassen Sie uns ein wenig weiter nach unten scrollen.

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.

Wenn Sie nun ein neues Feld für die Anmeldung zu einem E-Mail-Newsletter hinzufügen möchten, klicken Sie einfach auf eine der Feld-Schaltflächen über „Formularcode“.

Zum Beispiel verwenden wir ein Dropdown-Feld und erstellen eine Option 'Ja/Nein'.

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 zu gewährleisten, möchten Sie, dass das Dropdown-Feld direkt unter dem Feld „E-Mail“ steht.

Um es zu verschieben, können Sie das Dropdown-Feld-Tag vom ersten Tag <p> bis zum letzten </> ausschneiden. Fügen Sie es dann einfach unter dem Tag 'E-Mail' ein.

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 das Tag von der ersten <p> bis zur letzten </p> löschen.

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. 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 vorgenommen haben, 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 in „Nach erfolgreicher Anmeldung zu URL weiterleiten“ die URL einer Live-Webseite von Ihrer WordPress-Website kopieren und einfügen. Oder geben Sie 0 in das Feld ein, um Benutzer nach einer erfolgreichen Formularübermittlung auf der Seite zu belassen.

Wenn alles eingestellt ist, müssen Sie nur noch das HTML-Kontaktformular 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, in den Sie das Formular einfügen möchten. Fahren Sie dann einfach mit der Maus darüber und klicken Sie auf die Schaltfläche '+' , um den HTML-Formular-Block hinzuzufügen.

Geben Sie nun 'HTML-Formulare' in die Suchleiste 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.

Da haben Sie es! 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 gehen. 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

Ein weiterer Ansatz zur Erstellung von HTML-Formularen ist die Verwendung eines Formular-Builders. Während diese Methode es Ihnen nicht erlaubt, Ihre Formulare von Grund auf neu zu codieren, können Sie sie durch Hinzufügen von HTML-Code-Snippets anpassen.

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 Fortschrittsanzeige hinzufügen, damit Benutzer wissen, wie weit sie von der Formularabgabe entfernt sind. Benutzerdefiniertes HTML kann Ihnen sogar ermöglichen, Emojis einzufügen oder einen Tooltip hinzuzufü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.

Auf unserer WPBeginner-Website nutzen wir es für Kontaktformulare, Jahresumfragen und Anfragen zur Website-Migration. Erfahren Sie mehr über dieses Plugin in unserem detaillierten WPForms-Testbericht.

WPForms wird mit umfassenden Ein-Klick-Add-ons und Drittanbieter-Integrationen geliefert. Sie können beispielsweise das Add-on Form Abandonment installieren, um Probleme mit Formularabbrüchen zu verfolgen und zu reduzieren und vieles mehr!

WPForms erleichtert die Erweiterung der Funktionalität Ihres Formulars, als wenn Sie Ihr WordPress-Formular von Grund auf neu kodieren würden.

Bevor wir beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist. Wenn Sie Hilfe benötigen, lesen Sie bitte unseren Leitfaden zur Installation eines WordPress-Plugins.

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

Sobald Sie fertig sind, können Sie mit der Erstellung Ihres Formulars beginnen und benutzerdefiniertes HTML 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. Er ist praktisch, da er es Benutzern ermöglicht, mehr über ein bestimmtes Web-Element zu erfahren, ohne die Seite, auf der sie sich befinden, anzuklicken oder zu verlassen.

Aber zuerst erstellen wir das Kontaktformular. 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 zu Ihrer Information, Sie können also alles verwenden, 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, 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 werden wir es jedoch anhand einer vorgefertigten Vorlage demonstrieren.

Da es über 2.000 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 gesamten Seite können Sie die Drag-and-Drop-Funktion verwenden, um Elemente aus dem Anpassungsbereich in die Live-Vorschau einzufügen. 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 die Funktion „<span>“ 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 ein Beispielcode. Sie können unsere Kopie gerne bearbeiten, um sie besser an Ihre Bedürfnisse anzupassen.

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 Formularbenachrichtigungs- und Bestätigungseinstellungen sind bereits in WPForms 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 die Übermittlung Ihres Kontaktformulars hinzufügen.

Sie sehen eine kurze Anleitung, wenn Sie mit der Maus über das Fragezeichen neben dem Feld „An E-Mail-Adresse senden“ fahren. Sie sollten dieser folgen, um sicherzustellen, dass Ihre Benachrichtigung an die richtigen E-Mail-Adressen gesendet wird.

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 Zeit, das WordPress-Formular zu veröffentlichen und einzubetten.

Klicken Sie auf die Schaltfläche „Einbetten“, 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.

Bewegen Sie nun den Mauszeiger über den Bereich, in dem Sie das Formular platzieren möchten, und klicken Sie auf die Schaltfläche '+'. 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.

Nun 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-Einreichungen 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 zur Verfolgung, wo 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.

Die Schaltflächen 'Spam' und 'Papierkorb' sind praktisch, um gefälschte Einreichungen zu markieren und sie aus Ihren Einträgen zu entfernen. Um mehr über die Reduzierung gefälschter Formulareinreichungen zu erfahren, lesen Sie unseren Leitfaden zum Blockieren von Spam in Kontaktformularen.

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.

Die allgemeine Faustregel ist, eine einzelne HTML-Seite ohne separate CSS- oder Bilddateien hochzuladen. Wenn die Seite, die Sie hochladen möchten, jedoch separate CSS-Dateien und Bilder enthält, müssen Sie diese in einer Verzeichnisstruktur platzieren.

AIOSEO, das beste SEO-Plugin für WordPress, kann Ihnen dabei helfen.

Um mehr zu erfahren, lesen Sie unseren Leitfaden für Anfänger zum Thema Hochladen einer HTML-Seite nach 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?

Es ist ein häufiges Problem. WordPress verarbeitet Formulareingaben nicht automatisch, wie es eine normale HTML-Website mit serverseitigen Skripten tun könnte. Wenn Sie also nur ein einfaches HTML-Formular einfügen, sieht es vielleicht gut aus, aber es tut tatsächlich nichts, wenn jemand auf „Senden“ klickt.

Das liegt daran, dass WordPress keine integrierte Verarbeitung für Formulardaten enthält. Auf einer Standard-HTML-Website verbinden Entwickler Formulare normalerweise mit Skripten wie form-handler.php, um die Eingaben zu verarbeiten. In WordPress müssen Sie Ihren eigenen benutzerdefinierten PHP-Code hinzufügen oder ein Plugin verwenden, um das Formular funktionsfähig zu machen.

Kurz gesagt, die Anzeige des Formulars ist einfach, aber damit es funktioniert, ist ein wenig zusätzliche Einrichtung erforderlich.

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

Der einfachste Weg ist die Verwendung eines Kontaktformular-Plugins wie WPForms und Formidable Forms. Es kümmert sich um alle Hintergrundprozesse, wie die Verarbeitung von Einreichungen, das Senden von Benachrichtigungen und das Blockieren von Spam, sodass Sie nicht alles manuell einrichten müssen.

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

Absolut! Wenn Sie sich mit Code auskennen, gibt Ihnen die Verwendung von reinem HTML die volle Kontrolle über die Struktur Ihres Formulars. Beachten Sie jedoch:

• Sie müssen Ihr eigenes CSS schreiben, um Dinge wie Layouts, Farben und Abstände zu gestalten.
• Formularvalidierung, Fehlermeldungen oder bedingte Logik erfordern benutzerdefiniertes JavaScript oder serverseitigen Code.
• Und Sie sind auch dafür verantwortlich, sicherzustellen, dass das Formular auf verschiedenen Browsern und Geräten funktioniert.

Ja, Sie haben also volle Freiheit, 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 RSVP-Formular in WordPress
• So erstellen Sie ein Online-Buchungsformular in WordPress
• So erstellen Sie ein WordPress-Formular mit einem Datumsfeld
• So erstellen Sie mehrsprachige Formulare in WordPress
• So erstellen Sie konversationelle Formulare in WordPress
• So gestalten und passen Sie Ihre WordPress-Formulare an
• 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.