Lorsque l'on débute avec BreezingForms, ce que l'on recherchera à mettre en ligne en tout premier lieu est très certainement un formulaire de contact.
Niveau : Débutant
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 : ✅
La création de formulaire au sein de BreezingForms est assez facile et intuitive, il faudra juste un peu de lecture pour connaître toutes les fonctions primaires de création et de paramétrage de chacun des champs.
Pour ce tutoriel, nous n'irons qu'au plus simple, d'autres tutos, vous permettront de personnaliser votre formulaire, le compléter, le rendre plus dynamique, etc.
Création du formulaire.
Rendez-vous dans la gestion des formulaires de BreezingForms, cliquez le bouton "Nouveau" de la barre de menus afin de créer le formulaire.
Vous obtenez l'interface de création avec un formulaire nommé QuickFormxxxxxxxx où les x sont une série de chiffres.
Dans la partie droite, renseignez les informations comme ci-après :
- Titre / nom du formulaire = Contact / contact
- Description (facultatif) = Formulaire de contact
- Dernière page de remerciement = oui
- Mail de notification = oui
- Destinataire = Votre e-mail (peut renseigner diverses adresses, séparées par un point-virgule)
- Bouton soumettre = oui libellé "Envoyer"
- Inclure la pagination = Dépend de l'utilisation de plusieurs pages hormis page de remerciement.
- En cas de pages simple ou multiples, utilisez ou non la pagination et nommez les libellés de pages précédentes / suivantes en français.
- Inclure le bouton annuler oui ou non selon votre besoin
- Libellé du bouton annuler = Réinitialiser
- Enregistrez les propriétés + Sauver (Voir le résultat)
Dans tout formulaire BF les éléments ne peuvent être que dans une page ou une section, cette section elle-même dans une section (elle devient alors sous-section) ou une page.
Lorsque vous tentez de créer une section ou élément là où BF ne l'accepte pas, un message d'erreur apparaît et vous le signale. Voir l'alerte.
Créer deux pages en cliquant sur le bouton idoine, une pour le formulaire lui-même et une pour le remerciement. Pour créer un élément, il faut toujours préalablement sélectionner son élément parent.
Les pages peuvent recevoir du texte formaté.
Sélectionnez votre première page dans le menu de gauche et assurez-vous que l'onglet propriété soit sélectionné dans la partie droite (l'onglet avancé ne proposant pas d'options).
Cliquez le lien "Modifier".
Dans le popup qui s'ouvre, insérez votre texte d'introduction au formulaire. Enregistrez via le bouton "Save" et lorsque la popup se ferme, n'oubliez pas de cliquer "Enregistrer les propriétés". Utilisez aussi le bouton "sauver" général pour sauvegarder régulièrement votre formulaire.
Sélectionnez la page 2, cliquez le bouton modifier comme précédemment et insérez votre texte de remerciement. Sauvegardez.
Ce formulaire étant un formulaire de contact simple, créons les éléments suivants (cliquez Element) :
Nom, e-mail, Sujet du message, ces champs sont de type "Champ de texte" à sélectionner dans la liste déroulante. Nommez et Étiquetez vos éléments dans la partie droite de chacun d'eux.
Habituez-vous à n'utiliser que des minuscules dans vos noms d'éléments ("nom"), une capitale servant de séparation de mots ("nomUtilisateur"), pas d'espace ni de caractères accentués ou spéciaux).
Cochez la case "Obligatoire", dans la zone "Validation personnalisée", cochez "Bibliothèque", saisissez un message d'erreur "Veuillez saisir votre nom" p.ex. et dans la liste scénario, sélectionnez, pour les champs "nom" et "sujet", "FF::ff_valuenotempty", cela vérifiera que le champ ne reste pas vide. Enregistrez chaque fois les propriétés pour sauvegarder toute modification.
Pour le champ "e-mail", nous choisirons "FF::ff_validemail" comme scénario, celui-ci vérifie que le contenu soit bien présent et sous la forme d'une adresse e-mail.
Resélectionnez la Page 1 et créez un nouvel élément de type "Zone de texte" étiquetez et nommez-le Message, rendez-le obligatoire et choisissez le scénario "FF::ff_valuenotempty" afin de contrôler qu'il contient du texte.
RAPPEL : Enregistrez vos éléments au fur et à mesure de leur création et sauvegardez régulièrement votre formulaire.
Vous pouvez cliquer sur le bouton "Prévisualiser" pour en avoir un aperçu. Il ne ressemble pas encore à grand-chose et il faudra lui attribuer un template et le mettre en forme.
Sélectionnez le formulaire à gauche et passez dans l'onglet "Avancé".
Comme moteur de thème, sur la version Lite, seule l'option BreezingForms est utilisable, cochez le bouton radio correspondant et choisissez un thème dans la liste déroulante.
Enregistrez les propriétés. Laissez actif le "rollover" si cela vous plait, saisissez une couleur de survol ou laissez celle par défaut #ffc, ou désactivez si vous n'aimez pas.
Enregistrez les propriétés.
À ce stade le formulaire est fonctionnel et vous pouvez, depuis la fenêtre de prévisualisation, remplir les champs et valider afin de le tester. Voir le formulaire simple.
Vous venez de créer votre formulaire de contact simple. Il faudra le protéger par l'option qui vous conviendra le mieux, Captcha, reCaptcha, HoneyPot, etc.
