Allez plus loin dans la personnalisation des formulaires !

06Sep, 2016

2Réaction(s)

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. !