Mise en page de formulaire

L'un des aspects les plus importants, mais négligés de la conception web est la création de formulaires. Une conception de formulaire efficace est essentielle à votre entreprise pour des raisons stratégiques et transactionnelles. La qualité de la collecte de l’information dépend de la qualité de la question que vous posez.

Cet article vous renseignera sur les Legacy Layouts, Responsive Layouts avec des explications au sujet de leur structure et les caractéristiques de code HTML. Dans la deuxième partie de l'article, vous pouvez trouver des informations concernant les styles des formulaires de sorte que vous aurez les connaissances de base pour commencer la personnalisation de votre forme pour correspondre au design de votre site.

En général, les mises en page sont simplement du code HTML, décoré avec des images et des déclarations CSS. Actuellement, RSForm ! Pro prend en charge 7 mises en page prédéfinies.

Le code HTML (Propriétés du formulaire > Mise en page formulaire) d’un champ est généré à l’aide de 4 espaces réservés:

• {nom_du_champ:caption} le contrôle de la légende ou l'étiquette (texte ou HTML qui est affiché dans le formulaire)

• {nom_du_champ:body} qui contrôle le corps du champ

• {nom_du_champ:validation} en charge de l’affichage du message d’erreur lorsque le champ n’est pas valide

• {nom_du_champ:description} contrôle de la description du champ.

Nous vous recommandons fortement de modifier la mise en forme et le Style après que vous ayez terminé d’ajouter les champs du formulaire.

 

Mises en page Responsive

Les Layouts Responsive seront automatiquement modifiés pour adapter les écrans de tous les types de résolutions, allant des moniteurs d'ordinateur de bureau aux affichages smartphone et tablette. Vous pouvez choisir parmi l'une des 4 configurations prédéfinies.

 

Le code HTML Layout Responsive pour cette mise en page n'a pas de structure en liste ou en table, mais ses classes sont basées sur le Framework Bootstrap,

 
    <fieldsetclass="formHorizontal formContainer"id="rsform_1_page_0">
      <divclass="rsform-block rsform-block-fullname">
        <divclass="formControlLabel">{FullName:caption}<strongclass="formRequired">(*)</strong></div>
        <divclass="formControls">
          <divclass="formBody">{FullName:body}<spanclass="formValidation">{FullName:validation}</span>
          </div>
          <pclass="formDescription">{FullName:description}</p>
        </div>
      </div>
    </fieldset>
 

Cette disposition peut être davantage personnalisée selon vos besoins. RSJoomla ! fourni un guide comment créer un formulaire en deux colonnes responsive.

Les layouts Bootstrap 2 / Bootstrap 3 / UIKit partagent la même structure HTML, mais les classes qui sont appliquées sur les éléments HTML changent selon le framework que vous souhaitez utiliser. par exemple : Exemple Bootstrap 3.x:

 
    <fieldsetclass="form-horizontal formContainer"id="rsform_{global:formid}_page_0">
      <divclass="form-group rsform-block rsform-block-fullname{FullName:errorClass}">
        <labelclass="col-sm-3 control-label formControlLabel" data-toggle="tooltip"title="{FullName:description}"for="FullName">{FullName:caption}<strongclass="formRequired">(*)</strong></label>
        <divclass="col-sm-6 formControls">
          {FullName:body}
        </div>
        <divclass="col-sm-3"><spanclass="formValidation">{FullName:validation}</span>
        </div>
      </div>
    </fieldset>
 

Layouts Legacy

Les dispositions Legacy, héritées d'anciennes versions sont de conception simple, et ne proposent pas de fonctions responsives. Ci-dessous vous trouverez des exemples de la façon dont le formulaire de contact est affiché lors de l'utilisation de ces layouts.

 

Layouts En ligne et 2 colonnes inline

Le layout Inline est une mise en page très simple et basique, code HTML structuré sur une table. La mise en page étant défini par les champs Caption et Body sur la même ligne.

Voici un exemple du code HTML généré pour un champ

 
      <tableclass="formTableLayout"border="0">
        <trclass="rsform-block rsform-block-fullname">
          <td>{FullName:caption} (*)</td>
          <td>{FullName:body}
            <divclass="formClr"></div>
            {FullName:validation}
          </td>
          <td>{FullName:description}</td>
        </tr>
      </table>
 

Le Layout 2 Colonnes Inline, génère 3 tables, les champs de formulaire étant divisés 1 par 1 de gauche à droite.Le premier champ est généré sur la gauche et le second à droite de la table, ce modèle est appliqué jusqu'à ce que le dernier d'entre eux. Le Code HTML pour ce layou peut être vu ci-dessous:

 
      <tableclass="formTableLayout"border="0"id="rsform_1_page_0">
        <tr>
          <tdclass="formTableLeft"valign="top">
            <tableclass="formTableLayout"border="0">
              <trclass="rsform-block rsform-block-fullname">
                <td>{FullName:caption} (*)</td>
                <td>{FullName:body}
 
                  {FullName:validation}
                </td>
                <td>{FullName:description}</td>
              </tr>
            </table>
          </td>
          <tdclass="formTableRight"valign="top">
            <tableclass="formTableLayout"border="0">
              <trclass="rsform-block rsform-block-email">
                <td>{Email:caption} (*)</td>
                <td>{Email:body}
 
                  {Email:validation}
                </td>
                <td>{Email:description}</td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
 

Layout 2 lignes et Layout 2 colonnes 2 lignes

Ces mises en page sont structurées en divisions, chacune d'entre elles contenant des lignes différentes pour les espaces réservés, adaptant ce layout aux pages web avec une largeur limitée pour le formulaire.

Le code HTML généré est plus simple que la disposition Inline, voir l'exemple ci dessous

 
      <divclass="form2LinesLayout">
        <divclass="formField rsform-block rsform-block-fullname">
          {FullName:caption} (*)
 
          {FullName:body}
 
          {FullName:validation}
          {FullName:description}
 
        </div>
      </div>
 

Le Layout 2 colonnes 2 lignes, structuré sur une table,est similaire à la mise en page 2 Colonnes Inline en termes de gabarit de placement de champ.

 
      <tableclass="formTableLayout"border="0"id="rsform_1_page_0">
        <tr>
          <tdclass="formTableLeft"valign="top">
            <div>
              <divclass="formField rsform-block rsform-block-fullname">
                {FullName:caption} (*)
 
                {FullName:body}
 
                {FullName:validation}
                {FullName:description}
 
              </div>
            </div>
          </td>
          <tdclass="formTableRight"valign="top">
            <div>
              <divclass="formField rsform-block rsform-block-email">
                {Email:caption} (*)
 
                {Email:body}
 
                {Email:validation}
                {Email:description}
 
              </div>
            </div>
          </td>
        </tr>
      </table>
 

Layouts Inline et 2 lignes XHTML

Le développement de navigateur compatible CSS à permis à RSForm! Pro de faire la transition vers une nouvelle approche de sa présentation des formulaires. Contrairement à la structure de mise en page classique, elles sont basées sur les listes, les espaces réservés étant définies dans les classes, comblant le fossé entre design et facilité d’utilisation.

 
      <olclass="formContainer"id="rsform_1_page_0">
        <liclass="rsform-block rsform-block-fullname">
          <divclass="formCaption">{FullName:caption}<strongclass="formRequired">(*)</strong></div>
          <divclass="formBody">{FullName:body}<spanclass="formClr">{FullName:validation}</span></div>
          <divclass="formDescription">{FullName:description}</div>
        </li>
      </ol>
 

Comme vous pouvez le voir dans cet exemple, le Code HTML généré est plus facile à utiliser, la mise en page est contrôlée par des classes plutôt que des structures de table

Styles des formulaires

RSForm! Pro propose trois thèmes par défaut (White and Clean, Green et Red), mais ceux-ci ne sont disponibles que pour les mises en page non-responsives ( un Layout Responsive utilise les classes bootstrap). Vous pouvez y accéder par Propriétés > Thème du Formulaire

Les CSS définissent l’apparence des éléments HTML. Ajouter manuellement des déclarations CSS dans le HTML Layout est une des premières méthodes à utiliser (voir exemple ci dessous).

 
    <fieldsetclass="formHorizontal formContainer"id="rsform_1_page_0">
      <divclass="rsform-block rsform-block-FieldName"style="border:1px dashed;">
        <divclass="formControlLabel"style="font-weight:bold;">{FieldName:caption}</div>
        <divclass="formControls">
          <divclass="formBody">{FieldName:body}<spanclass="formValidation"style="color:red">{FieldName:validation}</span>
          </div>
          <pclass="formDescription">{FieldName:description}</p>
        </div>
      </div>
    </fieldset>
 

Bien qu’elle soit facile à mettre en œuvre, cette méthode de style inline nécessite que l'option Auto Generate Layout soit désactivée, empêchant ainsi les espaces réservés de champ soient automatiquement ajoutés.

Une solution simple de style inline pour cibler un champ spécifique, est l’utilisation du champ des attributs supplémentaires pour ajouter des classes (par exemple class="custom_class") ou insérer les déclarations css (par exemple style="color:red").

En outre les styles peuvent être faits en accédant à Formulaire > Propriétés > CSS et Javascript (La zone de CSS a besoin de ses balises de style spécifiques: <style type="text/css"> </style>). Les classes peuvent être trouvées dans la section Mise en page formulaire -> mise en page HTML (Voir exemple ci-dessous).

Exemples de classes générées par une mise ne page responsive RSForm! Pro

rsform-block-field_name - Définit le conteneur qui est divisé en 2 parties distinctes, les deux ayant des sous-classes supplémentaires

1. .formControlLabel - définit la légende de champs et des éléments requis

2. .formControls -et les Ids et les sous-classes suivantes :

   • #field_name - stylant le corps même du champ

   • .formResponsive .formError - contrôle de l’erreur non valide

   • .formDescription - définit le style de la zone de description

 
    <styletype="text/css">
      .formRed {
        text-decoration : underline;
      }
 
      .rsform-block-field_name {
        background-color : #f8faf0;
        border           : 1px dashed;
      }
 
      .formRequired {
        color : #b94a48;
      }
 
      .formControlLabel {
        font-weight : bold;
      }
 
      #field_name {
        width        : 80px;
        height       : 80px;
        border-color : #86a2c5;
      }
    </style>
 

Les déclarations CSS peuvent être remplacées plus tard par d’autres déclarations (des styles inline, templates CSS, etc.).

Pour un contrôle complet du style du formulaire, vous pouvez effectuer une substitution de CSS dans le template(On trouvera des détails sur l’exécution d'override de CSS de template via la documentation officielle Joomla !) sur le fichier front.css (\media\com_rsform\css\front.css). Ce faisant, le style s’appliquera pour tous les formulaires sur votre site Internet.