Mettre mon Expertise Joomla et de ses extensions à la portée du plus en grand nombre, extensions courantes et certaines plus confidentielles mais néanmoins très intéressantes.
31 Mai 2012
Dans ce tutoriel, vous allez apprendre à créer une simple page de formulaire multi-utilisation QuickMode.
1 - Connectez-vous à votre site Joomla! Compte et aller à Composants> BreezingForms> Gérer les formulaires .
2 - Sur les formes Gérer l'écran, cliquez sur le bouton QuickMode .
L'espace de travail QuickMode est composé de deux zones:
Sur le côté gauche, vous pouvez ajouter de nouvelles pages, des sections et des éléments.
Sur le côté droit, vous avez accès à la forme de nombreux et propriétés de l'élément. 3 - auto QuickMode génère un titre et un nom pour la forme . Ces attributs peuvent être modifiés à tout moment dans les propriétés du formulaire. Dans cet exemple, le titre du formulaire est "Mon Form" et le nom du formulaire "myForm".
Important: Le nom du champ de formulaire fournit un moyen de référencer le formulaire dans un script et dans la communauté Joomla! composante. Il est recommandé d'éviter les caractères spéciaux, ainsi que des espaces vierges.
4.Création de la struture sous forme
4.1 - La structure de base d'une forme construite en QuickMode se compose de:
→ Page Sections → Éléments
Pages sont nécessaires afin de maintenir des sections et des éléments sous une forme et aussi faire la pagination possible.
Sections , tandis facultative, sont utilisés pour regrouper des éléments logiquement dans une forme. Les articles peuvent être affichées comme de champs avec des légendes ou des lisses (pas de légendes et des frontières).
Éléments de permettre à l'utilisateur de saisir des informations (comme les champs de texte, les champs textarea, des menus déroulants, des boutons radio, cases à cocher, etc) dans un formulaire. En outre, les éléments permettant une intégration particulière avec PayPal (bouton PayPal), Joomla! Calendrier, etc
4.2 - Créer une page en cliquant sur le bouton Nouvelle page situé dans le coin supérieur gauche de l'espace de travail QuickMode.
4.3 - Créer une section sur la page récemment ajouté en cliquant sur le bouton Nouvelle section .
Dans l'exemple, le type de l'article choisi est Fieldset , le type d'affichage Tous dans une rangée et pour le titre "Info général".
Cliquez sur le bouton Enregistrer les propriétés .
4.4 - Créer deux nouvelles sections à l'intérieur "Informations générales". Pour ce faire, sélectionnez "Informations générales" dans l'arborescence sur le côté gauche et cliquez sur le bouton Nouvelle section .
Pour les deux sections, choisissez Fieldset pour le type de section et Wrap après chaque élément pour le type d'affichage.
Les nouvelles sections ont reçu les titres "Infos personnelles" et "d 'affaires", respectivement.
Cliquez sur le bouton Enregistrer les propriétés .
4.5 - Créer un autre article, cette fois, à l'extérieur "Informations générales" en sélectionnant la page 1 et en cliquant sur le bouton Nouvelle section .Définissez les propriétés de la section d'Tapez Fieldset , Type d'écran Wrap après chaque élément et pour le titre entre les «intérêts», puis cliquez surEnregistrer les propriétés .
4.6 - Page 1 structure complète, nous allons maintenant ajouter une seconde page du formulaire. Sélectionnez "Mon formulaire" dans l'arborescence et cliquez sur le bouton Nouvelle page .
4.7 - Avec Page 2 sélectionné, ajouter une section intitulée «Commentaires», et choisissez Fieldset pour le type et Wrap après chaque élément pour le type d'affichage. Cliquez sur Propriétés Enregistrer .
Structure de remplir le formulaire, cliquez sur le bouton Enregistrer situé dans le coin supérieur droit.
Ajout d'éléments dans QuickMode est très facile. Pour ajouter un élément il suffit de sélectionner la page désirée ou de l'article et cliquez sur le bouton Nouvel élément .
Quand un élément est ajouté, il aura automatiquement une étiquette attachée à elle. L'attribut Name sera également attribué à la volée. Vous pouvez modifier les propriétés d'un élément en le sélectionnant et en vertu de Propriétés de l'élément apporter les changements nécessaires.
Le tableau ci-dessous montre une liste des éléments qui seront ajoutés à l'échantillon forme et leurs sections respectives et des pages:
Remplissez le formulaire la structure avec des éléments:
Pour définir les éléments de formulaire requis, il suffit de sélectionner l'élément désiré et sous validation , cochez l'option requise et dans la validation de type, choisissez Bibliothèque , sélectionnez le script de validation appropriée et entrez un message d'erreur .
Chaque script de validation a une description de sa fonction affichée ci-dessous le script de zone de sélection.
Des éléments de formulaire obligatoires sont indiqués par un astérisque rouge * dans le frontend.
Pour créer une page de remerciement, sélectionnez votre formulaire dans l'arborescence, cliquez sur le bouton Nouvelle page . Sélectionnez la page ajoutée dans l'arbre et sous Propriétés de la page , cliquez sur Modifier pour ajouter un message.
Exemple de message:
Merci de nous contacter. Nous reviendrons vers vous très vite.
Cliquez sur Enregistrer et Enregistrer les propriétés respectivement.
Message ajouté, allez à Propriétés du formulaire et cochez l'option Dernière page est la page de remerciement . Cliquez sur Enregistrer les propriétés , puis Enregistrer , pour enregistrer tous les changements.
La dernière étape est de rendre votre formulaire à la disposition des utilisateurs sur votre site web.
Dans Joomla!, Allez à Menu> (nom de votre menu) et cliquez sur le bouton Nouveau.
Dans Type de Sélectionnez Menu , choisissez BreezingForms et sous Paramètres (de base) , entrez le nom du formulaire dans Nom du formulaire .
Donnez un titre pour le nouvel élément de menu et cliquez sur Enregistrer .
L'apparence générale d'un formulaire peut être modifié avec des thèmes. QuickMode fournit un environnement propre, le thème personnalisable appelée "qmtheme" qui peut être trouvé sur l'onglet Avancé , sous Options > Thème .
Remarque: outre la caisse le tutoriel vidéo correspondant ici .
Beaucoup de gens aiment à afficher certains champs de formulaire sur demande seulement, par exemple pour afficher les champs d'adresses supplémentaires, des informations de contact et similaires.
Dans ce tutoriel, vous apprendrez comment ajouter des champs conditionnels et des sections à votre formulaire QuickMode. Notez que cette fonctionnalité est disponible pour le QuickMode seulement! Pour les autres modes, vous devrez programmer cette fonction que vous possédez.
Si vous ne savez pas comment commencer avec le QuickMode ou l'installation BreezingForms, alors s'il vous plaît lire les tutoriels de base ou de regarder les vidéos en premier.
Commençons simple et créer un formulaire QuickMode sous des formes gérer la section. Donner le nom de "conditions" et quelques titres.
Ajouter deux champs, un TextField avec le nom "myTextField" et un radiogroup avec le nom "switcher".
Ce que nous voulons faire maintenant est de se cacher "myTextField" lorsque le formulaire est chargé et ne montrant en place si l'utilisateur clique sur le bouton radio "Activer" - ou le cacher si vous cliquez sur "Désactiver".
Nous avons d'abord cocher l'option "Désactiver" dans les options avancées du myTextField et cliquez sur "options d'enregistrement":
Cela permettra de s'assurer, que «myTextField" ne sera pas visible lorsque le formulaire est chargé.
Maintenant, cliquez sur le "switcher" et dans ses options, vous trouverez le "Groupe" boîte avec des valeurs par défaut, remplacez ces valeurs par défaut avec ce et cliquez sur "enregistrer les propriétés":
0; Allumez; sur
1; Éteignez; hors
Maintenant, cliquez sur l'élément racine de votre arborescence formulaire à gauche, ce sont les paramètres du formulaire principal. Aller à son onglet Avancé et accédez à la "Visibilité règles" boîte. Ajouter dans la boîte, cliquez sur "Enregistrer les propriétés" et enfin enregistrez votre formulaire en haut à droite:
allumez myTextField élément si switcher est
Une telle qu'elle se présente comme suit:
Maintenant, cliquez sur "Aperçu" ou "la prévisualisation du site" en haut à droite et vérifier le formulaire. Si vous cliquez maintenant sur "Turn on" le champ de texte apparaît.
Félicitations! Vous venez de créer votre première condition pour mettre un champ sur une certaine action (en cliquant sur un champ radio avec la valeur "on").
Pour faire complet, nous voulons maintenant ajouter une autre règle pour pouvoir l'éteindre à nouveau (ne pas oublier de cliquer sur "propriétés Enregistrer"):
désactiver myTextField élément si switcher est éteint
Il devrait ressembler à ceci alors:
allumez myTextField élément si switcher est
désactiver myTextField élément si switcher est éteint
Si vous avez maintenant vérifier l'aperçu de nouveau, vous verrez que vous pouvez maintenant activer le "myTextField" sur et en dehors comme vous le souhaitez.
Les règles de visibilité pour le QuickMode sont utilisés dans un "Naturally Speaking» façon. La syntaxe est simple et aucun langage de programmation. L'ordre de vos règles n'a pas d'importance aussi bien.
La syntaxe pour chaque règle est la suivante:
transformer [ le | off ] [ élément | section ] * élément cible ou le nom de la section * si * Nom * élément source est la valeur * ou commande *
Les mots ne doivent pas être séparés en utilisant plus d'une vierge, donc ce ne serait pas valide:
désactiver la cible élément si la source est somevalue
Alors que ceci est valable
désactiver la cible élément si la source est somevalue
Si vous ne définissez pas une commande de source spécifique (plus d'informations ci-dessous), toute la partie après est sera traitée comme valeur et sera comparée à la valeur de l'élément sélectionné.
Astuce: Si une règle n'est pas appliquée, il sera probablement une erreur de syntaxe.
Vous pouvez utiliser ces éléments qui déclenchent les règles:
Groupe Radio -:
Exemple: tour sur mytext élément si myradiogroup est
Une fois un ou plusieurs règles sont définies impliquant votre radiogroup, chaque clic sur un bouton radio va déclencher vos règles. Si les règles sont plus un ou correspondant aux valeurs définies dans la définition de votre groupe, la règle sera appliquée.
- Case à cocher
Exemples:
allumez mytext élément si myCheckBox est! vérifié
désactiver mytext élément si myCheckBox est! décochée
La case à cocher unique est spécial et ne connaît que les commandes d'état qui sont indiquées à l'aide un chef de file ! . Donc, si la case à cocher est "! Coché« la règle sera appliquée à "mytext". Idem pour "! Unchecked"
Groupe de case à cocher -
Exemples:
allumez mytext élément si myCheckBox est! vérifié
allumez mytext élément si mycheckboxgroup est somevalue
désactiver mytext élément si mycheckboxgroup est! décochée
Le groupe case travaille essentiellement le même que le groupe de radio ou, pour être plus précis, est un mélange entre RadioGroups et cases à cocher unique (y compris une plus petite). S'il vous plaît noter, cependant, que le »et« et »ou« fonctionnalités ne pas s'appliquent actuellement à la case du groupe. Si vous souhaitez autoriser plusieurs boites pour être cochée ou décochée, mais pour effacer seulement quand il n'y a pas de cases cochées, puis vos règles devraient être définies comme suit:
allumez mytext élément si mycheckboxgroup est somevalue
allumez mytext élément si mycheckboxgroup est someothervalue
allumez mytext élément si mycheckboxgroup est uneautrevaleur
désactiver mytext élément si mycheckboxgroup est! décochée
- Sélectionnez (simple et multiple)
Exemples:
allumez mytext élément si mycheckboxgroup est somevalue
allumez mytext élément si mycheckboxgroup est # somevalue | someothervalue
allumez mytext élément si mycheckboxgroup est # somevalue; someothervalue
L'élément de sélection connaît des essais fondés sur une valeur unique ou la commande tout ( # somevalue | someothervalue , voir le groupe case à cocher). Il prévoit en outre la commande et-( # somevalue; someothervalue ): Toutes ces valeurs doivent être choisis avant que les feux de la règle.
- Champ de texte / Textarea
Exemples:
allumez mytext élément si mycheckboxgroup est somevalue
allumez mytext élément si mycheckboxgroup est! [0-9] $
Le texte peut être déclenchée par la recherche d'une certaine valeur ou par une expression régulière donnée par le marqueur de commande ( ! ). Les règles seront appliquées sur le flou, cela signifie que vous n'obtiendrez pas un résultat avant que l'utilisateur quitte le champ de texte ou textarea.
NOTE: Depuis la version 1.7.2 construire 737 il est également possible de donner des éléments d'une valeur, en fonction de la marche / arrêt état d'une section / élément.
La syntaxe est la suivante:
si ElementName élément est off set VALEUR targetElement
si SECTIONAME section est sur la valeur targetElement ensemble
Alors que la règle spéciale si ElementName élément est off set targetElement! vide
videra le targetElement.
Les règles devraient venir après les règles de visibilité réguliers.
Ces règles sont du type d'élément sécuritaire. Moyens, que cela fonctionne aussi pour sélectionner les listes, case à cocher et de radio-groupes.
Donc, pour ces types d'éléments que vous ne serait tout simplement entrer la valeur souhaitée pour vérifier la / sélectionner l'élément.
BreezingForms 1.6.5 introduit la possibilité de sélectionner et de personnaliser des thèmes pour les formulaires. Cette fonctionnalité est uniquement disponible en QuickMode.
Actuellement, QuickMode fournit divers thèmes intégrés et beaucoup de d'autres qui ont besoin d'être installé séparement. Les 2 thèmes les plus fondamentaux sont les suivants: qmtheme, un endroit propre, bleu clair thème, et par défaut, qui n'a pas de schéma de couleurs. Ces deux thèmes peuvent être facilement personnalisés via CSS.
Les thèmes peuvent être trouvés sur l'onglet Avancé , sous Options> Thème .
Image montrant le sélecteur de thème dans QuickMode
Les thèmes sont placés dans les médias ou breezingforms ou thèmes (dans les versions avant 754: composants ou com_breezingforms / themes / QuickMode) de votre installation BreezingForms. Pour créer un nouveau thème, il suffit de copier le dossier "par défaut" thème et de le coller dans les mêmesthèmes / (dans les versions avant 754: thèmes / QuickMode) annuaire.
Dans l'exemple ci-dessous, le dossier nouveau thème a été renommé en "newtheme".
Important: Sauvegardez vos thèmes en mettant à jour ou de réinstaller BreezingForms.
Une connaissance de base des CSS en recommandé afin de suivre cette étape. Si vous n'êtes pas familier avec CSS, prenez le temps d'apprendre à ce sujet ici .
Chaque thème QuickMode a une feuille de style externe appelée theme.css situés dans les médias ou breezingforms / themes / theme_name / theme.css (dans les versions avant 754: composants ou com_breezingforms / themes / QuickMode / theme_name / theme.css) . Avec ce fichier, vous pouvez contrôler plusieurs aspects d'une conception de formulaire.
Dans cet exemple, un jeu de couleurs différent sera utilisé pour "newtheme". Les sélecteurs CSS des éléments de formulaire principaux et de leurs propriétés respectives sont représentées ci-dessous:
La boîte autour des éléments de formulaire liées.
. BfQuickMode fieldset { padding: 0px 10px 10px 10px; border: 1px solid # dfe5c1; margin: 0px 0px 10px 0px; width: auto; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } La légende de l'élément fieldset.
. BfQuickMode la légende { padding: 5px; background: # bbdd98; color: # fff; font-size: 120%; border-radius: 5px; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } Pour légendes de champs à l'intérieur de champs de d'autres.
. BfQuickMode fieldset fieldset {légende background: # fff; color: # bbdd98; font-size: 110%; } Types d'entrées / éléments affectés: texte, mot de passe, sélectionnez et textarea.
. Entrée bfQuickMode [type = text], bfQuickMode input [type = mot de passe], bfQuickMode textarea, select bfQuickMode...
{border: 1px solid # dfe5c1; padding: 2px; line-height: normal;}
. bfQuickMode textarea: hover, . entrée bfQuickMode [type = text]: hover, bfQuickMode input [type = mot de passe]: hover, bfQuickMode sélectionnez: hover..
{border-color: # ace372;}
bfQuickMode textarea:.. mise au point, bfQuickMode input [type = text] : mise au point, bfQuickMode input [type = password]: mise au point, bfQuickMode sélectionnez: mise au point..
{border-color: # 759f48; contour: 2px solid # ace372;}
<p> et <span> sont utilisées pour envelopper des groupes de légende et d'entrée.
. BfQuickMode p.bfElemWrap { padding: 5px; margin: 0px 0px 10px 0px; background: # f1fed6; border-radius: 5px; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } . BfQuickMode span.bfElemWrap { padding: 5px; background: # f1fed6; margin: 0px 0px 10px 10px; border-radius: 5px; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } Cela va changer l'apparence de n'importe quel bouton régulière dans un formulaire.
. Entrée bfQuickMode [type = submit],. BfQuickMode input [type = reset] { padding: 2px 2px 5px 5px; margin: 0px; les grandes lignes: none; color: # fff; font-weight: bold; font-size: 100%; background: # 6c8b2e; text-shadow: 0px 0px # 000 2px; border: 1px solid # 394918; border-radius: 5px; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } . BfQuickMode. BfErrorMessage { background: # ffeded; font-weight: bold; float: none; display: block; color: red; border-radius: 5px; -Moz-border-radius: 5px; -Webkit-border-radius: 5px; } Le thème QuickMode nouvelle mesure.
QuickMode permet la personnalisation des éléments de formulaire directement certains dans le backend. Pour personnaliser un élément, il suffit de sélectionner dans l'arbre et dans les propriétés d'éléments apporter les changements nécessaires.
Le tableau ci-dessous montre les types d'éléments et leurs attributs personnalisables:
Exemple de l'élément personnalisé. Notez que le Fax Téléphone d'entrée / a les attributs de valeur , Taille et Max. la longueur modifiée.
Note: L'espacement et les frontières peuvent influer sur les calculs de largeur.
Dans qmtheme, les éléments de formulaire tels que des champs de texte et zones de texte ont un rembourrage 2px et la bordure 1px par défaut.Dans l'image ci-dessus, la largeur de Téléphone / Fax a été fixé à 110px. Par conséquent, la largeur réelle de Téléphone / Fax est 116px.
| Page | Section | Type d'élément | Étiquette | Nom |
| Page 1 | Infos personnelles | Champ de texte | Nom: | nom |
| Champ de texte | Nom de famille: | last_name | ||
| Radio Group | Sexe: | sexe | ||
| Calendrier | Date de naissance: | Cré_Date | ||
| Champ de texte | Adresse: | personal_address | ||
| Champ de texte | E-mail: | personal_email | ||
| Informations sur le commerce | Champ de texte | Nom de l'entreprise: | company_name | |
| Champ de texte | Adresse: | company_address | ||
| Champ de texte | Téléphone / Fax: | company_phone | ||
| Champ de texte | Nom du contact: | contact_name | ||
| Champ de texte | De contact e-mail: | contact_email | ||
| Champ de texte | Site Web: | site Web | ||
| Intérêts | Groupe de case à cocher | S'il vous plaît choisir les sujets qui vous intéressent: | intérêts | |
| Page 2 | Réaction | Textarea | Dites-nous ce que vous pensez de nos produits: | réaction |
| Type d'élément | Attributs personnalisables | |||
| Champ de texte | Valeur Taille (Largeur) Max. longueur | |||
| Textarea | Valeur Largeur Hauteur max. longueur | |||
| Sélectionnez-la liste | Largeur Hauteur | |||
| Bouton Soumettre | Valeur | |||
| Calendrier | Valeur Taille (Largeur) |
/image%2F1611695%2F20151214%2Fob_56c360_colissimo.jpg)
/https%3A%2F%2Fassets.over-blog.com%2Ft%2Fcedistic%2Fcamera.png)
/http%3A%2F%2Ffile%3A%2F%2FC%3A%2FUsers%2FARCWEB~1%2FAppData%2FLocal%2FTemp%2Fmsohtmlclip1%2F01%2Fclip_image002.gif)
/idata%2F6091249%2Fjgroup_form.png)