Plugin - Advanced Form Fields

Download

You can download the plugin by logging with your purchase user, then head to Downloads > Paid Downloads > RSForm!Pro > Modules & Plugins > "Advanced Form Fields".

Install

In the backend of your Joomla! installation go to Extensions > Manage > Install, and upload and install the plugin. Next thing would be to check if the plugin is published, and to do so, navigate to Extensions > Plugins, search for the "System - RSForm! Pro Advanced Form Fields" plugin and ensure it is published.

Introducing extra form fields

1. Switch - with this field you can add a switch-like button in your form.

2. Rating Field - visual stars rating element.

3. Full Screen Textarea - textarea field that allows you to display its contents in a modal window.

4. Color picker - color picker field that allows choosing a color.

5. Selectize field - an advanced dropdown-like field that allows users to both search for a particular value from the items list and also select multiple values in a tag like display.

6. Styled Checkbox - a checkbox with a more stylish display for the items input field.

7. Styled Radio - radio group with a more stylish display for the items input field.

8. Date Dropper - date selection calendar with a unique look.

9. Time Dropper - time selection field with a visual clock display.

10. Date Picker - Date picker field with a visual calendar to choose a date.

Field Options

Switch Field

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• Initial State: the initial state of the switch. You can choose between an "Off" and "On" state.
• Off Value: default 0; the value that will be captured on your submission when the switcher is off.
• On Value: default 1; the value that will be captured on your submission when the switcher is on.
• Toggled On Price: this is the value that will be used in the calculations when the user toggles the Switch On.
• Additional attributes: here you can add extra attributes to the field.

Stars Rating

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• Number of stars: the number of stars that will be used for the rating input.
• Rating type: Choose between a single color or gradient type fill of the rating stars.
• Base Color: the base color used for the rating stars (hexadecimal).
• Fill Color: the fill color used when the user sets a rating (hexadecimal).
• Start Color (only shown when the rating type is set to gradient): the initial gradient color (hexadecimal).
• End Color (also shown only when the gradient rating type is used): the end gradient color (hexadecimal).
• Allow Half Stars: enable this option to allow users to select in half star increments.
• Additional attributes: here you can add extra attributes to the field.

Full Screen Textarea

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Default value: the default value that will be displayed in the front-end.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation rule: the conditions required for the field to pass the validation.
• Validation message: the message displayed when the field input is not correct.
• Cols: the number of columns the field will take up.
• Rows: the number of rows the field will take up.
• Max Width: the maximum fullscreen modal width.
• Max Height: the maximum fullscreen modal height.
• Max Size: This is the maximum number of characters that can be typed in this field eg. 255
• Show Character Count: Yes / No. If enabled, it will display a paragraph showing the character count.
• Placeholder: the helpful text value that will be shown in the front-end using the placeholder HTML attribute.
• Additional attributes: here you can add extra attributes to the field.

Color Picker

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Default value: the default value that will be displayed in the front-end.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• Additional attributes: here you can add extra attributes to the field.

Selectize

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Items: here you can set the values that will be displayed in the field (each value on a new line).
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• Field Theme: this field allows you to choose a specific theme so that the field can better match your template. Options available: Legacy, Standard, Bootstrap2, Bootstrap3, Bootstrap4 and Bootstrap5.
• Multiple: allow users to select multiple values in the field.
• Number of items (this option is shown only when the multiple selection option is enabled): the number of items the user can select.
• Additional attributes: here you can add extra attributes to the field.

Styled Checkbox

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Items: here you can set the values that will be displayed in the field.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Flow: here you can choose how the field will be displayed. Available options: Horizontal / Vertical ( 2, 3, 4 or 6 columns)
• Max Selections: limit the number of selections (0 implies unlimited).
• Min Selections: add a minimum amount of selections for this field to be submitted.
• Additional attributes: here you can add extra attributes to the field.

Styled Radio

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Items: here you can set the values that will be displayed in the field.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Flow: here you can choose how the field will be displayed. Available options: Horizontal / Vertical ( 2, 3, 4 or 6 columns)
• Additional attributes: here you can add extra attributes to the field.

Date Dropper

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Default value: the default value that will be displayed in the front-end.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• Initial Animation: choose the animation type.
• Date Format: the date format used to display the selected date (you can use between: d, m, Y, D, l, F, M, n, j).
• Force Date: force the date selection value to either be from today onwards or until today.
• Min Year: the minimum year the user is allowed to select a date from.
• Max Year: the maximum year the user is allowed to select a date from (if you set a value lower than the current year, the current year will be taken into consideration instead).
• Years Range: this option will split the available years in the specified chunk value.
• Primary Color: the primary color used in the calendar field (hexadecimal).
• Text Color: the text color (hexadecimal).
• Background Color: the color of the calendar background (hexadecimal).
• Border Size: the size of the calendar border (default: 1px solid #08C).
• Border Radius Value: you can set a rounded border for the calendar using this option (integer values; default: 8).
• Drop Shadow: add a drop shadow effect to your calendar; by default set to: 0 0 10px 0 rgba(0, 136, 204, 0.45
• Drop Width: the width of the drop down (integer value; default: 124).
• Additional attributes: here you can add extra attributes to the field.

Time Dropper

• Name: the name of the field.
• Caption: the caption that will be displayed in the front-end for this field.
• Default value: the default value that will be displayed in the front-end.
• Description: the description of the field.
• Required: control if the field is required for the submission to be made.
• Validation message: the message displayed when the field input is not correct.
• 12 Hours Format: choose between a 12H and 24H format for the time selection field.
• Time Format: the time format used to display the selected time (you can use between: H, h, m, HH, hh, mm, a, A).
• Initial Animation: the initial animation used to display the time selection clock.
• Set Current Time: automatically set the value of the field to the current time (user time).
• Primary Color: the primary color used in the clock field (hexadecimal).
• Text Color: the text color (hexadecimal).
• Background Color: the color of the clock background (hexadecimal).
• Border Color: the color of the clock background (hexadecimal).
• Additional attributes: here you can add extra attributes to the field.