Adjust form layout by configuration
Visforms tries to match the look and feel of your website as much as possible by bringing only the most minimal of its own CSS with it. Most of the formatting rules therefore come from your template’s CSS.
Templates and UI frameworks
This usually works well because templates are mostly created with so-called UI frameworks these days. The template is thus created by the UI framework itself, under which it is then also used. These modern UI frameworks enable the quick and easy development of very attractive and, if required, responsive frontend 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-agnostic and looks 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 appropriate 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 “Layout” subheading 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 get additional support for the UI frameworks
- Bootstrap 2,
- Bootstrap 3,
- Bootstrap 4,
- UIkit2 and
- UIkit 3.
These offer optimal results when using visforms on websites with templates based on these UI frameworks. With these layouts you also have extensive options for the individual configuration of multi-column layouts, including the multi-column Bootstrap 5 layout.
Please consider: You can only achieve optimal results in displaying 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 label 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 in the input field with the mouse 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”.
Specify custom placeholder text
You will find an option in the field configuration for all field types that allow a placeholder, with which you can specify the individual placeholder text.
Suppress display of field label
You have the option of suppressing the display of the field label for all field types that allow a placeholder. 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 user of the website 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 bound to the field label. Because the text is displayed as a tool tip when hovering the mouse over the field label. Without the visibility of the field label, no "Tips Text" is displayed with this UI framework selection.
Dependency on chosen UI framework
The display option for the field label also depends on the chosen UI framework. Whether this functionality is available depends not only on the field type but also on the selected UI framework. The rationale for not having the display option for the field label is that there cannot be an equivalent placeholder for these situations.
| Field Type | Other UI framework settings (including "None") | Bootstrap 4 | Bootstrap 5 | Uikit 2 | 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 | |||||
| Pagebreak |
JavaScript code for IE
Internet Explorer in particular only supports placeholders from version 10. Visforms was therefore extended with its own JavaScript code, which also enables the use of placeholders in browsers, who themselves do not offer any support for this.
Mandatory fields and how to use the * character
It is common to use the * character in forms to indicate to the user that a form field is mandatory and must be filled out. Opinions differ widely 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 switch off the display of the * character (Show Required *).
You can also add an informational text “Mandatory field *” to the form. You can use the “Position for mandatory text 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 is created using CSS.
Note: The CSS generation of the * character offers you many more possibilities to change both the position and the appearance of the * itself via CSS.
Position of “Custom Text”
You can choose where custom text should appear in relation to the control. This is done in the Field Configuration on the Advanced tab using the Custom Text Position parameter. You can choose between three positions:
- above label,
- above the input field and
- below the input field.
The first two positions only lead to a different result for the standard bootstrap layout. In the other two layouts, the label and input field are in one line anyway.