Vue formulaire de création : configurer le formulaire avec l'éditeur visuel
Mis à jour le
Cet article détaille la personnalisation d'une vue formulaire de création, depuis son bouton Configurer le formulaire. Si vous n'avez pas encore créé cette vue, commencez par Vue formulaire de création.
L'éditeur visuel de formulaires TimeTonic permet de configurer la structure et la présentation de vos formulaires de manière indépendante. La structure reste dans vos tables (champs, types et relations) et le design se définit dans l'éditeur (mise en page, couleurs, typographies, sections, étapes et actions).
Cet éditeur visuel vous offre un contrôle complet sur la lisibilité et la cohérence graphique de vos formulaires, sans impacter le modèle de données. Vous concevez des interfaces plus claires, adaptées à votre identité visuelle et accessibles à vos utilisateurs, qu'ils soient internes ou externes.
Objectif : séparer le fond de la forme pour simplifier la maintenance et accélérer la personnalisation.
Prérequis : la table d'abord, le formulaire ensuite. Dans TimeTonic, le formulaire ne crée pas de champs : il affiche ceux de la table. Si vous venez d'un outil où le formulaire crée lui-même sa base de données, le réflexe est inversé ici. Quatre étapes, dans cet ordre.
1
Créez les colonnes dans la table Ajoutez à la table chaque information que le formulaire doit recueillir, avec le bon type de colonne.
Passez la vue en Vue formulaire Changez le type de vue de Table à Formulaire. À cette étape, vous pouvez encore appliquer les restrictions par vue à chaque champ : Lecture / Écriture, Lecture seule ou Invisible. Voir Restreindre l'accès d'une colonne par vue.
4
Cliquez sur Configurer le formulaire L'éditeur visuel s'ouvre : il ne s'occupe que de la mise en page et de la mise en forme du formulaire, jamais de la structure des données.
Avant d'ouvrir l'éditeur visuel, vous devez créer une vue de type Formulaire dans votre table.
1
Ouvrez votre table
Accédez à la vue contenant les champs que vous souhaitez utiliser.
2
Créez une nouvelle vue
Cliquez sur + Ajouter → Nouvelle vue.
3
Sélectionnez le type Formulaire
Cliquez sur le type d'affichage actuel et choisissez Formulaire dans la liste des affichages disponibles.
4
Enregistrez la vue
Cliquez sur Enregistrer avec la vue pour confirmer.
5
Ouvrez l'éditeur visuel
Dans la barre d'outils, cliquez sur Configurer le formulaire pour commencer la configuration.
Choisir le mode de regroupement des champs
Cliquez sur Configurer le formulaire depuis la barre d'outils de la vue. La fenêtre Choisissez le mode de regroupement s'ouvre et propose trois modes.
Aucun
Affiche tous les champs les uns à la suite sans distinction. Adapté aux formulaires simples et à la saisie rapide.
Par groupe
Organise les champs en sections repliables de type accordéon. Adapté aux formulaires longs : RH, FAQ structurées, onboarding.
Étape par étape
Crée un parcours de saisie guidé et séquentiel. Adapté aux candidatures, demandes complexes ou formulaires clients.
Cliquez sur Confirmer pour valider votre choix et accéder à l'interface de l'éditeur.
Si vous aviez défini des groupes de champs dans les options d'organisation des champs de la table, ils sont automatiquement appliqués à l'option sélectionnée. Dans le cas contraire, vous pourrez les définir dans l'éditeur ensuite.
Personnaliser la mise en page de la page
L'éditeur visuel vous permet d'ajuster la mise en page, l'apparence et le mot de fin de votre formulaire.
1
Ouvrez l'éditeur
Cliquez sur Configurer le formulaire pour accéder aux options de personnalisation.
2
Ajustez la mise en page
Dans l'onglet PAGE, modifiez la disposition et les propriétés globales.
3
Gérez le contenu du formulaire
Utilisez l'onglet FORMULAIRE pour organiser les champs, les étapes et les groupes.
4
Contrôlez les espacements
Liez ou dissociez les valeurs d'espacement appliquées entre les éléments du formulaire. Cliquez sur l'icône d'option pour ouvrir les options avancées et ajuster précisément les espaces horizontal ou vertical.
5
Contrôlez les marges
Liez ou dissociez les valeurs de marge pour ajuster les bords du formulaire. Cliquez sur l'icône d'option pour ouvrir les options avancées et ajuster précisément les marges de chaque côté.
6
Changez la couleur d'arrière-plan
Sélectionnez une nouvelle couleur, puis cliquez sur OK pour l'appliquer.
7
Rétablissez la mise en page par défaut
Cliquez sur RÉINITIALISER LA MISE EN PAGE, puis confirmez la réinitialisation complète.
Personnaliser le mot de fin
Le mot de fin correspond au message ou à la page affichée après la soumission du formulaire. Il se configure dans un onglet dédié de l'éditeur.
1
Ouvrez l'onglet MOT DE FIN
Configurez un message de remerciement ou une page de confirmation personnalisée.
2
Ajustez la mise en page
Centrez le contenu, modifiez les marges et ajustez la couleur d'arrière-plan.
3
Réinitialisez si nécessaire
Cliquez sur RÉINITIALISER LA MISE EN PAGE pour revenir à la disposition par défaut.
4
Personnalisez l'icône de confirmation
Sélectionnez une nouvelle icône ou un logo pour illustrer la réussite de la soumission.
5
Modifiez le message de fin
Cliquez sur le texte du message dans le formulaire et modifiez le message dans la barre latérale de l'éditeur.
6
Bouton "Ajouter un nouvel enregistrement"
Visible uniquement dans l'espace de travail, sur la vue formulaire de création.
Ajouter des blocs de contenu
Les blocs de contenu permettent d'ajouter des informations ou de la mise en page qui ne sont pas stockées dans la table, mais propres à ce formulaire. Ils permettent également de disposer les champs indépendamment des groupes paramétrés dans la table.
Faites glisser et déposez le bloc de contenu sur la page de votre formulaire. Cliquez ensuite sur le bloc déposé pour le paramétrer.
Bloc Titre
Le bloc Titre permet d'ajouter un en-tête textuel dans le formulaire pour structurer visuellement les sections et guider la lecture. Il contribue à la hiérarchisation du contenu et améliore la lisibilité générale du formulaire.
Paramètre
Description
Texte du titre
Contenu de l'en-tête affiché dans le formulaire (ex. Informations du collaborateur).
Icône de préfixe
Ajoute une icône avant le texte pour renforcer la signification du titre.
Marge
Définit l'espace autour du titre (haut, droite, bas, gauche).
Couleur du fond
Couleur d'arrière-plan du bloc de titre.
Couleur du texte
Couleur du texte du titre (ex. #1c2c39).
Niveau d'en-tête
Niveau hiérarchique (H1 à H6) pour structurer visuellement les titres et sous-titres.
Alignement
Position du texte (Gauche, Centre, Droite).
Bordure
Ajoute un encadrement (couleur, style, épaisseur).
Arrondi de la bordure
Définit le rayon des coins du bloc.
Bloc Paragraphe
Le bloc Paragraphe permet d'ajouter du texte descriptif ou informatif dans un formulaire. Il est utilisé pour introduire une section, fournir des consignes ou ajouter des précisions entre les champs.
Paramètre
Description
Contenu du texte
Zone de saisie libre avec outils de mise en forme (gras, italique, taille de police, etc.).
Marge
Définit l'espace autour du texte (haut, droite, bas, gauche).
Couleur du fond
Applique une couleur d'arrière-plan pour mettre en évidence le texte.
Alignement
Position du texte dans le bloc (Gauche, Centre, Droite).
Bordure
Ajoute un cadre autour du paragraphe (couleur, style, épaisseur).
Bloc Espaceur
Le bloc Espaceur permet d'ajouter un espace vide vertical entre deux éléments d'un formulaire. Il aide à aérer la mise en page, à séparer visuellement les sections ou à créer un rythme de lecture plus fluide.
Paramètre
Description
Hauteur
Définit la taille de l'espace vertical (en px, ex. 100 px).
Couleur du fond
Applique une couleur à la zone de l'espaceur (optionnel, utile pour le repérage ou le design).
Bloc Icône
Le bloc Icône permet d'ajouter une icône visuelle dans le formulaire pour attirer l'attention, illustrer une idée ou renforcer la compréhension d'un champ ou d'une section. C'est un élément utile pour rendre vos formulaires plus intuitifs et esthétiques.
Paramètre
Description
Icône
Sélectionnez une icône dans la bibliothèque (ex. mdi-information, mdi-alert, mdi-check).
Description
Texte optionnel associé à l'icône pour apporter un complément d'information.
Marge
Espace autour de l'icône (haut, droite, bas, gauche).
Couleur du texte
Définit la couleur de l'icône et du texte associé (ex. #1c2c39).
Taille de la police
Ajuste la taille de l'icône (en px, ex. 22 px).
Alignement
Position de l'icône (Gauche, Centre, Droite).
Bloc Image
Le bloc Image permet d'ajouter une illustration, un logo ou une photo directement dans le formulaire. Il sert à renforcer l'identité visuelle, illustrer une consigne ou rendre le formulaire plus attrayant.
Paramètre
Description
Import d'image
Cliquez ou glissez-déposez un fichier depuis votre ordinateur.
Hauteur
Définit la hauteur d'affichage de l'image (en px).
Alignement
Positionne l'image dans le formulaire (Gauche, Centre, Droite).
Marge
Espace autour de l'image (haut, droite, bas, gauche).
Bordure
Ajoute un cadre autour de l'image (couleur, style, épaisseur).
Arrondi de la bordure
Définit le rayon des coins pour un effet adouci.
Utiliser les blocs conteneurs
Les blocs conteneurs permettent de structurer le formulaire en sections, étapes ou groupes. Trois conteneurs sont disponibles : Section, Étape par étape et Groupe.
Conteneur Section
Le conteneur Section permet de structurer et organiser le contenu : vous pouvez y regrouper plusieurs champs, blocs de texte ou éléments visuels. Glissez-déposez un conteneur sur la page du formulaire, paramétrez-le, puis insérez les champs souhaités.
Paramètre
Description
Largeur
Définit la largeur maximale de la section (ex. 1000 px).
Colonnes
Nombre de colonnes pour organiser les champs côte à côte (ex. 1 ou 2).
Espacement
Définit l'espace entre les colonnes ou les éléments internes (en px).
Marge
Espace externe autour de la section (haut, droite, bas, gauche).
Couleur du fond
Personnalise l'arrière-plan de la section pour créer des contrastes visuels.
Bordure
Ajoute une bordure (couleur, style, épaisseur).
Arrondi de la bordure
Définit le rayon des coins pour un rendu plus doux.
Conteneur Étape par étape
Le conteneur Étape par étape permet de diviser un formulaire en plusieurs sections séquentielles. Chaque section devient une étape distincte de navigation guidée, facilitant la saisie progressive et la validation étape par étape.
Le bouton en haut à droite du conteneur permet d'ajouter des étapes, et les croix rouges de les supprimer. Chaque étape doit être configurée individuellement (ajout de champs, couleur, etc.) en cliquant dessus.
Paramètre
Description
Autoriser à sauter des étapes
Active ou désactive la navigation non linéaire (possibilité de passer d'une étape à une autre sans suivre l'ordre).
Largeur
Définit la largeur maximale du conteneur (ex. 1000 px).
Marge
Espace externe autour du stepper (haut, droite, bas, gauche).
Couleur du fond
Couleur d'arrière-plan générale du conteneur.
Bordure
Personnalise la couleur, le style (pleine, pointillée, etc.) et l'épaisseur.
Arrondi de la bordure
Règle le rayon des coins pour un rendu plus doux.
Sous-panneau « Étapes »
Paramètre
Description
Couleur du fond
Couleur de l'étape active ou des éléments du stepper.
Couleur du séparateur
Couleur du trait reliant les étapes.
Sous-panneau « Contenu »
Paramètre
Description
Colonnes
Nombre de colonnes d'affichage à l'intérieur de chaque étape (ex. 2).
Espacement
Espace horizontal et vertical entre les champs.
Marge
Marge interne appliquée à chaque étape.
Couleur du fond
Fond de la zone de contenu de chaque étape.
Conteneur Groupe
Le conteneur Groupe permet d'organiser les champs du formulaire en blocs repliables sous forme d'accordéon empilable. Chaque bloc agit comme une section indépendante que l'utilisateur peut ouvrir ou fermer pour naviguer plus facilement dans les informations.
Paramètre
Description
Réduit par défaut
Active ou désactive l'affichage replié à l'ouverture du formulaire.
Largeur
Définit la largeur maximale du groupe (ex. 1000 px).
Bordure
Configure la couleur (#1c2c39), le style (pleine, pointillée, etc.) et l'épaisseur (en px).
Arrondi de la bordure
Règle le rayon des coins pour un effet plus doux.
Sous-panneau « En-tête »
Paramètre
Description
Titre
Texte du titre du groupe (ex. Informations générales).
Icône de préfixe
Ajoute une icône à gauche du titre.
Marge
Espace autour de l'en-tête (haut, droite, bas, gauche).
Couleur du fond
Définit la couleur d'arrière-plan du bandeau du groupe (ex. #ffdf23).
Couleur du texte
Couleur du titre (ex. #1c2c39).
Taille de la police
Taille du texte du titre (en px).
Sous-panneau « Contenu »
Paramètre
Description
Colonnes
Nombre de colonnes internes pour disposer les champs.
Espacement
Espace entre les champs à l'intérieur du groupe (en px).
Marge
Marge interne autour du contenu.
Couleur du fond
Fond de la zone de contenu du groupe (ex. #ffffff).
Gérer les champs du formulaire
L'onglet Champs affiche tous les champs disponibles depuis la table associée à votre formulaire. Vous pouvez librement les ajouter, organiser ou retirer à l'aide d'un simple glisser-déposer.
1
Glisser-déposer un champ
Faites glisser un champ depuis la liste pour le déposer dans un conteneur : Section, Groupe ou Étape par étape selon la structure souhaitée.
2
Supprimer un champ du formulaire
Cliquez sur la croix rouge (✖) à droite du champ pour le retirer du formulaire. Le champ est alors rendu disponible dans la liste des champs à gauche et replacé dans le groupe d'origine défini dans la table.
3
Réorganiser les champs
Faites glisser les champs directement dans la vue d'édition pour ajuster leur position à l'intérieur des conteneurs.
4
Modifier le style des conteneurs
Personnalisez la couleur d'arrière-plan pour distinguer les zones, l'espacement interne pour aérer le contenu, et la bordure pour délimiter visuellement les blocs.
Champs non insérables dans un formulaire
Tous les champs d'une table ne peuvent pas être ajoutés à une vue formulaire. Ce comportement est volontaire : il existait déjà avant la migration vers l'éditeur visuel WYSIWYG et reste inchangé. Il garantit l'intégrité des données et la stabilité du système.
Types de champs non autorisés
Ces types de champs ne peuvent jamais être ajoutés à un formulaire :
Formulaire externe
Commentaires
Activité
Champ encrypté
Champs système verrouillés
Certaines tables contiennent des champs verrouillés créés automatiquement par TimeTonic : identifiants techniques, données système, champs générés par la plateforme. Ces champs sont inaltérables et ne peuvent pas être insérés dans un formulaire.
Personnaliser l'en-tête du formulaire
L'en-tête correspond à la zone d'en-tête du formulaire. Il permet d'ajouter un logo, une image de couverture et de définir si cette zone reste fixée à l'écran pendant la navigation. L'objectif est d'assurer une identité visuelle cohérente et une expérience utilisateur fluide.
Paramètre
Description
Option fixe (Sticky)
Si activée, l'en-tête reste visible en haut du formulaire même lorsque l'utilisateur fait défiler le contenu.
Importer un fichier du logo
Ajoute un logo (format .png ou .jpg). Privilégiez un logo léger (< 100 Ko). Il est automatiquement redimensionné à une hauteur de 150 px, tout en conservant le ratio d'origine. Plus l'image source est nette, meilleure sera la qualité de rendu après redimensionnement.
Importer un fichier de couverture
Ajoute une image de couverture ou un bandeau graphique visible sur toute la largeur du formulaire. Le ratio recommandé est de 4:1 (exemple : pour une image Full HD de 1920 px de large, la hauteur idéale est de 480 px). Si l'image ne respecte pas ce ratio, un outil de recadrage sera proposé lors de l'import. Plus la hauteur de l'image est élevée, meilleure sera la qualité de rendu visuel.
Personnaliser le pied de page
Le pied de page correspond à la zone inférieure du formulaire. Il permet d'ajouter une barre d'action contenant les boutons de navigation et d'enregistrement (ex. Suivant, Précédent, Enregistrer), tout en personnalisant son style visuel. C'est un élément essentiel pour guider la progression de l'utilisateur et finaliser la soumission du formulaire.
Paramètre
Description
Fixe
Maintient le pied de page visible pendant le défilement du formulaire. Idéal pour les formulaires longs, afin que les boutons d'action restent toujours accessibles.
Largeur
Définit la largeur maximale du pied de page (ex. 1000 px).
Marge intérieure
Règle l'espace entre le contenu (boutons, texte) et les bords du pied de page.
Couleur d'arrière-plan
Personnalise la couleur du fond du pied de page. Exemple : #373E64FF pour un fond bleu foncé.
Bordure
Ajoute un cadre supérieur ou latéral (couleur, style, épaisseur).
Arrondi de la bordure
Ajuste l'arrondi des angles du pied de page.
Sous-panneau « Actions »
Paramètre
Description
Couleur de fond des actions
Détermine la couleur d'arrière-plan de la zone des boutons.
Texte du bouton Enregistrer
Permet de modifier le libellé du bouton d'enregistrement (ex. Sauvegarder, Valider, Envoyer).
Prévisualiser le formulaire
Le mode Prévisualiser permet de visualiser votre formulaire en conditions réelles avant sa publication. Il vous aide à vérifier le rendu du design, la structure des sections, la lisibilité sur différents écrans (ordinateur, tablette ou mobile), et le comportement du message de fin.
Activer ou désactiver l'aperçu
Activez l'aperçu pour passer du mode édition (où vous configurez les éléments) au mode simulation, où vous voyez le résultat final. Cela vous permet de tester l'agencement des champs, les transitions entre les étapes, et la cohérence des couleurs et marges.
Icônes de vue : Bureau, Tablette, Mobile
Vue Bureau
Simule l'affichage sur un écran large (ordinateur). Idéal pour vérifier la mise en page générale et les alignements.
Vue Tablette
Affiche une taille intermédiaire pour contrôler la lisibilité et le comportement des éléments responsives.
Vue Mobile
Permet de tester l'affichage vertical, la taille des boutons et la disposition des champs sur petit écran. Essentiel pour les utilisateurs externes accédant depuis un smartphone.
Onglets : Formulaire et Mot de fin
Formulaire
Montre la version active du formulaire, telle qu'elle apparaîtra aux utilisateurs lorsqu'ils le remplissent.
Mot de fin
Affiche la page de confirmation ou le message de remerciement qui s'affichera après la soumission du formulaire. Vous pouvez y vérifier le texte du message, la couleur et le style du bouton "Ajouter un autre enregistrement", et la mise en page finale.
Partager le formulaire
La fonctionnalité de partage permet de rendre un formulaire accessible à des utilisateurs hors de votre espace TimeTonic, via une URL publique ou un code d'intégration (iframe). C'est idéal pour recueillir des informations depuis un site web, un intranet ou des partenaires externes.
Options de partage
Quand vous cliquez sur Partager le formulaire, vous pouvez configurer les paramètres de diffusion publique.
URL de redirection
Permet de définir l'adresse vers laquelle l'utilisateur sera redirigé après avoir soumis le formulaire (par exemple, une page de confirmation ou un site web).
Utiliser une colonne comme source de redirection
Redirige dynamiquement les utilisateurs selon la valeur d'une colonne spécifique dans la table (utile pour des formulaires personnalisés).
Protéger avec un captcha invisible
Ajoute une couche de sécurité contre les envois automatisés.
Exiger une authentification
Restreint l'accès aux personnes connectées avec un compte autorisé (utile pour des formulaires internes).
URL et code d'intégration
Une fois le partage activé, deux moyens d'accès sont disponibles.
URL publique
C'est le lien direct vers le formulaire, copiable via le bouton Copier.
Code d'intégration (Embed code)
Permet d'intégrer le formulaire dans une page web ou un portail externe via une balise <iframe>. Utile pour afficher le formulaire directement dans votre site, intranet ou CRM.
Lorsque vous cliquez sur Supprimer l'URL de partage de la vue, une fenêtre de confirmation apparaît.
Action définitive. Une fois la configuration enregistrée, le formulaire sera désactivé et son URL sera supprimée. Si vous le réactivez ultérieurement, une nouvelle URL sera générée.
Le lien public et le code d'intégration cessent immédiatement de fonctionner.
Si vous réactivez le partage plus tard, une nouvelle URL unique sera générée
L'ancienne URL devient invalide.
Cette action est définitive et ne peut pas être annulée.
Aller plus loin
Partager la vue formulaire dans un autre espace de travail
Dupliquer une vue existante (tableau, formulaire, etc.) dans un autre espace de travail sous forme de vue miroir.