Remarque
Ce guide est désormais obsolète, car les formulaires Jotform sont compatibles avec les appareils mobiles par défaut. Aucune configuration supplémentaire n’est donc requise.
L’utilisation du web mobile est devenue incontournable. Si votre site web ne s’affiche pas correctement sur mobile, vous risquez de perdre des utilisateurs. Les internautes utilisent fréquemment leurs appareils mobiles pour accéder aux sites web, notamment à vos formulaires (inscription, contact, génération de prospects et bien plus encore). Pour une utilisation optimale et une expérience utilisateur de qualité, vos formulaires doivent être compatibles avec tous les appareils. Une solution consiste à les rendre adaptatifs. Ainsi, quel que soit l’appareil utilisé, votre formulaire s’affichera correctement, sans nécessiter de zoom. Ce tutoriel vous montre comment créer des formulaires adaptatifs avec Jotform.
Jotform propose plusieurs options pour créer des formulaires adaptés aux mobiles, sans écrire une seule ligne de code, pour les utilisateurs qui n’ont aucune expertise technique. Voici comment créer des formulaires compatibles avec les appareils mobiles grâce à Jotform.
Rendre un formulaire adaptatif dans le Générateur de formulaires
Il s’agit de la méthode recommandée, car elle permettra à votre formulaire de s’adapter parfaitement aux appareils mobiles, comme les iPhones et les iPads, en mode portrait et paysage. Voici les étapes à suivre pour activer cette fonctionnalité sur votre formulaire :
- Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’icône de rouleau à peinture afin d’ouvrir le Concepteur de formulaires.
- Cliquez sur le bouton Outil de conception avancé en bas du volet Concepteur de formulaires qui s’est ouvert à droite.
- Accédez à la section Mise en page du formulaire.
- Cochez l’option Rendre ce formulaire adaptatif.
Conseil de pro
Le Générateur de formulaires Jotform intègre un mode Aperçu pour Prévisualiser le formulaire sur différents appareils et affichages. Cliquez sur le bouton Enregistrer en haut à gauche de l’écran. Une fois l’enregistrement effectué, l’icône de Prévisualisation du formulaire s’affichera.
Utiliser la puissance de l’injection de CSS
Si vous avez un style bien défini en matière de conception de formulaires et que vous préférez le code CSS personnalisé, alors ce produit est fait pour vous. Cependant, il est destiné aux utilisateurs qui ont une certaine connaissance technique.
Vous pouvez insérer du code CSS personnalisé via le Générateur de formulaires Jotform ou le Concepteur de formulaires. Voici comment injecter du code CSS personnalisé avec le Générateur de formulaires. Le Concepteur de formulaires étant plus avancé, nous vous recommandons de l’utiliser pour écrire votre code CSS. Pour commencer à créer du code CSS personnalisé, cliquez sur l’onglet CSS dans le Concepteur de formulaires.
Conseils rapides pour injecter du CSS personnalisé :
La méthode classique des requêtes média (@media query) permet de rendre les pages web adaptatives. Cela s’applique également aux formulaires. Elle définit des règles de style différentes selon le type d’écran ou l’appareil utilisé. Voici un exemple de requête média CSS ciblant des largeurs spécifiques.
/* Targets display area with 768px maximum width*/
@media screen and (max-width:768px) {
/* STYLES GO HERE */
} Voici une bonne source pour en savoir plus sur les codes CSS de requêtes média ciblant différents appareils.
Utiliser un widget adaptatif pour mobile
Si vous préférez utiliser un widget plutôt que de conserver les deux options ci-dessus ou d’injecter votre propre code CSS, ce widget a tout vu et a aidé des millions de formulaires à faire ce dont ils avaient besoin : être adaptés aux mobiles.
Nous vous suggérons d’utiliser plutôt l’une des deux premières options, mais pour être complet, ce widget est un excellent moyen d’obtenir le même résultat.
Pour en savoir plus sur l’ajout de widgets à vos formulaires, consultez notre guide intitulé Comment ajouter un widget à votre formulaire.
Thèmes adaptatifs pour mobiles
Parfois, le thème est la meilleure solution pour sublimer votre formulaire et garantir son bon fonctionnement quel que soit l’appareil utilisé. Choisissez parmi nos superbes thèmes conçus par différents designers afin de donner à votre formulaire l’avantage que vous recherchez. Ils sont disponibles ici.
Remarque
Garantir une réactivité optimale sur mobile peut s’avérer complexe. Face à la multitude d’appareils mobiles disponibles sur le marché et à leurs performances proches de celles des ordinateurs de bureau, assurer une réactivité fluide sans une gestion appropriée peut être un véritable défi.
Si vous intégrez votre formulaire sur votre site web et que son apparence avec les deux options activées ne vous satisfait pas, n’hésitez pas à faire des essais.
Vous pouvez essayer n’importe quelle combinaison mentionnée ci-dessus. Si vous trouvez une nouvelle façon d’obtenir une compatibilité mobile qui n’est pas abordée ici, veuillez nous en faire part dans les commentaires ci-dessous.
Commencez à créer des formulaires adaptés aux mobiles avec Jotform dès maintenant !
Envoyer un commentaire: