Vente de fichier téléchargeable avec Paypal

Simon Grange

 

L'extension BreezingForms ne permet pas seulement de créer des formulaires entièrement personnalisés avec Joomla!, elle permet également de nombreuses autres fonctionnalités.

L'une d'entre elles est la vente de fichiers (par exemple un E-book ou un PDF).

NOTE : pour suivre ce tutoriel, et ainsi pouvoir vendre des fichiers avec BreezingForms, vous devez posséder un compte Paypal Business vérifié !

Comment cela fonctionne ? Pour faire simple, nous allons créer un formulaire. L'utilisateur va remplir ce formulaire, et lorsqu'il l'aura rempli, il sera redirigé vers la passerelle de paiement Paypal.
Une fois qu'il aura effectué son paiement (dont nous déterminerons le montant), il sera ridirigé sur le site et pourra alors télécharger le fichier.

Voyons comment cela fonctionne

Publier le formulaire sur le Frontend

Simon Grange

 

Bon, très bien, notre formulaire est terminé. Nous allons désormais pouvoir l'afficher sur le site. Nous allons, pour cela, voir deux possibilités : via un élément de menu et via un module.

 

Afficher le formulaire via un élément de menu

Pour afficher votre formulaire sur votre site via un élément de menu, c'est très simple, rendez-vous dans Menu → Le menu de votre choix, puis créez un nouvel élément de menu.

Formulaire affiché via un élément de menu - Détails

Formulaire affiché via un élément de menu - paramètres avancés

 

Affichage du formulaire BreezingForms via un élément de menu

 

1 – Type de l'élément de menu : choisissez Breezingforms → Nouveau formulaire.
2 – Titre de menu : donnez un titre à votre élément de menu.
3 – Nom du formulaire : entrez le nom de votre formulaire (attention, le nom, pas le titre).
4 – Cliquez sur Enregistrer & Fermer.

 

Afficher le formulaire via un module

Attention, pour afficher un formulaire via un module, il est préférable que ce formulaire soit de petite taille, surtout si vous choisissez de l'afficher sur une colonne de votre site par exemple. Dans le cas contraire, ce formulaire sera mal affiché.

Pour créer votre module, rendez-vous dans Extensions → Gestion des modules → Nouveau. Choisissez alors le type BreezingForms.

Formulaire BreezingForms affiché via un module

Affichage du formulaire BreezingForms via un module

 

1 – Réglez les paramètres comme le titre du module, sa position, son niveau d'accès, etc.
2 – Entrez le nom du formulaire (attention, le nom, pas le titre).
3 – Assignez le module aux pages que vous souhaitez.

  

Champs conditionnels avec BreezingForms

Simon Grange

 

Dans ce chapitre consacré au composant BreezingForms, nous allons regarder les champs et sections conditionnels.

Mais pour commencer, les champs conditionnels, c'est quoi ?

C'est très simple, avec l’extension BreezingForms, vous allez pouvoir faire en sorte que votre formulaire affiche ou cache certains champs suivant certaines conditions.
En plus clair, si nous reprenons le troisième élément de notre formulaire (Vous êtes), nous allons pouvoir faire en sorte que si notre utilisateur choisit la valeur “Une entreprise” un nouveau champ apparaisse dessous pour lui demander son numéro de TVA.

NOTE : La logique de BreezingForms veut que nous créions un élément, que cet élément soit caché par défaut et que si une certaine condition est remplie, l'élément s'affiche.

Voyons quelques exemples :

Paramétrer et envoyer le mail pour l'administrateur

Simon Grange

 

Avec BreezingForms, vous pouvez paramétrer et personnaliser l'Email administrateur, c'est-à-dire l'Email que vous, ou un autre administrateur allez recevoir avec les données que l'utilisateur aura entrées.

 

Entrer les destinataires

Pour commencer, nous allons entrer un ou des destinataire(s). Pour cela éditez le formulaire lui-même (1), cochez le paramètre "Mail de notification" (2) puis entrez une ou plusieure(s) adresse(s) Email dans le champ Destinataire(s) (3). Cliquez ensuite sur le bouton Enregistrer les propriétés (4), puis sur le bouton Sauver (5).

Ajouter des destinataires

Ajout de destinataires

Nous venons d'activer le mail de notification et d'entrer les différentes adresses Email vers lesquelles nous souhaitons que ce mail soit envoyé. Nous allons désormais le personnaliser.

 

Formulaire sur plusieurs pages

Simon Grange

 

Bien, nous venons de finir de créer notre formulaire de contact personnalisé. Pour aller plus loin, nous allons créer une deuxième page à ce formulaire. Dans notre cas, notre formulaire comportera donc 3 pages (2 pages de formulaire + 1 page de remerciement).

NOTE : Comme nous l'avons déjà vu il est important de garder à l'esprit que plus votre formulaire ira droit au but, moins vos utilisateurs perdons de temps à le remplir.
N'utilisez donc des formulaires sur plusieurs pages seulement si vous en avez la nécessité. Dans la majeure partie des cas, une seule page suffit pour que les personnes qui le souhaitent puissent prendre contact avec vous.

Revenons-en à notre deuxième page. Vous allez le voir, il n'y a absolument rien de compliqué. De la même manière que vous avez ajouté une deuxième page pour créer votre page de remerciement, éditez l'élément du formulaire lui-même (1) puis cliquez sur Nouvelle page (2).

Ajoute d'une nouvelle page avec BreezingForms
Créer une nouvelle page avec BreezingForms

Ensuite, vous n'avez plus qu'à créer les différentes sections et les différents éléments qui vont être affichés sur cette page, exactement de la même manière que ce que nous avons vu dans le chapitre précédent.

NOTE : Pensez bien à régler la pagination en éditant l'élément du formulaire lui-même et pensez également à régler le libellé des bouton “Suivant” et “Précédent”, toujours dans l'élément du formulaire lui-même.

 

Paramétrer et envoyer un mail de remerciement

Simon Grange

Avec BreezingForms, il est possible d'envoyer un Email de remerciement à l'utilisateur qui vient de remplir le formulaire.

NOTE : Bien sûr, pour pouvoir envoyer cet Email, vous devrez avoir un champ de type Email, Email vers lequel sera envoyé ce message de remerciement.

 

Activer le mail de remerciement

Pour commencer, nous allons activer le mail de retour, c'est-à-dire le mail qui sera envoyé à l'utilisateur. Editez donc ce champ de type Email (1), puis rendez-vous dans les paramètres Avancés (2). Cochez le paramètre Retour de mail (3), puis cliquez sur le bouton Enregistrer les propriétés (4). Cliquez enfin sur le bouton Sauver.

Activer le retour de mail BreezingForms

Activer le retour de mail BreezingForms 

Maintenant que nous venons d'activer l'Email de remerciement, nous allons le paramétrer afin qu'il soit personnalisé pour chaque utilisateur.

Ajouter une page de remerciement

Simon Grange

Pour ajouter une page de remerciement avec BreezingForms, il n'y a rien de très compliqué.

Pour cela, éditez votre formulaire et plus particulièrement l'élément du formulaire lui-même (1) :

Nouvelle page BreezingForms

Ajouter une nouvelle page

Ensuite, vous devez cocher la case “Dernière page de remerciement” (2), puis cliquer sur le bouton “Enregistrer les propriétés” (3), et enfin cliquer sur le bouton “Nouvelle page” (4) afin de créer la page de remerciement.

Pour compléter votre page de remerciement, il vous suffit d'éditer la page que vous venez de créer, puis de la compléter.

Vous pouvez, par exemple, simplement éditer l'introduction de cette page et y entrer un texte de remerciement accompagné d'une image (qui peut par exemple être votre logo), ou alors créer différentes sections pour organiser votre contenu.
Attention, encore une fois, si vous souhaitez être lu, allez directement à l'essentiel, rien ne sert d'écrire des lignes et des lignes.

L'introduction de la page, et son éditeur de texte, vous permettent de mettre votre contenu en page comme vous le feriez pour un article classique de Joomla!.

 

 

Création d'un formulaire simple sur une page

Simon Grange

 

Pour commencer, nous allons créer ensemble un formulaire de contact simple sur une seule et unique page :

formulaire Breezingforms

Formulaire de contact avec l'extension BreezingForms

Création du formulaire


 Prenons l'exemple d'une entreprise qui souhaiterait donner la possibilité aux visiteurs de son site (ses potentiels futurs clients) de prendre contact via un formulaire.

Pour commencer à créer votre formulaire, rendez-vous dans BreezingForms → Formulaires → QuickForms :

parametrer-le-formulaire
Nouveau formulaire avec BreezingForms

1 – Donnez un titre à votre formulaire. Une fois que vous aurez enregistré les propriétés, vous retrouverez ce titre en A.
2 – Donnez un nom à votre formulaire. Ce nom ne doit pas comporter d'espace ou de caractères spéciaux (é, ù, à, etc...). C'est ce qui vous servira à afficher votre formulaire via un élément de menu ou un module.
3 – Si vous souhaitez que les enregistrements générés par ce formulaire (c'est-à-dire les demandes que vous font les visiteurs du site) soient envoyés à une adresse Email spéciale, cochez le champ “Mail de notification” puis entrez l'adresse Email dans le champ “Destinataire(s)”. Vous pouvez donc entrer plusieurs adresses Email. Si vous ne réglez pas ces deux paramètres, les Emails seront envoyés à l'adresse que vous avez paramétrée dans la configuration générale (BreezingForms → Configuration).
4 – Libellé du bouton “Soumettre” : Choisissez le libellé du bouton servant à envoyer le formulaire. “Envoyer” est par exemple un bon choix ;).
5 – Pages suivante et précédente : dans le cas d'un formulaire sur plusieurs pages, vous pouvez choisir le libellé des boutons permettant de naviguer entre les différentes pages du formulaire. Nous verrons comment créer un formulaire sur plusieurs pages dans le chapitre Formulaire Multi-pages avec BreezinForms.
6 – Inclure le bouton “Annuler” : choisissez si vous souhaitez ou non inclure un bouton Annuler à votre formulaire. Si vous souhaitez inclure ce bouton, donnez-lui ensuite un libellé.
7 – Une fois que tout est bon, cliquez sur le bouton “Enregistrer les propriétés”.

Nous venons donc de créer notre formulaire à proprement dit, il n'y a plus qu'à le remplir.

NOTE : Dans les paramètres avancés du formulaire, vous retrouverez un paramètre “Thème”. Ce paramètre permet de régler l'apparence globale de votre formulaire. Dans mon exemple, j'utilise le thème “Glossy_blue”.

 

Création d'une Page


Pour commencer, nous allons donc créer une page. Cliquez donc sur le bouton “Nouvelle Page”

nouvelle pageVous obtenez la page suivante :

nouvelle page
Création d'une nouvelle page avec BreezingForms

 

1 – Vous remarquez que j'ai donné “Contact” comme titre à mon formulaire.
2 – Grâce au bouton “Modifier”, vous pouvez donner une introduction à votre formulaire. Cela est assez intéressant car vous pouvez insérer du contenu (grâce à un éditeur de texte) avant votre formulaire. Vous pouvez donc sans problème ajouter du texte, le mettre en page, ajouter des images, etc... exactement comme vous le feriez dans un article Joomla!.
3 – Une fois que tout est bon, vous pouvez cliquer sur le bouton “Enregistrer les propriétés.”

 

Création d'une Section

Une fois notre page créée, nous pouvons créer notre première section. Pour cela, cliquez sur le bouton “Nouvelle Section”

nouvelle sectionLa page suivante s'affiche :

Création d'une nouvelle section avec BreezingFormsCréation d'une nouvelle section avec BreezingForms

1 – Type : si vous souhaitez afficher en Frontend le titre de votre section, choisissez le type “Groupe de champs”.
2 – Type d'écran : choisissez comment vous souhaitez afficher vos éléments, sur la même ligne, ou à la ligne après chaque élément.
3 – Titre : Donner un titre à votre section (qui sera donc affiché en Frontend si vous avez réglé le Type sur “Groupe de champs”).
4 – Nom de la section : vous pouvez donner un nom à votre section. Ce nom ne doit pas contenir d'espace ou de caractères spéciaux et sera utile, par exemple, lorsque nous verrons les champs conditionnels.
5 – Description : comme nous venons de le voir pour la création d'une page, vous pouvez ajouter une description pour votre section. Cette description sera affichée juste en dessous du titre de votre section.
6 – Une fois que tout est bon, vous pouvez cliquer sur le bouton “Enregistrer les propriétés.”

 

Création d'un élément

Bien, maintenant que notre formulaire est créé, que nous lui avons donné une page et une section, nous allons pouvoir insérer les éléments.
Comme nous l'avons déjà vu, BreezingForms propose plusieurs types d'éléments.
Nous allons utiliser plusieurs de ces types d'éléments.
Commençons simplement en utilisant l'élément “Champ de texte”. Pour cela, cliquez sur bouton “Nouvel Élément”
La page suivante s'affiche :

Création d'un nouvel élément avec BreezingForms
Création d'un nouvel élément avec BreezingForms

Pour cet exemple, nous allons créer l'élément qui servira à demander (et obtenir) le nom du contact.
1 – Type : choisissez le type de votre élément. Ici, choisissez “Champ de texte”.
2 – Etiquette : l'étiquette est le titre qui sera placé devant (ou dessous ou à coté) du champ. Ici, vous pouvez donc saisir “Nom”.
3 – Valeur : la valeur vous permet d'inscrire un ou plusieurs mots dans le champ qui s’effaceront lorsque l'utilisateur placera le curseur dans le champ. Cela peut être utile pour donner un conseil à l'utilisateur.
4 – Longueur Max : si vous le souhaitez, vous pouvez choisir une longueur maximale en caractères.
5 – Conseil : ici vous pouvez entrer une petite phrase qui sera affichée comme infobulle placée à coté du champ. Pour le nom, cela n'est pas forcément nécessaire, mais pour d'autres champs, cela peut s'avérer utile.
6 – Validation : vous pouvez décider que ce champ soit obligatoire. Si le visiteur ne le remplit pas, il ne pourra pas envoyer le formulaire.

Validation

BreezingForms offre nativement plusieurs possibilités lorsqu'un élément est obligatoire :

validation d'élément avec BreezingForms

BreezingForms - Système de validation

 

1 – Obligatoire : tout d'abord, vous devez cocher cette case pour rendre le champ obligatoire.
2 – Validation : BreezingForms vous propose une bibliothèque de scénarios disponibles. Cochez donc “Bibliothèque” pour afficher les différents scénarios.
3 – Message d'erreur : ici, vous pouvez entrer un message d'erreur qui sera affiché à l'utilisateur lorsqu'il aura mal rempli le champ.
4 – Scénario : choisissez le scénario selon lequel le champ sera valide ou non. Dans le cas de notre élément, je choisi le scénario “FF::ff_valuenotempty” qui nécessite donc que le champ ne soit pas vide (not empty) afin d'être valide. Il existe plusieurs scénarios, vous qui vous permettent de répondre à différents besoins.

Une fois que tout est bon, vous pouvez cliquer sur le bouton “Enregistrer les propriétés”, afin de sauvegarder l'élément que nous venons de créer.
Afin de sauvegarder le formulaire lui-même, cliquez sur le bouton “Sauver”.

Nous avons désormais notre formulaire créé, il contient une page, qui contient elle même une section, qui contient elle-même un élément.
En cliquant sur le bouton Aperçu dans le site, vous pouvez voir ce que donne ce formulaire sur votre Frontend.

Bien, continuons à remplir notre formulaire. Pour faire simple, je vous laisse créer vous-même l'élément “Prénom” qui sera identique à l'élément “Nom”. Bien sûr, vous pouvez choisir de ne pas rendre obligatoire cet élément.

Note : pour créer un nouvel élément, vous devez cliquer sur une catégorie (1), celle dans laquelle vous souhaitez ajouter cet élément, puis cliquer sur le bouton “Nouvel élément” (2). Si vous êtes sur l'édition d'un élément ou d'une page (3), vous obtiendrez un message d'erreur :

vous-ne-pouvez-pas-faire-cela-ici
“Vous ne pouvez pas créer cela ici!”

 

Une fois ce deuxième élément créé, nous allons en créer un troisième un peu plus compliqué. Imaginons que nous souhaitons connaître si la personne qui remplit le formulaire est un particulier, une entreprise, une association ou une autre forme de structure.
Pour cela, nous allons créer une liste déroulante avec ces trois possibilités parmi lesquelles l'utilisateur devrait faire un choix. Cliquez donc sur “Nouvel Elément” et pour le Type, choisissez “Sélection dans une liste”. Pour l'Etiquette entrez par exemple “Vous êtes :”, puis pour Liste, entrez :

0;Un particulier;value1
0;Une entreprise;value2
0;Une association;value3
0;Autre;value4

Je vous laisse finir de compléter la suite de l'élément, puis lorsque tout est bon, cliquez sur “Enregistrer les propriétés”.


 

Bien cette première section est terminée (pour notre exemple, bien sûr, vous pouvez ajouter d'autres éléments ou d'autres sections). Nous allons maintenant créer une deuxième section qui va nous servir à recueillir les différentes informations de l'utilisateur.
Nous allons créer ce “deuxième bloc” :

formulaire-bloc-2Formulaire bloc 2

 

Vous remarquez que ce bloc comprend 2 parties. Pour faire cela, nous allons créer une section, puis nous intégrerons deux sections à l'intérieur de la première.

Rendez-vous sur la Page 1 et cliquez sur “Nouvelle Section”, Choisissez le Type “Groupe de champs”, réglez Type d'écran sur “Éléments sur la même ligne” et donnez un Titre comme par exemple “Vous contacter”. Vous pouvez bien sûr entrer une description pour cette section. Une fois que tout est bon, cliquez sur “Enregistrer les propriétés”, puis sur “Nouvelle section”.
Réglez le Type de cette nouvelle section sur “Normal”, le Type d'écran sur “A la ligne après chaque élément”, donnez un titre, etc puis cliquez sur “Enregistrer les propriétés”.
Ici, vous pouvez créer plusieurs éléments comme par exemple adresse, code postal, ville, etc. Vous pouvez paramétrer ces éléments afin qu'ils soient obligatoires ou non. Tous ces éléments sont normalement de type “Champ de texte” et vous pouvez les régler comme obligatoires en utilisant le scénario “FF::ff_valuenotempty”.

NOTE : N'oubliez pas de cliquer sur “Enregistrer et Fermer” après avoir paramétré chaque élément, mais également sur le bouton “Sauver” afin de régulièrement enregistrer le formulaire dans son intégralité.

L'arborescence de vos éléments doit, à ce stade, ressembler à cela :

arborescence BreezingFormsArborescence 1

Nous allons enfin créer la dernière section. Pour cela, rendez-vous sur la section “Vous contacter” et cliquez sur “Nouvelle Section”. Réglez le Type sur “Normal” et le Type d'écran sur “A la ligne après chaque élément”. Donnez un nom puis cliquez sur “Enregistrer les propriétés”.
Dans cette section, créez ensuite plusieurs champs comme par exemple Email, Téléphone, Fax, Pseudo Skype, etc. Tous ces éléments utilisent normalement le Type “Champ de texte”

NOTE : Il est important de régler les éléments comme Email sur Obligatoire. Si votre interlocuteur oublie de rentrer son Email, vous ne pourrez pas le re-contacter...
Le scénario à utiliser pour vous assurer que l'utilisateur entre un Email valide est “FF::ff_validemail“.

NOTE : Pour indiquer à vos utilisateurs la raison pour laquelle vous leur demandez telle ou telle information, pensez à utiliser les fonctionnalités Conseil et Valeur. La fonctionnalité Conseil affichera une infobulle à coté du champ, alors que la fonctionnalité Valeur affichera le texte saisi à l'intérieur du champ. 

NOTE : Si vous souhaitez ne pas afficher le Titre d'une section, vous n'êtes pas obligé de le rentrer, pensez cependant à entrer un nom de section (sans espaces et caractères spéciaux) sensé afin de vous y retrouver.

 

Pour terminer, nous allons créer un dernier bloc dans lequel votre utilisateur pourra poster le contenu de sa question ou de sa demande :

formulaire-bloc-3

Formulaire bloc 3

 

Pour cela, créez un nouvelle section (dans Page 1), donnez lui le Type “Groupe de champ” et donnez-lui un titre (par exemple votre demande).
Ensuite, créez un nouvel élément (dans la section “Votre demande”), donnez-lui le Type “Zone de texte”, donnez-lui un nom, vous pouvez lui donner une largeur et une hauteur, et vous pouvez choisir de le rendre obligatoire (en utilisant le scénario “FF::ff_valuenotempty”), ce qui est conseillé afin de ne pas recevoir de formulaire vide.
Une fois cela terminé, nous allons ajouter un dernier élément afin de voir un Type d'élément supplémentaire.
Nous allons créer un groupe de boutons dits “Radio” sur lequel l'utilisateur devra choisir une, et une seule, proposition. Pour l'exemple, nous allons demander à notre utilisateur s'il souhaite être contacté par Email, ou par Téléphone.
Pour cela, créez un nouvel élément et choisissez le Type “Groupe de bouton Radio”. Donnez une étiquette à cet élément (par exemple “Vous souhaitez être contacté par :”), puis pour le paramètre “Groupe” entrez ce code :

1;Email;1
0;Téléphone;2

Une fois que tout est bon, cliquez sur “Enregistrer les propriétés”.
Afin que vous ne soyez pas inondé de spam, nous allons ajouter un Captcha à ce formulaire. Un captcha est un code de vérification que vos utilisateurs devront entrer afin de prouver qu'ils ne sont pas des robots.
Créez donc un nouvel élément, et donnez-lui le Type Captcha. Donnez-lui une étiquette et éventuellement un conseil. Pas besoin de régler la fonctionnalité Obligatoire pour cet élément, il l'est par défaut.

Voilà ! Notre formulaire est donc terminé et fonctionnel. Vous pouvez sans problème le publier sur le site via un élément de menu ou un module, mais il est préférable d'y ajouter 2 choses :

 

Présentation et description de BreezingForms

Simon Grange

 Avant de nous lancer dans la création du formulaire à proprement dite, je souhaite vous donner quelques explications.

 

BreezingForms fonctionne de la manière suivante :

Pour commencer, vous devez créer une ou plusieurs pages (cette extension vous permet donc de créer des formulaires sur plusieurs pages), ensuite, vous devez créer des sections (dans chacune de vos pages), et enfin des éléments (dans vos sections), qui seront par exemple les champs “Nom”, “Prénom” ou encore “Numéro de téléphone”.

Si vous n'avez besoin que d'un formulaire simple, aucun problème, vous pouvez tout à fait créer une seule page, qui ne contiendra qu'une seule catégorie, qui contiendra vos éléments.

Conseil : Ne créez des formulaires “Complexes” que si vous en avez un réel besoin, évitez les éléments inutils, qui seront certainement très jolis, mais qui ne serviront qu'à faire perdre du temps aux personnes qui souhaitent vous contacter.
Plus vos formulaires seront simples, et plus vos utilisateurs prendront le temps de les remplir. Ne leur faites donc pas perdre de temps, et allez directement à l'essentiel.

 

Pour créer votre formulaire, rendez vous dans Composants → BreezingForms → Formulaires puis cliquez sur l'icône Quickmode, vous arrivez sur cette page :

Edition d'un formulaire Breezingforms

Edition de formulaire avec BreezingForms

 

1 – Nouvelle page : vous permet d'ajouter une nouvelle page à votre formulaire. Vous ne pouvez ajouter des pages qu'à la racine de votre formulaire. Vous ne pouvez donc pas ajouter de page dans une autre page, ou encore dans une section.
2 – Nouvelle section : vous permet d'ajouter des sections à votre formulaire. Vous pouvez ajouter des sections aux pages de vos formulaires ou aux autres sections (ce qui vous permet donc d'avoir des sous-sections).
3 – Nouvel élément : vous permet d'ajouter des éléments à votre formulaire. Vous ne pouvez ajouter des éléments qu'aux sections de votre formulaire.
4 – L’arborescence de votre formulaire : c'est ici que vous retrouverez vos pages, sections et éléments (ici cette arborescence ne comporte que le formulaire).
5 – Propriétés : les propriétés de l'élément (Formulaire, Page, Section ou Elément) que vous êtes en train d'éditer. C'est ici donc que vous modifierez/paramétrerez vos différents éléments.
6 – Avancée : des propriétés avancées.
7 – Les propriétés de vos éléments.
8 – Enregistrer les propriétés : IMPORTANT à chaque fois que vous modifiez les propriétés d'un élément, vous devez cliquer sur ce bouton. Sinon, les modifications seront perdues.
9 – Sauver : enregistre et sauve le formulaire.

Note : Vous devez donc cliquer sur le bouton “Enregistrer les propriétés” à chaque fois que vous modifiez un élément (Formulaire, Page, Section, Elément), et cliquer sur le bouton “Sauver” pour sauver le formulaire dans son intégralité.

 

Différents types d'éléments :

BreezingForms vous propose différents types d'éléments qui vont vous permettre de construire vos formulaires :

  • Champ de texte : Un champ simple, sur une ligne, vous permettant de demander une donnée comme par exemple nom, prénom ou numéro de téléphone.
  • Zone de texte : Une zone plus importante, où vous allez demander à votre utilisateur d'entrer un texte pour par exemple expliquer un problème, décrire sa demande ou encore ajouter des informations complémentaires.
  • Groupe de bouton radio : vous permet de faire une propostion (ou de poser une question) à laquelle votre utilisateur pourra donner une (et une seule) réponse, par exemple : 
    • Genre :
      • Mademoiselle
      • Madame
      • Monsieur
  • Groupe de cases à cocher : vous permet de faire une propostion (ou de poser une question) à laquelle votre utilisateur pourra donner une ou plusieurs réponses, par exemple :
    • Vous souhaitez être contacté par :
      • Téléphone
      • Email
      • Courrier
  • Case à cocher : vous permet de placer une case unique qui pourra faire une action si elle est cochée, par exemple : cochez cette case si vous souhaitez recevoir une copie de ce mail.
  • Sélection dans une liste : vous permet de faire une proposition (ou de poser une question) à laquelle votre utilisateur pourra donner une (et une seule) réponse, représentée par une liste déroulante, par exemple :
    • Genre :
      • Mademoiselle
      • Madame
      • Monsieur
  • Envoi de fichier : vous permet de proposer un champ à votre utilisateur afin qu'il puisse vous joindre un fichier au formulaire qu'il remplira.
  • Bouton Soumettre : vous permet de publier un bouton de soumission.
  • Caché.
  • Vue d'ensemble : vous permet de créer un résumé des données entrées par le visiteur.
  • Captcha : vous permet d'afficher un Captcha afin de ne pas recevoir de spam.
  • ReCaptcha : vous permet d'afficher le captcha proposé par les services Google : Recaptcha.
  • Calendrier : vous permet de proposer un calendrier à votre utilisateur. Idéal, par exemple, pour fixer un rendez-vous.
  • Bouton Paypal : vous permet d'afficher un bouton pour communiquer avec la passerelle de paiement Paypal. Il est par exemple possible de n'autoriser le téléchargemnt d'un fichier qu'après un règlement sur Paypal.
  • Bouton Directpayement : vous permet d'afficher un bouton pour communiquer avec la passerelle de paiement Directpayement.

 Si ces éléments vous paraissent encore un peu flous, ne vous inquiétez pas nous allons voir en détail la majorité d'entre eux dans les prochains chapitres.

 

 

Téléchargement et installation du composant BreezingForms

Simon Grange

 

Pour utiliser BreezingForms, nous allons devoir le télécharger sur le site de l'auteur, puis l'installer sur votre site web. Pour cela, vous n'aurez besoin que d'un navigateur web (avec une connexion à internet) et des identifiants Super Utilisateur de votre site Joomla!.

 

Télécharger BreezingForms


Pour télécharger BreezingForms, c'est très simple, rendez vous sur le site de Crosstec (l'auteur de l'extension BreezingForms) à cette adresse : http://crosstec.de/en/breezingforms-lite.html puis cliquez sur le bouton Download :

télécharger l'extension Breezingforms

 Site Crosstec : développeur de BreezingForms

 

Une fois le téléchargement terminé, vous obtenez un pack du type “breezingforms_lite_UNZIP_FIRST.zip”.

Décompressez ce pack. Dans l'archive décompressée, vous obtenez plusieurs sous dossiers.

Les dossiers qui nous intéressent pour l'instant sont :

  • com_breezingforms_lite_joomla3x.zip (le composant BreezingForms).
  • mod_breezingforms_joomla3x.zip (le module BreezingForms)
  • plg_breezingforms_joomla3x.zip (le plugin BreezingForms)

Note : Attention, le nom des dossiers peut être légèrement différent.

 

 

Installer BreezingForms


BreezingForms s'installe comme n'importe quelle extension Joomla!, pour cela, connectez-vous à l'administration de votre site puis rendez-vous dans Extensions → Gestion des extensions :

installer Breezingforms sur Joomla! Installation d'extensions via le Backend de Joomla!

 

1 – Cliquez sur le bouton “Choisir un fichier”.
Rendez vous dans le répertoire décompressé, choisissez l'archive “com_breezingforms_lite_joomla3x.zip” puis cliquez sur le bouton “Ouvrir”.
2 – Cliquez sur le bouton Envoyer & Installer.

Suivant votre hébergeur, cela peut prendre quelques instants. Si tout ce réroule correctement, vous obtenez un message de ce type :

Message de succès sous Joomla!Message de succès sous Joomla!

 

Le composant BreezingForms est désormais installé sur votre site Joomla!. Répétez cette opération avec les packs :

  • mod_breezingforms_joomla3x.zip (afin d'installer le module).
  • plg_breezingforms_joomla3x.zip (afin d'installer le plugin).

 

Parametrer BreezingForms


Une fois, ces trois installations terminées, rendez-vous dans le menu Composants, et comme vous le voyez, un nouvel élément de menu “breezingforms” à été ajouté. Cliquez donc sur ce nouvel élément de menu, la page suivante s'affiche :

Installation breezingforms étape 2Installation de BreezingForms – Etape 2

 

Cliquez sur le bouton “Continuer” (1), vous obtenez cette nouvelle page :

installation Breezingforms terminéeBreezingForms – Installation terminée

 

Cliquez de nouveau sur le bouton “Continuer” (1). L'installation est donc terminée, vous êtes redirigé vers la page de configuration. Ici, vous devez entrer une adresse E-mail par défaut dans le champ “Adresse e-mail de notification par Défaut” puis cliquez sur le bouton “Enregistrer”.
L'adresse mail que vous entrez ici est importante, c'est sur cette adresse que seront envoyé les enregistrements de formulaires pour les formulaires où vous n'aurez pas entré d'adresse Email. Pour être sûr de recevoir tous les enregistrements de formulaire vérifiez bien cette adresse Email. Vérifiez 2 fois.

BreezingForms est donc installé sur votre site, et paramétré, il ne reste plus qu'à créer votre formulaire.

 

Installation à partir du web


Depuis la version 3.2 de Joomla!, une nouvelle fonctionnalité est disponible pour installer les extensions :Installer à partir du web.

Pour installer breezingForms grâce à cette nouvelle fonctionnalité, c'est très simple, connectez-vous à l'administration de votre site, puis rendez-vous dans Extension → gestion des extensions. Vous arrivez sur la page suivante :

installer à partir du web avec Joomla!

Installation à partir du web

NOTE : Si vous n'avez pas encore activé cette fonctionnalité, vous pouvez suivre ce tutoriel pour le faire.

Entrez le nom BreezingForms dans le champ de recherche (1) puis cliquez sur le bouton rechercher (2). Vous obtenez la page suivante : 

BreezingForms sur le JED

Recherche pour BreezingForms

Cliquez sur BreezingForms (1), vous obtenez la page suivante :

Installer Breezingforms via Installation via le web

Installation du BreezingForms via la fonctionnalité Installation à partir du web

Cliquez sur le bouton Installer (1). Vous devrez confirmer l'installation. L'installation va donc s'exécuter en quelques instants. Une fois celle-ci terminée, vous devrez paramétrer BreezingForms comme expliqué ci-dessus. 

 

Sur ce site, nous utilisons des cookies.