CSS personnalise pour les sondages

La fonctionnalite Custom CSS permet d'injecter vos propres regles CSS dans les pages publiques de sondage. Elle est ideale pour :

• Coherence de marque : aligner les sondages avec l'identite visuelle de votre entreprise
• Experience utilisateur amelioree : creer des mises en page, animations ou elements interactifs
• Tests A/B : tester differents styles visuels pour ameliorer les taux de reponse
• Design unique : concevoir des experiences de sondage distinctives

Si vous etes a l'aise avec CSS, cette fonctionnalite vous donne une grande liberte de conception.

Pour ajouter du CSS a un sondage :

1. Accedez a Surveys dans la barre laterale gauche
2. Selectionnez le sondage a personnaliser
3. Cliquez sur l'onglet Settings dans le createur
4. Descendez jusqu'a la section Custom CSS
5. Entrez votre code CSS dans la zone de texte
6. Cliquez sur Save Survey pour appliquer les changements

Votre CSS s'applique a la page publique du sondage. Le CSS personnalise n'apparait pas dans l'aperçu du createur. Pour voir le rendu reel, envoyez-vous un sondage test.

demeterrr fournit quatre classes CSS pour styliser des zones precises de la page :

Vous pouvez aussi cibler des elements HTML standards comme body, button, input et label, mais cela peut affecter d'autres elements de la page.

Ajoutez un fond en degrade a la page de sondage :

.survey-container {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Appliquez vos couleurs de marque a la carte et a l'entete :

.survey-card {
  background-color: #f8f9fa;
  border: 2px solid #0066cc;
}

.survey-header {
  background-color: #0066cc;
  color: white;
  padding: 2rem;
  border-radius: 12px 12px 0 0;
}

.survey-title {
  color: white;
  font-weight: 700;
}

Creez un style plus doux avec des coins arrondis :

.survey-card {
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

Utilisez les polices de votre marque (n'oubliez pas de les importer d'abord) :

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

.survey-card {
  font-family: 'Inter', sans-serif;
}

.survey-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

Creez un effet moderne :

.survey-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

Si votre sondage fait partie d'une sequence, vous pouvez aussi ajouter du CSS au niveau sequence dans l'editeur. Quand les deux existent :

• Le CSS du sondage est applique en premier
• Le CSS de la sequence est applique en second (et peut surcharger le CSS du sondage)
• Les deux feuilles de style sont fusionnees sur la page publique

Cela vous permet de definir un style par defaut au niveau sequence tout en conservant des exceptions par sondage. Le CSS de sequence est limite a 10 000 caracteres.

Previsualisez toujours vos sondages sur mobile. Le CSS personnalise peut affecter le responsive, donc verifiez tous les formats d'ecran.

/* Exemple : padding responsive mobile */
@media (max-width: 640px) {
  .survey-card {
    padding: 1rem;
  }
}

Utilisez les outils de developpement (clic droit → Inspecter) sur la page publique du sondage pour tester le CSS en direct avant de le copier dans les parametres. Cela accelere fortement la conception.

Un CSS trop complexe peut ralentir le chargement et causer des problemes de rendu. Commencez simple puis ajoutez progressivement.

Pour une meilleure compatibilite navigateur, ajoutez des prefixes pour certaines proprietes recentes :

.survey-card {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

Envoyez toujours un test a vous-meme apres ajout de CSS personnalise pour confirmer l'affichage avant tout envoi reel.

Le createur de sondage n'affiche pas d'aperçu en direct du CSS personnalise. Utilisez Preview ou un envoi test.

demeterrr ne valide ni ne sanitise votre CSS. Un CSS invalide peut casser l'affichage du sondage. Testez soigneusement.

Le CSS personnalise est defini par sondage (ou par sequence). Il n'existe pas de CSS global au niveau organisation. Pour uniformiser tous vos sondages, creez une sequence avec du CSS par defaut.

Votre CSS est injecte directement dans la page sans scope automatique. Soyez prudent avec des selecteurs larges comme body ou *.

Pour en savoir plus sur la personnalisation, consultez Survey Settings et Previewing Your Survey.