Personnalisez le style de votre sondage

Mis à jour 1 octobre 2026

Un style définit les polices, les couleurs et la mise en page de votre sondage. Ajoutez du CSS pour les détails que l’éditeur de style ne couvre pas. Votre CSS apparaît dans l’aperçu, sur le lien public du sondage et dans les sondages intégrés à votre site web.

Où ajouter votre CSS

Ouvrez le sondage, allez dans Concevoir → Aperçu et ouvrez Avancé dans le panneau de style. Cochez Je sais ce que je fais pour afficher l’éditeur CSS. L’aperçu affiche vos modifications au fur et à mesure que vous tapez. Modifier le style crée une copie pour ce sondage appelée Mon style personnalisé. Enregistrez le sondage pour publier vos modifications.

Pour utiliser le style dans d’autres sondages, choisissez Enregistrer comme style de l’espace de travail.

Exemples

Chaque exemple fonctionne de manière indépendante. Combinez ceux dont vous avez besoin.

Pour les couleurs, utilisez les variables de la palette telles que var(--primary), var(--foreground) ou var(--muted-foreground). Elles se mettent à jour lorsque vous modifiez la palette, y compris pour ses variantes claires et sombres.

Texte de la question dans la couleur de votre marque

.question-title {
    color: var(--primary);
}

Texte de la question plus grand

.question-title {
    font-size: 1.5rem;
}

Boutons plus grands sur les échelles d’évaluation

Pour le NPS et les autres échelles d’évaluation numériques qui utilisent des boutons :

.question-type-interval-scale button {
    height: 3.5rem;
    font-size: 1.5rem;
}

Barre de progression plus épaisse

.survey-progress {
    height: 6px;
}

Masquer le compteur d’étapes

Supprime « Étape 2 sur 5 » entre les boutons :

.survey-navigation-step {
    display: none;
}

Boutons de navigation arrondis

.survey-navigation-next,
.survey-navigation-submit {
    border-radius: 9999px;
}

Colonnes de questions et de navigation plus étroites

Définissez les deux largeurs pour que la navigation reste alignée avec les questions :

.survey-content,
.survey-footer-content {
    max-width: 36rem;
}

Ombre au-dessus de la navigation épinglée

Utilisez les paramètres pour ordinateur et téléphone séparément. Chacun peut épingler la navigation au bas de l’écran :

@media (min-width: 640px) {
    .survey-shell[data-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

@media (max-width: 639px) {
    .survey-shell[data-phone-navigation="sticky"] .survey-footer {
        box-shadow: 0 -4px 12px #0001;
    }
}

Titres du sondage

Ceci colore chaque h1 et h2 sur la page du sondage, y compris les blocs de texte et le titre de la page de fin :

h1,
h2 {
    color: var(--primary);
}

Structure de la page

Utilisez les noms de classes ci-dessous dans votre CSS. Nous les gardons stables entre les mises à jour. Les autres noms de classes sur la page sont internes et peuvent changer sans préavis.

Les pages du sondage partagent cette structure. La progression, les questions et la navigation n’apparaissent que sur les écrans qui en ont besoin :

  • .survey-shell - la page entière
    • .survey-header - la barre en haut, avec la boîte interne .survey-header-content
      • .survey-progress - la piste de progression
        • .survey-progress-bar - sa partie remplie
    • .survey-main - l’espace entre les deux barres
      • .survey-content - la colonne de contenu principal
        • .survey-questions - les questions sur cette page
    • .survey-footer - la barre en bas, avec la boîte interne .survey-footer-content
      • .survey-navigation - la ligne de navigation
        • .survey-navigation-back - Précédent
        • .survey-navigation-step - « Étape 2 sur 5 »
        • .survey-navigation-next - Suivant
        • .survey-navigation-submit - Envoyer le sondage

Un sondage sur une seule page n’a pas de barre de progression, et son écran de questions n’a qu’un bouton Envoyer le sondage. Le bouton Précédent apparaît à partir de la deuxième page.

Questions

Chaque question est une .question, contenant :

  • .question-title - le texte de la question
  • .question-required - l’astérisque * d’une question obligatoire, à l’intérieur du titre
  • .question-description - le texte d’aide sous la question
  • .question-answer - le champ de réponse
  • .question-error - le message affiché lorsqu’une réponse est manquante ou invalide

Pour styliser un type de question, ajoutez sa classe de type, par exemple .question-type-select-one .question-title :

  • .question-type-string - Texte
  • .question-type-number - Nombre
  • .question-type-date - Date
  • .question-type-boolean - Oui ou Non
  • .question-type-select-one - Choix unique
  • .question-type-select-many - Choix multiple
  • .question-type-ranking - Classement
  • .question-type-interval-scale - Échelle d’intervalle, comme le NPS
  • .question-type-ordinal-scale - Échelle ordinale
  • .question-type-matrix - Matrice
  • .question-type-open-list - Liste ouverte
  • .question-type-payment - Paiement

Paramètres de mise en page

.survey-shell porte les choix de la section Disposition sous forme d’attributs, afin que votre CSS puisse les suivre :

  • data-navigation - flow lorsque les boutons suivent la dernière question, sticky lorsqu’ils sont épinglés au bas de l’écran
  • data-align - top ou center, la position du contenu

Sur les écrans de moins de 640 px de large, les paramètres pour téléphone s’appliquent. Ciblez-les avec data-phone-navigation et data-phone-align, comme dans l’exemple de l’ombre ci-dessus.

Ce qui n’est pas autorisé

Pour protéger les répondants, un sondage ne peut pas être enregistré avec du CSS qui :

  • utilise @import, image-set() ou src(), ou utilise url() sans une URL data:
  • ajoute des polices avec @font-face. Choisissez plutôt une police dans la section Polices
  • sélectionne sur [value], [checked] ou [selected], ce qui pourrait révéler des réponses
  • contient du CSS invalide ou la séquence </
  • dépasse 50 000 caractères