Verwendung des Rich-Text-Feldes

Möchten Sie den Benutzern die Möglichkeit geben, ihre Formulareingaben individuell zu gestalten? Das Rich-Text-Feld bietet Nutzern eine flexible Möglichkeit, Text und Bilder zu formatieren, bevor sie ihre Online-Formulare absenden.

Dieses Tutorial zeigt Ihnen alles, was Sie wissen müssen, um mit dem Rich-Text-Feld in WPForms zu beginnen.

---

Bevor Sie beginnen, müssen Sie zunächst sicherstellen, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz überprüft haben. Dann können Sie ein neues Formular erstellen oder ein bestehendes bearbeiten, um auf den Formularersteller zuzugreifen.

Hinzufügen eines Rich-Text-Feldes zu Ihrem Formular

Da es sich bei dem Rich-Text-Feld um eine erweiterte Funktion handelt, finden Sie es unter "Ausgefallene Felder" in der Formularerstellung.

Um das Rich-Text-Feld zu Ihrem Formular hinzuzufügen, klicken Sie darauf oder ziehen Sie es per Drag & Drop in den Vorschaubereich.

Als nächstes können Sie die Bezeichnung des Feldes ändern, indem Sie einen beliebigen Text in das Feld Bezeichnung eingeben.

Aktivieren der erweiterten Optionen

Um auf die erweiterten Optionen des Rich-Text-Feldes zuzugreifen, navigieren Sie zur Registerkarte Erweitert im Bereich Feldoptionen.

Als Nächstes gehen wir auf zwei der bemerkenswerten erweiterten Optionen ein: Feldstil und Feldgröße.

Feldstil

Für das Rich-Text-Feld gibt es zwei Stiloptionen, die Sie auswählen können: Basic und Full.

Basic Field Style

Das Feld Basic ist recht einfach gehalten, da es eine einfache Symbolleiste mit minimalen Funktionen enthält.

Hier finden Sie eine Liste der Optionen der Symbolleiste für den Stil Basic:

• Kühn
• Kursiv
• Unterstreichen Sie
• Durchgestrichen
• Aufzählungsliste
• Nummerierte Liste
• Blockquote
• Links ausrichten
• Zentrum ausrichten
• Rechts ausrichten
• Rückgängig machen
• Redo
• Link einfügen/bearbeiten

Vollfeld-Stil

Das Feldformat "Vollständig" enthält alles, was im Feldformat "Basis" verfügbar ist, und noch viel mehr. Um die zusätzlichen Optionen anzuzeigen, klicken Sie auf das Symbol " Symbolleiste umschalten".

Im Folgenden finden Sie eine Liste zusätzlicher Optionen, die verfügbar sind, wenn Sie den Feldstil Vollständig auswählen:

• Mehr lesen-Tag einfügen
• Horizontale Linie
• Textfarbe
• Als Text einfügen
• Klare Formatierung
• Besonderes Zeichen
• Einzug verkleinern
• Einzug vergrößern
• Tastaturkurzbefehle

Darüber hinaus können die Nutzer eine Reihe von Textformaten aus dem Dropdown-Menü in der oberen linken Ecke auswählen.

Feldgröße

Sie können zwischen drei Feldgrößen wählen: Klein, Mittel oder Groß. Jede unterschiedliche Feldgröße bestimmt die Höhe des Rich-Text-Feldes.

Um die Feldgröße für Ihr Rich-Text-Feld auszuwählen, klicken Sie auf das Dropdown-Menü mit der Bezeichnung Feldgröße.

Medien-Uploads zulassen

Das Rich-Text-Feld bietet den Benutzern die Möglichkeit, Bilddateien hochzuladen. Hier finden Sie eine Liste aller Bildtypen, die über das Rich-Text-Feld hochgeladen werden können:

• .jpg, .jpeg, .jpe
• .gif
• .png
• .bmp
• .tiff, .tif
• .webp
• .ico
• .heic

Um diese Option zu aktivieren, navigieren Sie zur Registerkarte Allgemein im Bereich Feldoptionen. Wählen Sie dann Medien-Uploads zulassen.

Nach der Aktivierung wird in der Symbolleiste des Rich-Text-Feldes ein Mediensymbol angezeigt. Wenn Sie auf dieses Symbol klicken, können die Benutzer ihre Bilddateien hochladen.

Hier sehen Sie, wie unser Rich-Text-Feld mit einem hochgeladenen Bild aussehen könnte:

Standardmäßig werden vom Benutzer hochgeladene Dateien im Uploads-Verzeichnis Ihrer Website innerhalb des WPForms-Ordners gespeichert.

Wenn Sie es jedoch vorziehen, die hochgeladenen Dateien automatisch in der WordPress-Medienbibliothek zu speichern, wählen Sie Dateien in der WordPress-Medienbibliothek speichern.

Verwendung des Rich-Text-Feldes

Bei der Interaktion mit dem Rich-Text-Feld auf dem Frontend Ihrer Website können die Nutzer zwischen zwei verschiedenen Modi wählen:

• Visuell: Bilder und Texte werden direkt im Texteditor angezeigt.
• Text: Bilder und Text werden in HTML angezeigt.

Standardmäßig wird das Rich Text-Feld im visuellen Modus gestartet. Sie können jedoch zwischen den verschiedenen Modi wechseln, indem Sie die Registerkarte " Visuell" oder " Text" in der oberen rechten Ecke auswählen.

Fügen wir nun etwas Text in das Rich-Text-Feld ein, damit wir den Unterschied zwischen den beiden Modi sehen können.

Zunächst fügen wir eine Überschrift hinzu, indem wir auf das Dropdown-Menü in der oberen linken Ecke klicken und Überschrift 3 auswählen.

Dann geben wir etwas Text über unserem Bild ein.

Um nun zu sehen, wie unser Inhalt im Textmodus aussieht, klicken Sie auf die Registerkarte Text. Hier sehen Sie den Inhalt in HTML dargestellt.

Externe Dateien einbetten

Wenn Sie unser Post Submission Addon verwenden, können Sie den Nutzern erlauben, externe Dateien wie YouTube-Videos, Spotify-Podcasts usw. einzubetten, wenn sie ihre Beiträge einreichen.

Zum Beispiel kann ein Benutzer den iframe-Einbettungscode von YouTube verwenden, um ein Video in das Rich-Text-Feld einzubetten. Technisch gesehen würde dies das in das Rich-Text-Feld eingebettete Video anzeigen.

Allerdings wird WPForms sanitize und bereinigen Sie den Code einbetten, nachdem der Benutzer das Formular absendet. Wir implementieren diese Sicherheitsmaßnahme, um unsere Benutzer vor Angreifern zu schützen, die Code verwenden, um Schwachstellen der Website auszunutzen.

Wenn Sie Videos in Beiträge einbetten möchten, die über das Post Submission Addon eingereicht wurden, fügen Sie den Videolink einfach direkt in das Rich Text Feld ein. WordPress kümmert sich um das Hinzufügen des Einbettungscodes und die Anzeige der eingebetteten Datei in Ihrem Frontend mit oEmbeds.

Das war's! Jetzt haben Sie einige Ideen, wie Sie das Rich Text Feld in WPForms verwenden können.

Möchten Sie, dass Ihre Besucher Inhalte auf Ihrer Website veröffentlichen können, ohne auf Ihr WordPress-Dashboard zuzugreifen? Sehen Sie sich unsere Anleitung zur Installation und Verwendung des Post Submissions Addons an.