Comment personnaliser le champ Net Promoter Score

Souhaitez-vous personnaliser l'apparence du champ de formulaire Net Promoter Score ? En utilisant un peu de CSS, vous pouvez facilement modifier l'apparence de ce champ de formulaire sur votre site. Dans ce tutoriel, nous vous montrerons comment utiliser le CSS pour modifier le style de ce champ.

Ajout du champ de formulaire

Tout d'abord, vous devrez créer un formulaire et vos champs, ainsi que le champ Net Promoter Score, puis configurer les options souhaitées pour ce champ.

Si vous avez besoin d'aide, veuillez consulter la documentation.

Personnalisation du Net Promoter Score

Ensuite, vous devrez copier ce CSS sur votre site. Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td input[type=radio]:checked+label {
background-color: #64B5F6;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover
{
background-color: #64B5F6;
color: #ffffff;
}

form#wpforms-form-548 .wpforms-field-net_promoter_score table.modern tbody tr td label:hover:after {
border: none;
}

Le CSS ci-dessus ne sera appliqué qu'au formulaire dont l'ID est 548. Avant d'enregistrer ce CSS, vous devrez mettre à jour cet ID de formulaire pour qu'il corresponde à votre ID de formulaire.

Si vous avez besoin d'aide pour trouver votre ID de formulaire, veuillez consulter ce tutoriel.

Et voilà ! Vous avez utilisé avec succès le CSS pour personnaliser le champ de formulaire Net Promoter Score. Souhaitez-vous personnaliser le style des icônes du champ de formulaire Ratings ? Consultez notre article sur Comment personnaliser l'apparence des icônes de notation.

FAQ

Q : Comment puis-je changer le texte qui apparaît (Pas du tout probable) ?

R : Vous pouvez également modifier ce texte qui apparaît avec du CSS.

form#wpforms-form-548 span.not-likely:before {
    content: "Not at all satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.extremely-likely:before {
    content: "Completely satisfied";
    font-size: 14px !important;
}

form#wpforms-form-548 span.not-likely, form#wpforms-form-548 span.extremely-likely {
    font-size: 0;
}