06Sep, 2016
0Réaction(s)

Allez plus loin dans la personnalisation des formulaires !

Vous pouvez personnaliser les champs de saisie de vos formulaires, vos séparateurs en modifiant leur taillecouleur 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.

Rendez-vous dans les options de votre formulaire, 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.

Sélectionnez la taille du champ souhaitée.

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 :

Exemple de formulaire où 4 champs de saisie ont été configurés avec la plus petite taille.

  • Pour changer la couleur du champ, cliquez sur la liste déroulante « Couleur » et sélectionnez celle qui vous convient.

Sélectionnez la couleur souhaitée.

Voici un exemple de formulaire avec des champs de saisie de couleur :

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.

Sélectionnez l'icône souhaitée.

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

Vous pouvez renseigner un texte d'aide.

Sur le mobile/tablette, ce texte d’aide se matérialisera par une info-bulle :

Sur le mobile, le texte d'aide se matérialise 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.

 Rendez-vous dans les options de votre séparateur, onglet Propriétés.

  • 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 :

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

Notez le code correspondant à l’icône qui commence par « fa-».

  • Dans votre formulaire, allez dans les options de votre champ choix puis dans l’onglet Propriétés.

Rendez-vous dans les options de votre champ choix, onglet Propriétés.

  • Remplissez le champ « Eléments de la liste (Libellé ou Code:Libellé) » avec vos différents choix.

Remplissez le champ « Eléments de la liste (Libellé ou Code:Libellé) ».

  • 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- ».

Remplissez le champ « Icônes » avec les codes des icônes souhaitées.

  • Pour finir, cliquez sur Valider pour enregistrer.

Voici le résultat sur votre mobile/tablette :

Résultat sur le mobile.

N’hésitez pas à commenter cet article !
Nous sommes disponibles pour répondre à vos questions, suggestions, remarques, etc. !

Poster un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *