Form responsiveness on mobile devices

Bonjour

Actuellement, nous sommes confrontés à un problème de responsivité concernant l'affichage sur les appareils mobiles. En effet, notre formulaire est de type question par question, et nous souhaiterions que la hauteur de chaque page s'ajuste automatiquement en fonction de son contenu. En d'autres termes, notre objectif est d'éliminer la nécessité de faire défiler les réponses.

À titre d'information, nous avons déjà tenté de définir la hauteur de l'iframe, mais cela ne résout pas notre problème. Lorsque nous nous trouvons sur une page comportant peu de réponses, la hauteur reste inchangée, alors que nous avons besoin qu'elle se réduise ou s'étire en fonction du contenu.

Nous sommes à la recherche de solutions pour résoudre cette problématique. Avez-vous des suggestions sur la manière dont nous pourrions aborder ce problème s'il vous plaît ?

Merci d'avance

Hello gustaverihal,

Thanks for reaching out to Jotform Support. I'd like to let you know that I am using a translation tool to provide assistance, but if you would prefer to get assistance in the French language, we can forward your ticket to our French team. However, please note that it could take longer to receive a response.

If you can share the link to your form, I can check it out and see what’s going on. Here is your guide on where to find your form URL or you can follow the steps and screencast below:

• Go to the Publish tab.
• Select Quick Share from the left panel.
• Look for the Copy Link and click it, then paste it here in the support ticket.

Once we hear back from you, we'll be able to help you with this.

Hello,

Thank you for your response.

I am willing to continue our conversation, it is not a problem.

As a result, I am sending you the following link : https://form.jotform.com/230513348794561

Many thanks

Bonjour Gustave,

Merci de contacter l'assistance Jotform. Je ne comprends pas bien votre requête, peut-être manque t-il une copie écran pour comparer la hauteur des marges si est là votre question? Le rendu d'un clone de votre formulaire par cartes sur un iPhone 12 montre que le contenu d'une page est centré par défaut, ce qui est actuellement attendu et devrait aussi être le cas sur d'autres navigateurs et systèmes d'exploitation.

Si vous souhaitez que les marges haut et bas ne varient pas, ce n'est actuellement pas possible, les formulaires à cartes ne permettent en effet pas d'injecter du code CSS comme pour les formulaires classiques.

Si ce n'est pas ce que vous cherchez, pouvez-vous préciser, éventuellement avec des copies écrans qui donnent plus détail ou l'effet recherché?

Dès que nous aurons votre réponse, nous saurons mieux comment vous aider.

Bonjour,

Merci pour votre retour.

Notre requête vise à optimiser l'interface utilisateur en éliminant la nécessité de dérouler ou faire défiler les réponses dans notre formulaire. Nous souhaiterions que chaque cadre s'ajuste dynamiquement en hauteur, en fonction de son contenu. En d'autres termes, les marges devraient varier automatiquement pour s'adapter au contenu sans nécessiter de défilement interne comme suit :

Actuellement, la première question nécessite un défilement des réponses à l'intérieur du formulaire. Nous préférons que, le cas échéant, le défilement affecte l'ensemble de la page plutôt que des sections internes du formulaire. Le résultat attendu sera comme suit sans défilement :

En ce qui concerne la deuxième page, nous souhaiterions réduire les marges supérieure et inférieure étant donné que le nombre de réponses est limité.

Merci

Bonjour Gustave,

Merci de revenir avec ces précisions. Je suis navré, je ne suis pas sûr de bien comprendre.

• Pour la première question, vous souhaitez que le défilement affecte l'ensemble de la page plutôt que des sections internes du formulaire. N'est-ce pas le cas dans l'exemple ci-dessous, avec un clone de votre formulaire?
• Et, à la deuxième page, je n'ai pas le même rendu que vous.

Pour ma part, à ce stade, ce comportement me semble celui attendu et permet une navigation aisée dans votre formulaire. Comme cela dépend de la résolution de l'écran utilisé, l'affichage du formulaire, ses marges, tailles de caractères, etc. peuvent changer d'un appareil à l'autre, et selon les préférences du navigateur utilisé. L'objet de ce que vous appelez la responsivité, autrement dit l'adaptation optimisée et automatique du rendu d'une page web selon la configuration de l'utilisateur, de son navigateur aux caractéristiques physiques de son appareil, me parait ici déjà optimal en ce sens.

Si vous pouvez poster ici un exemple concret, sur un appareil existant, d'incongruité ou de mauvaise adaptation, nous pourrons voir comment nous pourrons optimiser, trouver une solution.

To apply responsiveness to question-by-question forms, you can follow these general guidelines:

1. Use a Mobile-First Approach:
2. Start designing your form with mobile devices in mind. Begin with a layout that works well on small screens and progressively enhance it for larger screens.
3. Break Down the Form:
4. Divide the form into smaller sections or individual questions. This helps in presenting one question at a time on smaller screens, reducing clutter and making it easier for users to focus.
5. Implement Progressive Disclosure:
6. Show only one question at a time and provide clear navigation options to move forward or backward. This prevents overwhelming users with too much information at once.
7. Optimize Input Methods:
8. Choose appropriate input types for different questions. For example, use radio buttons or checkboxes for multiple-choice questions and provide a numeric keypad for numerical inputs on mobile devices.
9. Adjust Font Sizes and Spacing:
10. Ensure that text and input fields are large enough to be easily readable and tappable on smaller screens. Adjust line heights and padding to accommodate touch interactions.
11. Utilize Responsive CSS:
12. Apply responsive CSS styles to your form elements. Use media queries to adjust the layout, font sizes, and spacing based on the screen size. Test your form on various devices to ensure a consistent user experience.
13. Optimize Images:
14. If your form includes images, optimize them for different screen sizes to avoid slow loading times. Consider using responsive images or CSS techniques to ensure images scale appropriately.
15. Test Across Devices and Browsers:
16. Regularly test your form on various devices (smartphones, tablets, desktops) and browsers to identify and fix any layout or functionality issues. Consider using browser developer tools to simulate different screen sizes during development.
17. Consider Touch Gestures:
18. Be mindful of touch gestures on mobile devices. Ensure that buttons and navigation elements are touch-friendly, and test the form's usability on touch-enabled devices.
19. Provide a Clear Progress Indicator:
20. If your form spans multiple pages or sections, offer a clear progress indicator to inform users about their position in the process. This helps manage expectations and reduces user confusion.
21. Handle Errors Gracefully:
22. Design error messages to be clear and visible on smaller screens. Ensure that users can easily identify and rectify input errors without the need for extensive scrolling or zooming.

By following these principles, you can create a responsive question-by-question form that provides a seamless and user-friendly experience across a variety of devices.

Hello israrahmedkeerio48,

Thank you for your reply!

geometry dash world