L'éditeur WYSIWYG crée des formulaires personnalisés.

Créez un formulaire personnalisé avec le nouvel éditeur WYSIWYG dans Timetonic.

Découvrez comment le le nouvel éditeur WYSIWYG de Timetonic vous permet de créer des des formulaires totalement personnalisés.

qui pourra être parfaitement alignée à votre charte graphique.

et que vous pourrez entièrement maîtriser de bout en bout.

Avec cet éditeur, vous contrôlez tout.

La structure, le contenu, le design, l'identité de marque, et l'expérience utilisateur.

Voyons maintenant ensemble comment créer un formulaire professionnel en quelques minutes.

En prérequis dans cet espace de gestion recrutement, j'ai une table de candidats.

Dans cette table candidats, nous allons créer notre formulaire et j'ai préalablement créé un onglet où où j'ai paramétré la visibilité des champs champs en amont et et et éventuellement les paramètres par défaut en en en configuration avant de modifier le le type de vue.

Une fois la configuration de mes paramètres terminée, terminée, je vais changer de type de vue pour choisir la vue formulaire de création.

sur la vue formulaire de création et et je vois directement les champs disponibles de la table présentés en vue formulaire sans Je vais cliquer sur le bouton configuration du formulaire pour ouvrir l'éditeur de formulaire WYSIWYG.

Une fenêtre d'options s'ouvre me permettant de choisir le mode de de regroupement de mes chants.

ou en en vue groupée mode accordéon ou ou en mode étape par étape.

dans l'éditeur le Me voici enfin dans l'éditeur.

Je vais repérer différents onglets.

Ici nous avons l'onglet des gérer les paramètres de la page.

Je vais ensuite avoir l'onglet l'onglet bloc qui qui me permet d'insérer des sections et et leurs contenus.

Je vais retrouver l'onglet des champs champs qui sont disponibles dans ma table.

dans l'onglet en-tête les paramètres d'en-tête du formulaire.

l'enclé et dans l'onglet pied de page, les paramètres de configuration du pied de page.

Regardons pour commencer les paramètres de la page du formulaire.

Je veux ajouter une une couleur de fond au formulaire donc j'ai au préalable sélectionné une couleur mais je pourrais directement faire une sélection de couleurs dans cette fenêtre.

J'applique mon fond de couleur.

Ici, j'ai la la possibilité d'ajouter un espace entre les sections, sections que je n'ai pas encore installées.

installées.

Et ici, je vais ajouter ajouter un un espace en en haut de mon formulaire et sur le côté.

Ensuite, toujours dans les paramètres de la page du formulaire, je vais aller sur sur le texte de fin du formulaire, formulaire, dans lequel je vais personnaliser le pour l'utilisateur.

Je vais ajouter un un message et et je vais pouvoir aller dans l'éditeur, sélectionner éventuellement éventuellement une couleur sur le texte, différents contenus, le fond, le fond de couleur de cet éditeur, mais je ne vais pas le faire pour l'exemple, aligner le texte et éventuellement ajouter une bordure au au champ paragraphe.

Ensuite, En cliquant sur ce bouton, je peux changer le label du bouton.

Donc je vais coller coller un un label pour pour donner plus de contexte à l'utilisateur.

je pourrais ajouter une icône avant ou après le le texte sur ce bouton donc donc à droite ou à gauche de mon texte ensuite régler régler la hauteur de de mon bouton régler régler l'alignement de mon texte l'espace sur sur les côtés ou ou en haut ou en bas de mon bouton changer changer la couleur de fond appliquer appliquer une bordure ou Je sélectionne l'icône ici que je pourrais éventuellement modifier avec les icônes disponibles dans les paramètres.

En restant sur cette vue de fin de soumission du du formulaire, je peux me rendre dans l'onglet l'onglet des blocs et personnaliser cette présentation présentation en en ajoutant du contenu supplémentaire pour du formulaire.

en sélectionnant directement les éléments et en les faisant glisser directement dans la section.

Ensuite, si je clique sur ajouter un un logo pour pour la couverture, j'arrive sur le bloc de l'entête et et j'insère le logo de l'entreprise.

une cover pour pour l'entête derrière le logo.

Vous pouvez sélectionner l'option qui permet de fixer l'entête l'entête en haut de votre formulaire afin l'utilisateur scrolle en en bas, fixée en en haut du formulaire et je sors du bloc de lentette et je je me rends sur l'onglet des blocs pour On va utiliser la section groupe.

groupe.

Je clique sur le groupe afin de personnaliser les paramètres et le nom du groupe.

j'insère dans dans l'entête du groupe le nom que que je vais donner à ce groupe et je peux insérer insérer une icône avant avant le texte pour ce groupe je Sous-titrage je laisse la valeur par défaut active pour réduire le groupe, l'utilisateur devra cliquer sur sur le groupe pour l'ouvrir.

Dans les paramètres disponibles pour personnaliser mes sections groupes, je peux redimensionner la largeur de mon groupe, ajouter une bordure, appliquer des bords arrondis, ajouter un écart autour de mon texte, modifier le fond de de couleur, couleur du texte, modifier la taille de la police et et appliquer une séparation de colonnes à l'intérieur de mon groupe.

Je peux appliquer plusieurs plusieurs colonnes à l'intérieur d'une section, de façon à ce que mes champs ajoutés dans la section puissent être côte côte à côte, comme dans l'exemple juste en dessous de la section, où la colonne est séparée en deux.

Dans notre cas, nous allons rester sur une une seule colonne.

je peux appliquer un espace entre entre mes champs ajoutés dans ma section et et enfin modifier modifier la couleur du fond de de cette section.

Je vais fermer la fenêtre des paramètres de la section pour ensuite insérer un un contenu de paragraphe dans cette section.

Je clique sur sur le contenu paragraphe pour ouvrir la fenêtre de paramétrage.

Dans mon éditeur, je vais personnaliser personnaliser ce paragraphe une une image.

Dans les paramètres de personnalisation, je pourrais ajouter un espace dans dans le contour du paragraphe, changer la couleur de fond, aligner le texte à droite ou centré, ajouter une bordure ou appliquer une bordure en arrondi.

je sors de cette section et et je vais ajouter un nouveau groupe Le bloc est personnalisé comme le précédent.

Je me rends dans l'onglet des champs pour aller chercher le champ de ma table qui correspond à la description de la fiche de poste.

Je prends le champ et je le fais glisser directement dans dans la section du du groupe.

Si je me suis trompée, je clique sur la flèche afin d'enlever le champ sélectionné et et je sélectionne le champ que que je souhaite insérer dans ce groupe.

A la sélection d'un champ, je vais avoir la fenêtre des paramètres qui me permet de personnaliser l'apparence de ce champ sur sur son fond, sur la couleur du texte, sur l'écart autour du texte du champ et ajouter une bordure ou bien des bords arrondis.

Ensuite je retourne sur les modules de bloc et et je vais ajouter une section dans dans laquelle je je vais insérer le nom de ma table.

Je vais personnaliser cette section, en cliquant sur le champ les paramètres du du du champ me permettent de changer le nom de la table d'ajouter une icône à côté du du texte modifier le niveau de taille de de présentation du nom de ma table gauche, droite ou éventuellement centré, ajouter une bordure ou ou des bords arrondis.

Ensuite, passons à l'étape de construction pour personnaliser les champs à renseigner par l'utilisateur.

Nous allons sélectionner la section en en étape étape par par étape.

Je vais cliquer sur ma section et Grâce à cette section, je vais pouvoir catégoriser mes champs par étapes.

Je vais personnaliser chaque chaque nom des des étapes.

Pour ajouter une seconde étape, je clique sur l'icône « plus » dans la section et et j'ajoute autant d'étapes que nécessaire.

Pour accéder à la personnalisation des étapes, je clique sur l'étape.

Action.

Ensuite pour respecter la charte graphique, je vais changer le fond de de couleur des étapes.

Celle-ci s'applique à toutes les étapes.

Si je voulais supprimer une des étapes, je n'aurai qu'à cliquer sur la croix au-dessus pour pour la retirer.

Et ensuite, je peux personnaliser les bordures de ces étapes.

Ensuite, le fond de couleur du groupe, je vais ajouter un peu de padding autour des étapes pour avoir un peu plus d'espace et que ce soit visuellement visuellement plus agréable.

et à à l'intérieur de cette section je je vais mettre deux deux colonnes Maintenant que que j'ai créé les catégories qui vont regrouper les champs de mon formulaire, je vais insérer les champs dans les groupes respectifs.

Pour ce faire, je glisse directement le champ dans à à mon étape.

vos champs champs dans la section que vous voulez.

avoir inséré tous tous vos champs dans la section, il vous suffit de cliquer sur sur l'autre section pour continuer à insérer les champs qui correspondent à cette étape.

Ou si vous le préférez, si vos champs sont dans dans votre formulaire mais que vous voulez les les récupérer plus simplement depuis depuis l'onglet l'onglet des des champs disponibles dans votre table, supprimez tous les champs depuis l'espace formulaire.

facilement les identifier et et les glisser déposer depuis l'onglet.

Vous avez un champ de recherche également pour pour trouver les les champs si vous en avez beaucoup et et faciliter votre votre recherche et votre conception.

dans l'onglet champs, vous verrez absolument tous les champs créés dans votre table, même ceux invisibles invisibles dans les restrictions que vous avez configurées.

Si vous choisissez d'insérer un champ qui invisible dans dans vos restrictions, Quand vous sauvegardez votre formulaire, vous découvrirez le champ visible.

paramètre de restriction a été modifié et et il est dorénavant éditable.

Vous pourrez changer la restriction si tel est votre souhait.

Bien sûr, il est préférable de configurer vos vos paramètres de visibilité avant avant de de vous rendre dans l'éditeur de formulaire afin de ne faire apparaître que les champs que vous souhaitez faire renseigner par par l'utilisateur.

Si vous ne trouvez pas un champ disponible disponible dans votre table, ici dans l'onglet des champs, champs, c'est qu'il est ou ou déjà inséré dans votre formulaire section, De la même manière que précédemment, si vous sélectionnez un champ, accédez à sa fenêtre de de paramétrage et et si vous cliquez sur la section, vous pouvez adapter les paramètres afin de créer de de l'espace entre vos champs ou de rajouter un écart autour de la section.

modifier le fond, ajouter des bords arrondis, toutes les options qui vous sont offertes pour personnaliser le design de de votre formulaire.

Si j'active cette option, je permet à l'utilisateur de sauter les étapes.

Dans le cas contraire, il devra terminer chacune des étapes ensuite passer à la suivante.

Une fois ma section étapes configurées et mes champs insérés, je peux passer à l'étape de personnalisation du pied de page.

Dans ce pied de page, je peux fixer le pied de page en bas de façon à ce que si l'utilisateur crawl en haut ou en bas, le pied de page suivra le scroll.

Également la largeur, la couleur de fond.

les espaces autour des boutons, je peux ajouter des bordures, ajouter des bords arrondis et ensuite personnaliser personnaliser le nom de mes boutons et et la la couleur de fond des boutons également.

j'ai terminé la personnalisation de mon formulaire, je vais pouvoir cliquer sur aperçu pour avoir avoir un rendu de de ce que va voir l'utilisateur dans le formulaire.

Je vais avoir donc les groupes accordéon qui s'ouvrent et qui se ferment.

Ici mon champ de fiches de poste sera visible lorsque le formulaire sera partagé dans le lien public.

J'ai bien les champs dans chacune de de mes catégories d'étapes.

d'étapes.

Je peux sélectionner différents supports.

un aperçu en vue tablette ou en vue mobile.

En activant l'option affichage du formulaire externe, je permets d'appliquer la la personnalisation de ce formulaire à la vue du formulaire de modification.

qui s'appliquera dans les paramètres de la configuration de la colonne formulaire externe de modification depuis depuis ma table.

Je vais pouvoir sauvegarder les configurations de mon formulaire.

J'arrive dans ma vue qui me donne un aperçu de ce que verra l'utilisateur concrètement avec la visibilité de la fiche de poste et le formulaire avec les les différentes étapes.

Le formulaire étant terminé, nous allons vouloir le partager.

Pour le partager, cliquez sur Partager, Partager le formulaire.

Allez dans les options d'édition afin de personnaliser le le partage.

Vous pouvez sélectionner une une colonne dans laquelle une URL de redirection est disponible dans votre table ou insérer une URL directement dans ce champ, appliquer une protection avec avec un captcha pour la sécurité, Activez l'authentification par par l'identifiant utilisateur de l'espace avant afin de protéger votre formulaire et personnalisez personnalisez l'aperçu de partage de ce formulaire en y ajoutant un titre, une description et une image qui qui sera mis en avant sur une carte dans dans un espace conversationnel.

Voici un aperçu de ce que va donner la personnalisation de votre lien dans dans un espace conversationnel.

Vous pouvez également insérer ce formulaire avec le code d'intégration dans vos espaces web.

vous avez la possibilité de supprimer le le partage de l'URL de la vue formulaire.

En cliquant sur ce bouton, un message d'alerte vous indique que que si vous supprimez cette URL de partage formulaire, celle-ci ne sera plus disponible aux endroits où vous l'avez partagée.

Si vous renouvelez un partage, l'URL qui qui sera générée ne sera pas la même que que la première et donc vos liens devront être modifiés là où vous les avez insérés.

insérés.

Et voici l'aperçu du formulaire partagé sur un lien publiquement.

Nous avons notre notre onglet de présentation d'entreprise.

Nous avons la présentation de la fiche de poste.

Ici, nos onglets, nous pouvons les fermer et le candidat va pouvoir renseigner ses informations sur enfin soumettre le formulaire.

l'utilisateur arrive sur le message de fin que nous avons configuré dans l'éditeur.

dans le cas de la soumission du formulaire dans dans votre environnement interne à l'organisation.

Si l'utilisateur l'utilisateur a les droits de création, à la fin de soumission, trouverez le message de fin et et cet utilisateur aura la possibilité de cliquer sur le bouton qui permettra de créer un nouveau formulaire.

Vous l'aurez compris, en quelques minutes vous pouvez personnaliser un formulaire complet, structuré, moderne, totalement personnalisé.

Avec le nouvel éditeur de formulaire WYSIWYG dans Tintonic, la conception visuelle vous permet de vous assurer que ce que vous créez est ce que vous obtenez.

A vous de jouer !

!

Créez vos premiers formulaires dès dès maintenant !

Musique.