icone jauge moyenNiveau Joomla :
Intermédiaire

Qu'allons-nous voir dans ce tutoriel ?

Logo BreezingFormsBreezingForms est un composant ultra complet qui compte trois modesde création différents qui sauront satisfaire le plus grand nombre. Pour ce premier tutoriel, nous allons voir comment réaliser un formulaire de contact grâce au EasyMode.

 
Pour que cela soit encore plus concret, ce tutoriel existe aussi en vidéo.
 

Icone styloCréer un formulaire avec l'Easy Mode de BreezingForms

Comment fonctionne l'Easy Mode ?

breezingforms easymodeTout 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).

Easy Mode BreezingForms

Les paramètres du formulaire

Paramètres Easy ModeAvant 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.

Paramètres Easy Mode

Le drag & drop tout un art avec l'Easy Mode

Onglet item Easy ModeL'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"!

Le paramétrage de vos éléments

Ongleyt element Easy ModeMaintenant, 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.

Paramètres élément Easy Mode

Les scripts de validation

Onglet élément EasyModeDerniè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"

Script Easy Mode

Icone styloCréer un lien vers votre formulaire BreezingForms

Créer un élément de menu

Main menu JoomlaLa 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".

Lien menu BreezingForms

Éditer l'élément de menu

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.

Editer lien BreezingForms

Icone helpTutoriels associés

  • Le QuickMode de BreezingForms
L'auteur : un expert à votre service
Geoffrey LEOST
Nom : Geoffrey LEOST

Commentaires (5)

This comment was minimized by the moderator on the site

Merci de vorte aide (je vais essayer de le mettre sur le forum.Désolé si j'ai pollué.)

Dernière édition du commentaire il y a environ 7 ans par bob politi bob politi
This comment was minimized by the moderator on the site

Bonjour,
Je suis en train de découvrir Breezingforms. C'est très intéressant...
Je profite de ma lecture pour te signaler une petite erreur de composition dans le texte de présentation ci-dessus:
"...Pour ce premier tutoriel, nous allons voir...

Bonjour,
Je suis en train de découvrir Breezingforms. C'est très intéressant...
Je profite de ma lecture pour te signaler une petite erreur de composition dans le texte de présentation ci-dessus:
"...Pour ce premier tutoriel, nous allons voir comment réaliser un formulaire de contact grâce au QuickMode.
---> QuickMode au lieu de "Easy Mode
Merci...
Gérard

Lire la suite
Dernière édition du commentaire il y a environ 7 ans par Gérard Nancey Gérard Nancey
This comment was minimized by the moderator on the site

Bonjour Gérard,

En effet ! Merci pour ta contribution

This comment was minimized by the moderator on the site

Bonjour,

J'ai installé Breezing Forms (en version free) sur mon Joomla (Joomla! 3.8.12 Stable [ Amani ] 28-August-2018 14:00 GMT).
Je souhaite utiliser le "Easy Mode" mais impossible de faire glisser les éléments... est-ce à cause de la version...

Bonjour,

J'ai installé Breezing Forms (en version free) sur mon Joomla (Joomla! 3.8.12 Stable [ Amani ] 28-August-2018 14:00 GMT).
Je souhaite utiliser le "Easy Mode" mais impossible de faire glisser les éléments... est-ce à cause de la version "free" ? de la version de Joomla ? de mon navigateur ?

Merci beaucoup pour votre aide et belle journée

Lire la suite
This comment was minimized by the moderator on the site

Bonjour,
Je viens de tester la version Free, je confirme le drag&drop du Easy Mode est totallement buggué sous Joomla 3.8.
Il faut passer en Quick Mode.
Bonne journée.

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
BreezingForms 1.8.2 - Création de formulaire Joomla complexeBreezingForms 1.8.2 - Création de formulaire Joomla complexe
Résumé du test Intuitivité : Stabilité : Support : Sécurité : Mises à jour : Interropérabilité : Licence : Autre extension du même type RSForm!Pro Proforms Liens utiles...