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 QuickMode.

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

Icone styloCréer un formulaire avec le QuickMode de BreezingForms

Comment fonctionne le QuickMode ?

QuickMode BreezingFormsTout d'abord, pour vous rendre dans le QuickMode, il faut passer par "Composants > BreezingForms > Manage Forms" et cliquer sur l'icône "QuickMode" en haut à droite. Pour bien comprendre le fonctionnement du QuickMode, il faut distinguer les différents éléments présents. Sur la gauche, vous avez ce qui s'apparente à la structure de votre formulaire et sur la droite, vous avez les différents paramètres à régler pour chaque élément (voir image ci-dessous).


  QuickMode BreezingForms

Les propriétés générales de votre formulaire

Alors, avant de vous expliquer comment créer le formulaire, il faut régler un certains nombre de paramètres généraux afin que votre formulaire fonctionne convenablement. Comme vous pouvez le voir sur l'image ci-dessous, il faut vous placer en haut de la structure afin d'accéder aux propriétés générales de votre formulaire. Je précise qu'au départ, lorsque vous cliquez sur l'icône "QuickMode", il n'y a qu'un seul élément qui s'avère être le haut de la structure, ainsi vous êtes directement sur la page qui nous intéresse ici.

Propriétés QuickMode

Je vais maintenant vous détailler les différents paramètres pour que tout soit bien clair :

  • Titre - Il s'agit simplement d'un ou plusieurs mots désignant votre formulaire.
  • Nom - Celui-ci est plus important car il s'agit du nom qui sera utilisé lors de la création du lien vers le formulaire. Vous devez de préférence choisir un seul mot et en minuscule.
  • Description - Ce cadre permet de donner des informations sur votre formulaire, comme sa fonction par exemple. Cette description vient se placer tout en haut de votre formulaire.
  • Dernière page de remerciements - Si vous cochez la case, lorsque vous cliquerez sur "Envoyer" le formulaire sera de suite expédiez et vous renverra sur la page de remerciements. Par contre si la case est décochée alors, vous aurez un système de pagination avec des boutons suivant/précédent.
  • Mail de notification - Cochez la case si vous souhaitez recevoir une notification lorsque quelqu'un envoie un formulaire.
  • Destinataire(s) - C'est ici que vous devez renseigner l'adresse e-mail qui recevra les notifications.
  • Inclure bouton "Soumettre" - Je ne comprend pas vraiment le but de cette option étant donné que si l'on veut recevoir le formulaire de contact, il faut bien que la personne puisse cliquer sur "Envoyer". Donc laissez ce paramètres sur "oui".
  • Libellé du bouton "Soumettre" - Permet de choisir le terme présent sur le bouton "Envoyer".
  • Pagination - Comme pour le bouton "Envoyer", vous pouvez choisir de faire apparaitre ou non la pagination et quels termes seront présents sur les boutons.
  • Annuler - Enfin, vous disposez également d'un bouton "Reset3 qui permet de remettre le formulaire à zéro.

Créer la structure du formulaire

Formulaire QuickModeNous allons maintenant rentrer dans le vif du sujet, c'est-à-dire la création du formulaire à proprement parlé. Pour cela, vous devez respecter une structure spécifique qui est "Formulaire > Page > Élément" comme vous pouvez le voir sur l'image ci-contre. Vous devez donc en premier lieu créer une page, pour cela, il suffit de se placer en haut de la structure et de cliquer sur "Nouvelle page". Cette dernière sera la page contenant le formulaire. Ensuite, vous devez créer les différents éléments constituant votre formulaire. Pour ce faire, placez-vous cette fois-ci sur la page et cliquez sur "Nouvel élément".

Le formulaire que j'ai créé pour ce tutoriel contient quatre éléments : 3 champs de texte et 1 aire de texte. Vous disposez bien sûr d'autres éléments que vous pourrez utiliser selon vos besoins ou votre imagination. J'ai choisir ces deux types d'éléments car ce sont eux qui sont le plus souvent utilisés pour créer un formulaire de contact. Sur l'image ci-dessous, vous pouvez voir que le paramétrage s'effectue en 2 étapes :

  • Les paramètres de l'élément - Ils vous permettent de gérer l'apparence de votre champs de texte ou de votre aire de texte. Vous pouvez bien sûr choisir l'étiquette mais aussi la taille des différentes zones de textes. Le cadre "Conseil" est très utile car il permet par l'intermédiaire d'une info-bulle de donner des informations à l'internaute sur la manière de remplir le formulaire.
  • La validation - Vous aurez surement remarqué que dans beaucoup de formulaires qu'il nous arrive de remplir sur internet, certains champs sont rendus obligatoires. C'est donc dans cette partie "Validation" que vous pourrez gérer ce genre de choses. Par exemple si vous souhaitez rendre un champs de texte obligatoire alors vous devez cocher la case "Requis" puis choisir "Bibliothèque" et enfin dans le menu déroulant, sélectionner "FF::ff_valuenotempty".

Element BreezingForms

Créer une page de remerciement

Remerciement BreezingFormsEnfin, il ne reste plus qu'à créer une page de remerciement qui fait suite à la validation du formulaire. Pour cela, placez-vous à nouveau en haut de la structure et cliquez sur "Nouvelle page". Maintenant, placez-vous sur cette dernière afin de la paramétrer. Il ne vous reste plus qu'à cliquer sur "Éditer" pour faire apparaitre un popup dans lequel se trouve un éditeur permettant de rédiger vos page de remerciement. Pour ma part, j'ai mis une phrase classique avec un lien de retour vers l'accueil. Voici le code HTML si vous manquez d'inspiration.

Editer remerciement BreezinForms

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.

Icone helpTutoriels associés

L'auteur : un expert à votre service
Geoffrey LEOST
Nom : Geoffrey LEOST

Commentaires (7)

This comment was minimized by the moderator on the site

je voudrai pouvoir consulter les tutoriels sur breezingforms..

This comment was minimized by the moderator on the site

Bonjour,Tous nos tutoriels écrits sont maintenant en accès libre sur notre centre de formation Joomea. Inscrivez-vous puis connectez-vous.

This comment was minimized by the moderator on the site

Bonjour,
Je tente d'utiliser Breezingforms mais je reste bloquer à cause du bouton "soumettre". J'ai regardé tous les tutoriels, les réponses sur les forums pour résoudre ce problème mais mon bouton reste toujours inactif. Y a-t-il une...

Bonjour,
Je tente d'utiliser Breezingforms mais je reste bloquer à cause du bouton "soumettre". J'ai regardé tous les tutoriels, les réponses sur les forums pour résoudre ce problème mais mon bouton reste toujours inactif. Y a-t-il une manipulation spécifique pour le rendre actif ?
Merci :-)

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

Bonjour Catherine,

Vérifie que tu as bien choisi le script de soumission dans les paramètres du formulaire.
Je te laisse poster sur le forum si jamais tu rencontres des difficultés.

@bientôt.

This comment was minimized by the moderator on the site

Salut
Merci pour vos tutoriels
Le liens pour le code html de la page de remerciement ne fonctionne pas.

This comment was minimized by the moderator on the site

tout est ok, mais quand on a rempli le formulaire, et que l'on clique sur envoyer, le formulaire ne s'envoie pas. On arrive sur une page blanche
Qu'est-ce qui pourrait coincer ?

This comment was minimized by the moderator on the site

Hello,
Je te propose qu'on en parle sur le forum :-)
Bonne journée, @bientôt.

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...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok