Mettre en forme un formulaire

Les formulaires sont utilisés pour l'inscription, les sondages, les mises à jour de profil, etc.

Il est donc important de bien comprendre quelles options de présentation sont disponibles pour créer des formulaires efficaces.

Il existe de nombreuses options d'affichages dans les formulaires. Vous trouverez ici :

  • 1.  Comment créer des pages de formulaire et gérer leur affichage
  • 2. Comment créer des groupes de champs et gérer leur affichage
  • 3. Comment ajouter des champs et gérer leur affichage
  • 4. Comment ajouter des zones de texte et gérer leur affichage

Pour comprendre les différents types de champs et les options d'affichage propres à chaque type de champ, cliquez ici.

Pour comprendre comment ajouter un formulaire et l'ajouter à votre site, cliquez ici.

1. Les pages d'un formulaire et leurs options d'affichage

Sur inwink, il est possible de créer un formulaire contenant une ou plusieurs pages.

Par défaut, chaque formulaire contient une première page, nommée Page 1. Vous retrouvez le nom de cette page en haut de la fenêtre d'édition du formulaire.

Editer les pages du formulaireEditer les pages du formulaire

 

Vous pouvez :

  • Editer le nom de votre page et son mode d'affichage en cliquant sur le bouton  à droite
  • Effacer la page active en cliquant sur . La page, les groupes de champs et les zones de texte de la page seront effacés. Par contre, les champs qui étaient contenus dans la page seront toujours disponibles dans la liste des champs proposés lors de l'ajout d'un champ au formulaire.
  • Ajouter une nouvelle page en cliquant sur le bouton AJOUTER UNE PAGE

Lors de l'édition ou l'ajout d'une page, la fenêtre suivante s'ouvre :

Fenêtre d'édition de pageFenêtre d'édition de page


Paramètre

Action
                                                                                                                                                         
Mode d'affichage
  • Simple : les champ s'affichent les uns en-dessous des autres
  • Les champs d'affichent sur deux colonnes : les champs s'afficheront sur deux colonnes, le premier à gauche, le second à droite, et ainsi de suite.
  • Les groupes s'affichent sur deux colonnes : les groupes de champs s'afficheront sur deux colonnes, le premier groupe de champ à gauche, le second à droite, et ainsi de suite.
Titre Permet de donner un titre à la page, qui sera repris en tête de formulaire. N'est pas obligatoire.

Description Permet de donner une description à la page. Sera affiché en-dessous du titre de la page. N'est pas obligatoire.

Une fois ces paramètre renseignés, cliquez sur VALIDER.

Une fois que vous aurez créé plusieurs pages, vous aurez la possibilité de les réorganiser entre elles en cliquant sur ou à gauche de la corbeille de suppression de la page :

Réorganiser les pages entre ellesRéorganiser les pages entre elles

2. Les groupes de champs et leurs options d'affichage

A l'intérieur de vos pages, il est possible de grouper les champs et de donner un titre, une description, voire un affichage conditionnel aux groupes créés.

Dans l'éditeur de formulaire, les groupes sont indiqués par des encadrés de fond gris clair.

Pour ajouter un groupe, sélectionnez la page dans laquelle vous désirez insérer un groupe, et cliquez sur le bouton AJOUTER UN GROUPE. Vous pouvez ajouter un groupe soit dans une page (le bouton est blanc), soit dans un groupe (le bouton est gris).

Une fenêtre d'édition de groupe s'ouvre, contenant diverses options :

Fenêtre d'édition du groupeFenêtre d'édition du groupe

Dans l'onglet DETAILS, vous pouvez renseigner les paramètre suivants :


Paramètre

Action
                                                                                                                                                         
Mode d'affichage
  • Simple : les champ s'affichent les uns en=dessous des autres
  • Les champs d'affichent sur deux colonnes : les champs s'afficheront sur deux colonnes, le premier à gauche, le second à droite, et ainsi de suite.
  • Les groupes s'affichent sur deux colonnes : les groupes de champs s'afficheront sur deux colonnes, le premier groupe de champ à gauche, le second à droite, et ainsi de suite.
Titre Permet de donner un titre au groupe, qui sera repris dans le formulaire en haut du groupe. N'est pas obligatoire.

Description Permet de donner une description au groupe. Sera affiché en-dessous du titre du groupe. N'est pas obligatoire


Dans l'onglet Conditions, vous pouvez paramétrer les conditions d'affichage de votre groupe, selon les réponses précédemment faites par l'utilisateur.

Editeur de conditionsEditeur de conditions

Ici, le groupe ne sera affiché que si la note des intervenants renseignée précédemment par l'utilisateur est égale à 5.

En cliquant sur le bouton +, vous avez la possibilité d'afficher une autre condition nécessaire à l'affichage du groupe (condition ET).

En cliquant sur le bouton OU, vous pouvez ajouter une seconde condition permettant l'affichage du groupe (condition OU).

Une fois le groupe paramétré, cliquez sur VALIDER pour ajouter le groupe à la page.

Affichage d'un groupe sur l'éditeur de formulaireAffichage d'un groupe sur l'éditeur de formulaire

Vous avez la possibilité d'éditer un groupe à tout moment en cliquant sur le bouton image-png-Oct-17-2022-12-31-47-03-PM  en haut à droite du groupe, d'effacer le groupe en cliquant sur undefined-Oct-17-2022-10-00-10-26-AM et de repositionner le groupe par rapport à d'autres groupes en cliquant sur undefined-Oct-17-2022-10-00-09-93-AM ou undefined-Oct-17-2022-10-00-09-79-AM .

 

🐱‍👤 Un groupe de champs apparaîtra toujours après les champs n'appartenant à aucun groupe de champs dans une même page

3. Les champs et leurs options d'affichage

Dans un formulaire, vous pouvez ajouter des champs soit dans un groupe, soit directement dans une page.

Pour ajouter un champ directement dans la page, cliquez sur AJOUTER UN CHAMP tout en bas de la page.

Pour ajouter un champ à un groupe, cliquez sur AJOUTER UN CHAMP tout en bas du groupe.

Vous pourrez alors ajouter un champ parmi ceux existant déjà, ou créer un tout nouveau champ à ajouter au formulaire.

Une fois le champ ajouté, vous pouvez à tout moment l'éditer en cliquant sur le bouton  qui s'affiche en haut à droite du champ quand vous le survolez. Vous pourrez alors modifier ses informations, mais aussi lui ajouter des conditions d'affichage, comme vu précédemment avec les groupes.

Vous pouvez aussi changer la position des champs au sein d'un même groupe/d'une même page en cliquant sur le champ et en le glissant vers une autre position, ou à l'aide des boutons undefined-Oct-17-2022-10-00-09-93-AM et undefined-Oct-17-2022-12-26-09-10-PM.

Enfin, vous pouvez supprimer un champ en cliquant sur undefined-Oct-17-2022-10-00-10-26-AM lorsque vous le survolez avec votre curseur. Le champ sera supprimé du formulaire, mais il restera disponible dans la liste des champs que vous pouvez ajouter à votre page quand vous cliquerez de nouveau sur AJOUTER UN CHAMP

🐱‍👤 Si vous affichez 2 fois le même champ dans un formulaire, alors la seconde réponse au champ effacera la première réponse faite par l'utilisateur. Attention, donc, à ne pas utiliser deux fois le même champ dans un formulaire, même si ces derniers ont le même intitulé.

4. Les zones de texte et leurs options d'affichage

Enfin, vous pouvez ajouter des zones de texte en cliquant sur AJOUTER UN TEXTE, sur le même principe que pour les champs.