Module Campagne

Rendre l'enquête en ligne responsive sur mobile

📌 Problème
Le questionnaire de satisfaction client envoyé via le module de campagne n'est pas responsive.
Sur les appareils mobiles (ex. Samsung Galaxy S25), les utilisateurs doivent scroller horizontalement pour voir le contenu du formulaire.

image-20250619-101651.png
exemple on iPhone 12 pro

💡 Solution
En ajoutant la requête média CSS suivante dans la partie personnalisation de votre enquête, la mise en page du formulaire s'adapte aux petits écrans (≤ 600px), garantissant un affichage en pleine largeur et une meilleure ergonomie sur mobile.

image-20250619-131531.png
Ajouter le style CSS

Notes

  • Ce CSS doit être adapté selon les champs du formulaire.

  • Cette correction ne nécessite que l'ajout de CSS, aucune modification de la structure HTML.

  • Vérifiez que la classe form-style est appliquée au bon élément wrapper dans votre formulaire.

  • Ajustez les valeurs max-width ou padding si nécessaire pour les tablettes ou les appareils de taille moyenne.


/* Requête Média pour les petits écrans */
@media only screen and (max-width: 600px) {
  .form-style {
    width: 100%;
    padding: 5px;
  }
  .form-style table {
    width: 100%;
  }
  .form-style input[type="radio"] {
    width: 10%;
    margin-bottom: 10px;
  }
  .form-style input[type="submit"],
  .form-style textarea {
    width: 100%;
    margin-bottom: 10px;
  }
}

Résultat
Après application du correctif :

Le formulaire s'adapte correctement à toutes les tailles d'écran.

image-20250619-115259.png
Sur desktop

Plus besoin de scrolling horizontal.

L'expérience client est nettement améliorée sur tous les mobiles.

image-20250619-115347.png
mode paysage sur mobile
image-20250619-115433.png
mode portrait sur mobile