Comment créer des formulaires adaptés aux mobiles sur Jotform

“`html

Note

Nous avons abandonné ce guide, car les formulaires Jotform sont désormais réactifs par défaut. Cela signifie qu’aucune configuration supplémentaire n’est requise.

L’utilisation du web mobile est devenue courante. Si votre site web n’affiche pas correctement sur le web, vous perdez des utilisateurs. Les gens utilisent fréquemment leurs appareils mobiles pour accéder aux sites web. Cela inclut vos formulaires web, tels que les formulaires d’inscription, de contact ou de génération de leads. Les formulaires doivent être adaptés aux mobiles sur tous les appareils pour être utilisables et offrir une expérience utilisateur de haute qualité. Une manière d’y parvenir est de rendre vos formulaires réactifs aux mobiles. Cela signifie que peu importe l’appareil avec lequel un utilisateur accède à votre formulaire, il sera affiché correctement. Ils n’auront pas besoin de zoomer pour le voir. Ce tutoriel vous montrera comment rendre les formulaires réactifs aux mobiles avec Jotform.

Jotform propose plusieurs options pour rendre les formulaires réactifs aux mobiles, sans même écrire une seule ligne de code pour les utilisateurs non techniques. Voici les moyens de créer des formulaires adaptés aux mobiles avec Jotform.

Rendre un formulaire réactif dans le Form Designer

“`C’est la méthode recommandée car elle rendra votre formulaire entièrement réactif aux mobiles sur différents appareils tels que les iPhones et les iPads, en mode portrait et paysage. Voici les étapes pour activer cela sur votre formulaire.

Dans le Form Builder, cliquez sur l’icône Form Designer.
Cliquez sur le bouton Advanced Designer en bas du panneau Form Designer.
Dans Advanced Designer, allez à la section Form Layout.
Cochez l’option Make this form responsive.

Astuce

Le Form Designer dispose d’un mode aperçu intégré pour différents appareils et vues. Cliquez sur le bouton Enregistrer en haut à gauche de l’écran. Après avoir enregistré, il devrait vous montrer l’icône d’aperçu.

Le pouvoir d’injecter du CSS

Si vous avez votre style avec le design de formulaire et préférez un code CSS personnalisé, c’est ce que vous cherchez. Cela s’adresse aux utilisateurs avancés.

Vous pouvez injecter les codes CSS personnalisés via le Form Builder ou le Form Designer. Voici les instructions sur comment injecter du CSS depuis le Form Builder. Le Form Designer est plus avancé, nous recommandons donc d’écrire du CSS là-bas. Pour commencer à créer du code CSS personnalisé, cliquez sur l’onglet CSS dans le Form Designer.

Conseils rapides sur l’injection de CSS personnalisé :

@media query

est la manière typique de rendre les pages web réactives. Cela s’applique également aux formulaires. Il définit différentes règles de style pour différents types de médias/appareils. Voici un exemple de code CSS de media query ciblant des largeurs spécifiques.

/* Cible une zone d'affichage avec une largeur maximale de 768px */
@media screen and (max-width:768px) { 
/* LES STYLES SONT ICI */
}

Voici une bonne source pour apprendre les codes de media query CSS ciblant différents appareils.

Utilisation du widget réactif au mobile

Si vous souhaitez utiliser un widget plutôt que de conserver les deux options ci-dessus ou d’injecter votre propre code CSS, ce widget les a toutes vues et a aidé des millions de formulaires à être réactifs aux mobiles.

Nous suggérons d’utiliser l’une des deux premières options à la place, mais pour être exhaustif, ce widget est un excellent moyen d’atteindre le même objectif.

Pour en savoir plus sur l’ajout de widgets à vos formulaires, visitez Comment ajouter un widget à votre formulaire.

Thèmes réactifs au mobile

Parfois, le thème est le meilleur choix pour que votre formulaire soit esthétique et se comporte comme il se doit, quel que soit l’appareil sur lequel il est ouvert. Obtenez l’un des thèmes attrayants conçus pour donner à votre formulaire l’avantage que vous recherchez, fait main par divers designers et disponible pour vous.“`html
ici.

Note

S’assurer de la réactivité mobile peut être une tâche complexe. Avec l’abondance de dispositifs mobiles sur le marché et leurs performances se rapprochant de celles des ordinateurs de bureau, obtenir une réactivité sans faille sans gestion adéquate peut être difficile.

Si vous intégrez votre formulaire sur votre site Web et que vous n’êtes pas satisfait de son apparence avec les deux options activées, n’hésitez pas à commencer à expérimenter.

Vous pouvez essayer n’importe quelle combinaison mentionnée ci-dessus, et si vous trouvez un nouveau moyen d’atteindre la réactivité mobile qui n’est pas couvert ici, veuillez nous le faire savoir dans les commentaires ci-dessous.

Allez-y et commencez à créer des formulaires réactifs aux mobiles avec Jotform !

“`