L'Easy Mode de BreezingForms

Tout d'abord, pour vous rendre dans le Easy Mode, il faut passer par "Composants > BreezingForms > Manage Forms" et cliquer sur l'icône "Easy Mode" en haut à droite. Pour bien comprendre le fonctionnement de l'Easy Mode, il faut distinguer les différents éléments présents. L'Easy Mode est basé sur le système du drag and drop (glisser/déposer), sur la gauche, vous avez les différents éléments (champs de texte,...) à faire glisser dans la partie de droite. C'est également dans la partie gauche que vous allez effectuer les différents réglages comme la taille des éléments ou le type de validation (voir image ci-dessous).

Avant de commencer la création de notre formulaire, nous allons d'abord passer par les paramètres du formulaire. Pour cela, il faut que vous cliquiez une première fois sur l'icône "Sauver" en haut à droite afin de pouvoir se rendre dans ces paramètres. Dans le premier onglet "Paramètres", vous pouvez choisir un titre et un nom pour votre formulaire, ce dernier servira lorsque nous ferons le lien vers votre formulaire depuis votre menu. Vous avez également la possibilité de fixer une taille pour votre formulaire mais aussi de lui attribuer une description. Enfin, vous pouvez choisir l'adresse e-mail qui recevra les formulaires. L'onglet "Scripts" peut vous être utile car il permet par exemple de configurer le formulaire pour qu'une fois validé, l'internaute soir redirigé vers la page d'accueil.

L'Easy Mode de BreezingForms propose un mode création de formulaire tout à fait particulier puisqu'il s'agit de faire un glisser/déposer de tous vos éléments de la liste de gauche vers l'espace création à droite. Cette liste contient toutes sortes d'éléments tels que des champs de texte, des aires de texte ou encore des boutons. Cette manière de faire est très ludique et facile à prendre en main. Je vous conseille de d'abord mettre en place tous les éléments qui composent votre formulaire puis de faire le paramétrage par la suite. Vous pouvez voir sur l'image ci-dessous que j'ai fait un glisser/déposer de plusieurs élément :

• 1 texte statique
• 3 champs de texte
• 1 aire de texte
• 1 bouton submit (envoyer)

N'oubliez pas de sauvegarder en cliquant sur l'icone "Sauver"!

Maintenant, passons au paramétrage des différents éléments que vous avez utilisés pour créer votre formulaire de contact. Pour cela, il faut simplement cliquer sur l'élément dans la partie droite puis de se rendre dans l'onglet "Element" à gauche. Sur l'image ci-dessous, j'ai pris l'exemple du premier champ que j'ai appelé "Nom" comme vous pouvez le voir dans le cadre "Content (may contain HTML):". Pour ceux qui sont fâchés avec l'anglais, la mention "may contain HTML" signifie que vous pouvez utiliser des balises HTML dans ce cadre pour mettre un terme en gras par exemple.

Vous pouvez paramétrer la disposition du champ en utilisant les paramètres "Height" et "Largeur". Enfin, en cochant la case "On Top?", vous placerez le mot au-dessus du champ.

Une chose très importante n'oubliez pas de cliquer sur "Update" en bas à gauche.

Dernière petite chose à configurer, les scripts de validation. En effet, comme dans le QuickMode, il est possible de régler un champ pour le rendre obligatoire. Pour ce faire, il faut cliquer sur le champ que vous voulez rendre obligatoire puis de vous rendre le menu "Validation script" qui se trouve tout en bas à gauche dans l'onglet "Element". Pour un champ comme le "Nom" par exemple, il faut choisir le script "FF::ff_valuenoempty" qui se trouve dans la bibliothèque. Et dans le champ "Error Message", vous pouvez mettre le texte qui apparaît au cas où l'internaute ne remplit pas le champ.

En ce qui concerne le champ "e-mail", je vous conseille de mettre le script "FF::ff_validemail" et surtout, n'oubliez pas de mettre le script "FF::ff_validate_submit" sur votre bouton "Envoyer".

Encore une fois, n'oubliez pas de cliquer sur "Update"

La dernière étape du tutoriel consiste à créer un lien dans votre menu vers leformulaire BreezingForms créé précédemment. Pour ce faire, rendez vous dans la section "Menus> Main Menu". Puis cliquez sur l'icône "Nouveau", enfin choisissez "BreezingForms".

Maintenant il ne vous reste plus qu'à choisir le nom du lien, je l'ai nommé pour ma part "Contact" (voir image ci-dessous). La 2^ème chose à choisir c'est votre formulaire dans les paramètres basiques sur la gauche. Il faut tout simplement écrire le nom que vous avez mentionné dans le champ "Nom" lors du paramétrage de votre formulaire.