KI-Zusammenfassung
Möchten Sie benutzerdefinierte HTML-Code-Snippets zu Ihren WordPress-Kontaktformularen hinzufügen? Das Hinzufügen von benutzerdefiniertem HTML zu Ihrem Formular ist eine großartige Möglichkeit, kreativ zu werden und Ihre Formulare zu verbessern.
Der schnellste Weg, dies zu tun, ist mit dem HTML-Feld in WPForms. Sie fügen das Feld zu Ihrem Formular hinzu, fügen Ihren Code ein und klicken auf Speichern. Sie müssen Ihre Theme-Dateien nicht bearbeiten oder ein separates Plugin installieren.
In diesem Tutorial zeige ich Ihnen, wie Sie WPForms installieren, ein Formular erstellen, einen HTML-Block hinzufügen und Ihren eigenen Code einfügen. Ich werde auch einige Copy-and-Paste-HTML-Snippets teilen, die Sie sofort verwenden können.
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
- Schritt 2: Formular erstellen und grundlegende Felder hinzufügen
- Schritt 3: HTML-Block zu Ihrem Formular hinzufügen
- Schritt 4: Benutzerdefinierten HTML-Code einfügen
- Schritt 5: Ihr benutzerdefiniertes HTML-Formular live schalten
- HTML-Codebeispiele zum Kopieren und Einfügen
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! :)
HTML-Codebeispiele zum Kopieren und Einfügen
Hier sind einige meiner bevorzugten Ideen, zusammen mit dem tatsächlichen Code, den Sie direkt in das HTML-Feld einfügen können. Jeder verwendet reines HTML und Inline-CSS, sodass nichts extra installiert werden muss.
Der Ausschnitt, den ich am häufigsten verwende, ist eine einfache Zeile für die Datenschutzerklärung. Sie fügt eine kurze Notiz mit einem Link hinzu, die Ihr Kontaktformular DSGVO-konform macht.
<p style="font-size: 14px; color: #666666;">
By submitting this form, you agree to our
<a href="https://example.com/privacy-policy/">Privacy Policy</a>.
</p>Wenn Sie lieber eine formelle Zustimmung einholen möchten, können Sie stattdessen ein DSGVO-Zustimmungsfeld hinzufügen.
Um Ihr Formular ansprechender zu gestalten, können Sie ein YouTube-Video direkt darin einbetten. Ersetzen Sie VIDEO_ID durch die ID in der URL Ihres Videos, und es wird im Formular angezeigt.
<iframe width="100%" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video" frameborder="0" allowfullscreen>
</iframe>Auf einer Kontaktseite hilft eine eingebettete Google Map den Leuten, Ihr Unternehmen persönlich zu finden. Holen Sie sich den Einbettungslink von Google Maps über die Option Teilen und dann Karte einbetten und fügen Sie ihn anstelle von IHREM_EINBETTUNGSCODE ein.
<iframe
src="https://www.google.com/maps/embed?pb=YOUR_EMBED_CODE"
width="100%" height="300" style="border: 0;"
loading="lazy" allowfullscreen>
</iframe>Führen Sie ein Bestellformular? Eine stilisierte Box ist eine gute Möglichkeit, einen Rabatt oder ein zeitlich begrenztes Angebot hervorzuheben. Sie können es sogar mit bedingter Logik kombinieren, sodass es nur angezeigt wird, wenn jemand eine bestimmte Option auswählt.
<div style="background: #f0f7ff; border: 1px solid #cce0ff; padding: 16px; border-radius: 6px;">
<strong>Limited-time offer:</strong> Use code SAVE10 at checkout for 10% off your order.
</div>Bei längeren Formularen erleichtern eine Überschrift und ein Trennzeichen das Gruppieren zusammengehöriger Felder in klare Abschnitte.
<h3 style="margin-top: 24px;">Shipping Details</h3>
<hr style="border: 0; border-top: 1px solid #e0e0e0;">Und wenn Sie einen Call-to-Action-Button wünschen, der zu Ihrem Branding passt, können Sie einen Link so gestalten, dass er wie ein Button aussieht, ohne Ihr Theme zu berühren.
<a href="https://example.com/"
style="display: inline-block; background: #e27730; color: #ffffff; padding: 10px 18px; border-radius: 4px; text-decoration: none;">
Learn More
</a>FAQs zum Hinzufügen von benutzerdefiniertem HTML zu Ihren WordPress-Formularen
Das Hinzufügen von benutzerdefiniertem HTML-Code zu einem WordPress-Kontaktformular wirft einige häufige Fragen auf. Hier sind die Antworten, die mir am häufigsten gestellt werden.
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 Stilkontrolle hinzuzufügen, während das Inhaltsfeld für einfache Textinhalte 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 in kleinere, logische Abschnitte zu unterteilen, indem mehrere HTML-Felder verwendet werden. Dies erleichtert die spätere Bearbeitung Ihres Formulars und trägt zur Gesamtleistung und Formularladegeschwindigkeit bei.
Kann ich ein WordPress-Kontaktformular nur mit HTML-Code erstellen?
Sie können ein Kontaktformular in reinem HTML von Hand erstellen, aber es wird von selbst keine Übermittlungen senden oder speichern. HTML kümmert sich nur um das Layout, sodass Sie immer noch PHP oder einen Formularverarbeitungsdienst benötigen, um zu verarbeiten, was die Leute übermitteln. Deshalb verwenden die meisten Leute einen Formularersteller, um die Übermittlungen zu verarbeiten, und fügen dann benutzerdefiniertes HTML für die Design-Akzente hinzu.
Wie füge ich HTML-Code zu einem Kontaktformular ohne Plugin hinzu?
Ohne ein Plugin würden Sie den HTML-Code Ihres Formulars direkt mit dem WordPress Custom HTML-Block auf einer Seite einfügen und dann PHP schreiben, um die Übermittlung zu verarbeiten und Ihnen per E-Mail zuzusenden. Es funktioniert, ist aber technischer und Sie sind selbst für den Spam-Schutz und die Validierung verantwortlich. Das HTML-Feld in einem Formular-Plugin gibt Ihnen die gleiche kreative Kontrolle über Ihr Markup, während es die sichere Übermittlungsseite für Sie übernimmt.
Muss ich programmieren können, um das HTML-Feld zu verwenden?
Das HTML-Feld erfordert keine wirklichen Programmierkenntnisse. Wenn Sie kopieren und einfügen können, können Sie es verwenden, und die Beispiele weiter oben in dieser Anleitung sind sofort einsatzbereit, sobald Sie den Platzhaltertext durch Ihren eigenen ersetzt haben. Grundlegendes HTML und ein wenig Inline-CSS decken die meisten Ihrer Wünsche ab.
Funktioniert das HTML-Feld in der kostenlosen Version von WPForms?
Das HTML-Feld ist Teil der Fancy Fields-Sammlung, daher benötigen Sie mindestens den Basic-Plan, um es nutzen zu können. Die kostenlose WPForms Lite-Version deckt Standardfelder wie Name, E-Mail und Nachricht ab, was für ein einfaches Kontaktformular ausreichend ist. Sobald Sie benutzerdefiniertes HTML, Bild-Dropdowns oder Datei-Uploads wünschen, kommt ein kostenpflichtiger Plan ins Spiel.
Kann ich das gleiche HTML zu mehreren WordPress-Formularen hinzufügen?
Ja, aber das HTML-Feld wird pro Formular hinzugefügt, sodass es keine globale Einstellung gibt, die es überall anwendet. Der einfachste Ansatz ist, Ihren Snippet an einem praktischen Ort zu speichern und ihn in das HTML-Feld jedes Formulars einzufügen, das ihn benötigt. Wenn Sie denselben Block häufig wiederverwenden, spart die Aufbewahrung einer kleinen Textdatei mit Ihren bevorzugten Snippets Zeit.
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.
