Unfortunately, the username and password you have entered do not match!

Registration

Unfortunately, this username is already taken!

Unfortunately, this e-mail address is already used!

Please retype the verification code.

All fields are required

How to perform layout and style adjustments

How to perform layout and style adjustments

Form Layout

One of the most important but overlooked aspects of web design is the creation of forms. Effective form design is essential to your company for transactional and strategic reasons. The quality of the information collect depends on the quality of the question you ask.

This article will provide information about Classic Layouts, XHTML Layouts with explanation about their HTML code structure and features. In the second part of the article you can find information regarding Form Style so you have the basic knowledge to start customizing your form to match the design of your website.

Generally, layouts are just HTML code, styled with CSS declarations and images. Currently, RSForm!Pro supports 7 predefined layouts.

The HTML code (Form properties > Form layout) of a field is generated using 4 placeholders:

  • {field_name:caption} controlling the caption or label (text or HTML that is displayed in the form)
  • {field_name:body} which controls the field's body
  • {field_name:validation} in charge of displaying the error message when the field is invalid
  • {field_name:description} controlling the description of the field.

We strongly recommend to change the Form Layout and Style after you finished adding the form fields.


Classic Layouts

  • Inline
  • 2 Lines
  • 2 Columns Inline
  • 2 Columns 2 Lines


The classic layouts are simple by design, they do not offer any responsive features. Below you will find examples of how the Example Contact Form is displayed when using these layouts.


Inline and 2 Columns Inline Layouts

The Inline layout is a very simple and basic layout, HTML code structured on a table. The layout being defined by the Field Caption and Body on the same line.

Here is an example of HTML code generated for a single field

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

The 2 Columns Inline layout, generates 3 tables, the form fields being split 1 by 1 from left to right. The first field is generated on the left and the second to the right table, this pattern is applied untill the last one. HTML Code for this layout can be seen below:

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

2 Lines Layout and 2 Columns 2 Lines Layout

These layouts are structured in divisions, each of them containing different lines for the placeholders, making this layout suit webpages with a limited width for the form.

The generated HTML code is more simple than the Inline Layout, an example can be seen here

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

The 2 Columns 2 Lines layout,structured on a table, is similar to the 2 Columns Inline Layout in terms of field placing pattern.

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

XHTML Layouts

  • Inline (XHTML)
  • 2 Lines (XHTML)
  • Responsive (CSS3)

XHTML was developed to make HTML more extensible and increase interoperability with other data formats. The XML-base allows forms to be displayed appropriately for different rendering devices. Below you will find examples for the Inline (XHTML) and 2 Lines (XHTML)


Inline and 2 Lines XHTML Layouts

The development of CSS-capable browser allowed RSForm! Pro to make the transition to a newer approach on form layouts. Unlike the structure from the Classic layouts, these are based on lists, the placeholders being defined in classes, bridging the gap between usability and design.

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

As you can see in this example, the HTML Code generated is more user friendly, the layout is controlled by classes rather than table structures


The Responsive (CSS3) layout`s use of the Bootstrap Framework (a grid-based system) offers responsive capabilities - the layout will be automatically modified to fit screens of all types of resolutions, ranging from desktop monitors to smartphone and tablet displays.


The HTML code for this layout doesn't have list or table structure,but is based on bootstrap classes,

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

This layout can be further customized to suit your needs. RSJoomla! provided a how to Create a responsive, two columns inline form guide.


Form Styling

RSForm! Pro offers three themes by default(White and Clean, Green and Red), but these are available only for non-responsive layouts (Responsive Layout uses bootstrap classes). You can access them by Form Properties > Form Theme

CSS defines the look and feel of HTML elements. Manually adding CSS declarations in the HTML Layout is one of the first go to methods(e.g. below).

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

Despite being easy to implement, this method of inline styling requires the Auto Generate Layout option to be disabled, thus preventing field placeholders being automatically added.


An inline styling simple solution to target a specific field, is the usage of the Additional Attributes field to add classes (e.g. class="custom_class") or even insert css declarations(e.g. style="color:red").

Further styling can be done by accessing the Form Properties > CSS and Javascript section (The CSS area needs its specific style tags: <style type="text/css"> </style>). Classes can be found in the Form Layout -> HTML Layout section(e.g. below).


Examples of classes generated by RSForm! Pro responsive layout


rsform-block-field_name - defines the container which is divided in 2 separate parts, both of them having additional subclasses

  1. .formControlLabel - defining the field caption and required elements
  2. .formControls - with the following id`s and subclasses:
    • #field_name - styling the actual body of the field
    • .formResponsive .formError - controlling the invalid error
    • .formDescription - defining the style of the description area




 
    <style type="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>
 

The CSS declarations may be later overwritten by other declarations (inline styles, template CSS files, etc.).

For complete control over the form styling, you can manually edit the front.css stylesheet (/components/com_rsform/assets/css/front.css). By doing this, the style will be applied for all the forms on your website.

Please make sure to backup the front.css before updating the component, changes will be lost due to the fact that the stylesheet will be overwritten.

Similar topics can be found in the following articles: CSS and Javascript and Form Attributes.

Feedback