Attention !

Cet article contient du code CSS et s'adresse aux développeurs. Nous proposons ce code à titre de courtoisie, mais nous n'offrons pas de support pour les personnalisations de code ou le développement par des tiers.

Pour obtenir des conseils supplémentaires, veuillez consulter le tutoriel de WPBeginner sur l'ajout de CSS personnalisé.

Ignorer

Modification du texte clé sur les formulaires conversationnels

Mis à jour :
Afficher Markdown

Vous utilisez le module complémentaire Conversational Forms et souhaitez modifier le texte clé que vous voyez sur certains champs de saisie ? Par défaut, le module complémentaire ajoutera Clé A, Clé B, Clé C, etc., pour les champs de saisie à choix multiples lorsque vous visualisez le formulaire en mode conversationnel. Cependant, vous pouvez modifier ce texte avec du CSS personnalisé.

Par défaut, les champs de case à cocher et à choix multiples afficheront la Clé, puis une lettre pour chaque option sur votre formulaire conversationnel.

Dans ce tutoriel, nous partagerons l'extrait CSS qui modifiera le texte Clé par un autre.

Création de votre formulaire

Pour commencer, nous allons créer un nouveau formulaire conversationnel et y ajouter nos champs. Cela inclura au moins un champ Case à cocher et un champ Choix multiple (boutons radio).

créez le formulaire et ajoutez vos champs, y compris au moins un champ de case à cocher et un champ à choix multiples

Vous vous demandez quelle est la différence entre les champs Cases à cocher et Choix multiple ?

Les cases à cocher permettent à l'utilisateur de choisir des éléments parmi un nombre fixe d'alternatives. En revanche, les boutons radio (champ Choix multiple) permettent à l'utilisateur de choisir un seul élément parmi une liste de plusieurs alternatives prédéfinies. Si vous le souhaitez, vous pouvez limiter le nombre d'options que les utilisateurs choisissent dans le champ Cases à cocher.

Ajout du CSS pour modifier le texte clé

Pour ce tutoriel, nous ne voulons pas afficher le mot « Clé » sur notre formulaire. Nous voulons changer ce texte en « Élément ».

Nous allons placer notre CSS dans ce qu'on appelle une requête média. C'est juste une façon de faire savoir au CSS qu'il ne doit pas être appliqué à moins que la largeur minimale de l'appareil ne soit celle que nous avons spécifiée dans notre CSS. Pour en savoir plus sur les requêtes média, consultez le guide du développeur Mozilla sur ce qu'est une requête média et comment l'utiliser.

Il est maintenant temps d'ajouter le CSS à votre site afin que nous puissions modifier ce texte. Copiez et collez simplement le CSS ci-dessous sur votre site. Si vous avez besoin d'aide pour ajouter du 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 changera le mot Clé en Élément sur tous les champs de formulaire Case à cocher et Choix multiple, y compris les champs de paiement tels que les champs Éléments de case à cocher et Éléments multiples. Remplacez simplement le mot Élément par ce que vous voulez afficher sur vos formulaires.

Remarque : Lors de l'utilisation de ce CSS, ce texte ne sera pas traduisible car il est ajouté via CSS. Si vous avez un site multilingue, ce tutoriel n'est pas recommandé.

Après avoir ajouté le CSS, vous pouvez voir la modification du texte clé

Questions fréquemment posées

Voici les réponses à certaines des questions les plus fréquentes concernant la personnalisation de l'aperçu du module complémentaire Conversational Forms.

Comment puis-je supprimer complètement le texte ?

Pour supprimer complètement le texte, ajoutez ce 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;
}

Et voilà ! Vous avez réussi à modifier le texte clé sur Conversational Forms.

Ensuite, souhaitez-vous inclure votre propre feuille de style dédiée pour Conversational Forms ? Consultez notre tutoriel sur comment mettre en file d'attente une feuille de style pour Conversational Forms.

Étiqueté :
Toujours bloqué ? Comment pouvons-nous vous aider ?
Dernière mise à jour le 09 déc. 2024