Comment personnaliser le tableau de champ de l’échelle de Likert

Souhaitez-vous personnaliser le style du champ de formulaire Échelle de Likert dans WPForms ? Si vous souhaitez modifier le style de ce champ pour qu’il corresponde aux couleurs de marque de votre site, ce tutoriel vous montrera comment faire. Nous vous fournirons l’exemple CSS de base nécessaire pour personnaliser le champ de formulaire Échelle de Likert.

Création de votre formulaire

Nous commencerons par créer le formulaire et ajouter nos champs, y compris l’Échelle de Likert.

Si vous avez besoin d’aide pour créer un formulaire avec le champ de formulaire Échelle de Likert, veuillez consulter la documentation.

Personnalisation de l’échelle de Likert

Ensuite, vous devrez copier ce CSS sur votre site.

Si vous ne savez pas comment faire, veuillez consulter ce tutoriel.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic thead tr {
    background-color: #FFE0B2;
}

form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td input[type=checkbox]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=radio]:checked+label:after, 
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td input[type=checkbox]:checked+label:after {
    background-color: #FF9800;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr td label:hover:after,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr td label:hover:after{
    border: 1px solid #EF6C00;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(odd) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(odd) td {
    background-color: #FFF3E0;
}
 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.modern tbody tr:nth-child(even) td,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) th,
form#wpforms-form-971 .wpforms-field-likert_scale table.classic tbody tr:nth-child(even) td {
    background-color: #FFE0B2;
}

Le style ci-dessus modifiera les couleurs des lignes paires et impaires ainsi que la couleur de l’option lorsqu’elle est cochée. Ce CSS couvre également les styles Modern ou Classic de l’Échelle de Likert.

Vous devrez changer le -971 car il s’agit de l’ID du formulaire pour notre exemple. Vous devrez mettre à jour ce numéro pour qu’il corresponde à votre propre ID de formulaire.

Si vous avez besoin d’aide pour trouver votre ID de formulaire, veuillez consulter cette documentation.

Et voilà ! Simplement en utilisant du CSS, vous pouvez personnaliser le style de l’Échelle de Likert sur votre formulaire. Souhaitez-vous également personnaliser le style du champ de formulaire Net Promoter Score ? Essayez notre tutoriel sur Comment personnaliser le champ Net Promoter Score.

FAQ

Q : Comment supprimer le saut de ligne sur mes options ?

R : Par défaut, WPForms ajoute un saut de ligne au texte à l’aide de CSS. Vous pouvez le supprimer en ajoutant du CSS supplémentaire.

N’oubliez pas de changer le -971 pour qu’il corresponde à votre ID de formulaire.

form#wpforms-form-971 .wpforms-field-likert_scale table.classic th, 
form#wpforms-form-971 .wpforms-field-likert_scale table.modern th {
    word-break: auto-phrase;
}