Utilisation du champ Texte enrichi

Souhaitez-vous permettre aux utilisateurs de personnaliser leurs soumissions de formulaire ? Le champ Texte enrichi offre un moyen flexible aux utilisateurs de formater du texte et des images avant de soumettre leurs formulaires en ligne.

Ce tutoriel vous montrera tout ce que vous devez savoir pour commencer avec le champ Texte enrichi dans WPForms.

---

Avant de commencer, vous devrez d'abord vous assurer que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence. Ensuite, vous pouvez créer un nouveau formulaire ou modifier un formulaire existant pour accéder au générateur de formulaires.

Ajouter un champ Texte enrichi à votre formulaire

Étant donné que le champ Texte enrichi est une fonctionnalité avancée, vous le trouverez sous Champs fantaisistes dans le constructeur de formulaires.

Pour ajouter le champ Texte enrichi à votre formulaire, cliquez dessus ou faites-le glisser dans la zone d'aperçu.

Ensuite, n'hésitez pas à modifier l'étiquette du champ en saisissant le texte de votre choix dans le champ Étiquette.

Activer les options avancées

Pour accéder aux options avancées du champ Texte enrichi, accédez à l'onglet Avancé dans le panneau Options du champ.

Ensuite, nous allons passer en revue deux des options avancées les plus notables : Style de champ et Taille de champ.

Style du champ

Le champ Texte enrichi comprend deux options de style parmi lesquelles vous pouvez choisir : De base et Complet.

Style de champ de base

Le style de champ de base est assez simple, car il comprend une barre d'outils simple avec des fonctionnalités minimales.

Voici une liste des options de la barre d'outils pour le style De base :

• Gras
• Italique
• Souligner
• Barré
• Liste à puces
• Liste numérotée
• Citation
• Aligner à gauche
• Centrer
• Aligner à droite
• Annuler
• Rétablir
• Insérer/modifier un lien

Style de champ complet

Le style de champ complet comprend tout ce qui est disponible avec le style de champ de base, et bien plus encore. Pour afficher les options supplémentaires, cliquez sur l'icône Basculer la barre d'outils.

Voici une liste des options supplémentaires qui deviennent disponibles lorsque vous sélectionnez le style de champ Complet :

• Insérer la balise Lire la suite
• Ligne horizontale
• Couleur du texte
• Coller comme texte
• Supprimer la mise en forme
• Caractère spécial
• Diminuer le retrait
• Augmenter le retrait
• Raccourcis clavier

De plus, les utilisateurs pourront sélectionner une gamme de formats de texte dans le menu déroulant situé en haut à gauche.

Taille du champ

Il existe trois tailles de champ parmi lesquelles vous pouvez choisir : Petit, Moyen ou Grand. Chaque taille de champ différente déterminera la hauteur du champ Texte enrichi.

Pour choisir la taille du champ pour votre champ Texte enrichi, cliquez sur le menu déroulant intitulé Taille du champ.

Autoriser les téléchargements de médias

Le champ Texte enrichi offre la possibilité aux utilisateurs de télécharger des fichiers image. Voici une liste de tous les types d'images pouvant être téléchargés via le champ Texte enrichi :

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

Pour activer cette option, accédez à l'onglet Général dans le panneau Options du champ. Sélectionnez ensuite Autoriser les téléchargements de médias.

Une fois activé, vous verrez maintenant une icône de média apparaître dans la barre d'outils du champ Texte enrichi. En cliquant sur cette icône, les utilisateurs peuvent télécharger leurs fichiers image.

Voici à quoi pourrait ressembler notre champ Texte enrichi avec une image téléchargée :

Par défaut, les fichiers téléchargés par les utilisateurs sont stockés dans le répertoire Téléchargements de votre site, à l'intérieur du dossier WPForms.

Cependant, si vous préférez stocker automatiquement les fichiers téléchargés dans la médiathèque WordPress, sélectionnez Stocker les fichiers dans la médiathèque WordPress.

Utilisation du champ Texte enrichi

Lors de l'interaction avec le champ Texte enrichi sur le frontend de votre site, les utilisateurs pourront basculer entre deux modes différents :

• Visuel : Les images et le texte seront affichés directement dans l'éditeur de texte.
• Texte : Les images et le texte seront affichés en HTML.

Par défaut, le champ Texte enrichi démarrera en mode Visuel. Cependant, vous pouvez basculer entre les différents modes en sélectionnant l'onglet Visuel ou Texte en haut à droite.

Maintenant, ajoutons du texte au champ Texte enrichi afin que nous puissions voir la différence entre les deux modes.

Tout d'abord, nous ajouterons un titre en cliquant sur le menu déroulant en haut à gauche et en sélectionnant Titre 3.

Ensuite, nous taperons du texte au-dessus de notre image.

Maintenant, pour voir à quoi ressemble notre contenu en mode Texte, cliquez sur l'onglet Texte. Vous verrez ici le contenu affiché en HTML.

Intégrer des fichiers externes

Si vous utilisez notre module complémentaire de soumission de publication, vous voudrez peut-être permettre aux utilisateurs d'intégrer des fichiers externes, tels que des vidéos YouTube, des podcasts Spotify, etc., lors de la soumission de leurs publications.

Par exemple, un utilisateur peut utiliser le code d'intégration iframe de YouTube pour intégrer une vidéo dans le champ Texte enrichi. Techniquement, cela afficherait la vidéo intégrée dans le champ Texte enrichi.

Cependant, WPForms nettoie et assainit le code d'intégration une fois que l'utilisateur a soumis le formulaire. Nous mettons en œuvre cette mesure de sécurité pour protéger nos utilisateurs contre les attaquants qui utiliseraient du code pour exploiter les failles des sites web.

Si vous souhaitez intégrer des vidéos dans des articles soumis via le module complémentaire Post Submission, collez simplement le lien de la vidéo directement dans le champ Texte enrichi. WordPress se charge d'ajouter le code d'intégration et d'afficher le fichier intégré sur votre site frontend à l'aide d'oEmbeds.

Et voilà ! Vous avez maintenant quelques idées sur la façon d'utiliser le champ Texte enrichi dans WPForms.

Ensuite, souhaitez-vous que vos visiteurs puissent publier du contenu sur votre site sans accéder à votre tableau de bord WordPress ? Assurez-vous de consulter notre guide sur comment installer et utiliser le module complémentaire Post Submissions.