Dans le bloc parent, cliquer sur les " ... " puis choisir "Formulaire"
Ex : ici bloc parent = "BlocsMedias" :
Lui donner un nom (ce nom ne sera pas affiché sur le site mais permet de le retrouver facilement dans Umbraco).
Renseigner obligatoirement les 2 champs suivants : "Numéro de l'épreuve" et "Nom de l'épreuve".
⚠️ Ne pas modifier ces valeurs si des inscriptions ont déjà été faites, vous risqueriez de perdre les données !
Créer les champs du formulaire
Cliquez sur "add content" (cf capture d'écran ci dessus)
Vous voyez la liste des champs possibles :
Les types de champs classiques
Texte : pour les textes ou les chiffres
Email : pour les emails 🤷🏻♀️
Date : pour les dates 🤦♀️
Upload : pour permettre aux utilisateurs de uploader/déposer un fichier
Select option : liste déroulante avec un seul choix possible parmi les propositions
Les choix proposés sont à renseigner dans "Liste des choix"
Case à cocher : permet de cocher ou non la proposition
Radio button : un seul choix possible parmi les possibilités
Choix multiples : un ou plusieurs choix possibles parmi les possibilités
Les choix proposés sont à renseigner dans "Liste des choix"
→ 2 apparences proposées :
en liste (attention, il y a une manip spécifique selon qu'on soit sur mac ou sur pc pour pouvoir sélectionner plusieurs choix : mac = cmd + click; pc = ctrl + click) ⇒ ce n'est pas le plus intuitif pour les utilisateurs
en cases à cocher ( + simple pour les utilisateurs) : pour cela il suffit de cocher "Cases à cocher"
Les types de champs spécifiques
Boat Class : une liste pré-remplie des différents types de bateaux → choix unique
Country List : une liste pré-remplie de tous les pays → choix unique
Le nom des champs
Ne pas dépasser une 30aine de caractères afin de ne pas rendre illisible le tableau des résultats du formulaire.
Si besoin, vous pouvez ajouter une légende à ce nom, elle sera affichée sur le site mais non enregistrée
Ex: Third-party liability insurance(minimum coverage per incident € 1.5 million or equivalent)
⇒ ce nom est trop long, préférez le découper ainsi :
nom : Third-party liability insurance
légende : Minimum coverage per incident € 1.5 million or equivalent
Résultat :
Les champs obligatoires
Pour chaque champs, il suffit de cocher "Obligatoire"
Si un champs est obligatoire, une petite * après le nom du champs s'ajoute automatiquement
⇒ il ne faut pas l'ajouter manuellement.
Résultat :
Les textes libres
Choisir "Texte Mise en page" : vous pouvez y entrer les textes que vous voulez, y inclure des liens, des citations,...
Peut s'inclure n'importe où dans le formulaire
NB : vous pouvez voir l'apparence finale du texte en dessous de l'encart d'écriture
Résultat :
Validation du formulaire
Le bouton de validation du formulaire est ajouté automatiquement, vous n'avez rien à faire 🤟
Après l'envoi du formulaire, un message de validation ou d'erreur est affiché en haut du formulaire.
Résultat : (ce ne sont que des textes d'exemples ici, les messages seront générés automatiquement) :
Passer par la boutique et valider un paiement
Les formulaires peuvent passer par la boutique pour être validés.
1/ si un formulaire ne passe pas par la boutique, on envoie un mai à la personne, on enregistre l'inscription en base mais les champs Pay et PayGuid restent à NULL
2/ si un formulaire passe par la boutique, il lui faut une référence produit !
Deux possibilités :
Si, au moment de mettre le champ dynamique de type "paiement", on n'a pas choisi la référence produit associée, le formulaire devra disposer d'un boat-class disponible dans la liste des champs.
Exemple
ici, j'ai mis un champ paiement, mais je n'ai pas mis de nom de produit.
Par contre, j'ai bien un boat class :
C'est bien lui qui sera pris en compte (en fonction du support, le produit sera différent. Voir avec Julien pour modifier la liste des valeurs depuis la base de données Formulaires > Boat Class)
Si j'ai choisi une valeur, la boutique utilisera la valeur comme produit à payer.
Exemple
Ici je fais un formulaire Coach
Je peux mettre des boat class en champ dynamique, le nom produit choisi prendra toujours le dessus.
Les champs obligatoires pour se lier à la boutique FFV
⚠️ Attention à l'orthographe (n'hésitez pas à faire un copier/coller ;) )
nom
prenom
mobile
email
boat-class
licenceid
⇒ Ces noms sont donc à renseigner au choix dans "Nom du champs" ou dans "Avancé, Nom de champ spécifique" ⇒ Voir plus d'explications dans le paragraphe précédent.
Il faut également à tout prix disposer d'un champ de type "Paiement"
Conseils de mise en page
Titres du formulaire et des groupes de champs
Choisir le bloc "Simple texte explicatif"
Cliquez sur la flèche haute proposée ⬆️
Bien regarder si ce sont des " === " ou des "- - - -" qui sont ajoutés, ce sont ces éléments qui vous indiquent si c'est un h1 ou un h2
NB : un titre h1 sera en police grande et centré dans la page ⇒ titre du formulaire
un titre h2 sera en police moyenne et aligné à gauche ⇒ titre des groupes de champs
Remplacez le mot "Heading" par le texte de votre choix
Résultat d'affichage :
En prenant l'exemple d'un vrai formulaire, cela donne :
Alignement des champs
De base, chaque champs prendra toute la largeur possible.
Si vous le souhaitez, vous pouvez mettre 2 champs côte à côte dans la largeur
NB : ils se remettront automatiquement l'un au dessus de l'autre sur mobile
Pour cela, il faut que les 2 champs soient positionnés l'un au dessus de l'autre sur Umbraco.
Puis cochez sur les 2 champs la case "Utiliser la moitié"
Résultat :
Les champs imposés pour se lier à d'autres entités
Pour chaque champs de formulaire, vous avez l'encart "Avancé, Nom de champ spécifique" de proposé :
Cet encart vous permet de relier les résultats du formulaire à d'autres entités comme la boutique FFV ou le logiciel FREG, qui attendent des champs bien précis (indispensables) et nommés (orthographié) de la bonne façon.
Vous avez 2 possibilités pour cela :
dans l'encart "Nom du champs" vous mettez le nom attendu, et vous laissez l'encart "Avancé" vide.
soit, dans "Nom du champs" vous mettez le nom que vous voulez, et mettez le nom attendu dans l'encart "Avancé".
Exemple : Ici "Buyer Email" sera le nom du champs visible sur le site, et "email" et le nom de champs attendu par l'entité tierce et invisible sur le site
Dans les 2 cas, les espaces seront remplacés par des tirets, les accents supprimés et les majuscules en minuscules.
Fermeture d’une Inscription
Il faut cocher la case pour arrêter les inscriptions, et bien évidemment remplir le texte associé. Attention, sans texte, rien ne s’affichera.
