Allez plus loin dans la personnalisation des formulaires !
Vous pouvez personnaliser les champs de saisie de vos formulaires, vos séparateurs en modifiant leur taille, couleur et en y ajoutant différentes icônes.
Vous pouvez également personnaliser vos listes dans l’élément choix.
Etape 1 : Personnalisez vos champs de saisie.
- Allez dans les options du champ à modifier, onglet Affichage.
- Dans la liste déroulante « Taille de l’élément » sélectionnez « Normal », « Plus grand », « Plus petit » pour régler la taille de votre champ.
Voici un exemple de formulaire où 4 champs de saisie ont été configurés avec la plus petite taille afin de rentrer sur la même ligne sur une tablette :
- Pour changer la couleur du champ, cliquez sur la liste déroulante « Couleur » et sélectionnez celle qui vous convient.
Voici un exemple de formulaire avec des champs de saisie de couleur :
- Pour ajouter une icône, cliquez sur la case « Icône » et sélectionnez celle qui vous convient.
- Dans la case « Texte d’aide », vous pouvez entrer des informations nécessaires à la compréhension de votre champ. Il sera matérialisé par une Info-bulle.
Sur le mobile/tablette, ce texte d’aide se matérialisera par une info-bulle :
- Cliquez sur Valider pour enregistrer vos paramètres.
Etape 2 : Personnalisez vos séparateurs.
- Allez dans les options de votre séparateur puis dans l’onglet Affichage.
- Dans la liste déroulante « Hauteur» sélectionnez « Grand», « Moyen », « Petit » pour définir la taille de votre séparateur.
- Pour changer la couleur du séparateur, cliquez sur la liste déroulante « Couleur de fond » et sélectionnez celle qui vous convient.
- Pour ajouter une icône à votre séparateur, cliquez sur la case « Icône » et sélectionnez celle qui vous convient.
- Cliquez sur Valider pour enregistrer vos paramètres.
Voici un exemple de formulaire avec des séparateurs de différentes tailles et différentes couleurs :
Etape 3 : Personnalisez vos champs choix.
- Allez sur le site Font Awesome Icons qui vous permettra de choisir votre ou vos icônes à insérer dans vos formulaires.
- Cliquez sur l’icône souhaitée et notez le code correspondant à l’icône. Ce code commence toujours par « fa- ».
- Dans votre formulaire, allez dans les options de votre champ choix puis dans l’onglet Propriétés.
- Remplissez le champ « Eléments de la liste (Libellé ou Code:Libellé) » avec vos différents choix.
- Remplissez le champ « Icônes » avec les codes des icônes souhaitées dans le même ordre que les éléments de la liste rentrés précédemment.
Pour rappel, les codes des icônes commencent par « fa- ».
- Pour finir, cliquez sur Valider pour enregistrer.
Voici le résultat sur votre mobile/tablette :
N’hésitez pas à commenter cet article !
Nous sommes disponibles pour répondre à vos questions, suggestions, remarques, etc. !
Il y a 10 commentaires
matthew
23 Sep, 2019
bonjour,
est il possible de réduire la taille des choix de manière à ce qu’ils aient sensiblement le même format que la question ?
cordialement
Patrick Carloni
23 Sep, 2019
Bonjour,
à aujourd’hui, il n’est pas possible de modifier la dimension des champs à l’affichage sur l’application mobile.
En espérant avoir répondu à votre question.
Cyril ANIEL
15 Avr, 2019
Bonjour,
Je n’arrive pas à changer la couleur de fond des séparateurs lors de l’export en pdf. Cela reste noir.
Merci à vous,
Adeline Lucarelli
15 Avr, 2019
Bonjour,
Si vous avez défini une couleur dans l’onglet “Avancé” de votre séparateur, ce paramétrage est défini pour l’affichage sur l’appareil mobile. Dans le PDF standard il reste en noir. Si vous utilisez un export personnalisé, il suffit d’utiliser la balise du séparateur et de la mettre en forme a votre guise directement sur le modèle Word.
Je reste à votre disposition en cas de besoins.
Cordialement
Mélinda
19 Déc, 2018
Bonjour,
j’ai essayé d’ajouter des icônes, qui ne sont pas déjà dans l’application (exemple: l’icône snapchat) mais cela ne fonctionne pas.
je l’ai écrit de cette manière : fa-snapchat.
Est-ce la bonne méthode ?
Merci
Jean-Didier Baculard
19 Déc, 2018
Bonjour
fa-snapchat n’existe pas dans font-awesome.
https://fontawesome.com/icons?d=gallery (nous utilisons jusqu’à la version 4.4)
Cordialement
Romain DANIEL
16 Nov, 2018
Bonjour,
comment fait t’on pour mettre sur la même ligne 2 champs sur une tablette comme dans votre exemple ci dessus ? (je vois l’option pour le mobile mais pas pour la tablette)
merci
Jean-Didier Baculard
16 Nov, 2018
Bonjour
Il s’agit d’une option historique chez nous. Je vous invite à nous contacter par téléphone pour que je vous aide.
Cordialement
Stéphanie
11 Juin, 2018
Bonjour
Est-il possible d’avoir plus de couleur pour les séparateurs, textes …
Merci
Sarah Marivaux
19 Juin, 2018
Bonjour,
Il n’est malheureusement pas possible à aujourd’hui d’obtenir plus de couleur.
Il est cependant prévu pour 2019 d’ajouter de nouveaux “thèmes”.
Cordialement,
Poster un commentaire