Vous utilisez le module complémentaire Conversational Forms et vous voulez changer le texte clé que vous voyez sur les champs de saisie sélectionnés ? Par défaut, l'addon ajoute la clé A, la clé B, la clé C, etc., pour les champs de saisie à choix multiples lorsque le formulaire est affiché en mode conversationnel. Vous pouvez toutefois modifier ce texte à l'aide d'une feuille de style CSS personnalisée.
Dans ce tutoriel, nous allons partager le snippet CSS qui changera le texte de la clé en quelque chose de différent.
Création du formulaire
Pour commencer, nous allons créer un nouveau formulaire conversationnel et y ajouter nos champs. Il s'agira au moins d'un champ de type case à cocher et d'un champ de type choix multiple (radio).
Ajout d'une feuille de style CSS pour modifier le texte de la clé
Pour ce tutoriel, nous ne voulons pas afficher le mot "Clé" sur notre formulaire. Nous voulons remplacer ce texte par "Item".
Nous allons placer notre CSS à l'intérieur de ce que l'on appelle une requête média. Il s'agit d'un moyen d'indiquer au CSS qu'il ne doit pas être appliqué si la largeur minimale de l'appareil correspond à ce que nous avons spécifié dans notre CSS. Pour en savoir plus sur les requêtes de média, consultez le guide du développeur Mozilla sur ce qu'est une requête de média et comment l'utiliser.
Il est maintenant temps d'ajouter le CSS à votre site afin de pouvoir modifier ce texte. Il suffit de copier et de coller le CSS ci-dessous sur votre site. Si vous avez besoin d'aide pour ajouter des feuilles de style CSS à votre site, veuillez consulter ce tutoriel.
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item) label:before {
counter-increment: wpforms-radio;
content: counter(wpforms-radio, upper-alpha);
left: 10px;
}
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-radio li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-multiple li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-payment-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-gdpr-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page .wpforms-field-checkbox li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before {
content: counter(wpforms-radio, upper-alpha);
content: "Item " counter(wpforms-radio, upper-alpha);
}
Le CSS remplacera le mot Clé par le mot Élément dans tous les champs de formulaires à cases à cocher et à choix multiples, y compris les champs de paiement tels que les champs Éléments de cases à cocher et Éléments multiples. Il suffit de remplacer le mot " Item" par ce que vous souhaitez afficher sur vos formulaires.
Remarque : si vous utilisez ce CSS, ce texte ne sera pas traduisible puisqu'il est ajouté par le biais d'un CSS. Si vous avez un site multilingue, ce tutoriel n'est pas recommandé.
Questions fréquemment posées
Voici les réponses à certaines des questions les plus fréquemment posées sur la personnalisation de l'aperçu de l'addon Conversational Forms.
Comment puis-je supprimer complètement le texte ?
Pour supprimer complètement le texte, ajoutez cette feuille de style CSS à votre site. Pour obtenir de l'aide sur l'ajout de CSS à votre site, veuillez consulter ce tutoriel.
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label:hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item):not(.wpforms-selected) label.wpforms-field-item-hover:before,
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item).wpforms-selected label:before {
content:none;
}
#wpforms-conversational-form-page div[class^='wpforms-field-'] li:not(.wpforms-image-choices-item) label,
#wpforms-conversational-form-page div[class*=' wpforms-field-'] li:not(.wpforms-image-choices-item) label {
padding: 9px 9px 9px 9px;
}
Vous avez réussi à modifier le texte clé des formulaires conversationnels. Vous avez réussi à modifier le texte clé des formulaires conversationnels.
Ensuite, voudriez-vous inclure votre propre feuille de style dédiée aux formulaires conversationnels ? Jetez un coup d'œil à notre tutoriel sur la façon de mettre en file d'attente une feuille de style pour les formulaires conversationnels.