# Création d’un formulaire à partir d’un fichier pdf
L’objectif est de faciliter la création de formulaires html parfois complexes à partir d’un fichier pdf.
Dans le menu latéral, sélectionnez "Studio/Formulaire".
Cochez la case éditeur visuel.
# Sélectionner un document
Cliquez sur 
pour sélectionner votre document. Le document doit être sur la plateforme. Naviguez dans l’arborescence de vos dossiers/fichiers jusqu’à trouver le document voulu. Puis cliquez sur 
pour le sélectionner. Si le document n’est pas encore présent dans le dossier, ajoutez le avant de le sélectionner.
Nous allons utiliser la fiche annuelle d’activités dans notre exemple.
Cliquez sur le correspondant au fichier. Il apparaît alors dans la fenêtre du bas.
Cliquez de nouveau sur pour fermer la zone de sélection du document.
Il est possilbe d’utiliser un pdf comportant plusieurs pages. La navigation entre les pages s’effectue ici 
.
Le zoom s’effectue avec ces boutons 
.
Déplacer le document se fait en maintenant le bouton gauche de la souris enfoncé n’importe où sur le document et en bougeant la souris.
# Créer une zone
Une zone correspond à un champ du formulaire html. Sa définition va permettre de créer précisément le champ et ses caractéristiques. La section à droite de la fenêtre du document liste toutes les zones.
Les coordonnées actuelles donnent précisément la position du curseur.
Les coordonnées sont calculées à partir du coin supérieur gauche (0,0). Sur cet exemple, le coin supérieur gauche du rectangle a la position (30,20).
# Ajouter une zone
Cliquez sur dans la section des zones pour en ajouter une.
Les zones sont nommées "Zone" + un chiffre par défaut.
permet d’afficher les paramètres de la zone en bas de la fenêtre du document. Le nom de la zone passe en gras dans la liste des zones, précisant ainsi sur quelle zone on travaille.
supprime la zone.
copie la zone à l’identique avec les mêmes paramêtres.
# Paramètres de zone
À la création, une zone vient avec des valeurs par défaut.
# Nommer un élément
Le champ "Nom de le zone" permet de modifier le nom de la zone.
Dans notre exemple, nous voulons que cette zone corresponde au nom du stagiaire.
# Positionner, dimensionner, déplacer et aligner des éléments
Par souci de simplification, seul l’angle supérieur gauche du champ se voit doté de coordonnées.
La position est à (0,0) par défaut et correspond à l’angle supérieur de la page.
Placez l’angle supérieur gauche du champ par un clic droit sur le document. Le champ apparaît avec des dimensions par défaut.
Vous pouvez modifier les dimensions de la zone en plaçant le curseur de votre souris sur l’un des carrés rouges aux angles. Maintenez le bouton droit enfoncé et déplacez le curseur.
Une autre méthode pour modifier les dimensions de votre zone est d’utiliser les paramêtres "largeur" et "hauteur" en pixels soit en entrant directement le nombre de pixels dans les cases, soit en utilisant les flèches de droite pour plus de précision.
Ce qui nous donne ceci sur le document :
Le déplacement utilise la même logique. Vous pouvez déplacer la zone à l’aide de la souris en cliquant (bouton droit) n’importe où sur la zone en question à l’exception des angles rouges ou bien utiliser les champs des paramètres.
Les paramètres x/y sont également utiles pour aligner précisément deux éléments. Nous avons par exemple, deux éléments "nom du stagiaire" et "prénom du stagiaire". Le second est une copie du premier dont on a changé le nom. Le positionnement a été fait à l’aide de la souris mais on a un petit écart vertical.
Il peut être délicat de parfaitement les aligner avec la souris mais il est aisé de le faire via les paramêtres x/y.
Élément "Nom du stagiaire" :
Élément "Prénom du stagiaire" :
Le décalage vertical (y) est de 5 pixels. En alignant l’élément nom sur le prénom, nous obtenons ceci :
Les éléments sont alignés.
Ce que confirme la prévisualisation, en cliquant sur 
:
# Choisir la page du formulaire
Le paramètre "Page" indique la page du document pdf et du formulaire final où devra se trouver le champ.
# Choisir le type d’élément HTML
Le terme "champ" est utilisé ici dans un sens générique mais il faudrait plutôt parler d’élément HTML pour être plus exact. Le "champ" est en fait un type d’élément particulier.
# Type "champ"
Le premier type d’élément est donc le "champ". Il permet à l’utilisateur de saisir des informations et correspond à la balise HTML <input>. Les options sont nombreuses.
Examinons-les.
# Checkbox
Prenons l’exemple de l’année de stage dans la fiche annuelle d’activités.
Nous créons une checkbox pour chaque année, chaque case correspondant à une zone :
Ce qui donne ceci dans la prévisualisation (avec la première année cochée):
Il peut être utile, dans le but de simplifier le remplissage du formulaire que la case à cocher soit pré-cochée avec cette option 
.
Plus d’informations sur cet élément ici.
# Color
Cette option permet de sélectionner une couleur via un champ spécifique. Le noir est la couleur par défaut.
Cliquer sur la zone noire ouvre un "color picker". Son apparence dépend des navigateurs.
Si l’option "Liste de suggestions" est cochées (sans ajouter de suggestions)
une liste de couleurs est automatiquement proposée
Il est possible d’obtenir plus de couleurs en cliquant sur «Other" dans cet exemple.
Plus d’informations sur cet élément ici.
# Date
Cette option permet de saisir une date (jour, mois, année) à travers un calendrier dont la forme varie en fonction des navigateurs.
Plus d’informations sur cet élément ici.
# Datetime-local
Cette option permet de sélectionner une date et une heure (jour, mois, année, heures, minutes) à travers un calendrier dont la forme varie en fonction des navigateurs.
Plus d’informations sur cet élément ici.
Permet de créer un champ réservé aux emails. La valeur saisie dans le champ est automatiquement vérifiée pour valider s'il s'agit d'une chaîne de caractères vide ou d'une adresse mail valide (ou une liste de telles adresses) avant que le formulaire soit envoyé.
Plus d’informations sur cet élément ici.
# File
Permet de créer un champ de téléversement de fichier.
Plus d’informations sur cet élément ici.
# Hidden
Ce point est assez technique de part son utilisation spécifique. En effet, cet élément permet d'inclure des données qui ne peuvent pas être vues ou modifiées par l’utilisateur lorsque le formulaire est envoyé. Cela peut être utile pour conserver l’identifiant de l’utilisateur par exemple. Consultez-nous pour son utilisation.
# Month
Permet de créer un champ où seuls le mois et l’année seront entrés. Comme d’habitude avec les dates, la présentation varie selon les navigateurs.
Plus d’informations sur cet élément ici.
# Number
Crée un champ réservé aux nombres entiers.
Plus d’information sur cet élément ici.
# Password
Comme pour le champ "email", il s’agit d’une spécialisation du champ "text" réservé aux mots de passe.
Plus d’informations sur cet élément ici.
# Radio
Il s’agit ici de sélectionner une seule valeur exclusive parmi plusieurs comme par exemple le genre (H/F/N). À chaque valeur doit correspondre un bouton radio. Voyons un exemple.
Le choix est ici exclusif. Le DSCG est complet ou pas. Il nous faut créer deux zones de boutons radios.
Leurs noms sont logiquement différents et propres à chaque option, de même que les valeurs des boutons radio ("oui" pour l’un et "non" pour l’autre).
DSCG complet - oui :
DSCG complet - non :
En revanche leur colonne de sortie porte le même nom. Ceci est impératif afin que n’importe quelle valeur soit stockée dans la même colonne!
La case "obligatoire" est cochée car cette question attend nécessairement une réponse.
Voici à quoi ressemble le résultat pour les deux cas.
DSCG complet :
DSCG incomplet :
Regardons ce qui se passerait si la colonne de sortie était différente entre les deux boutons radio.
Les deux boutons radio sont cochés car ils sont tous les deux "obligatoires" et les résultats des deux champs sortent dans deux colonnes distinctes avec des valeurs contradictoires. Ce qui est impossible à traiter correctement.
Plus d’informations sur cet élément ici.
# Range
Crée un curseur horizontal allant par défaut de 0 à 100. Le curseur est initialement placé au milieu.
Vous pouvez changer l’échelle avec les options supplémentaires. Ici, nous passons l’échelle du curseur de 0 à 10 :
Ce qui nous donne pour le minimum :
Et le maximum :
Vous trouverez la liste des options ici.
# Tel
Comme pour les champs "password" ou "email", il s’agit là d’une spécialisation du champ "text". Contrairement au champ de type "email" par exemple, la valeur saisie n’est pas automatiquement validée selon un format donné car les formats de numéros de téléphone varient à travers le monde. Il permet, notamment pour les navigateurs mobiles, de présenter un clavier optimisé pour la saisie d'un numéro de téléphone.
Plus d’informations ici.
# Text
Crée un champ réservé à la saisie de texte.
Il est possible de présenter une liste de résultats prédéfinis en cochant la case "Liste de suggestions" et en alimentant la liste.
Ce qui nous donne ceci :
Cela présente deux avantages. D’une part, le remplissage est simplifié pour l’utilisateur; d’autre part, les résultats sont normalisés.
Plus d’informations sur cet élément ici.
# Time
Crée un champ de saisie de l’heure et des minutes. La présentation varie selon les navigateurs.
Plus d’informations sur cet élément ici.
# Url
Une autre spécialisation du champ "text". Deux valeurs sont acceptées : un champ vide ou une adresse url (adresse internet) correctement formatée.
Plus d’informations sur les url ici.
# Week
Similaire au champ "month", le calendrier permet ici d’entrer le n° de la semaine et l’année. Sa présentation varie selon les navigateurs.
Plus d’informations sur cet élément ici.
# Type "liste"
Correspond à la balise HTML <select>. Cet élément affiche un menu déroulant dans lequel l’utilisateur vient sélectionner une option comme par exemple son pays d’origine, sa région, etc.
# Menu déroulant classique
Prenons l’exemple d’un formulaire ou l’utilisateur doit renseigner sa CSP.
La colonne où sera enregistré l’information entrée par l’utilisateur est nommée "csp". On laisse la possibilité de ne pas connaître sa CSP par une première ligne vide en haut de liste. La liste se caractérise par deux listes d’expressions : les libellés et les valeurs.
- Les libellés sont les termes qui apparaîtront à l’utilisateur.
- Les valeurs sont les valeurs correspondant aux libellés qui seront enregistrées en base de données. Elles peuvent être différentes des libellés comme ici où les CSP sont normalisées en majuscules.
Côté utilisateur, le premier libellé du menu apparaît dans le cadre (qui est vide ici car la première ligne de la liste est vide).
Le menu déplié donne ceci :
Si l’utilisateur laisse le menu vide, la colonne ne stockera rien.
S’il entre une autre valeur :
# Menu déroulant à partir d’une vue
Il est également possible de faire appel à une vue pour construire le menu déroulant. Rendez-vous ici si vous ne connaissez pas les vues.
Prenons l’exemple d’une liste regroupant les experts-comptables dans laquelle l’utilisateur doit sélectionner son maître de stage. Nous appelons la vue "Experts-comptables 2023".
Puis cliquons sur 
pour voir apparaître la vue.
Comme dans le point précédent, il nous faut définir les libellés et les valeurs. Pour ce faire, nous déterminons les colonnes qui vont les alimenter.
Nous voulons présenter les experts-comptables par leurs noms complets et par ordre alphabétique. La colonne "nom_complet" sera donc les libellés. Quant aux valeurs, nous avons uniquement besoin de leurs identifiants. On passera donc la colonne "identifiant_utilisateur" en valeurs.
Le menu se présente ainsi :
Une fois la sélection faite, voilà l’information envoyée :
Pour aller plus loin au sujet du <select>.
# Type "zone de texte"
Correspond à la balise HTML <textarea>. Il s’agit de laisser la possibilité à l’utilisateur d’écrire un texte potentiellement long comme des remarques ou observations.
Par exemple, nous définissions ici une zone d’observations dans la fiche annuelle d’activités :
Ce qui donne ceci dans la prévisualisation :
Il est possible d’ajouter un texte indicatif qui disparaîtra lors du remplissage de l’élément.
Ce qui donne ceci en prévisualisation :
Pour aller plus loin sur cet élément, rendez-vous ici.
# Type "texte"
Correspond à la balise HTML <div> contenant du texte. Cotte option permet d’ajouter du texte au formulaire.
Ce qui donne ceci dans la prévisualisation :
Le texte peut être formaté par les paramètres "taille et couleur du texte". Le fond peut être précisé dans le paramètre "Couleur de fond".
# Type "bouton"
Permet de paramétrer trois types de bouton.
Envoyer :
Correspond à une balise<input>de type "submit". Ce bouton est nécessaire pour valider le formulaire.
Le texte permet de personnaliser le nom du bouton.
Voici son apparence par défaut :
À noter que ce bouton ne peut être positionné que sur le pdf. Si comme dans le cas de la fiche annuelle d’activités, vous ne pouvez lui trouver une place "logique", rassurez-vous, il ne sera là que pour la validation et n’apparaîtra pas sur le document final.
Exemple : ici, il n’y a pas de place logique pour le bouton "valider" et on est contraint de le placer en pas du document dans la zone de signature.
Ce bouton apparaîtra bien sur les formulaires à remplir par les utilisateurs mais ne figurera pas sur les documents pdf signés par toutes les parties.
Page précédente et page suivante :
Permettent la navigation au sein des pages du formulaire. Ces boutons correspondent à des balises<input>de type "button". Comme pour le bouton "Envoyer", le paramètre "texte" permet de personnaliser son nom. Voici leurs apparences par défaut :
Plus d’informations sur les éléments <button> ici.
# Type "HTML"
Cette option permet d’ajouter du code HTML et offre une plus grande liberté. Elle est notamment utilisée pour afficher des données issues d’une base de données.
Par exemple, nous avons cette table "contact" regroupant les informations de contact des utilisateurs dans les données de test. (Rendez-vous ici pour savoir comment utiliser des données de test.)
Nous voulons afficher les nom et prénom du stagiaire dans le formulaire (ces données ne seront pas modifiables par l’utilisateur) afin de le personnaliser comme dans le cas d’un publipostage.
Ce qui nous donne ceci pour l’élément "Nom du stagiaire" :
La syntaxe ${data.nom_de_la_colonne_cible} doit être utilisée pour appeler les données d’une colonne des données test.
Après la génération du code HTML, les variables sont bien remplacées par les données du premier enregistrement de la table de test :
# Mise en forme du texte
# Taille du texte
Permet de modifier la taille du texte s'il y a un texte affiché.
Par défaut, la taille est fixée à 1em. Ce qui peut donner ceci :
En augmentant la taille du nom à 1.5em (attention à utiliser un point et non une virgule), voilà ce que nous obtenons :
Pour aller plus loin sur les tailles de texte relatives.
# Couleur du texte
Permet de modifier la couleur du texte affiché.
- Couleurs en toutes lettres :
La couleur est noire par défaut mais il est possible de la modifier en entrant directement le nom de la couleur en anglais.
Ce qui donne ceci :
- Couleurs en hexadécimales :
Vous pouvez également entrer la nouvelle couleur en hexadécimales.
Pour aller plus loin sur les codes couleurs.
# Couleur de fond
Permet de modifier la couleur du fond du champ. blanc par défaut.
Le fonctionnement est le même que pour les couleurs de texte, les couleurs peuvent être spécifiées en toutes lettres ou par leurs codes hexadécimaux.
Pour aller plus loin sur les codes couleurs.
# Classes supplémentaires
Permet d'ajouter des classes html à l’élément. Ce paramètre nécessite des connaissances en html/css.
# Générer le HTML
Ces boutons 
situés en haut et en bas de la section des zones permet de prévisualiser le résultat dans une nouvelle section.
Cette prévisualisation permet également de tester le bon fonctionnement du formulaire et de visualiser les résultats. Prenons notre fiche annuelle d’activités. Nous avons les champs pour les noms et les prénoms et avons ajouté trois checkbox pour les années de stage ainsi qu’un bouton de validation. Nous voulons tester les checkbox.
1 - Nous cliquons sur .
2 - Cochons la première année.
3 - Cliquons sur le bouton 
. Le résultat apparaît en bas sous forme de fichier JSON.
Le test est positif. L’année cochée est la bonne et sa valeur correspond à ce que nous avons défini dans les options supplémentaires.
# Sélectionner des données de test
Dès lors que vous avez besoin de personnaliser les formulaires (nom et prénom des utilisateurs par exemple), il vous faut charger les données nécessaires. La section "Données de test" est là pour cela.
Trois options s’offrent à vous.
# Charger des données à partir d’un fichier CSV
Prenez comme point de départ cette prévisualisation.
Vous voulez utiliser un fichier CSV en lieu et place de la base de données.
Sélectionnez "Tableau" pour importer un fichier CSV.
Puis cliquez sur "Importer un CSV pour édition" et sélectionnez votre fichier. Les données sont alors chargées.
Enfin, cliquez sur 
. Les nom et prénom de l’utilisateur sont alors modifés dans la fenêtre de prévisualisation.
# Charger des données à partir d’une base de données
Vous souhaitez réaliser l’opération inverse du point précédent et retrouver vos informations stockées en base de données. La prévisualisation donne ceci pour l’instant.
Sélectionnez "Base de données" dans le menu déroulant des données de test. Un second menu déroulant apparaît, vous permettant de choisir votre table.
Sélectionnez la table souhaitée.
Vous pouvez trier les lignes en créant des requêtes. Voir ce chapitre pour plus d’informations.
Une fois les éventuelles conditions mises en place, cliquez sur . Dans notre exemple, les nom et prénom de l’utilisateur sont alors modifés dans la fenêtre de prévisualisation.
# Charger des données à partir d’une vue
Partons du résulat du point précédent.
Vous souhaitez utiliser des données issues d’une vue prédéfinie, pour ce faire, sélectionnez "Base de données - multitables".
Un second menu déroulant apparaît avec les vues disponibles.
Sélectionnez la vue souhaitée, ici nous prenons la "liste des mémorialistes 2023". Attention à ce que les noms des variables correspondent bien aux noms des colonnes.
Cliquez sur le bouton "Exécuter".
Vous pouvez trier les lignes en créant des requêtes. Voir ce chapitre pour plus d’informations.
Une fois les éventuelles conditions mises en place, cliquez sur . Dans notre exemple, les nom et prénom de l’utilisateur sont alors modifés dans la fenêtre de prévisualisation.
