Verwendung des Rich-Text-Felds

Möchten Sie Benutzern erlauben, ihre Formularübermittlungen anzupassen? Das Rich-Text-Feld bietet Benutzern eine flexible Möglichkeit, Text und Bilder zu formatieren, bevor sie ihre Online-Formulare übermitteln.

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

---

Bevor Sie beginnen, stellen Sie sicher, dass WPForms auf Ihrer WordPress-Website installiert und aktiviert ist und dass Sie Ihre Lizenz verifiziert haben. Anschließend können Sie ein neues Formular erstellen oder ein vorhandenes bearbeiten, um auf den Formular-Generator zuzugreifen.

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

Da das Rich-Text-Feld eine erweiterte Funktion ist, finden Sie es im Formular-Generator unter Fancy Fields.

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

Ändern Sie anschließend gerne die Bezeichnung des Felds, indem Sie im Feld Bezeichnung den gewünschten Text eingeben.

Aktivieren von erweiterten Optionen

Um auf die erweiterten Optionen des Rich-Text-Felds zuzugreifen, navigieren Sie zum Tab Erweitert im Bereich Feldoptionen.

Als Nächstes werden wir zwei der bemerkenswertesten erweiterten Optionen besprechen: Feldstil und Feldgröße.

Feldstil

Das Rich-Text-Feld enthält zwei Stiloptionen, aus denen Sie wählen können: Einfach und Vollständig.

Einfacher Feldstil

Der einfache Feldstil ist ziemlich unkompliziert, da er eine einfache Symbolleiste mit minimalen Funktionen enthält.

Hier ist eine Liste der Symbolleistenoptionen für den einfachen Stil:

• Fett
• Kursiv
• Unterstreichen
• Durchgestrichen
• Aufzählungsliste
• Nummerierte Liste
• Blockquote
• Links ausrichten
• Zentriert ausrichten
• Rechts ausrichten
• Rückgängig machen
• Wiederholen
• Link einfügen/bearbeiten

Vollständiger Feldstil

Der vollständige Feldstil enthält alles, was mit dem einfachen Feldstil verfügbar ist, und noch viel mehr. Um die zusätzlichen Optionen anzuzeigen, klicken Sie auf das Symbol Toolbar Toggle.

Hier ist eine Liste zusätzlicher Optionen, die verfügbar werden, wenn Sie den vollständigen Feldstil auswählen:

• Read More-Tag einfügen
• Horizontale Linie
• Textfarbe
• Als Text einfügen
• Formatierung löschen
• Sonderzeichen
• Einzug verringern
• Einzug vergrößern
• Tastenkombinationen

Zusätzlich können Benutzer eine Reihe von Textformaten aus dem Dropdown-Menü in der oberen linken Ecke auswählen.

Feldgröße

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

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 die Möglichkeit für Benutzer, Bilddateien hochzuladen. Hier ist 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.

Sobald diese Option aktiviert ist, sehen Sie nun ein Medienschaltfläche in der Symbolleiste des Rich-Text-Felds. Durch Klicken auf diese Schaltfläche können Benutzer ihre Bilddateien hochladen.

So könnte unser Rich-Text-Feld mit einem hochgeladenen Bild aussehen:

Standardmäßig werden von Benutzern hochgeladene Dateien im Upload-Verzeichnis Ihrer Website im WPForms-Ordner gespeichert.

Wenn Sie jedoch möchten, dass die hochgeladenen Dateien automatisch in der WordPress-Mediathek gespeichert werden, wählen Sie Dateien in der WordPress-Mediathek speichern.

Verwendung des Rich-Text-Felds

Bei der Interaktion mit dem Rich-Text-Feld im Frontend Ihrer Website können Benutzer zwischen zwei verschiedenen Modi wechseln:

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

Standardmäßig startet das Rich-Text-Feld im visuellen Modus. Sie können jedoch zwischen den verschiedenen Modi wechseln, indem Sie oben rechts die Registerkarte Visuell oder Text auswählen.

Fügen wir nun Text zum Rich-Text-Feld hinzu, damit wir den Unterschied zwischen den beiden Modi sehen können.

Zuerst 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 zu sehen, wie unsere Inhalte im Textmodus aussehen, klicken Sie auf die Registerkarte Text. Hier sehen Sie die Inhalte in HTML angezeigt.

Einbetten externer Dateien

Wenn Sie unser Addon für die Beitragsübermittlung verwenden, möchten Sie möglicherweise Benutzern erlauben, externe Dateien wie YouTube-Videos, Spotify-Podcasts usw. einzubetten, wenn sie ihre Beiträge übermitteln.

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 Video im Rich-Text-Feld eingebettet anzeigen.

WPForms bereinigt und entfernt den Einbettungscode jedoch, nachdem der Benutzer das Formular übermittelt hat. Wir implementieren diese Sicherheitsmaßnahme, um unsere Benutzer vor Angreifern zu schützen, die Code verwenden, um Schwachstellen von Websites auszunutzen.

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

Das ist alles! Jetzt haben Sie einige Ideen, wie Sie das Rich-Text-Feld in WPForms verwenden können.

Möchten Sie als Nächstes, dass Ihre Besucher Inhalte auf Ihrer Website veröffentlichen können, ohne auf Ihr WordPress-Dashboard zuzugreifen? Lesen Sie unbedingt unseren Leitfaden zur Installation und Verwendung des Post Submissions Addons.