Comment personnaliser le design de votre enquête en utilisant CSS

Dans ce guide, vous apprendrez comment styliser votre enquête en utilisant du CSS personnalisé. Vous pouvez également en savoir plus sur les paramètres spécifiques que vous pouvez modifier pour vous assurer que votre enquête s'aligne avec le design de votre site web.

• Comment trouver les paramètres de personnalisation CSS
• Liste des sélecteurs CSS personnalisables pour les enquêtes
• Liste des propriétés CSS avec leurs valeurs possibles

Comment trouver les paramètres de personnalisation CSS

1. Ouvrez une enquête existante et cliquez sur Modifier (ou créer une nouvelle enquête).

2. Allez à l'onglet Apparence.

3. Ajoutez votre code personnalisé dans la section CSS personnalisé.

• Consultez les sections ci-dessous pour en savoir plus sur les éléments d'enquête personnalisables, les propriétés CSS et leurs valeurs possibles.
• Vous pouvez copier-coller les exemples de CSS personnalisé fournis dans les sections ci-dessous et les ajuster en utilisant les paramètres disponibles pour mieux s'aligner avec le design de votre site web.

Retour en haut

Liste des sélecteurs CSS personnalisables pour les enquêtes

Vous pouvez utiliser les sélecteurs CSS suivants pour cibler des éléments HTML spécifiques de l'enquête à des fins de stylisation. Dans la section Liste des propriétés CSS avec leurs valeurs possibles ci-dessous, vous pouvez en savoir plus sur les propriétés CSS que vous pouvez personnaliser pour chaque sélecteur et leurs valeurs possibles.

Pour modifier un élément spécifique, copiez l'exemple de CSS personnalisé correspondant et ajustez ses propriétés pour styliser votre enquête selon vos préférences.

enquête

Ce sélecteur s'applique à l'ensemble de l'enquête, et non à des éléments spécifiques.

#survey {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

enquête-bouton

Ce sélecteur correspond à l'élément d'enquête suivant :

Exemple de CSS personnalisé :

#survey-button {
    font-family: 'Ambit';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

titre-de-question

Ce sélecteur correspond à l'élément d'enquête suivant :

Exemple de CSS personnalisé :

#question-title {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

description-de-question

Le champ Description est disponible pour le type de question Déclaration. Ce sélecteur correspond à l'élément d'enquête suivant :

Exemple de CSS personnalisé :

#question-description {
    font-family: 'Roboto';
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

réponse-corps

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

étiqueter-score

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#score-label {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: none;
}

bouton

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

bouton-sauter

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#skip-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    text-decoration: underline;
}

bouton-désactivé

Ce sélecteur correspond à l'élément de sondage suivant :

Exemple de CSS personnalisé :

#disabled-button {
    font-family: 'Roboto';
    font-size: 14px;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
}

bouton-fermer

Ce sélecteur correspond à l'élément affiché pour les sondages en plein écran :

Pour ce sélecteur, vous pouvez ajuster la propriété couleur. Exemple de CSS personnalisé :

#close-button {
color: rgba(0,0,96,1);
}

flèche-dropdown

Ce sélecteur correspond à l'élément de sondage suivant :

Pour ce sélecteur, vous pouvez ajuster la propriété couleur. Exemple de CSS personnalisé :

#dropdown-arrow {
color: rgba(0,0,96,1);
}

Retour en haut

Liste des propriétés CSS avec leurs valeurs possibles

Pour les sélecteurs listés ci-dessus (à l'exception de bouton-fermer et flèche-dropdown), vous pouvez ajuster les propriétés CSS suivantes.

police

Exemple de CSS personnalisé :

#survey-button {
   font-family: 'Ambit';
}

font-style

Exemple de CSS personnalisé :

#survey-button {
    font-style: italic;
}

font-weight

Exemple de CSS personnalisé :

#survey-button {
    font-weight: Bold;
}

font-size

Exemple de CSS personnalisé :

#survey-button {
    font-size: 16px;
}

text-decoration

Exemple de CSS personnalisé :

#survey-button {
    text-decoration: none;
}

Retour en haut