Newest Feature of Subscription

Learn more

Field Type Signature

Learn more

Field Type Location

Learn more

Field Type Calculation

Learn more

Multi Page Forms

Form Layout Configuration

In order to fit into the look & feel of your website, Visforms comes with very little css of its own. Instead it tries to use the css rules, provide by your template.

Mostly this strategie works fine, because templates are mostly created using so called template frameworks, which allow the developer to create user friendly, good looking, responsive templates by just providing the proper HTML code structure and class attributes. Joomla! 3 has decided to go with the Bootstrap 2.3.2 template framework.

Form Layouts

Visforms comes with a robust "Default Layout", which looks good and works fine in combination with many templates but which does not fit perfectly into the look & feel of Bootstrap Templates. Therefore we have developed special Bootstrap 2.3.2 layouts for Visforms, which rendered Bootstrap 2.3.2 conform HTML code.

The free Visforms version provides the following layouts:

  • Default Layout
  • Default Bootstrap Layout (implements the Bootstrap 2.3.2 default form styles)
  • Horizontal Bootstrap Layout (implements the Bootstrap 2.3.2 code for horizontal forms)
  • Multi Column Layout (uses the Bootstrap 2.3.2 grid)

In addition the Visforms Subscription provides layouts which are compatible with the Bootstrap 3 framewor.

  • Default Bootstrap3 Layout (implements the Bootstrap 3 default form styles)
  • Horizontal Bootstrap3 Layout (implements the Bootstrap 3 code for horizontal forms)
  • Multi Column Layout Bootstrap 3 (uses the Bootstrap 3 grid)

You can select the form layout in the form configuration, tab "advanced". As a matter of fact, not all Joomla! 3 templates are Bootstrap templates. That is why you also have an option, that allows you to include the original Bootstrap form CSS. Only enable the option "Load Bootstrap form CSS", if you do not use a Bootstrap template. If you use a Bootstrap template on your website, the template will deliver the required CSS.

Click preview to enlarge the image.

  • Default Visforms Layout

    Default Visforms Layout

    Label and control are aligned in one line, labels are aligned to the left.

  • Default Bootstrap Layout

    Default Bootstrap Layout

    Label is positioned above the control.

  • Horizontal Bootstrap Layout

    Horizontal Bootstrap Layout

    Label and control are aligned in one line, label is align to the right.

Some template developer, like Yootheme, use other templates frameworks. The HTML structure and CSS of these templates is usually not fully compatible with the Bootstrap forms and you can usually only use the Default Layout with these templates.

Hide label and use the HTML placeholder attribute

All modern browsers have implemented so called placeholders, which allow you to display a placeholder text inside an input. In contrast to a default value, which will be submitted with the form, a placeholder is just an informative text, that vanishes, either when you click into the input or when you start to enter characters (depending on which browser you use).

You can set a placeholder text in the field configuration, tab "Advanced", This option is only available, for those fields types, that support the HTML placeholder attribute.

Further on you can hide the field label for those fields through configuration. If you have not entered a placeholder text, the field label will be used as placeholder in this case, to make sure, that the user knows what sort of input they are required to enter.

Please note, that the display of a "tool tip text" depends on a field label, because the tool tip is displayed when the user hovers the field label text. When you hide the field label then there is no "tool tip text", too, even if you have entered a "tool tip text" in the field configuration.

The Internet Explorer only supports placeholders since version 10. That is why we have added some Javascript code, that makes sure, placeholders can be used with browsers, that do not support them genuinely, as well.

Mandatory fields and the use of *

It's a common feature to use a * in forms to indicate that a form field is mandatory and the user is required to provide a value.

There are different opinions on whether or not the * should be displayed at all and on where to put it, if it is displayed. Visforms allows you to hide the *. You can find the option in the form configuration's tab "Advanced".

You can add a text Required * to your form, which will only be displayed, if the form actually contains required fields. Use the option "Position of Required tex" in the form configuration tab "Advanced" in order to switch this text of (Don't show) or to select where to show it (above the form fields, below the form fields but above the capthcha (if you have enabled a captcha) or above the form buttons).

InVisforms the * is generated with CSS, which allows you to determine it's position and it's layout much more flexible with your custom CSS.

Position of "Custom Text"

There is a field option in field configuration's tab "Advanced" which enables you to choose the position of the fields "custom text". You can choose between three positions:

  • Above the Label
  • Above the input
  • At the bottom of the input

with the position of the first and second option having a visibly different result only in the Default Bootstrap Layout, because label an input are aligned in one line for the other layouts.

Article list