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 Legacy Layouts, Responsive 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.


Responsive Layouts

Since version 1.51.0, RSForm!Pro introduces 3 more responsive layouts: Bootstrap 2, Bootstrap 3 and UIKit. Now, RSForm!Pro allows you to choose between 4 responsive layouts:

  • Responsive
  • Bootstrap 2
  • Bootstrap 3
  • UIKit

Legacy Layouts

  • Inline
  • 2 Lines
  • 2 Columns Inline
  • 2 Columns 2 Lines
  • Inline (XHTML)
  • 2 Lines (XHTML)

Responsive Layouts

The Responsive Layouts will be automatically modified to fit screens of all types of resolutions, ranging from desktop monitors to smartphone and tablet displays. You can choose from one of the 4 pre-defined layouts.


The Responsive Layout HTML code for this layout doesn't have list or table structure, but its classes are based on the Bootstrap framework,

 
    <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.

The Bootstrap 2 / Bootstrap 3 / UIKit Layouts share the same HTML structure, however the classes that are applied on the HTML elements change accordingly to the framework that you wish to use. e.g. Bootstrap 3.x example:

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

Legacy Layouts

The legacy 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}
 
                  {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}
 
                  {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} (*)
 
          {FullName:body}
 
          {FullName:validation}
          {FullName:description}
 
        </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} (*)
 
                {FullName:body}
 
                {FullName:validation}
                {FullName:description}
 
              </div>
            </div>
          </td>
          <td class="formTableRight" valign="top">
            <div>
              <div class="formField rsform-block rsform-block-email">
                {Email:caption} (*)
 
                {Email:body}
 
                {Email:validation}
                {Email:description}
 
              </div>
            </div>
          </td>
        </tr>
      </table>
 

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



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 perform a CSS template override (details on performing CSS template overrides can be found via Joomla! official documentation) on the front.css file (\media\com_rsform\css\front.css). By doing this, the style will be applied for all the forms on your website.

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

You Should Also Read

How to create a multi-page form HOT

Creating a responsive, two-columns inline form HOT

Creating a Send me a copy scenario

Dynamic Drop-down change form example

Create Tabbed Forms