Création d’un formulaire
Procédure :
- Dans le tableau de bord de votre site WordPress, appuyer sur l’onglet « Formidable »
- Dans la page qui s’affiche à droite, apparait la liste des formulaires déjà créés. Cliquer sur le titre d’un formulaire permet de le modifier et cliquer sur le bouton « ajouter » dans le haut de la page permet d’en créer un nouveau
- Donner un titre à votre formulaire
- Glisser et déposer les champs de la colonne de droite dans l’espace blanc au centre Options possibles pour chaque champ :
Options possibles pour chaque champ :
Les champs apparaîtront dans l’ordre où ils ont été placés verticalement dans le tableau de bord. Pour changer l’ordre d’apparition, il suffit de monter ou de descendre le champ avec l’icône en forme de croix dans le haut à droite. Certaines fonctions avancées permettent de placer des champs l’un à côté de l’autre pour gagner de l’espace. Il faut savoir que les champs apparaîtront tout de même dans l’ordre du tableau de bord, le premier apparaitra à l’extrême gauche et les autres le suivront de gauche à droite. Vous trouverez plus de détails sur le positionnement des champs dans la section « Options avancées » à la fin de ce document.
Types de champs
(les plus utilisés sont en vert)
Choisir le bon type de champ
Bien que le champ « Ligne de texte simple » puisse convenir dans presque toutes les situations, il est préférable d’utiliser le bon type de champ pour deux raisons :
- La validation du forma
Si on utilise le bon type, « Adresse e-mail » par exemple, la validation retournera une erreur s’il manque un « @ » ou une extension à la fin. - L’aide à la complétion
Les navigateurs récents permettront l’utilisation d’outils pour faciliter la complétion du champ. Exemple : un petit calendrier apparaitra pour choisir une date dans le champ « date ».
Affichage et utilisation du formulaire
Une fois qu’il est terminé de construire, il faut loger le formulaire dans une page WordPress prévue à cet effet.
Mode d’emploi :
- Créer une page vierge dans votre site et choisir un titre explicite et court
- Dans le coin droit en haut de la page de construction du formulaire, cliquer sur « voir » pour obtenir le « Shortcode » de votre formulaire
- Le « shortcode » ressemble à « [formidale id=6] » Le numéro change selon le formulaire, c’est son identifiant unique
- Le sélectionner (incluant les 2 crochets) et le copier dans le presse-papier
- Coller le « shortcode » dans la page créée à l’étape #1 et le formulaire y apparaitra
- Afin de permettre aux utilisateurs de votre site de remplir le formulaire, vous devez intégrer la page qui le contient dans votre menu de site ou publier son adresse par un autre moyen
Paramètres du formulaire
Maintenant que votre formulaire est en ligne et affiché dans une page, il reste à déterminer quelques paramètres qui entreront en fonction lorsque le bouton « soumettre » sera appuyé.
Général
Les options dans cet onglet sont assez explicites. La plupart du temps il suffit de tout laisser par défaut et le formulaire répondra à vos attentes. Si vous avez des interrogations, survolez le petit « i » encerclé, un message apparaitra plus bas pour donner des explications supplémentaires.
Actions de formulaire
Ces actions seront enclenchées – ou non (selon certaines conditions), lorsque l’utilisateur appuiera sur le bouton soumettre. Malgré que plusieurs actions soient possibles avec formidable et l’installation d’extensions, nous utiliserons principalement toujours les deux mêmes. Email de notification et Paiement en ligne UQAC
Email de notification
Il est possible de générer autant de courriels que nécessaire dépendamment de vos besoins. Généralement, un courriel est envoyé à l’utilisateur confirmant que son formulaire a bien été complété et un autre courriel est envoyé à l’administrateur du formulaire lui indiquant que quelqu’un a rempli le formulaire. Pour créer ou modifier des alertes par courriel il suffit d’appuyer sur la petite enveloppe.
Personnalisation de l’alerte
Étiquette : Identification de votre alerte dans formidable, pratique quand on en crée plusieurs.
À : Destinataire du courriel
De : La provenance du courriel (laisser par défaut fera en sorte de faire apparaitre le nom de votre site suivi par l’adresse du compte administrateur du compte WordPress).
Sujet : Sujet du courriel
Message : Le message par défaut fait apparaitre un tableau qui présente les questions du formulaire suivies des réponses. Il est cependant possible d’écrire un texte personnalisé en utilisant les réponses fournies par l’utilisateur lors de la saisie du formulaire. Pour utiliser celles-ci on doit utiliser le code dans la colonne de droite intitulée : « personnalisation »
Les [codes] sont les chiffres entre les parenthèses carrées. Exemple : pour insérer le nom de la personne dans l’introduction de votre message il faudra utiliser la formule suivante :
Bonjour [83], Merci d’avoir complété le formulaire. etc.
De cette manière, toute information recueillie dans le formulaire peut servir à créer un message personnalisé lors de l’envoi du courriel de notification. Par contre, il ne faut pas oublier de poser les bonnes questions ! Vous pouvez taper le code (en incluant les « [ ] ») ou cliquer sur le code quand votre curseur est positionné dans la boite de message.
Astuce : Si vous désirez envoyer un courriel de confirmation à la personne qui a rempli le formulaire, il faut lui demander son adresse dans le formulaire et copier le [code] approprié dans le champ « à ».
Paiement en ligne UQAC
Cette action de formulaire est disponible sur demande seulement, le STI doit installer une extension et entrer des informations précises dans le formulaire afin que le tout fonctionne. Pour avoir accès au paiement en ligne, faire la demande au Service des technologies de l’information. supportsti@uqac.ca
N.B. Chaque action de formulaire peut être assujettie à l’application de la logique conditionnelle, c’est-à-dire qu’elles peuvent s’appliquer ou non selon une logique déterminée par les réponses de l’utilisateur. La fonction logique conditionnelle est expliquée dans un chapitre ultérieur de ce même document (Options avancées).
Entrées
Les entrées sont les résultats de votre formulaire. Chaque formulaire complété constituera une entrée. Pour atteindre le panneau de gestion des entrées de formulaire, cliquer sur l’onglet approprié dans la gestion de votre formulaire.
Par défaut, formidable vous présentera, sous forme de tableau, la liste de toutes les entrées sur l’axe vertical et tous les champs de votre formulaire sur l’axe horizontal.
ASTUCE : Vous pouvez afficher seulement les champs que vous voulez en cochant ou décochant les cases de chacun dans l’onglet « options de l’écran » situé en haut à droite de votre panneau de contrôle. C’est pratique pour se donner une meilleure vue d’ensemble avec les champs les plus pertinents sans trop alourdir la page.
Classer
Chaque champ dans l’axe horizontal permet de classer les entrées par ordre alphabétique, chronologique ou quantitatif. Il s’agit de cliquer sur l’intitulé du champ dans le haut de chaque colonne.
Ajouter
Il est possible d’ajouter des entrées manuellement à partir de cet écran. Il faut cliquer sur le bouton « ajouter » et le formulaire vous apparaitra, vide.
Modifier
On peut aussi modifier une entrée remplie par un utilisateur en cliquant sur le lien du premier champ dans l’entrée souhaitée. Le formulaire déjà rempli sera affiché, vous pourrez modifier ou effacer les réponses de l’utilisateur.
Exportation des entrées dans un fichier compatible avec Microsoft Excel
Le bouton : de fichier permet d’obtenir toutes vos entrées sous forme tabulé compatible avec Excel. Cependant, certaines manipulations devront être faites pour visionner le fichier sous forme de tableau standard. Il n’en sera pas question dans ce document.
Vues
Les vues servent à utiliser les données recueillies par votre formulaire pour créer des articles ou des pages WordPress. À titre d’exemple, à partir d’un formulaire d’inscription complet pour un colloque on pourrait créer une liste des noms de famille de tous ceux qui s’y sont inscrits en ordre alphabétique. Comme cette fonctionnalité n’est pas très utilisée, il n’en sera pas question dans ce document.
Rapports
Simplement une manière plus visuelle de consulter vos données. Les graphiques sont créés automatiquement selon le type de question que vous posez dans votre formulaire et il n’est pas possible de les changer. À titre indicatif seulement.
Options avancées
La logique conditionnelle La logique conditionnelle, comme son nom l’indique, permet d’appliquer une action selon que certaines conditions ou non soient respectées. En clair, on peut rendre un formulaire interactif selon les réponses de l’utilisateur. L’exemple typique est de faire apparaitre un champ « ligne de texte simple » lorsqu’un utilisateur sélectionne « autre » à une question à choix multiples. Dans un premier temps, il faut comprendre que la logique s’applique à partir du champ que l’on veut faire interagir. Dans notre exemple typique, la logique sera intégrée au champ « ligne de texte simple » et non à celui qui contient la question à choix multiples. Le champ « ligne de texte simple » sera invisible par défaut et n’apparaitra que SI la réponse à la question « Quelle est votre saveur de croustille préférée » sera ÉGALE À « autres ».
Essayons.
- Créer un champ « Boutons radio » comme l’image suivante :
- Créer un champ « Ligne de texte simple » et placer-le juste en dessous du précédent.
- La question sera : « Précisez votre saveur préférée »
- Dans les options de ce champ (petite flèche à droite) cliquez sur « logique conditionnelle » tout en bas et la boite suivante apparaitra :
- Il faut sélectionner les réponses qui nous conviennent afin de construire une condition logique dans laquelle le champ apparaitra ou non.
Astuce : à l’aide du petit symbole « + » on peut ajouter autant de conditions que l’on souhaite. Le champ sera ainsi visible ou non dépendamment de l’une ou de toutes les conditions.
Options de mise en page
Formidable nous permet de rendre la mise en page de notre formulaire plus agréable, mais surtout plus compacte. Ainsi, à l’aide des codes préprogrammés on peut placer plusieurs champs les uns à côté des autres pour sauver de l’espace. Pour utiliser cette fonction, il faut ouvrir les options du champ et cliquer sur les codes appropriés (qui sont situés dans la colonne de droite sous l’onglet « mise en page ») en ayant en focus la case « classes CSS de mise en forme ».
Par exemple, si on veut placer les champs nom et prénom l’un à côté de l’autre, on utilisera les codes « Premier » et « ½ » dans le champ de gauche et « Dernier » et « ½ » dans le champ de droite. À noter que lorsqu’on clique sur le bouton, formidable insère automatiquement un code dans le champ semblable à : « frm_first » ou «frm_fourth ». Il est important de laisser un espace entre chaque code et de ne pas les modifier.
Exemple # 2 trois champs sur la même ligne :
Champ 1 : Premier 1/3
Champ 2 : 1/3
Champ 3 : Dernier 1/3
Et ainsi de suite. Il faut essayer et utiliser l’aperçu pour voir le résultat.
Conclusion
Ce document n’est qu’un survol des principales fonctions de Formidable Pro. Comme beaucoup d’autres extensions reliées à WordPress, il est primordial de bien lire toutes les instructions et de prendre le temps de faire quelques essais. Avec un peu de pratique, Formidable s’avère une extension très utile et peut contribuer à vous faire sauver un temps considérable. Pour toute question ou commentaire sur Formidable Pro ou sur ce document veuillez-vous adresser au supportsti@uqac.ca ou encore au poste #6000
Bonne collecte de données !