KI-Zusammenfassung
Möchten Sie benutzerdefinierte HTML-Code-Snippets in Ihre WordPress-Kontaktformulare einbetten? Das Hinzufügen von benutzerdefiniertem HTML zu Ihrem Formular ist eine großartige Möglichkeit, kreativ zu werden und Ihre Formulare zu verbessern.
Die besten WordPress-Formular-Plugins ermöglichen es Ihnen, Formulare ohne Code zu erstellen und gleichzeitig benutzerdefiniertes HTML zu Ihren Formularen hinzuzufügen, um sie noch fortschrittlicher zu gestalten.
In diesem Tutorial führe ich Sie durch die Installation von WPForms, das Erstellen eines Formulars, das Hinzufügen eines HTML-Blocks und das Einfügen Ihres Codes.
Fügen Sie benutzerdefinierten HTML-Code zu Ihrem WordPress-Formular hinzu! :)
Warum benutzerdefinierten HTML-Code zu Ihrem Kontaktformular hinzufügen?
Sie fragen sich vielleicht, warum Sie HTML zu Ihren WordPress-Formularen hinzufügen sollten. In vielen Fällen möchten fortgeschrittene Benutzer oder Webentwickler die Funktionalität eines Formulars erweitern.
Einer der Hauptvorteile der Hinzufügung von benutzerdefiniertem HTML zu Ihrem Formular ist, dass es Ihnen hilft, Ihr Formular vom Rest des Inhalts abzuheben.
Im folgenden Beispiel sehen Sie, wie einfach es ist, einen Link zu einer Datenschutzerklärung in einem Text auf Ihrem Kontaktformular hinzuzufügen.
Wenn Ihre Besucher also auf der Seite landen, auf der sich Ihr Kontaktformular befindet, sehen sie etwas wie das Folgende:
Außerdem können Sie ein Bild zu Ihrem Formular hinzufügen, indem Sie benutzerdefinierten HTML-Code verwenden, um das Formular optisch ansprechender zu gestalten oder Produkte und benutzerdefinierte Produktoptionen zu präsentieren.
Und durch das Hinzufügen dieser zusätzlichen Funktionen zu Ihren Formularen können Sie das Formular auf der Seite hervorheben, was dazu beiträgt, die Aufmerksamkeit Ihrer Besucher zu erregen.
So fügen Sie benutzerdefinierten HTML-Code zu Ihrem WordPress-Kontaktformular hinzu
Ich habe auch ein Video unten geteilt, das alle Anweisungen beschreibt, die Sie befolgen müssen, um HTML-Code zu Ihrem Formular in WordPress hinzuzufügen.
Wenn Sie das Tutorial lieber lesen möchten, folgen Sie diesen Anweisungen, um einen Platz in Ihren Formularen zu erstellen, an dem Sie Ihren benutzerdefinierten HTML-Code einfügen können.
Schritt 1: Installieren Sie das WPForms-Plugin
Das Erste, was Sie tun müssen, um loszulegen, ist die Installation und Aktivierung des WPForms-Plugins. Es ist ein einfach zu bedienender Formularersteller, mit dem Sie alles von einfachen bis zu fortgeschrittenen Formularen erstellen können.
Was WPForms auszeichnet, ist die Art und Weise, wie es benutzerdefiniertes HTML behandelt. Im Gegensatz zu anderen Formularerstellern, die einschränken, was Sie hinzufügen können, gibt Ihnen WPForms die volle Kontrolle über Ihre HTML-Inhalte und hält alles sicher und funktionsfähig.
Das HTML-Feld ist Teil der Fancy Fields-Sammlung von WPForms, was bedeutet, dass Sie mindestens den Basic-Plan benötigen, um darauf zugreifen zu können. Wenn Sie neu im Herunterladen von Plugins sind, finden Sie hier eine Schritt-für-Schritt-Anleitung, wie Sie ein WordPress-Plugin installieren.
Jetzt auf WPForms Pro upgraden!:)
Schritt 2: Formular erstellen und grundlegende Felder hinzufügen
Der nächste Schritt ist die Erstellung Ihres ersten Formulars. Sie können jedes Formular auswählen, zu dem Sie benutzerdefiniertes HTML hinzufügen möchten. Für dieses Beispiel erstellen wir ein einfaches Kontaktformular mit der WPForms-Herausforderung.
Geben Sie Ihrem Formular einen aussagekräftigen Namen wie „Kontaktformular mit benutzerdefiniertem HTML“, damit Sie es später leicht finden können. Sie können mit einer Vorlage wie „Einfaches Kontaktformular“ beginnen, um Zeit zu sparen.
Sobald Sie sich im Formular-Editor befinden, sehen Sie die gewohnte Einrichtung mit den Feldoptionen links und Ihrer Formularvorschau rechts, wobei wichtige Felder wie Name, E-Mail und Nachricht bereits hinzugefügt sind.
Dies gibt Ihnen eine solide Grundlage, bevor Sie Ihre benutzerdefinierten HTML-Elemente hinzufügen. Großartig. Fügen wir nun als Nächstes das Feld hinzu, das benutzerdefiniertes HTML akzeptiert.
Schritt 3: HTML-Block zu Ihrem Formular hinzufügen
Nun kommt der unterhaltsame Teil des Hinzufügens von benutzerdefiniertem HTML zu Ihrem Formular. Suchen Sie das Feld HTML im Abschnitt Fancy Fields auf der linken Seite des Formular-Editors und ziehen Sie es in den Bereich Ihrer Formularvorschau.
Sie können das HTML-Feld überall in Ihrer Formularstruktur platzieren. Ich platziere es normalerweise dort, wo benutzerdefinierte Inhalte erscheinen sollen.
Vielleicht oben für eine Willkommensnachricht, zwischen Feldabschnitten als Trennlinie oder unten für zusätzliche Informationen.
Schritt 4: Benutzerdefinierten HTML-Code einfügen
Jetzt, da Ihr benutzerdefinierter HTML-Block in Ihrem Kontaktformular vorhanden ist, können Sie Ihren benutzerdefinierten HTML-Code-Schnipsel hinzufügen. Gehen Sie zu Ihrem Formular auf der rechten Seite und klicken Sie auf das Feld HTML / Code-Block, das Sie gerade hinzugefügt haben.
Wechseln Sie dann zum linken Bedienfeld, wo Sie unter Feldoptionen die Box HTML-Code sehen. Hier können Sie Ihren benutzerdefinierten HTML-Code-Schnipsel hinzufügen.
Fügen Sie also Ihren benutzerdefinierten HTML-Code in dieses Feld ein. Sie können jede Art von benutzerdefiniertem HTML-Code-Schnipsel zu Ihrem Formular hinzufügen. Wenn Sie fertig sind, klicken Sie oben rechts auf die Schaltfläche Speichern.
Schritt 5: Ihr benutzerdefiniertes HTML-Formular live schalten
Bevor Sie Ihr Formular live schalten, müssen Sie alles testen, um sicherzustellen, dass Ihr benutzerdefiniertes HTML korrekt angezeigt wird und die Formularübermittlung nicht beeinträchtigt.
Klicken Sie im Formular-Generator auf die Schaltfläche Vorschau, um genau zu sehen, wie Ihr Formular für Besucher angezeigt wird. Wenn alles wie erwartet funktioniert, können Sie es dann Ihrer Website hinzufügen. Klicken Sie auf die Schaltfläche Einbetten.
Wenn nun die Benachrichtigung "In eine Seite einbetten" erscheint, klicken Sie auf die Schaltfläche Neue Seite erstellen. Als Nächstes werden Sie von WPForms aufgefordert, Ihrer Seite einen Namen zu geben.
In unserem Beispiel fügen wir dieses benutzerdefinierte HTML-Kontaktformular zu einer Kontaktseite hinzu, daher nennen wir es Kontaktieren Sie uns. Geben Sie den Titel der gewünschten Seite in das Feld ein und klicken Sie auf Los geht's!
Sie sehen nun die brandneue Seite mit Ihrem benutzerdefinierten HTML-Kontaktformular darauf. Sie können auf die Schaltfläche Veröffentlichen in der oberen rechten Ecke Ihrer Seite klicken.
Und dann werfen Sie einen Blick auf Ihr neues Formular. Sie haben es geschafft. Sie haben die Einrichtung eines WordPress-Kontaktformulars mit einem benutzerdefinierten HTML-Feld abgeschlossen.
Fügen Sie benutzerdefinierten HTML-Code zu Ihrem WordPress-Formular hinzu! :)
FAQs zum Hinzufügen von benutzerdefiniertem HTML zu Ihren WordPress-Formularen
Das Erlernen, wie man benutzerdefiniertes HTML zu seinen WordPress-Formularen hinzufügt, ist ein beliebtes Thema unter unseren Lesern. Hier sind Antworten auf einige häufige Fragen dazu:
Welche Arten von HTML-Code kann ich zu WPForms hinzufügen?
Sie können fast jedes Standard-HTML-Element zum HTML-Feld hinzufügen. Dazu gehören Überschriften, Absätze, Trennlinien, Bilder, eingebettete Videos, formatierte Textfelder, Links und sogar einfache HTML-Tabellen.
Sie können auch Inline-CSS verwenden, um diese Elemente genau so zu gestalten, wie Sie es möchten. Das HTML-Feld unterstützt die gängigsten HTML-Tags.
Beeinflusst benutzerdefiniertes HTML die Funktionalität der Formularübermittlung?
Nein, das Hinzufügen von HTML zu Ihrem Formular beeinträchtigt die Formularübermittlung überhaupt nicht. Das HTML-Feld dient ausschließlich der Anzeige und sammelt keine Daten, die mit dem Formular übermittelt werden.
Ihre regulären Formularfelder (wie Name, E-Mail, Nachricht) funktionieren weiterhin genau wie bisher. Das benutzerdefinierte HTML verbessert lediglich die visuelle Darstellung und das Benutzererlebnis, ohne die eigentliche Verarbeitungsfunktionalität des Formulars zu berühren.
Kann ich JavaScript im HTML-Feld verwenden?
Nein, JavaScript-Code wird aus Sicherheitsgründen automatisch aus dem HTML-Feld gefiltert. WPForms entfernt <script>-Tags und JavaScript-Ereignisbehandler, um Ihre Website vor potenziellen Sicherheitslücken zu schützen.
Wenn Sie interaktive Funktionalität benötigen, die über das hinausgeht, was HTML und CSS bieten können, sollten Sie die integrierten Funktionen von WPForms wie die bedingte Logik in Betracht ziehen, die dynamisches Formularverhalten ohne benutzerdefiniertes JavaScript erstellen kann.
Was ist der Unterschied zwischen dem HTML-Feld und dem Inhaltsfeld?
Das HTML-Feld ermöglicht es Ihnen, benutzerdefinierten HTML-Code mit voller Styling-Kontrolle hinzuzufügen, während das Inhaltsfeld für einfachen Textinhalt mit grundlegenden Formatierungsoptionen konzipiert ist. Das HTML-Feld bietet Ihnen deutlich mehr Flexibilität für benutzerdefinierte Designelemente.
Wenn Sie nur einfachen Text oder einfach formatierten Inhalt hinzufügen müssen, ist das Inhaltsfeld möglicherweise einfacher zu verwenden. Aber wenn Sie benutzerdefinierte Stile, eingebettete Medien oder komplexe Layouts wünschen, ist das HTML-Feld definitiv die richtige Wahl.
Gibt es eine Begrenzung für die Menge an HTML-Code, die ich hinzufügen kann?
Es gibt keine strenge Zeichenbegrenzung für das HTML-Feld, aber es ist eine gute Praxis, Ihren Code prägnant und fokussiert zu halten. Sehr große HTML-Mengen können die Ladezeit Ihres Formulars verlangsamen und die Verwaltung erschweren.
Ich empfehle, komplexe HTML-Strukturen bei Bedarf mithilfe mehrerer HTML-Felder in kleinere, logische Abschnitte zu unterteilen. Dies erleichtert die spätere Bearbeitung Ihres Formulars und trägt zur Gesamtleistung und Formularladezeit bei.
Als Nächstes: Erfahren Sie, wie Sie Ihre WordPress-Formulare gestalten
Nachdem Sie nun benutzerdefiniertes HTML zu Ihrem Formular hinzugefügt haben, sollten Sie sich unseren Leitfaden zum Gestalten von Kontaktformularen in WordPress ansehen, um sicherzustellen, dass Ihr benutzerdefinierter Code so aussieht, wie Sie es möchten.
Erstellen Sie jetzt Ihr WordPress-Formular
Bereit, Ihr Formular zu erstellen? Beginnen Sie noch heute mit dem einfachsten WordPress-Formularersteller-Plugin. WPForms Pro enthält viele kostenlose Vorlagen und bietet eine 14-tägige Geld-zurück-Garantie.
Wenn Ihnen dieser Artikel geholfen hat, folgen Sie uns bitte auf Facebook und Twitter für weitere kostenlose WordPress-Tutorials und Anleitungen.
