Comment ajouter un champ WYSIWYG dans un formulaire d'inscription WordPress ?

Vous voulez savoir comment ajouter un champ WYSIWYG dans un formulaire d'inscription WordPress ? Nous allons vous montrer comment !

WYSIWYG (prononcé wiz-ee-wig) est un acronyme pour « What You See Is What You Get ».

En termes simples, il s'agit d'un système d'édition qui permet d'éditer le contenu dans la même interface telle qu'elle apparaîtrait aux utilisateurs finaux.

L'ajout d'un champ WYSIWYG dans les formulaires d'inscription est une excellente idée si vous souhaitez collecter du contenu bien formaté auprès de vos utilisateurs. Il leur permet d'éditer et de styliser du texte et du multimédia dans une seule zone et de les soumettre.

Donc, si vous souhaitez inclure un champ WYSIWYG dans votre formulaire d'inscription WordPress, restez avec nous jusqu'à la fin. Nous allons montrer comment vous pouvez en ajouter un à l'aide de ce tutoriel.

Qu'est-ce qu'un champ WYSIWYG ? Quels sont les avantages de l'ajouter à votre formulaire ?

Nous avons déjà discuté brièvement de ce qu'est le champ WYSIWYG. C'est un champ de formulaire qui permet aux utilisateurs de saisir et de formater du texte à l'aide d'un éditeur visuel similaire à un traitement de texte.

Un éditeur WYSIWYG dans un site Web peut être l'éditeur de texte utilisé lors de la création d'un article/d'une page de blog dans WordPress. Par exemple, l'éditeur classique sur WordPress.

L'éditeur permet aux utilisateurs de formater du texte et d'ajouter visuellement des images et d'autres éléments multimédias.

Ainsi, lorsque les utilisateurs saisissent du texte ou des images dans un champ WYSIWYG, ils peuvent voir le texte formaté en temps réel.

Maintenant, vous vous demandez peut-être en quoi un champ WYSIWYG dans un formulaire d'inscription d'utilisateur peut être utile.

Voici quelques avantages clés :

• En tant que propriétaire de site Web, vous pouvez collecter du contenu préformaté auprès des utilisateurs. Par exemple, les biographies des utilisateurs peuvent être collectées.
• Il permet à vos utilisateurs d'accéder à des images, des listes, des liens, etc., en un seul endroit sans codage. Par conséquent, ils peuvent soumettre librement leurs idées.
• Il rend le formulaire WordPress accessible à plusieurs utilisateurs ayant différents niveaux d'expertise technique.

Quelle est la meilleure façon d'ajouter un champ WYSIWYG dans les formulaires d'inscription WordPress ?

Maintenant, vous n'avez besoin que d'un plugin pour vous aider dans la tâche. Pour cela, nous vous suggérons le plugin d'enregistrement WordPress ultime, User Registration.

Ce plugin incroyable vous permet de créer de nombreux magnifiques formulaires d'inscription personnalisés sans tracas.

De même, vous pouvez ajouter divers champs dans votre formulaire, y compris le champ WYSIWYG. Tout ce dont vous avez besoin est l'extension Advanced Fields, et vous êtes prêt.

Le champ WYSIWYG du plugin User Registration permet à vos utilisateurs de basculer entre deux modes :

• Visuel : Les images et les textes sont affichés dans un éditeur de texte.

• Texte : Les images et les textes sont affichés au format HTML.

Ensuite, vous verrez la liste des options de la barre d'outils que vous trouverez sous le mode visuel.

• Paragraphe
• Gras
• Italique
• Liste à puces
• Liste numérotée
• Citation en bloc
• Aligner à droite
• Aligner le centre
• Alignez à gauche
• Insérer/modifier le lien
• Insérer la balise Lire la suite
• Plein écran
• Bascule de la barre d'outils

De même, vous pouvez obtenir plus d'options à partir de l'icône de basculement de la barre d'outils comme Barré , Ligne horizontale , Couleur du texte , Coller comme texte , Effacer la mise en forme , Caractère spécial , Diminuer le retrait et Augmenter le retrait .

Maintenant, sans plus tarder, plongeons directement dans le contenu.

Comment ajouter un champ WYSIWYG dans un formulaire d'inscription WordPress ?

Un bon outil comme l'enregistrement des utilisateurs est explicite et très facile à utiliser. Mais passer par ce tutoriel est sage pour assurer une solide compréhension.

Étape 1 : Installez et activez User Registration Pro

Vous pouvez facilement créer des formulaires simples avec la version gratuite du plugin. Cependant, le champ WYSIWYG relève de la section Champs avancés .

Et pour déverrouiller ce champ, vous aurez besoin du module complémentaire Advanced Fields , qui n'est fourni qu'avec le plan premium du plugin.

Visitez simplement le site officiel du plugin, achetez un plan qui vous convient et vous êtes prêt.

Après cela, vous recevrez un lien vers votre e-mail. Suivez le lien et accédez au tableau de bord de votre compte.

À partir de là, vous pouvez télécharger la version pro du plugin et obtenir la clé de licence sous l'onglet Clé de licence .

Ensuite, revenez à votre tableau de bord WordPress et accédez à Plugins >> Ajouter un nouveau . Et cliquez simplement sur le bouton Upload Plugin .

Ensuite, choisissez le fichier zip User Registration Pro que vous avez téléchargé auparavant et cliquez sur Installer maintenant .

Maintenant, collez la clé de licence dans la zone requise et activez le plugin sur votre site.

Si vous avez besoin de l'ensemble du processus d'installation et de configuration en détail, suivez ce lien pour savoir comment installer User Registration pro.

Une fois la configuration réussie, vous pouvez passer à l'étape suivante.

Étape 2 : Installer le module complémentaire Advanced Fields

Après avoir acheté le plan premium, vous pouvez facilement accéder au module complémentaire Advanced Fields .

Accédez à Enregistrement de l'utilisateur >> Extensions et recherchez les champs avancés .

Ensuite, cliquez sur le bouton Installer le module complémentaire et appuyez sur Activer séquentiellement. Et juste comme ça, vous avez votre add-on Advanced Fields .

Étape 3 : créer un nouveau formulaire

Maintenant, la prochaine étape consiste à créer un nouveau formulaire. Dans votre tableau de bord, accédez à Enregistrement de l'utilisateur >> Ajouter un nouveau .

Ici, vous verrez des tonnes de modèles créés gratuitement et une option pour créer votre formulaire.

Alors, cliquez sur Démarrer à partir de zéro pour démarrer le formulaire depuis le début, ou sélectionnez le modèle prédéfini pour gagner du temps.

Pour ce didacticiel, créons un formulaire d'inscription de conférencier à partir de zéro.

Vous serez invité à nommer votre formulaire immédiatement après avoir fait cela. Alors, entrez le nom du formulaire approprié et appuyez sur Continuer .

Étape 4 : Ajouter un champ WYSIWYG sur votre formulaire

Voici l'étape la plus cruciale, l'ajout d'un champ WYSIWYG sur votre formulaire.

Alors, ajoutez tous les champs nécessaires sur votre formulaire.

Pour ajouter un champ WYSIWYG , faites-le glisser depuis les champs avancés à droite et déposez-le dans le canevas du générateur de formulaires à gauche.

Vous pouvez ajouter autant de champs que vous le souhaitez en suivant le même processus.

Après avoir sélectionné le champ, les options de champs apparaîtront. Vous pouvez personnaliser chaque champ de formulaire à partir de cette section.

Vous pouvez apporter des modifications dans les options de champ, comme expliqué ci-dessous.

• Libellé : Donnez un titre adapté à votre champ. Comme les notes, la demande, etc.
• Description : Ajoutez la description que vous souhaitez inclure dans votre formulaire.
• Nom du champ : Cette zone contient l'identifiant du champ. Vous pouvez le laisser tel quel ou le modifier selon vos préférences.
• Requis : Vous pouvez marquer le champ WYSIWYG requis simplement à partir du menu déroulant.
• Masquer l'étiquette : vous pouvez également masquer l'étiquette du champ dans la liste déroulante. Sélectionnez simplement Oui ou Non.
• Activer l'info-bulle : activez l'info-bulle pour afficher des informations sur le champ aux utilisateurs.

De même, personnalisez les options de champ pour le reste des champs.

Remarque : La plupart des champs de formulaire ont des options de champ similaires. Cependant, certaines options peuvent légèrement différer selon le domaine. Alors, personnalisez en conséquence.

Après avoir effectué toutes les modifications, vous pouvez enregistrer le formulaire en cliquant sur Mettre à jour le formulaire en haut. De même, cliquez sur Aperçu si vous voulez voir à quoi ressemble votre formulaire sur le front-end.

Voilà pour la partie personnalisation du champ. Vous pouvez poursuivre le processus.

Étape 4 : Configurer les paramètres des formulaires

Après avoir personnalisé le champ du formulaire, il est temps de configurer les paramètres du formulaire.

Vous trouverez les options des paramètres de formulaire à côté des options de champ . Vous pouvez configurer les paramètres généraux et les paramètres supplémentaires à partir d'ici.

Dans les paramètres généraux , vous pouvez modifier l'approbation de l'utilisateur et l'option de connexion . Vous pouvez définir des critères d'approbation et de connexion personnalisés pour vos utilisateurs parmi les options du menu déroulant.

Ensuite, il y a le rôle d'utilisateur par défaut pour définir le rôle des utilisateurs qui s'inscrivent dans votre formulaire. Vous pouvez choisir parmi les six rôles d'utilisateur par défaut.

De même, vous pouvez activer l'option Captcha Support pour protéger votre formulaire contre les bots et les spams.

En outre, il existe plusieurs autres options telles que Submit Button Class , Submit Button Text , Success message position , etc.

Maintenant, tout comme les paramètres généraux , vous pouvez configurer les paramètres supplémentaires de votre formulaire.

Vous trouverez diverses options de protection importantes, telles que :

• Activer le mot de passe généré automatiquement pour les utilisateurs
• Activer la protection anti-spam par HoneyPot
• Activer le domaine de la liste blanche/de la liste noire , etc.

De même, vous pouvez activer le formulaire convivial pour le clavier et activer le bouton de réinitialisation pour une excellente expérience utilisateur.

Vous pouvez également modifier l'étiquette de votre bouton de réinitialisation à partir de Form Reset Button Label .

De plus, vous pouvez activer le mappage des champs de formulaire avec des champs supplémentaires pour rendre le plug-in d'enregistrement des utilisateurs compatible avec les plug-ins externes.

Voilà pour la partie réglages. Encore une fois, cliquez sur Mettre à jour le formulaire pour enregistrer toutes vos modifications.

Étape 5 : Affichez le formulaire sur votre site

Enfin, il est temps de publier le formulaire d'inscription avec le champ WYSIWYG à remplir par les utilisateurs sur votre site.

Pour intégrer le formulaire sur votre site, accédez à Message/Pages >> Ajouter un nouveau .

Ensuite, cliquez sur le bouton Ajouter un bloc ( + ) et recherchez le bloc Enregistrement de l'utilisateur . Ensuite, ajoutez-le à la page en cliquant dessus.

Après cela, sélectionnez votre formulaire d'inscription de conférencier WordPress dans le menu déroulant.

Vous pouvez avoir l'aperçu final du formulaire avec le bouton Aperçu en haut.

Vous trouverez ci-dessous l'image de l'apparence de votre formulaire.

Et enfin, si vous pensez que votre formulaire est entièrement prêt, vous pouvez appuyer sur Publier .

Dernières pensées!

Voilà pour notre article sur comment ajouter un champ WYSIWYG dans un formulaire d'inscription WordPress.

Nous espérons que ce guide vous a aidé à comprendre ce qu'est WYSIWYG et comment il fonctionne sur le plugin d'enregistrement des utilisateurs.

L'enregistrement des utilisateurs est de loin le meilleur choix lorsqu'il s'agit de rendre votre site Web exclusif. Il est chargé de toutes les fonctionnalités essentielles qu'un plugin d'enregistrement devrait posséder.

Il existe d'autres fonctionnalités uniques de l'enregistrement des utilisateurs, dont certaines sont :

• Redirections et restrictions de contenu
• Codes d'invitation pour des invitations exclusives
• Fonctionnalités sans spam pour un espace sûr et sécurisé
• Intégrations de passerelle de paiement
• Modèles d'e-mails personnalisés

Ce ne sont que quelques-unes de ses caractéristiques. De plus, l'application de ce plugin est illimitée. Pour en savoir plus sur ce plugin, visitez le site officiel.

Ensuite, si vous souhaitez définir un champ de mot de passe dans votre formulaire d'inscription WordPress, consultez notre guide pour ajouter un champ de mot de passe dans le formulaire d'inscription WordPress.

De même, vous pouvez également approuver les utilisateurs dans WordPress après l'enregistrement frontal.

Vous pouvez lire plus de merveilles sur ce puissant plugin sur notre blog. Et pour des tutoriels vidéo faciles, vous pouvez vous abonner à notre chaîne YouTube.

Si vous avez des suggestions ou des questions sur le plugin, contactez-nous via les réseaux sociaux. Nous sommes disponibles sur Facebook et Twitter.