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>