Plugin - Advanced Form Fields

RSForm!Pro Advanced Form Fields

Important: The RSForm!Pro Advanced Form fields plugin is commercial. The price of the plugin is: 15 EUR.
It can either be purchased initially with the subscription itself or, on a later time purchased separately from your RSJoomla! account by heading to your memberships section > RSForm!Pro and clicking on the “buy plugins” button (your account does need to hold an active RSForm!Pro subscription).

The RSForm!Pro Advanced Form Fields plugin expands the already robust set of form components. Read on to find out the new fields you can use to give your forms a more unique look & functionality.

Downloading and Installing the plugin
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 for Joomla! 3.x".


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.


Field Options
Switch Field
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.
  • Additional attributes: here you can add extra attributes to the field.

Stars Rating
Rating 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.
  • 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
Advanced 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.
  • 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
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
Selectize Field
  • 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.
  • 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
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).
  • Additional attributes: here you can add extra attributes to the field.

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

19 persons found this article helpful.


Was this article helpful?

Yes No
Sorry about that