06Sep, 2016
4Ré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. !

image_pdfimage_print

Il y a 4 commentaires

  • 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

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