Skip to main content
Skip table of contents

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.

CODE
/* 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

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.