Comment styliser l'écran de confirmation des résultats du sondage

Aperçu

Souhaitez-vous styliser l'écran des résultats du sondage qui s'affiche sur la page de confirmation ? Lorsque vous utilisez le module complémentaire Sondages et enquêtes, vous pouvez facilement choisir d'afficher ces résultats dans votre message de confirmation. Avec un peu de CSS, vous pouvez facilement modifier le style de ces résultats. Dans ce tutoriel, nous allons vous guider étape par étape sur la façon de modifier le style des résultats du sondage.

Par défaut, un style est déjà appliqué aux résultats du sondage.

Configuration

Aux fins de cette documentation, nous supposerons que vous avez déjà créé votre formulaire en suivant les étapes de ce tutoriel.

Activation des résultats du sondage

Pour commencer, ouvrez le constructeur de formulaire et accédez à l'onglet Paramètres » Sondages et enquêtes.

Une fois sur place, cliquez sur la case à cocher Activer les résultats du sondage.

Ajout du code CSS

Pour styliser les résultats du sondage, vous devrez copier et coller ce CSS sur votre site. Si vous avez besoin d'aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.

#wpforms-confirmation-194 .wpforms-poll-answer-bar {
    background-color: #c45e1b;
    background: repeating-linear-gradient(45deg, #c45e1b, #c45e1b 10px, #f08a5d 10px, #f08a5d 20px);
    border-right: 1px solid #c45e1b;
}
 
#wpforms-confirmation-194 {
    background: transparent;
    border: none;
}

N'oubliez pas de remplacer -194 par l'ID du formulaire de votre formulaire spécifique. Si vous avez besoin d'aide pour trouver l'ID de votre formulaire, veuillez consulter ce tutoriel.

Si vous avez besoin d'aide pour choisir les couleurs de votre dégradé dans le CSS ci-dessus, veuillez visiter le site CSS Gradient pour le générateur en ligne (gratuit).

Et voilà ! Vous avez maintenant utilisé avec succès le CSS pour modifier le style des résultats du sondage sur l'écran de confirmation. Souhaitez-vous apprendre à styliser les espaces réservés dans vos champs de formulaire ? Jetez un œil à ce tutoriel sur Comment styliser le texte des espaces réservés pour les champs de formulaire.