SurveyMonkey
Utiliser le CSS pour styliser votre sondage
FONCTIONNALITÉ ENTREPRISE : Si vous êtes intéressé par la fonctionnalité Contrôle des comptes, contactez le Service commercial. Si vous avez déjà un compte Entreprise, contactez votre Responsable de la réussite client.
Vous pouvez créer un thème personnalisé pour apporter des changements de style généraux. Utilisez la barre d’outils de mise en forme du texte pour modifier le style d’une question de sondage spécifique.
Les administrateurs principaux Entreprise peuvent ajouter un thème CSS pour créer un thème de sondage personnalisé et donner ainsi les couleurs de leur marque à leur sondage.
Créer un thème CSS personnalisé
Les administrateurs principaux peuvent ajouter un code CSS pour créer un thème de sondage personnalisé qui correspond à vos ressources visuelles, à vos polices, à vos couleurs et à vos préférences de style.
Pour ajouter un thème personnalisé à la bibliothèque :
- Sélectionnez Mon équipe dans la barre de navigation principale, puis Bibliothèque.
- Sélectionnez + Nouvel élément (Ajouter un élément).
- Choisissez un thème CSS.
- Sélectionnez Copier le code et collez-le dans votre outil d’édition CSS préféré.
- Personnalisez le code et affichez un aperçu en l’ajoutant à la case sous Personnaliser le thème et en sélectionnant Générer un aperçu.
- Sélectionnez Enregistrer.
ASTUCE ! Prévisualisez votre thème CSS personnalisé avant d’envoyer votre sondage.
- Utiliser l’aperçu du sondage pour voir votre thème CSS personnalisé
Mettre à jour un thème CSS personnalisé
Une fois un thème CSS personnalisé enregistré, seul l’administrateur principal peut modifier les éléments de la page.
Pour modifier un thème personnalisé :
- Sélectionnez Mon équipe dans la barre de navigation principale, puis Bibliothèque.
- Sélectionnez ... et cliquez sur Mettre à jour.
- Choisissez un thème CSS.
- Sélectionnez Copier le code et collez-le dans votre outil d’édition CSS préféré.
- Personnalisez le code et affichez un aperçu en l’ajoutant à la case sous Personnaliser le thème et en sélectionnant Générer un aperçu.
- Sélectionnez Enregistrer.
Les membres d’une équipe ne peuvent pas changer ou modifier les éléments individuels d’un sondage auquel un thème CSS personnalisé est appliqué.
Personnaliser des éléments de la page
Propriétés générales
| Propriété CSS | Valeur de chaîne |
| Police | Votre organisation a peut-être une police préférée. Vous pouvez également essayer les polices Web CSS pour plus d’idées. |
| Taille de police | Un nombre, par ex. 32 px |
| Couleur | Utilisez un sélecteur de couleurs pour générer la valeur RVBA de votre couleur. |
| Couleur d’arrière-plan | Il s’agit d’un code HEX ou d’une valeur RVBA. |
Titre de la page
Vous pouvez ajouter des titres de pages aux différentes pages de votre sondage pour lui donner un aspect élégant et organisé.
#pageTitle {
color: rgba(0,0,96,1);
background-color: #A1F3FB;
font-family: National2;
font-size: 24;
font-style: NORMAL;
font-weight: REGULAR;
text-decoration: NONE;
}
ASTUCE ! Utilisez un sélecteur de couleurs pour générer la valeur RVBA ou le code hex de votre couleur.
- Modification du style de police
- Modification de l’épaississement de la police
- Modifier la décoration du texte
Titre du sondage
À moins que vous ne choisissiez de masquer le titre du sondage, celui-ci apparaîtra en haut de chaque page lorsque les participants répondront aux questions.
#surveyTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 26;
font-style: NORMAL;
font-weight: BOLD;
text-decoration: NONE;
}
- Modification du style de police
- Modification de l’épaississement de la police
- Modifier la décoration du texte
Page de sondage
Couleur d’arrière-plan qui s’affiche derrière les questions de votre sondage. La couleur de l’arrière-plan du sondage ne s’affichera que si vous n’avez pas ajouté d’image d’arrière-plan.
#surveyPage {
background-color: rgba(137,230,243,1);
}
#surveyPageSecondaryColor {
background-color: rgba(84,213,231,1);
}
ASTUCE ! Utilisez un sélecteur de couleurs pour générer la valeur RVBA de votre couleur.
Titre de la question
Vous pouvez personnaliser l’apparence du texte de la question pour différents types de questions.
#questionTitle {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 22;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Modification du style de police
- Modification de l’épaississement de la police
- Modifier la décoration du texte
Corps de la question
Vous pouvez personnaliser l’apparence des choix de réponses pour les participants, ainsi que les types de questions qui utilisent une couleur de mise en évidence lorsqu’elles sont sélectionnées. Par exemple, une question de type choix multiple.
#questionBody {
color: rgba(0,0,96,1);
font-family: National2;
font-size: 18;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
highlight-color: rgba(31,216,234,1);
}
- Modification du style de police
- Modification de l’épaississement de la police
- Modifier la décoration du texte
Bouton
Les participants à votre sondage utilisent ces boutons pour naviguer dans le sondage. Lorsqu’un participant clique sur le bouton Suivant ou Terminé sur chaque page du sondage, les réponses sont enregistrées et envoyées.
#button {
font-family: National2;
font-size: 15;
font-weight: REGULAR;
}
- Modification de l’épaississement de la police
Erreur
Des messages d’erreur s’affichent lorsque les participants laissent une question obligatoire vide ou si la réponse n’est pas contenue dans la plage ou la limite spécifiée.
#error {
font-size: 16;
font-style: NORMAL;
font-weight: LIGHT;
text-decoration: NONE;
}
- Modification du style de police
- Modification de l’épaississement de la police
- Modifier la décoration du texte
Lien de sortie
Des liens de sortie s’affichent en haut à droite de chaque page, ce qui permet aux participants de quitter le sondage sans enregistrer les réponses saisies sur la page active.
#exitLink {
background-color: rgba(0,0,0,0);
font-size: 12;
font-weight: LIGHT;
- Modification de l’épaississement de la police
Mise en page
Vous pouvez choisir la mise en page pour modifier l’emplacement et la couleur de l’image d’arrière-plan.
#pageLayout {
layout: banner;
opacity: 0.0;
}
ASTUCE ! Définissez l’opacité sur 100 pour obtenir une couleur d’arrière-plan unie.