Gestion de l'affichage des erreurs et de la surbrillance des champs de formulaire

Jotform facilite la gestion du comportement des champs lorsque les utilisateurs interagissent avec votre formulaire ou commettent des erreurs. Les formulaires intègrent deux fonctionnalités clés : l’affichage des erreurs, qui avertit les utilisateurs lorsqu’un champ obligatoire est vide ou incorrectement renseigné, et l’effet de surbrillance, qui met en évidence le champ sélectionné. Ensemble, ces mécanismes guident les utilisateurs tout au long du remplissage du formulaire, améliorent la précision des réponses et offrent une expérience plus fluide.

Effet de surbrillance

Affichage des erreurs

Vous pouvez désactiver ou personnaliser ces deux fonctionnalités afin de mieux les adapter à la conception de votre formulaire et d’améliorer l’expérience utilisateur globale.

Watch on youtube

How to Customize Highlight Effect and Error Messages in Jotform

Comment supprimer le statut d’erreur

Si vous préférez ne pas utiliser les messages d’erreur par défaut de Jotform, vous pouvez injecter du code CSS personnalisé pour les supprimer. Le formulaire reste ainsi épuré tout en fournissant aux utilisateurs une indication visuelle discrète. Voici la marche à suivre.

1. Commencez par copier ce code :

.form-error-message {
    display: none;
}
.form-validation-error {
    box-shadow: none !important;
}
.form-line-error {
    background: none;
}

2. Puis, dans le Générateur de formulaires Jotform, cliquez sur l’icône de rouleau à peinture située à droite de la page afin d’ouvrir le Concepteur de formulaires.
3. Dans le volet Concepteur de formulaires, cliquez sur l’onglet Styles et faites défiler vers le bas, puis collez le code dans la section Injecter du CSS personnalisé.

Cette action supprimera les messages d’erreur et les mettra en évidence par une simple bordure rouge, comme illustré dans l’image ci-dessous :

Désactiver l’effet de surbrillance

L’effet de surbrillance modifie subtilement l’arrière-plan lorsqu’un champ est sélectionné. Si vous préférez un formulaire épuré et sans distraction, vous pouvez facilement le désactiver. Voici comment procéder :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’onglet Paramètres en haut dans la barre de navigation orange.
2. Dans la page Paramètres du formulaire, cliquez sur le bouton Afficher plus d’options.

3. Ensuite, faites défiler vers le bas jusqu’à la section Effet de surbrillance et sélectionnez Désactivé dans le menu.

Personnaliser l’affichage des erreurs

Les messages d’erreur permettent aux utilisateurs de repérer et de corriger rapidement les champs qu’ils ont oublié de renseigner dans votre formulaire. Vous pouvez personnaliser l’apparence de ces messages pour qu’ils correspondent à votre style et soient bien visibles. Voici un guide rapide :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’icône de rouleau à peinture en haut à droite pour ouvrir le Concepteur de formulaires.

2. Dans le volet Concepteur de formulaires qui s’ouvre à droite, cliquez sur le bouton Outil de conception avancé situé tout en bas. Une nouvelle page apparaît à l’écran.

3. Dans l’onglet Conception (Design), dans la section Schéma de couleurs (Color Scheme), cochez la case Simuler l’état d’erreur (Simulate error state) afin de voir à quoi cela ressemble votre formulaire pendant la personnalisation de l’effet.
4. Cliquez ensuite sur l’icône d’engrenage située à côté.

5. Dans la section Styles d’erreur (error styles) qui s’affiche, configurez les éléments suivants :

• Le modèle de statut d’erreur du message
• La couleur d’arrière-plan du message d’erreur
• La couleur du message

5. Puis, dans le coin supérieur gauche de la page, cliquez sur l’icône de disque afin d’enregistrer les modifications.

Comment personnaliser l’effet de surbrillance

L’effet de surbrillance permet de faire ressortir les champs lorsqu’on clique dessus. Vous pouvez facilement adapter le style à la conception de votre formulaire. Voici un guide rapide :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform et cliquez sur l’icône de rouleau à peinture en haut à droite de l’écran pour ouvrir le Concepteur de formulaires.

2. Dans le volet Concepteur de formulaires qui s’ouvre, cliquez sur le bouton Outil de conception avancé.

3. Dans l’onglet Conception (Design), dans la section Schéma de couleurs (Color Scheme), cochez la case Simuler la surbrillance (Simulate highlight) afin de voir à quoi cela ressemble votre formulaire pendant la personnalisation de l’effet.
4. Cliquez ensuite sur l’icône d’engrenage située à côté.

5. Dans la section Styles de surbrillance (Highlight styles), cliquez sur Page et définissez votre couleur de surbrillance.
6. Puis, en haut à gauche de la page, cliquez sur l’icône de disque pour enregistrer vos modifications.

Et voilà ! Grâce à ces options, vous pouvez supprimer, désactiver ou personnaliser entièrement l’affichage des statuts d’erreur et les effets de surbrillance afin de créer un formulaire personnalisé qui guide efficacement vos utilisateurs. Que vous optiez pour la simplicité ou un rendu plus dynamique, ces paramètres vous offrent un contrôle total sur l’expérience de remplissage de votre formulaire.