Les formulaires - Module FormBuilder

Ce tuto est en construction ! 

L'interactivité avec les visiteurs de votre site passent entre autres par les formulaires... Nous allons donc commencer avec un tuto consacré au plus simple d'entre tous, j'ai nommé le "Formulaire de contacts". 

Je vous donne ici la méthode utilisant l'envoi des données du formulaire par email. Je compléterai par la suite avec d'autres méthodes.

Pour ce faire, nous aurons besoin du module "Form Builder", "CMSMailer". Commencez par télécharger et installer ces deux modules (voir les tutos Ajout d'un module et Gestion des modules).

1. Menu Extensions →  Form Builder.

2. Vous avez à choix deux formulaires prédéfinis. Etant donné que nous voulons faire un formulaire de contacts, choisissons "Contact Form" en cliquant dessus.

3. Vous arrivez dans une fenêtre avec un petit tableau récapitulatif de votre formulaire prédéfini. Cliquez sur la première ligne du tableau qui doit indiquer "Update this field". Dans la fenêtre qui apparaît, remplissez au minimum le champ "Destination Email address" avec l'adresse email à laquelle vous aimeriez recevoir les données du formulaire de contacts.

A CE STADE, vous pouvez arrêter si vous êtes satisfait des champs du formulaire qui sont Name, Email, Subject et Message. Il ne vous reste plus qu'à placer le code suivant dans le gabarit où viendra prendre place le formulaire :

{cms_module module='FormBuilder' form='contact'}

Et voilà c'est normalement fonctionnel. Remplissez le formulaire pour tester que tout est en ordre.

VOUS N'ETES PAS SATISFAIT, alors on continue.

4. Nous allons mettre le formulaire en français, rajouter un champ "prénom" pour arriver à ce résultat :

Il vous suffit de cliquez sur "Name", de remplacer par "Votre nom", de cocher ou non la case pour indiquer si le champ est obligatoire ou non et ainsi de suite pour Email, Subject, Message.

5. Pour ajouter un champ, cliquez en bas sur "Add New Field". Nommez le champ "Votre prenom" (n'utilisez pas d'accent - sauf erreur de ma part (et si un spécialiste passe par là...) les étiquettes des champs correspondent aux variables ?! et les variables n'aiment pas les accents). Choisissez dans la liste déroulante le type du champ (ici Text input), la longueur (ici 100) et cocher la case pour rendre le champ obligatoire ou non et la forme de validation si nécessaire.

6. Votre nouveau champ apparaît dans le petit tableau récapitulatif. Utilisez les flèches bleues pour lui donner sa position (ici après le champ "Votre nom").

7. Etant donné que nous avons modifié les variables, nous devons aller modifier les templates du formulaire. On commence par le template d'envoi des données par email. On retourne sur la première ligne du tableau et on clique sur le premier champ (ici "Webmaster AC-Blog"). Dans la fenêtre qui s'ouvre, sélectionnez l'onglet "Advanced Settings". C'est là que se cache notre template. Si ce n'est pas le cas déjà, cochez "Generate HTML email". Vous remarquez une zone de texte et à côté un nouveau tableau récapitulant les données. Là vous avez deux méthodes, soit vous modifiez directement le template en modifiant les variables, les styles si vous êtes à l'aise avec l'exercice. Soit vous cliquez en bas du tableau à droite sur "Create Sample HTML template" et hop magie votre template a été créé en prenant en compte les modifications effectuées.

8. Ensuite, intéressons-nous à ce qui se passera après que l'utilisateur ait envoyé le formulaire. Cliquez sur l'onglet "Form Submission". Nous allons définir le comportement après envoi du formulaire (1) ainsi que les étiquettes des boutons d'envoi du formulaire (2).

(1) Définissez ici si vous souhaitez que s'affiche un récapitulatif des données envoyées (Display "Submission Template") ou que le visiteur soit redirigé vers une page du site (Redirect to site page + choix de la page dans la liste déroulante). Si vous choisissez la méthode de redirection,  faites pointer sur une page que vous aurez créée et qui contiendra un texte tel que "Merci pour votre message. Nous vous répondrons dans les meilleurs délais......etc...." afin que le visiteur ait confirmation de l'envoi de son message.

(2) Ici il s'agit de définir le texte qui apparaîtra sur le bouton d'envoi du formulaire, ainsi que le texte pour les boutons Suivant/précédent en cas de formulaire de plusieurs pages. Cochez le "Add Safety script", il protége contre les envois multiples.

9. Vous avez choisi d'afficher un récapitulatif des données envoyées ? Intéressons-nous maintenant à cette partie et configurons le gabarit concerné. Je vous rappelle qu'il s'agit des informations qui seront affichées au visiteur après l'envoi du formulaire. Pour cela, cliquez sur l'onglet "Submission template". Vous remarquerez à nouveau une zone de texte sur la gauche et un tableau récapitulatif des variables sur la droite. Dans la zone de texte, un gabarit est déjà présent mais il ne comprend pas les changements apportés au formulaire précédemment (le champ prénom par exemple) et il est en anglais. Il y a deux solutions : soit vous êtes un minimum ami avec le traitement des formulaires et vous modifiez vous-même pour faire correspondre à ce que vous désirez (changement et intégration des variables, traduction). A quoi cela ressemble pour mon propre formulaire de contact ? Il n'y a qu'à demander :

Si vous n'êtes pas à l'aise pour modifier directement,  cliquez sur "Create Sample HTML template" en bas du tableau de droite. Vous devriez obtenir quelque chose comme ceci :

Cette fois, toutes les données de notre formulaire sont intégrées au gabarit. Par contre, celui-ci est toujours en anglais. Il faut donc modifier directement le gabarit. Pas d'inquiétude, tant que vous ne touchez pas aux variables, c'est-à-dire à ce qui ressemble à ça : "{$sub_host}".

Vous pouvez donc intégrer tout le texte désiré, modifiez les balises html, sans problème.

Une fois que vous êtes arrivés au résultat désiré, enregistrez et on passe à la suite !

10. Il y a des onglets dont je n'ai pas encore parlé.  Il s'agit de :

"Form Display Settings"
Traduction rapide des trois champs:
Symbole utilisé pour marquer un champ obligatoire
Texte pour indiquer une valeur non spécifiée pour un champ
Caractère utilisé pour séparer plusieurs valeurs dans un résultat

"Captcha Settings"
Protection des formulaires. Insére aléatoirement des petites images dont vous devez recopier les caractères pour envoyer le formulaire.
Traduction rapide des champs :
Utiliser Captcha pour protéger l'envoi : Valider ici pour protéger votre formulaire avec un "Captcha"
Texte d'aide pour captcha (insérer ici le texte visible, par ex : Insérer les caractères visibles dans l'image)
Texte d'erreur pour captcha (insérer ici le texte en cas d'erreur)

"Form template"
Il s'agit de l'onglet comprenant le gabarit de votre formulaire. Modifiez-le si nécessaire.

11. Si vous êtes curieux, vous aurez sûrement à ce stade déjà testé votre formulaire et fait exprès de ne pas remplir certains champs ou de mal reporter le code captcha pour voir ce qui se passe. Et là vous aurez peut-être constaté tout déconfit qu'effectivement le formulaire réagit bien et renvoit des messages d'erreur mais que tout est en anglais. Pour traduire ces messages d'erreurs, vous devez récupérer avec votre logiciel FTP sur votre disque dur le fichier "en_US.php" du répertoire Modules/FormBuilder/lang. A l'aide de votre éditeur de texte, modifiez les messages d'erreurs utiles (par exemple pour ce formulaire à partir de la ligne 52). N'oubliez pas également de modifier à la ligne 270 ($lang['wrong_captcha']='Le code est incorrect.';). Il semblerait que ce paramètre ne soit pas éditable depuis la console d'administration. Ou encore plus simplement, je viens de constater que Lefidel, membre de la communauté francophone, propose une traduction de ce document, pour le télécharger. Il vous suffit ensuite transférer ce document (fr_FR.php) sur votre serveur dans le répertoire Modules/FormBuilder/lang/ext.

12. Nous arrivons au bout de ce tuto. Ne nous reste qu'à rendre notre formulaire tout beau. Si vous ne le connaissez pas ou que tout simplement vous voulez en apprendre plus sur la personnalisation des formulaires avec les css, allez, que dis-je, courez tout de suite voir cet excellent tutoriel d'Adrien Pellegrini. Cela devrait vous aider à arriver à un résultat harmonieux qui s'intégrera parfaitement à votre site. Et si vous avez des soucis, faites-moi signe. Je tâcherai de compléter cette partie.

En cas de problème de réception des emails: 
1. Menu Extensions → CMSMailer. Rentrez les données utiles, ainsi que tout en bas du formulaire une adresse email de test. Effectuer le test pour vous assurer que vous recevez bien les emails.
S'il y a un problème, reportez-vous au forum et à la doc officielle CMS Made Simple.