Générateur de formulaires

Introduction

Form Builder est un élément clé d'iform4u. C'est là que les formulaires sont créés et mis à jour. Le générateur de formulaire fournit les outils nécessaires pour ajouter et supprimer des champs comme d'autres éléments HTML.

Interface utilisateur

L'interface Form Builder est divisée en trois zones : à gauche les champs du formulaire, à droite le concepteur de thème et au centre l'aperçu du formulaire.

Le panneau de gauche comporte trois onglets :

• L'onglet Champs affiche tous les champs et éléments pouvant être ajoutés au formulaire. Faites-les simplement glisser et déposez-les dans la bonne zone.
• L'onglet Paramètres permet de définir le nom du formulaire, la disposition du formulaire (position des étiquettes) et de désactiver tous les champs.
• L'onglet Code permet de voir en temps réel le code HTML généré avec le Form Builder. De là, vous pouvez reconnaître chaque ID d'élément pour manipuler le formulaire de manière plus avancée. Un bouton "Copier" permet de copier facilement l'intégralité du code source.

La zone centrale est l'aperçu du formulaire à partir duquel vous pouvez manipuler chacun des composants.

Le panneau de droite est le Concepteur de thèmes à partir duquel vous pouvez personnaliser l'apparence de votre formulaire :

• Arrière-plans : modifiez l’arrière-plan des différents éléments de votre formulaire.
• Typographie : choisissez la police, le style, la taille et la couleur de tous les éléments de texte de votre formulaire.
• Bordures : définissez l'épaisseur, le style et la couleur des bordures autour de certains éléments de votre formulaire.
• Ombres : ajoutez ou supprimez une ombre portée autour de votre formulaire.
• Boutons : modifiez le texte du bouton Soumettre.
• Et bien plus encore !

- Ajouter un champ

Il existe deux manières d'ajouter un champ :

1. En cliquant sur un widget dans le panneau de gauche. C'est tout ! Le composant de formulaire apparaîtra dans votre formulaire, sous tous les autres composants.
2. Ou, si vous souhaitez ajouter un champ dans un emplacement spécifique.
   • Cliquez sur un widget dans le panneau de gauche et faites-le glisser vers la zone de droite.
   • Au moment où vous entrez dans la zone active du Form Builder, une boîte indiquera où sera placé le champ.
   • Une fois que vous l'avez placé là où vous en avez besoin, déposez le bouton.

- Modifier un champ

Pour modifier un champ :

1. Cliquez sur le champ à modifier et une fenêtre contextuelle apparaîtra avec les informations sur le champ
2. Modifiez les informations selon vos besoins.
3. Cliquez sur Enregistrer.

Remarque : appuyer sur ESC fermera les fenêtres contextuelles.

- Réorganiser les champs

Pour réorganiser un champ (composant) :

1. Cliquez sur un composant et maintenez
2. Faites glisser le composant vers le haut ou vers le bas selon vos besoins.
3. Selon l'endroit où vous faites glisser le composant, une zone active où le composant sera placé apparaîtra.
4. Une fois placé à l'endroit souhaité, relâchez le composant.

- Faites glisser les champs pour créer des colonnes

Pour créer des colonnes avec un champ (composant) :

1. Cliquez sur un widget dans le panneau de gauche et faites-le glisser vers le canevas du générateur de formulaire.
2. Faites-le glisser vers la gauche ou la droite d'un champ existant.
3. Une bordure indiquera où sera placé le champ.
4. Une fois que vous l'avez placé là où vous en avez besoin, déposez le widget.

Dans le générateur de formulaire, vous pouvez faire glisser les champs existants dans la « zone de dépôt de colonnes » - le générateur redimensionnera alors automatiquement tous les champs de la zone de dépôt pour créer des colonnes de largeur égale.

Vous pouvez créer jusqu'à quatre colonnes avec cette méthode. Cependant, vous pouvez concevoir des formulaires avec/jusqu'à 12 colonnes qui s'adaptent parfaitement à l'espace disponible sur votre site Web en utilisant la Container Css Class .

- Copier un champ

Pour copier un champ (composant) :

1. Cliquez sur un composant et maintenez-le enfoncé.
2. Cliquez sur le bouton « Copier » dans la fenêtre Popover

Vous remarquerez que le champ copié apparaîtra sous le champ d'origine.

- Supprimer un champ

Pour supprimer un champ (composant) :

1. Cliquez sur un composant et maintenez-le enfoncé.
2. Faites-le glisser hors de la zone active.
3. Libérer.

Vous remarquerez que le composant a disparu.

- Copier l'ID du champ

Pour copier l'ID de champ, procédez comme suit :

1. Cliquez sur un composant et maintenez-le enfoncé.
2. Cliquez sur les 3 points verticaux (dans l'en-tête Popover)
3. Cliquez sur Copier l'ID.

Vous pouvez désormais le coller ailleurs, comme dans un message électronique personnalisé ou dans une conception CSS.

Paramètres de base du formulaire

En cliquant sur l'onglet Paramètres du Form Builder, vous accéderez à une version très basique de la configuration du formulaire. À partir de là, vous pouvez :

1. Changer le nom du formulaire : Le nom du formulaire sert à reconnaître le formulaire dans les pages d'administration et est également affiché comme titre de la page publique du formulaire sur iform4u.
2. Modifier la présentation du formulaire: La mise en page du formulaire est basée sur Bootstrap CSS et est utilisée pour localiser la position des étiquettes sur le formulaire.
   • La disposition verticale affiche les étiquettes de champ ci-dessus,
   • La disposition horizontale affiche les étiquettes sur le côté gauche du champ, et
   • La disposition Inline masque les étiquettes et affiche les champs les uns à côté des autres. Par exemple, vous pouvez l'utiliser sur un formulaire d'inscription par courrier, pour placer un champ Email et un bouton à côté.
3. Désactiver les éléments du formulaire : vous permet de désactiver tous les champs du formulaire. Il s'agit d'une option avancée qui peut être utile si vous envisagez d'interagir avec le formulaire à partir d'un fichier javascript externe.

Ces options de base sont intimement liées au générateur de formulaires. Cependant, vous disposez d'autres options de configuration beaucoup plus avancées accessibles depuis le gestionnaire de formulaires .

Paramètres de champ

Chaque champ de formulaire possède de nombreuses options de configuration, par exemple le libellé, la valeur par défaut, la classe CSS, etc. Pour configurer un champ, allez dans l'aperçu et cliquez dessus.

Options de configuration

Ensuite, toutes les options de configuration sont affichées par ordre alphabétique. Tous ne concernent pas tous les domaines, mais si vous rencontrez un problème, utilisez cette liste comme référence.

- Accepter:

Cette option se trouve dans le champ Téléchargement de fichiers. Avec lui, vous pouvez limiter le type de fichiers que le champ peut accepter. Vous devriez considérer ce qui suit

• Vous devez ajouter les extensions de fichiers en commençant par le point et séparées par des virgules.
• Par défaut, tous les fichiers seront validés et ne seront acceptés que les fichiers image avec l'extension '.gif, .jpg, .png'.
• Par exemple, pour accepter les fichiers texte, vous pouvez modifier cette option par : « .doc, .docx, .txt ».
• Si vous souhaitez accepter tous les types de fichiers, vous devez laisser ce champ vide.
• Cette option active l'attribut « accepter » de la norme HTML5, de sorte que la validation du champ est effectuée à la fois côté client (navigateur) et côté serveur.

- Alias :

L'option Alias ​​vous permet d'envoyer des notifications WebHook en utilisant l'alias du champ au lieu du nom du champ. Par exemple, nous pourrons renvoyer des données POST en utilisant « nom » ou « âge » au lieu de « texte_0 » ou « numéro_0 ».

- Cases à cocher :

L'option Cases à cocher n'est disponible que dans les champs Case à cocher et est utilisée pour ajouter des cases à cocher au composant.

Par exemple, entrez dans l'éditeur Bulk, ajoutez les « cases à cocher » suivantes et cliquez sur « Enregistrer » :

First Choice|1
Second Choice|2|selected
Third Choice|3
Fourth Choice|4|selected
Fifth Choice|5

L'aperçu du formulaire affichera un composant Checkbox avec 5 cases à cocher : Premier choix, Deuxième choix, Troisième choix, Quatrième choix et Cinquième choix. Les cases « Deuxième choix » et « Quatrième choix » seront cochées. Et enfin, si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra les valeurs : 2,4.

- Vérifiez le DNS :

Cette option indique à l'application que, lors du processus de validation du champ de messagerie, il vérifie que le domaine de messagerie existe réellement et qu'il contient des enregistrements « A » et « MX ».

Prudence! Il s’agit d’une option avancée qui doit être utilisée avec prudence. La vérification peut échouer en raison d'un problème avec les serveurs DNS, même s'il s'agit d'un e-mail valide. Par défaut, il est désactivé.

- Classe CSS :

Vous permet d'ajouter une ou plusieurs classes CSS au champ de formulaire.

- Classe CSS du conteneur :

Vous permet d'ajouter une ou plusieurs classes CSS au conteneur de l'ensemble du composant.

Vous pouvez créer des formulaires multi-colonnes en définissant la classecol-xs-* (l'astérisque représente le nombre de colonnes, entre 1 et 12).

Par exemple:

Si vous souhaitez placer deux champs dans deux colonnes, vous devez procéder comme suit :

1. Ajoutez la classe CSS conteneur au premier champ : `col-xs-6
2. Ajoutez la classe CSS du conteneur au deuxième champ : `col-xs-6

Dans cet exemple, nous utilisons les classes CSS prédéfinies « no-padding » pour supprimer le remplissage que Bootstrap CSS ajoute aux colonnes. Vous pouvez les ajouter ou non selon votre conception. Sinon, vous pouvez ajouter la classe CSS conteneur col-xs-12 au reste des champs, pour conserver le même remplissage sur chaque champ.

Important! Vous pouvez consulter la documentation Bootstrap CSS pour plus d'informations.

Note:

• Par défaut, tous les champs, à l'exception de Button, sont accompagnés de la classe :form-group . Cette classe ne peut pas être modifiée.
• Par défaut, le champ Button est livré avec la classe :form-action . Cette classe ne peut pas être modifiée.

- Attributs personnalisés :

Vous pouvez ajouter des attributs personnalisés à un champ. Ces attributs comportent deux parties : le nom de l'attribut et la valeur de l'attribut. Cette fonctionnalité permet de créer des formulaires plus accessibles, notamment parce que vous pouvez l'utiliser pour ajouter :

• Attributs de données : utiles pour intégrer des champs de formulaire avec des bibliothèques javascript
• Attributs Aria : Utile pour mieux décrire les champs de formulaire et offrir plus d'accessibilité.

- Valeur par défaut :

Vous pouvez ajouter une valeur par défaut à un champ. Cette valeur apparaît par défaut, mais l'utilisateur peut la modifier. Si l'utilisateur soumet le formulaire sans avoir modifié la valeur par défaut, cette valeur sera collectée pour traiter la soumission.

- Désactivé:

Vous pouvez désactiver un champ si vous souhaitez qu'il soit affiché à l'utilisateur, mais pas modifié. (Notez que vous pouvez également désactiver un champ masqué). Contrairement à l'option Lecture seule, un champ désactivé n'est pas envoyé au serveur. Autrement dit, les informations stockées dans un champ désactivé ne sont pas reçues et n'apparaissent donc pas sur le gestionnaire de soumissions.

- Taille du champ :

Un champ Zone de texte permet de configurer sa taille. La taille doit être un nombre entier et indique le nombre de lignes affichées ou autrement dit la hauteur du champ. Par défaut c'est 3.

- Texte d'aide :

Le texte que vous tapez ici apparaîtra sous le champ et est souvent utilisé pour donner aux utilisateurs des instructions sur ce qu'il faut y mettre.

- Placement du texte d'aide :

Ce menu déroulant vous permet de déplacer le texte d'aide au-dessus ou en dessous du champ du formulaire.

- En ligne :

L'option Inline se trouve dans les champs Case à cocher et les boutons radio et est utilisée pour modifier la position verticale des cases à cocher ou des boutons radio pour une position horizontale.

-Type d'entrée :

De nombreux champs vous permettent de modifier le type d'entrée pour spécifier le type de données que vous recevrez. Par exemple, un champ de texte peut avoir un type d'entrée « URL », pour garantir que le texte que vous saisissez ici est une URL absolue commençant par les lettres « http ».

- Entier uniquement :

Vous pouvez activer cette option si vous souhaitez que la valeur de ce champ soit uniquement un nombre entier. Si l'utilisateur saisit un nombre à virgule flottante, le formulaire ne sera pas traité et une erreur de validation apparaîtra.

- Modèle entier :

Est une option avancée du champ numérique qui vous permet de personnaliser l'expression régulière qui n'accepte que les nombres entiers (0-9) et sera utilisée dans le processus de validation du formulaire. L'expression régulière utilisée par défaut est '/^\s[+-]?\d+\s$/' ;

- Étiquette

C'est la manière la plus courante d'informer l'utilisateur de la valeur qu'il doit saisir dans le champ. Généralement, il est affiché en haut du champ, mais vous pouvez modifier cette position en changeant la présentation du formulaire.

- Classe CSS d'étiquette :

Permet d'ajouter une ou plusieurs classes CSS à l'étiquette. Gardez à l’esprit que si vous souhaitez masquer une étiquette, vous pouvez ajouter la classe CSS Bootstrap 3 « sr-only ».

Remarque : Par défaut, tous les champs sont livrés avec la classe CSS : control-label. Il est recommandé de ne pas le supprimer.

- Date minimale :

Vous pouvez définir une date comme date minimale à prendre en compte dans le processus de validation des champs. Si l'utilisateur saisit une date antérieure, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

La date doit conserver le format suivant : aaaa-mm-jj (format standard HTML5) pour les dates statiques. Vous pouvez également utiliser des balises pour valider les dates relatives :

• {today} : Aujourd'hui est la date minimale.
• {today:+1} : Demain est la date minimale.
• {today:-1} : Hier est la date minimale.

-Date maximale :

Vous pouvez définir une date comme date maximale à prendre en compte dans le processus de validation des champs. Si l'utilisateur saisit une date ultérieure, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

La date doit conserver le format suivant : aaaa-mm-jj (format standard HTML5) pour les dates statiques. Vous pouvez également utiliser des balises pour valider les dates relatives :

• {today} : Aujourd'hui c'est la date maximale.
• {today:+1} : Demain est la date maximale.
• {today:-1 } : Hier est la date maximale.

- Nombre minimum :

Vous pouvez définir un nombre entier ou à virgule flottante comme nombre minimum à prendre en compte dans le processus de validation des champs. Si l'utilisateur saisit un nombre inférieur, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

- Nombre maximum :

Vous pouvez définir un nombre entier ou à virgule flottante comme nombre maximum à prendre en compte dans le processus de validation des champs. Si l'utilisateur saisit un nombre plus grand, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

- Taille minimale :

Vous pouvez définir un nombre entier comme taille minimale à prendre en compte dans le processus de validation du champ. Si l'utilisateur télécharge un fichier d'une taille inférieure à celle que vous avez définie, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

Le nombre entier représente le nombre d'octets autorisés. Par exemple, Min Size : 10311680 (résultant de la multiplication de 1024 x 1024 x 5), la taille minimale du fichier doit être de 5 Mo.

- Taille maximale :

Vous pouvez définir un nombre entier comme taille maximale qui sera prise en compte lors du processus de validation du champ. Si l'utilisateur télécharge un fichier d'une taille supérieure à celle que vous avez définie, le formulaire ne sera pas envoyé et une erreur de validation apparaîtra. Si cette option n'est pas définie, cette limitation n'existera pas.

Le nombre entier représente le nombre d'octets autorisés. Par exemple, Taille maximale : 10311680 (résultant de la multiplication de 1024 x 1024 x 5), la taille maximale du fichier doit être de 5 Mo.

- Longueur minimale :

Vous pouvez définir un nombre entier comme longueur minimale de la chaîne d'entrée. S’il n’est pas défini, cela signifie qu’il n’y a pas de limite de longueur minimale.

- Longueur maximale :

Vous pouvez définir un nombre entier comme longueur maximale de la chaîne d'entrée. S’il n’est pas défini, cela signifie qu’il n’y a pas de limite de longueur maximale.

- Fichiers minimum :

Vous pouvez définir un nombre entier comme nombre minimum de fichiers que l'utilisateur final doit télécharger pour réussir la validation.

- Nombre maximum de fichiers :

Vous pouvez définir un nombre entier comme nombre maximum de fichiers que l'utilisateur final doit télécharger pour réussir la validation. Utilisez cette fonctionnalité pour autoriser plusieurs téléchargements avec le même champ Fichier .

- Longueur maximale :

Vous pouvez définir un nombre entier comme nombre maximum de fichiers que l'utilisateur final doit télécharger pour réussir la validation.

- Multiples :

Cette option indique que l'utilisateur peut saisir plusieurs valeurs. Vous pouvez trouver cette option dans les champs Email et Select List :

• Si l'option Multiple a été activée sur un champ Email, vous pouvez ajouter plusieurs adresses e-mail valides séparées par des virgules. Par exemple: ','.
• Si l'option Multiple a été activée dans un champ Liste de sélection, vous pouvez sélectionner plusieurs options. Les informations collectées auront un format séparé par des virgules. Par exemple : « Option 1, Option deux ».

- Modèle de numéro :

Est une option avancée du champ numérique qui vous permet de personnaliser l'expression régulière qui accepte n'importe quel nombre et qui sera utilisée dans le processus de validation du formulaire. L'expression régulière utilisée par défaut correspond à un nombre à virgule flottante et éventuellement à une partie exposant (par exemple -1.23e-10) : '/^\s[-+]?[0-9].?[0-9]+( [eE][-+]?[0-9]+)?\s*$/'.

-Options :

L'option Options se trouve uniquement dans les champs de la liste de sélection et est utilisée pour ajouter des options de sélection au composant.

Par exemple, si vous saisissez dans le champ Options du formulaire contextuel :

One|1
Two|2|select
Three|3
Four|4
Five|5

L'aperçu du formulaire affichera une boîte avec le texte « Deux ». Et si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra la valeur : 2.

- Modèle

Il s'agit d'une option avancée qui vous permet d'ajouter une expression régulière au champ à utiliser dans le processus de validation du formulaire. Si la valeur envoyée par l'utilisateur ne correspond pas à ce modèle, le formulaire ne sera pas traité et une erreur de validation apparaîtra.

- Espace réservé

C'est une manière alternative de décrire la valeur que l'utilisateur doit saisir dans le champ. Par défaut, l'espace réservé apparaît dans le champ jusqu'à ce que l'utilisateur commence à saisir des données.

- Radios :

L'option Radios est disponible dans les composants Bouton radio et est utilisée pour ajouter des boutons radio au formulaire.

Par exemple, si vous cliquez sur Bulk Editor et saisissez les radios suivantes :

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'aperçu du formulaire affichera cinq boutons radio avec les mots : Un, Deux, Trois, Quatre et Cinq. L'option Deux sera sélectionnée. Ensuite, si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra la valeur : 2

- Lecture seule :

Lorsque vous activez cette option, le champ sera affiché à l'utilisateur mais il ne pourra pas le modifier. Les informations contenues dans un champ Lecture seule sont reçues et validées par le serveur lorsque le formulaire est soumis. Il sera également collecté par le gestionnaire de soumission.

- Requis

Cette propriété permet de s'assurer que l'utilisateur complète un champ spécifique avant d'envoyer le formulaire. Si l'utilisateur soumet le formulaire avec un champ obligatoire vide, le formulaire n'est pas traité et un message d'erreur s'affiche à la place. Par défaut, les étiquettes des champs obligatoires comportent un astérisque rouge à droite.

- Numéro d'étape :

Avec cette option, vous pouvez définir l'attribut HTML5 'step' des champs Numéro et Date. L'attribut 'step' spécifie le nombre valide à utiliser comme intervalle lors de la modification des valeurs de ce champ à l'aide des contrôleurs du navigateur. Les navigateurs modernes reconnaissent cet attribut.

Important! Si l'option « Entier uniquement » est activée dans le champ Numéro, il est recommandé de définir votre « Numéro d'étape » sur 1.

- Unique:

Cette option vous permet de vérifier que les informations saisies dans ce champ sont uniques et n'ont pas été soumises précédemment. Utile pour les listes de diffusion et les formulaires d'inscription, où il est souvent nécessaire d'empêcher les utilisateurs de saisir les mêmes informations plus d'une fois.

Types de champs

- Titre

Les titres sont utilisés pour marquer les sections du formulaire, ainsi que pour leur donner un titre. Par exemple, lorsque vous entrez dans le générateur de formulaires pour en créer un, vous verrez un en-tête (h3) avec le texte « Formulaire sans titre ». Pour modifier ce texte, cliquez simplement dessus. Immédiatement, un formulaire apparaîtra avec toutes les options pour le personnaliser.

- Paragraphe

Les paragraphes sont des composants utilisés pour étoffer un formulaire. Par exemple, vous pouvez les utiliser pour inviter vos utilisateurs à remplir le formulaire ou à donner des indications. Lorsque vous entrez dans le générateur de formulaires pour en créer un, vous verrez un paragraphe avec le texte « Ceci est mon formulaire. Veuillez le remplir. Merci ! » Pour modifier ce texte, cliquez simplement dessus. Immédiatement, un formulaire apparaîtra avec toutes les options pour le personnaliser.

- Champ de texte

Un champ de texte est un composant qui permet d'écrire une seule ligne de texte. Les navigateurs Web considèrent le champ texte comme le champ standard par défaut parmi d'autres plus spécialisés comme l'URL ou la couleur. Le champ de texte peut avoir cinq types de saisie différents, chacun étant utilisé pour valider les données différemment. Les cinq types sont :

• Texte : Il s'agit du type par défaut pour ce composant. Et c'est celui qui est couramment utilisé dans les formulaires, car il n'offre aucune validation et acceptera toutes les données envoyées par l'utilisateur. Si le navigateur ne reconnaît aucun autre type, ce champ sera affiché à la place.
• Url : Ce type a été introduit par HTML5 et désormais les navigateurs modernes l'acceptent. Utilisez le type d'URL si vous souhaitez collecter des URL absolues commençant par « http ».
• Couleur : Ce type a été introduit par HTML5 et les navigateurs modernes qui l'acceptent, affiche automatiquement une palette de couleurs lorsque vous cliquez dessus. Utilisez le type Couleur si vous souhaitez que les données collectées soient la valeur hexadécimale d'une couleur, commençant par le signe « # ». Par exemple, « #FFFFFF ».
• Tel : Ce type a été introduit par HTML5 et désormais les navigateurs modernes l'acceptent. Utilisez ce type si les données à collecter sont un numéro de téléphone.
• Mot de passe : Tous les navigateurs reconnaissent ce type de saisie. Utilisez ce type de saisie si vous souhaitez que l'utilisateur saisisse des données non affichées à l'écran. Notez que iform4u n'est pas destiné à stocker des mots de passe, principalement parce que les données sont stockées sous forme de texte brut. Si nécessaire, utilisez ce type d’entrée avec prudence.

- Champ de numéro

Un champ numérique est un composant utilisé pour collecter des nombres en tant que contenu. Suivant la norme HTML5, ce composant peut être de 2 types :

• Numéro : C'est le type qui doit être utilisé lorsque vous souhaitez que l'utilisateur tape le numéro. Par exemple, vous pouvez demander : « Quel âge avez-vous ? » Si l'utilisateur saisit « Cinq ans », il est informé qu'il ne doit écrire que des chiffres : 5, dans ce cas.
• Range : Ce type de saisie est également utilisé pour collecter des données numériques, mais contrairement à Number, les navigateurs modernes affichent un curseur que l'utilisateur peut utiliser pour saisir ses données. Par exemple, vous pouvez demander « De 1 à 10, quel est votre niveau en mathématiques ? » Selon la façon dont vous faites glisser le curseur, la valeur sera supérieure ou inférieure.

Contrairement aux composants Text, les composants Number offrent de nombreuses options de validation différentes. Par exemple, Integer Only indique que le champ ne doit collecter que des données numériques entières : les décimales ne sont pas acceptées ! Vous pouvez également définir le nombre minimum et maximum à saisir et plus encore. Toutes ces options suivent le standard HTML5 et sont également validées sur le serveur.

- Champ de date

Un champ de date est un composant utilisé pour collecter des dates valides. Les champs de date ont été introduits par HTML5 et les navigateurs modernes qui les reconnaissent affichent un calendrier en cliquant sur le champ. Ce composant peut avoir 5 types d'entrée différents :

• Date : Le type d'entrée à utiliser si vous souhaitez collecter des dates. Vous devez avoir le format : aaaa-mm-jj.
• DateTime-Local : Le type d'entrée à utiliser si vous souhaitez collecter les dates et les heures. Les données collectées auront le format ISO standard : aaaa-mm-jjThh:mm:ss.
• Heure : Le type d'entrée à utiliser si vous souhaitez collecter les heures au format : hh:mm:ss.
• Mois : Ce type d'entrée est pris en charge par les navigateurs modernes et doit être utilisé si vous souhaitez que l'utilisateur sélectionne le mois ou le mois et l'année. Le format d'entrée est aaaa-mm.
• Semaine : Ce type de saisie est pris en charge par les navigateurs modernes et doit être utilisé si vous souhaitez que l'utilisateur sélectionne la semaine de l'année au format numérique.

Remarque : En effet certains navigateurs modernes n'affichent pas encore le Datepicker lorsque le champ est une date. Mais à l’avenir, ils feront tous l’affaire. Pour l'instant, les navigateurs qui ne le prennent pas en charge sont Safari, Firefox et les versions précédentes d'IE. Pour ces cas, nous pouvons utiliser un widget jQuery UI Datepicker comme solution de secours.

- Champ de courrier électronique

Un champ email est utilisé pour collecter les emails valides. Par défaut, il valide que le texte contient un '@' et un '.' plus deux caractères ou plus pour le domaine de messagerie. De plus, vous devez utiliser ce champ pour envoyer des notifications indiquant que vos utilisateurs sont des expéditeurs (Réponse à).

Une option avancée de ce champ est la possibilité de vérifier le DNS du courrier pour confirmer que le domaine existe réellement et possède un enregistrement A et MX. Il convient de veiller à ce que cette validation puisse échouer en raison de problèmes avec les serveurs DNS, même lorsque le courrier est valide. Par défaut, cette option est désactivée.

- Zone de texte

Une zone de texte est un composant qui vous permet de collecter plusieurs lignes de texte, avec plusieurs paragraphes. C'est un domaine approprié si vous souhaitez que les utilisateurs rédigent un texte complet. Vous pouvez également modifier certains paramètres. Par exemple, vous pouvez modifier la hauteur de la zone de texte, pour afficher plus d'espace à vos utilisateurs. Pour cela, cliquez sur la zone de texte et modifiez la taille du champ qui par défaut est 3.

- Case à cocher

Le composant Checkbox ajoute des cases à cocher au formulaire. Ce composant fournit une liste d'options avec une case à cocher à côté, afin que vos utilisateurs puissent tout cocher, certaines ou aucune. Vous pouvez l'utiliser si vous souhaitez obtenir plusieurs réponses, par exemple : Parmi les éléments suivants, lesquels sont des fruits ?

Pour ajouter, modifier et supprimer des cases à cocher, vous devez cliquer sur le composant. Ensuite, un formulaire apparaît avec le champ « Cases à cocher ». Notez que chaque ligne de ce champ représente un choix différent. Chaque choix peut être composé de trois parties : Étiquette, Valeur et Image. De plus, vous pouvez les vérifier.

Vous pouvez également choisir l’outil Bulk Editor pour insérer des choix séparés par une barre verticale ou une ligne de tuyau. Le format doit être le suivant : Étiquette|Valeur|sélectionné. Les deuxième et troisième parties de ce format sont facultatives.

Par exemple, cliquez sur Bulk Editor et ajoutez les « cases à cocher » suivantes :

One|1
Two|2|selected
Three|3
Four|4|selected
Five|5

L'aperçu du formulaire affichera 5 cases à cocher avec les mots Un, Deux, Trois, Quatre et Cinq. Les options « Deux » et « Quatre » seront sélectionnées. Et, si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra les valeurs : 2,4.

Vous pouvez également ajouter des images ou des icônes aux cases à cocher pour donner une touche plus dynamique à vos formulaires.

Pour insérer une image sur une étiquette de case à cocher, vous devez ajouter l'URL de l'image comme troisième paramètre de configuration de la case à cocher. Par exemple, si nous configurons notre composant comme :

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Nous allons créer cinq cases à cocher :

• One : Crée une case à cocher avec la valeur : 'One' et le label : 'One'
• Two|2 : Crée une case à cocher avec la valeur : '2' et le label : 'Deux'
• Three|3|selected : Crée une case à cocher avec la valeur : '3', le label : 'Trois' et sera cochée par défaut.
• Four|4|http://example.com/image-4.jpg : Crée une case à cocher avec la valeur : '4', le label : 'Quatre' et l'image apparaîtra à côté de la case à cocher.
• Five|5|http://example.com/image-5.jpg|selected : Crée une case à cocher avec la valeur : '5', le label : 'Cinq' et l'image apparaîtra à côté de la case à cocher et sera cochée par défaut.

Pour ajouter des icônes à la place des images, vous devez uniquement remplacer les URL des images par les classes CSS des icônes. Par exemple :glyphicon glyphicon-user , affichera l'icône de l'utilisateur. Gardez à l’esprit que par défaut, l’application dispose de l’ensemble d’icônes Glyphicons Pro ; cependant, vous pouvez utiliser d'autres icônes comme Font Awesome ou DevIcons. Pour cela, il vous suffit d'ajouter les polices au thème CSS de votre formulaire.

Important : Pour ajouter une image ou une icône à la configuration des cases à cocher, vous devez disposer des deux premiers paramètres, même s'ils sont identiques.

Remarque : N'oubliez pas que vous pouvez afficher vos cases à cocher horizontalement en activant l'attribut 'inline'.

- Bouton radio

Radio Button est un composant qui vous permet d'ajouter un groupe de boutons radio au formulaire. Ce composant propose aux utilisateurs une liste de choix, mais ils ne doivent en sélectionner qu'un seul. Par exemple : Quelle est votre couleur préférée ?

Pour ajouter, modifier et supprimer des options, vous devez cliquer sur le composant. Un formulaire apparaît alors avec le champ "Radio". Notez que chaque ligne de ce champ représente une option différente. Et chaque ligne peut être composée de trois parties, séparées par une barre verticale ou une canalisation. Le format doit être le suivant : Étiquette|Valeur|sélectionner. Les deuxième et troisième parties de ce format sont facultatives.

Par exemple, si vous saisissez dans le champ « Radio » du formulaire pop-up :

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'aperçu du formulaire affichera 5 cases à cocher avec les mots Un, Deux, Trois, Quatre et Cinq. L'option "Deux" sera sélectionnée. Et si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra la valeur : 2.

De plus, depuis la version 1.3 vous pouvez ajouter des images ou des icônes aux boutons radio pour donner une touche plus dynamique à vos formulaires.

Pour insérer une image sur une étiquette de bouton radio, vous devez ajouter l'URL de l'image comme troisième paramètre de réglage du bouton radio. Par exemple, si nous configurons notre composant comme :

One
Two|2
Three|3|selected
Four|4|http://example.com/image-4.jpg
Five|5|http://example.com/image-5.jpg|selected

Nous allons créer cinq boutons radio :

• One : Crée un bouton radio avec la valeur : 'One' et le label : 'One'
• Two|2 : Crée un bouton radio avec la valeur : '2' et le label : 'Deux'
• Three|3|selected : Crée un bouton radio avec la valeur : '3', le label : 'Trois' et sera sélectionné par défaut.
• Four|4|http://example.com/image-4.jpg : Crée un bouton radio avec la valeur : '4', le label : 'Quatre' et l'image apparaîtra à côté du bouton radio.
• Five|5|http://example.com/image-5.jpg|selected : Crée un bouton radio avec la valeur : '5', le label : 'Cinq' et l'image apparaîtra à côté du bouton radio et sera sélectionnée par défaut.

Pour ajouter des icônes à la place des images, vous devez uniquement remplacer les URL des images par les classes CSS des icônes. Par exemple :glyphicon glyphicon-user , affichera l'icône de l'utilisateur. Gardez à l’esprit que par défaut, l’application dispose de l’ensemble d’icônes Glyphicons Pro ; cependant, vous pouvez utiliser d'autres icônes comme Font Awesome ou DevIcons. Pour cela, il vous suffit d'ajouter les polices au thème CSS de votre formulaire.

Important : Pour ajouter une image ou une icône à la configuration des boutons radio, vous devez disposer des deux premiers paramètres, même s'ils sont identiques.

Remarque : N'oubliez pas que vous pouvez afficher votre bouton radio horizontalement en activant l'attribut 'inline'.

- Sélectionnez la liste

Une liste de sélection est un menu déroulant qui permet à l'utilisateur de sélectionner une ou plusieurs options, en fonction de la configuration choisie. La principale différence avec le composant Radio Button est que vous pouvez ajouter de nombreuses options sans changer sa taille. Son utilisation est donc recommandée lorsqu'il existe de nombreuses options, par exemple : Sélectionnez votre pays d'origine ?

Pour ajouter, modifier et supprimer des options, vous devez cliquer sur le composant. Un formulaire apparaît alors avec le champ "Options". Notez que chaque ligne de ce champ représente une option différente. Et chaque ligne peut être composée de trois parties, séparées par une barre verticale ou une canalisation. Le format doit être le suivant : Étiquette|Valeur|sélectionné. Les deuxième et troisième parties de ce format sont facultatives.

Par exemple, ajoutez les « Options » suivantes :

One|1
Two|2|selected
Three|3
Four|4
Five|5

L'aperçu du formulaire affichera une boîte avec le texte "Deux" et si l'utilisateur soumet le formulaire sans apporter de modifications, il enverra la valeur 2.

Sélectionnez la liste avec les groupes d'options ¶

Pour créer un groupe d'options<optgroup> , placez le texte entre doubles crochets, par exemple :

[[Swedish Cars]]
Volvo
Saab
[[German Cars]]
Mercedes
Audi

- Champ caché

En ajoutant un champ masqué au formulaire, celui-ci ne sera pas affiché sur le formulaire. Cependant, les champs masqués sont utiles pour les calculs mathématiques ou pour envoyer des valeurs par défaut sans modifier l'interface du formulaire.

Remarque : Vous pouvez ajouter une étiquette à un champ masqué pour travailler plus confortablement dans l'administration du formulaire, par exemple pour créer des règles conditionnelles à l'aide de ce champ.

- Téléchargement de fichiers

Le champ Téléchargement de fichiers est un composant qui permet aux utilisateurs de joindre des fichiers lors de la soumission du formulaire. Une fois envoyés, les fichiers apparaîtront dans les informations détaillées de soumission. Il y a deux détails à prendre en compte :

• Types de fichiers autorisés : vous pouvez limiter les types de fichiers pouvant être téléchargés dans chaque champ de fichier. Par défaut, les types de fichiers autorisés pour l'image sont : « .gif, .jpg, .png ». Pour modifier le type de fichier autorisé, vous devez cliquer sur le composant et dans le champ du formulaire 'Accepter' qui apparaît, modifier les extensions de fichier autorisées, par exemple '.doc, . pdf , .txt' pour accepter les fichiers texte.
• Limitations de taille : Vous pouvez limiter la taille du fichier en définissant une taille minimale ou maximale pour chaque champ. Pour modifier la taille de fichier autorisée, cliquez sur le composant, puis développez le formulaire contextuel en cliquant sur le lien « Plus ». Localisez ensuite les champs Taille minimale et Taille maximale et entrez le chiffre qui représente le nombre d'octets autorisés. Par exemple, Taille maximale : 10311680 (résultant de la multiplication de 1024 x 1024 x 5 = 5 Mo).

- Extrait

Le champ HTML Snippet est un composant d'utilisation avancée qui vous permet d'ajouter du code HTML à vos formulaires. Il affichera un éditeur Wysiwyg capable de reconnaître les raccourcis clavier pour styliser rapidement votre code HTML.

Faites attention à saisir un code HTML valide, sinon le Form Builder ne sauvegardera pas le formulaire et affichera un message d'erreur indiquant la ligne de code où l'erreur a été commise. Par exemple, une erreur courante consiste à ajouter plusieurs éléments HTML avec le même ID.

Pour ajouter un tableau HTML, saisir un lien ou afficher une image, vous devrez d'abord cliquer sur le bouton Plein écran. Cela ouvrira l'éditeur Wysiwyg sur le générateur de formulaires, vous disposerez donc de plus d'espace pour saisir tout le contenu nécessaire. Vous pouvez également cliquer sur le bouton Code pour afficher le contenu sous forme de code HTML.

Remarque : Bien que vous puissiez ajouter du code CSS et JavaScript dans un formulaire. Il n'est pas recommandé de le faire, dans ces cas vous pouvez créer un thème CSS et/ou charger un fichier javascript externe. N'oubliez pas que le formulaire que vous avez créé est également affiché dans le gestionnaire de soumission et que son code peut être incompatible.

- reCaptcha ¶

Le champ reCaptcha est un composant avancé qui permet d'utiliser la technologie Google pour vérifier que les utilisateurs ne sont pas des robots et/ou des spammeurs. Vous pouvez modifier la configuration de reCAPTCHA, comme changer la couleur du thème, le type de captcha et la taille. Un détail à garder à l'esprit est que vous ne pouvez ajouter qu'un composant reCaptcha par formulaire.

Important! Avant d'ajouter le composant reCAPTCHA à votre formulaire, vous devez d'abord ajouter les clés reCAPTCHA dans la configuration du site. Sinon, reCAPTCHA ne fonctionnera pas. Si vous avez créé le formulaire avant d'ajouter les clés, vous devez mettre à jour le formulaire.

- Saut de page

Le champ Saut de page est un composant avancé qui vous permet de créer des formulaires en plusieurs étapes ou plusieurs pages. Pour chaque saut de page créé, vous ajouterez une nouvelle page. De plus, un en-tête sera affiché au-dessus du formulaire pour indiquer aux utilisateurs à quelle étape ils se trouvent et combien d'étapes doivent suivre pour soumettre le formulaire. Il y a deux détails à prendre en compte :

1. Le composant Saut de page ajoute deux boutons pour permettre la navigation dans le formulaire. Vous pouvez personnaliser le texte du bouton 'Suivant' ou 'Précédent' en cliquant sur le composant.
2. Étapes du formulaire : apparaissez au-dessus du formulaire. Paramètres:
   • Cliquez sur Étapes du formulaire pour vérifier ses paramètres. Vous pouvez modifier les titres de chaque étape dans le champ Étapes du formulaire. Chaque ligne correspond à un titre.
   • Vous pouvez spécifier d'afficher uniquement les titres ou les étapes (numéros).
   • Vous pouvez modifier les numéros d'étape à l'aide des icônes glyphicons. Pour utiliser les Glyphicons par étapes, vous devez ajouter à chaque ligne des champs Étapes, une barre verticale ou une barre verticale suivie de « icône-[nom de l'icône] ». Par exemple, si je souhaite remplacer le chiffre 1, je l'écris dans la première ligne des étapes : 'Untitled Step|icon-user'. Accédez aux Glyphicons pour afficher le nom des icônes que vous pouvez utiliser.
   • Vous pouvez modifier la conception des étapes pour une barre de progression indiquant le pourcentage atteint.
   • Enfin, vous pouvez masquer les étapes du formulaire en cochant l'option « Aucune étape du formulaire ».

Remarque : Vous pouvez accéder à une page spécifique en ajoutant le numéro de page à l'URL. Par exemple, pour accéder à la deuxième page, ajoutez la chaîne de requête "p=2".

- Entretoise

Le composant Spacer vous permet d'ajouter un espacement vertical précis entre les champs de vos formulaires. Faites simplement glisser et déposez un espaceur entre vos champs et définissez le nombre de pixels entre eux.

Possibilités :

• Hauteur : C'est l'espace défini par le nombre de pixels.

- Signature

Le composant Signature permet à vos utilisateurs finaux de signer votre formulaire – soit avec leur souris ou leur doigt sur un iPad/smartphone – avec leur John Hancock directement sur le formulaire. Ainsi, vous pouvez capturer en toute sécurité les signatures des contrats, des documents juridiques et d'autres formulaires dans lesquels vous avez besoin d'un autographe physique.

Il y a deux détails à prendre en compte :

1. Le composant Signature ajoute deux boutons pour permettre les interactions Canvas. Vous pouvez personnaliser le texte des boutons « Nettoyer » et « Annuler » en cliquant sur le composant.
2. Paramètres du champ : Le champ Signature comporte les options spéciales suivantes :
   • Effacer : Activer / Désactiver le bouton "Effacer". Lorsqu'un utilisateur final clique sur le bouton « Effacer », la signature sera supprimée. Et la toile sera propre pour recommencer.
   • Annuler : Activer / Désactiver le bouton "Annuler". Lorsqu'un utilisateur final clique sur le bouton "Annuler", le dernier trait de sa signature sera supprimé. Il peut continuer à appuyer sur ce bouton pour annuler sa signature étape par étape.
   • De plus, vous pouvez définir la largeur et la hauteur de la toile, la couleur du crayon, ainsi que modifier le texte des boutons entre d'autres paramètres courants.

- Champ matriciel

Le champ Matrice est un composant avancé qui vous permet de regrouper plusieurs contrôles de formulaire avec le même type de saisie dans un tableau. Vous pouvez créer un champ matriciel avec les types d'entrée suivants :

• Bouton radio (par défaut)
• Case à cocher
• Sélectionner une liste
• Texte
• Zone de texte
• Nombre
• Plage (curseur)
• E-mail
• Tél (Téléphone)
• URL
• Couleur
• Mot de passe
• Date
• DateHeure-Local
• Temps
• Mois
• Semaine

Tous les contrôles du formulaire sont entièrement personnalisables et selon leur type, la bonne validation de saisie sera appliquée.

Un champ Matrice peut contenir n'importe quel nombre de questions (lignes) et de réponses (colonnes), vous pouvez alors définir différentes valeurs pour chaque réponse.

Un type d'entrée spécial pour la matrice est la liste de sélection, car vous devez ajouter différentes valeurs (options). Pour ce faire, cochez simplement "Valeurs" et dans chaque champ "Valeur", entrez des valeurs séparées par des barres obliques ("/"). Si vous souhaitez activer une option vide par défaut, vous devez utiliser le paramètre Placeholder.

Vous pouvez également poser des questions ouvertes, avec la variante de saisie de texte, chaque ligne contient un ensemble de zones de saisie de texte. Cette variante ressemble et agit de manière similaire au champ de texte. Il en va de même pour les autres champs de saisie basés sur du texte, comme une zone de texte ou des champs numériques.

Une particularité du champ Matrice est la possibilité de masquer les questions. Cochez simplement l'option "En ligne" et les questions disparaîtront. Vous pouvez utiliser cette fonctionnalité si vous souhaitez uniquement poser une seule question sous forme de tableau.

Remarque : Lorsqu'un tableau est très grand, nous devrons ajouter la classe "table-responsive" dans le paramètre "Container CSS Class".

- Score net de promoteur (NPS)

Le NPS est probablement la mesure de satisfaction et de fidélité client la plus importante à suivre et il est désormais disponible dans iform4u.

iform4u NPS vous aide à recueillir des commentaires clients authentiques, afin que vous compreniez vraiment les performances de votre organisation. C'est un moyen d'enregistrer ce que pensent vos clients, leur niveau de satisfaction et s'ils vous recommanderaient.

Demandez-leur des choses comme :

« Sur une échelle de 1 à 10, quelle est la probabilité que vous nous recommandiez à vos amis ? »

Cela vous donne un aperçu qualitatif de « pourquoi » vos clients ressentent cela, ce qui a tendance à mieux fonctionner que ces enquêtes annuelles génériques de satisfaction client.

Ce composant vous permet de personnaliser la question, d'afficher des étiquettes, du texte d'aide et bien plus encore. En outre, il peut être affiché sous forme de boutons ou de boutons radio. Par défaut, la conception affiche des boutons. Supprimez simplement la classe CSS : masquée et remplacez la classe CSS Button par : btn btn-label btn-nps.

- Bouton

Le champ bouton est un composant qui permet d'envoyer les formulaires. S’il est normal d’ajouter un bouton par formulaire, rien ne vous empêche d’en ajouter d’autres, par exemple au début et à la fin du formulaire. Ce composant peut être de 3 types :

• Soumettre : Pour soumettre le formulaire. Il est sélectionné par défaut.
• Réinitialiser : Pour réinitialiser le formulaire à ses valeurs par défaut.
• Image : Affiche une image sur le bouton et comme Soumettre permet de soumettre le formulaire. Si vous utilisez ce type de bouton, vous devez ajouter l'URL de l'image et également supprimer la classe CSS.
• Bouton : Ce type n'envoie pas le formulaire, mais il peut être utilisé pour interagir avec les champs via javascript.

Vous pouvez ajouter une icône aux boutons de type « Soumettre », « Réinitialiser » et « Bouton », en écrivant dans l'attribut « Texte du bouton » l'étiquette de l'icône. Par exemple:

<span class="glyphicon glyphicon-shopping-cart"></span> Buy Now!

Il affichera votre bouton avec une jolie icône au début :

Remarque : La classe CSS : 'btn btn-primary' ajoute le design par défaut au bouton. Accédez à Bootstrap CSS pour plus d’informations.

Validation des champs

Un point très important à considérer est la validation des champs qui s'exécute lorsque les utilisateurs soumettent un formulaire.

La validation sur le terrain est le processus par lequel il est vérifié que les données soumises par les utilisateurs répondent à certaines exigences. Par exemple, un champ de date nécessite que la valeur envoyée au serveur ait le format suivant aaaa-mm-jj. La validation garantit que cela se produit.

Vous devez noter que iform4u fonctionne avec les champs HTML5 standard, vous pouvez donc toujours consulter la documentation HTML5 pour plus d'informations. En plus de la validation par type, les champs peuvent avoir d'autres exigences, telles que « Obligatoire » et « Unique ».

Beaucoup de ces exigences sont validées chez le client, par le navigateur ; mais ils sont tous validés sur le serveur, par iform4u.