Verwendung des HTML-Felds

Möchten Sie benutzerdefiniertes HTML in Ihre Formulare einbauen? Das HTML-Feld in WPForms ermöglicht Ihnen dies. Dies kann nützlich sein, um Text, Links und andere Elemente zu Ihren Formularen hinzuzufügen.

Dieses Tutorial zeigt Ihnen alle verfügbaren Optionen für das HTML-Feld in WPForms sowie einige Anwendungsfälle dafür.

---

Stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Dann können Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, um auf den Formular-Generator zuzugreifen.

Hinzufügen eines HTML-Felds zu Ihrem Formular

Da das HTML-Feld eine erweiterte Funktion ist, finden Sie es im Formular-Generator unter Erweiterte Felder.

Um es zu Ihrem Formular hinzuzufügen, klicken Sie darauf oder ziehen Sie es per Drag & Drop in den Vorschau-Bereich.

Abgesehen vom Hinzufügen Ihres HTMLs ist die einzige Feldoption, die Sie konfigurieren müssen, die Beschriftung. Sie können beliebigen Text in das bereitgestellte Feld eingeben.

Im Gegensatz zu anderen Feldern ist die Beschriftung des HTML-Felds nur im Formular-Generator sichtbar, um Ihnen bei der Identifizierung im Vorschau-Bereich zu helfen. Benutzer sehen sie nicht im Frontend, und das Feld wird nicht in den Einträgen Ihres Formulars enthalten sein.

Verwendung des HTML-Felds

Die Grundlagen der Verwendung des HTML-Felds sind recht einfach. Geben Sie einfach Ihren Text oder Ihr HTML in das Feld im Bereich Feldoptionen ein.

Es gibt jedoch viele verschiedene Anwendungsfälle für dieses Feld. Es ist sehr flexibel und Sie können es an viele verschiedene Situationen anpassen.

Nachfolgend haben wir einige der beliebtesten Anwendungsfälle detaillierter behandelt.

Hinzufügen von formatiertem Text zu einem Formular

HTML-Felder sind eine von vielen Möglichkeiten, zusätzlichen Text zu Ihren Formularen hinzuzufügen, z. B. Anweisungen zum Ausfüllen oder wichtige Informationen, die Benutzer sehen sollen, bevor sie ihre Einträge absenden.

Das HTML-Feld ist jedoch einzigartig, da es Ihnen ermöglicht, formatierten Text wie fettgedruckten oder kursiven Text einzufügen. Sie können die entsprechenden HTML-Tags direkt in das Feld Code im Bereich Feldoptionen einfügen.

Im Frontend würde das obige Beispiel so aussehen:

Zusätzlich können Sie HTML-Tags verwenden, um Überschriften, Listen und mehr zu dem zusätzlichen Text in Ihren Formularen hinzuzufügen.

Hinzufügen von Links zu einem Formular

Das HTML-Feld ermöglicht es Ihnen auch, Links zu Ihrem Formular hinzuzufügen. Dies kann nützlich sein, wenn Sie Benutzern den schnellen Zugriff auf eine andere Seite ermöglichen möchten, während sie Ihr Formular ausfüllen.

Um einen Link zu Ihrem HTML-Feld hinzuzufügen, müssen Sie das <a>-Tag verwenden. Fügen Sie zuerst öffnende und schließende Tags um den Text hinzu, den Sie als Anker für Ihren Link verwenden möchten.

Fügen Sie dann im öffnenden Tag das href-Attribut hinzu und setzen Sie es auf die URL, zu der Sie verlinken möchten.

Im Frontend wird dies als klickbarer Link in Ihrem Formular angezeigt.

Einbetten eines Bildes in ein Formular

Sie können auch <img>-Elemente verwenden, um Bilder zu Ihrem Formular hinzuzufügen. Fügen Sie dazu <img> zum Feld Code im Bereich Feldoptionen hinzu.

Dann müssen Sie die src oder Quell-URL des Bildes hinzufügen. Wenn das Bild, das Sie zu Ihrem Formular hinzufügen, in Ihrer WordPress-Mediathek vorhanden ist, können Sie dessen URL finden, indem Sie sich die Anhangsdetails ansehen.

Die Dateiupload-URL befindet sich am unteren Rand des Fensters, und Sie können auf die Schaltfläche klicken, um sie in Ihre Zwischenablage zu kopieren.

Fügen Sie es dann zum <img>-Element in Ihrem HTML-Feld hinzu.

Sie können auch HTML-Attribute verwenden, um die Größe Ihres Bildes zu ändern und ihm einen Alternativtext hinzuzufügen. Im Frontend könnte es ungefähr so aussehen:

Einbetten eines Videos in ein Formular

Der letzte Anwendungsfall, den wir in diesem Artikel behandeln, ist das Einbetten eines Videos in ein Formular. Um dies zu erreichen, müssen Sie ein HTML-Element namens <iframe> verwenden.

Fügen Sie zuerst das <iframe></iframe>-Element zum Feld Code im Bereich Feldoptionen hinzu.

Dann müssen Sie die src für das Video hinzufügen, das Sie einbetten möchten. Wenn Sie das Video, das Sie verwenden, in Ihre WordPress-Mediathek hochgeladen haben, können Sie die Dateiupload-URL wie im vorherigen Abschnitt beschrieben finden.

Für YouTube-Videos können Sie auf Teilen » Einbetten klicken, um den gesamten iframe zu kopieren und in Ihr HTML-Feld einzufügen.

Sobald Sie Ihre src zu Ihrem HTML-Feld hinzugefügt haben, können Sie HTML-Attribute verwenden, um die Größe des iframes und mehr zu ändern. Im Frontend könnte es ungefähr so aussehen:

Häufig gestellte Fragen

Dies sind einige der häufigsten Fragen, die wir zum HTML-Feld erhalten.

Kann ich Smart Tags in den HTML-Feldern meiner Formulare verwenden?

Ja, obwohl Smart Tags eine dynamische Möglichkeit sind, Daten innerhalb Ihres Formulars abzurufen und anzuzeigen, werden sie in HTML-Feldern standardmäßig nicht verarbeitet. Mit einem kleinen PHP-Snippet können Sie Smart Tags jedoch in diesen Feldern aktivieren.

Ausführliche Anweisungen zur Implementierung dieser Funktionalität finden Sie in unserer Entwicklerdokumentation.

Das ist alles! Jetzt haben Sie einige Ideen zur Verwendung des HTML-Feldes in WPForms.

Als Nächstes möchten Sie vielleicht erfahren, wie Sie benutzerdefiniertes CSS zu Ihren Formularen hinzufügen? Unser Anfänger-Tutorial enthält alles, was Sie für den Einstieg benötigen.