Customize form layout through configuration
Visforms tries to adapt as much as possible to the look and feel of your website by only providing the minimal, most necessary CSS of its own. Most formatting rules therefore come from the CSS of your template.
Templates and UI frameworks
This usually works well because templates these days are usually created using so-called UI frameworks. The template is created by the UI framework itself, under which it is then used. These modern UI frameworks enable the quick and easy development of very attractive and, if necessary, responsive front-end layouts. When using a UI framework, an extension must provide the appropriate HTML structure with the appropriate class attributes. Just as the UI framework specifies and expects. Joomla itself relies on the Bootstrap UI framework. For Joomla 4 this is Bootstrap 5.
Form layouts
Visforms has a robust “default layout”. It is completely UI framework independent and looks good and works well in conjunction with many templates. However, this layout does not provide any UI framework-specific HTML code. If you use a template that was created with one of the major UI frameworks (Bootstrap or UIkit), then you must set the corresponding UI framework in the form configuration. Only then will you achieve optimal results in the display of the form. The “default layout” is only responsive to a limited extent.
In the free Visforms version, in addition to its “default layout”, another layout is available that generates Bootstrap 5 compatible HTML.
Select UI framework
To do this, go to the “Advanced” tab in the form configuration. Under the subheading “Layout” you will find the “UI Framework” option. The “None” option is preselected, which corresponds to the UI framework-independent “Default Layout” discussed above.
In the free Visforms version you can alternatively select the UI framework “Bootstrap 5” on Joomla 5. This creates a horizontal Bootstrap 5 layout by default.
With the Visforms Subscription you receive additional support for the UI framework UIkit 3.
This offers optimal results when using Visforms on websites with templates based on these UI frameworks. With these layouts you also have extensive options for individually configuring multi-column layouts, including the multi-column Bootstrap 5 layout.
Please remember: You can only achieve optimal results in the display of the form if the selected UI framework actually corresponds to the UI framework with which the active template of your website was developed. Therefore, always set the appropriate UI framework.
Hide labels and use placeholder attributes
Placeholders are purely informative texts
All modern browsers now offer the option of displaying a so-called placeholder in a text input field. Depending on which browser you use, this placeholder disappears as soon as you click the mouse in the input field or as soon as you start typing text. Of course, placeholders are not transmitted with the form, but are purely informative texts. Placeholders are created using the HTML attribute “placeholder”.
Set individual placeholder text
In the field configuration for all field types that allow a placeholder, you will find an option with which you can specify the individual placeholder text.
Suppress display of field label
For all field types that allow a placeholder, you have the option of suppressing the display of the field label. If you have not stored any placeholder text in the placeholder option, the label of the field will automatically be used as the placeholder text. At least this shows the website user what information he should enter in the input field.
Note: Please note that the display of a "Tips Text" in the UI framework "None" is tied to the field label. Because the text is displayed as a tooltip when the mouse hovers over the field label. Without the visibility of the field label, no "Tips Text" will be displayed with this UI framework selection.
Dependency on the chosen UI framework
The display option for the field label also depends on the selected UI framework. Whether this functionality is available depends not only on the field type but also on the selected UI framework. The reason for the lack of the display option for the field label is that there cannot be an appropriate placeholder for these situations.
| Field type | Other UI framework settings (including "None") | Bootstrap 5 | Uikit 3 |
|---|---|---|---|
| Text | ✔️ | ✔️ | ✔️ |
| Password | ✔️ | ✔️ | ✔️ |
| ✔️ | ✔️ | ✔️ | |
| Date | ✔️ | ✔️ | ✔️ |
| Number | ✔️ | ✔️ | ✔️ |
| URL | ✔️ | ✔️ | ✔️ |
| Textarea | ✔️ | ✔️ | ✔️ |
| Checkbox | ✔️ | ✔️ | |
| Checkbox Group | ✔️ | ✔️ | |
| Radio button | ✔️ | ✔️ | |
| Select | ✔️ | ✔️ | |
| File Upload | ✔️ | ✔️ | |
| Calculation | ✔️ | ✔️ | |
| Location | ✔️ | ✔️ | |
| Signature | ✔️ | ✔️ | |
| Radio SQL | ✔️ | ✔️ | |
| Listbox SQL | ✔️ | ✔️ | |
| Checkbox Group SQL | ✔️ | ✔️ | |
| Hidden | |||
| Image Submit Button | |||
| Submit Button | |||
| Reset Button | |||
| Field separator | |||
| New page |
JavaScript code for IE
Internet Explorer in particular only supports placeholders from version 10 onwards. Visforms has therefore been expanded to include its own JavaScript code, which enables the use of placeholders even in browsers that do not support this.
Mandatory fields and how to use the * sign
It is common to use the * sign in forms to indicate to the user that a form field is a mandatory field that they must fill out in any case. Opinions vary widely as to whether a * character should be displayed at all and where exactly it should be placed. Visforms therefore tries to give you flexibility in displaying the * character. First of all, in the Form Configuration in the Advanced tab there is an option with which you can turn off the **display of the * character (show required *).
You can still add an information text “Required field *” to the form. You can use the “Position for text required field” option to specify whether this text should be displayed and, if so, where:
- above the fields
- below the fields but above the captcha (if you have one activated)
- above the form button (=below).
Furthermore, the * character is not created directly with HTML code and written into the form, but rather it is created using CSS.
Note: The CSS generation of the * character offers you significantly more options to change both the position and the appearance of the * itself using CSS.
Location of “Custom Text”
You can specify where custom text should be displayed in relation to the control. This is done in the Field Configuration in the Advanced tab using the Custom Text Position parameter. You have the choice between three positions:
- above the label,
- above the input field and
- below the input field.
The first two positions only lead to a different result visually for the standard bootstrap layout. In the other two layouts, the label and input field are on one line anyway.