Icon

Doc produit - Form Builder

Voici un guide pas à pas sur l'utilisation du form builder au sein d'ADM

By Jérémy Lopes

Nous ajouterons également une courte description à ce projet.

Créer un formulaire

1
En premier lieu, accéder à la page "Form Builder" sur votre espace ADM.
Step #1: En premier lieu, accéder à la page "Form Builder" sur votre espace ADM.
2
Cliquez sur "Nouveau formulaire"
Step #2: Cliquez sur "Nouveau formulaire"
3
Cliquez sur "Construire de zéro"
Step #3: Cliquez sur "Construire de zéro"
4
Vous arriverez alors sur un tout nouvel écran de construction de formulaire.
Step #4: Vous arriverez alors sur un tout nouvel écran de construction de formulaire.
5
Chaque nouveau formulaire devra être accompagné d'un titre pour pouvior être enregistré. Cela permettra alors d'organiser vos formulaire de la meilleure des manières.
Step #5: Chaque nouveau formulaire devra être accompagné d'un titre pour pouvior être enregistré. Cela permettra alors d'organiser vos formulaire de la meilleure des manières.
6
Afin d'ajouter un composant dans votre formulaire, cliquez sur le bouton "Ajouter"
Step #6: Afin d'ajouter un composant dans votre formulaire, cliquez sur le bouton "Ajouter"
7
Ceci ouvrira alors une modale avec la liste de composants disponible à la construction de votre formulaire.
Step #7: Ceci ouvrira alors une modale avec la liste de composants disponible à la construction de votre formulaire.
8
Une fois votre élément ajouté au formulaire, différentes options pourront s'offrire à vous, en voici quelques exemple ⬇️

Personnaliser les composants du formulaire

9
A côté de chaque composant se trouve 2 boutons d'action. Un bouton permettant de supprimer l'élément sélectionné ainsi qu'un second bouton permettant de paramètrer l'élément déposé sur votre formulaire.
Step #9: A côté de chaque composant se trouve 2 boutons d'action. Un bouton permettant de supprimer l'élément sélectionné ainsi qu'un second bouton permettant de paramètrer l'élément déposé sur votre formulaire.
10
Au click sur ce bouton de pramètrage, un menu laisse alors apparaitre tous les éléments de configuration du composant. Pour l'exemple nous sélectionnerons l'option "ajouter un label".
Step #10: Au click sur ce bouton de pramètrage, un menu laisse alors apparaitre tous les éléments de configuration du composant. Pour l'exemple nous sélectionnerons l'option "ajouter un label".
11
Nous voyons alors aparaitre un nouvel champ nous permettant d'ajouter un label à notre élément de texte court.
Step #11: Nous voyons alors aparaitre un nouvel champ nous permettant d'ajouter un label à notre élément de texte court.
12
Cliquez sur le bouton "Ajouter" pour inclure autant d'élément que souhaité pour la construction de votre formulaire.
Step #12: Cliquez sur le bouton "Ajouter" pour inclure autant d'élément que souhaité pour la construction de votre formulaire.

Prévisualiser le formulaire.

13
Lors de la construction du formulaire, dès l'ajout du premier élément de construction vou -s pourrez alors prévisualiser la construction de votre fomulaire.
Step #13: Lors de la construction du formulaire, dès l'ajout du premier élément de construction vou -s pourrez alors prévisualiser la construction de votre fomulaire.
14
Cliquez sur "← Retour à l'éditeur" pour retourner sur la construction de votre formulaire
Step #14: Cliquez sur "← Retour à l'éditeur" pour retourner sur la construction de votre formulaire

Réorganiser les éléments.

15
En plus de pouvoir modifier les éléments d'un input vous pouvez également les organiser dans l'ordre qui vous convient le mieux. Pour cela, il vous suffit de rester appuyer sur les 3 petits points à côté d'un élément et de le glisser au dessus ou en dessous d'un autre élément.
Step #15: En plus de pouvoir modifier les éléments d'un input vous pouvez également les organiser dans l'ordre qui vous convient le mieux. Pour cela, il vous suffit de rester appuyer sur les 3 petits points à côté d'un élément et de le glisser au dessus ou en dessous d'un autre élément.
16
Glisse vers le haut
Step #16: Glisse vers le haut

Enregistrer un formulaire

17
Cliquer sur le bouton "Enregistrer" afin de sauvegarder votre formulaire
Step #17: Cliquer sur le bouton "Enregistrer" afin de sauvegarder votre formulaire
18
En cas de retour par inadvertance, une modal vous demandera si vous souhaitez réellement annuler la création de votre formulaire ou non.
Step #18: En cas de retour par inadvertance, une modal vous demandera si vous souhaitez réellement annuler la création de votre formulaire ou non.