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 :

 

Sur ce site, nous utilisons des cookies.