How to configure fields in Balbooa Joomla Forms?
Balbooa Joomla Forms Builder comes with a large number of easily customizable fields that allow you to create powerful Joomla forms. In this tutorial, we will show you how to configure fields in Balbooa Joomla Forms Builder.
Input Field
Input Field
Input is one of the basic fields. Form field Inpit includes 8 field types.
General
Type
- Text Input - adds a single-line text entry field
- Text Area - adds a multiple-line text entry field
- Email - adds an email address that will only pass validation if the value entered is in a valid email format. This field type is always required
- Phone - adds a phone number field
- Zip Code - adds a zip code field
- Credit Card Number - adds a field for entering a credit card number. The field will only pass validation if the value entered is a number
- Date - adds a data field
- Time - adds a time field
Label
Adds Field Title.
Placeholder
Adds a short example or hint text that is shown in a form field.
Default Value
Sets the default value with the ability to add Data Tags.
Icon
Adds an icon.
Help Text
Adds the Help Text.
Required
Makes the field required.
Read Only
Makes the field inactive.
Hidden
Makes the field invisible.
Properties
Validation
Checks the correctness of the entered data (None, Numbers, Email, URL).
* Available only for the field types Text Input and Text Area.
Characters
Sets the number of characters to enter the field (Min, Max).
* Available only for the field types Text Input and Text Area.
Confirm Email
Adds the confirm email field.
* Available only for the Email field.
Mask
Sets a certain format for users to follow when filling up a form.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Checkbox Field
Checkbox Field
The checkbox is an interactive box that allows users to select one or more options. Boxes can be checked and unchecked.
Items
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Image
Select an item and add an image.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value (value would not be displayed but will participate in the calculations).
Order
Move an item using the icon Drag & Drop.
General
Type
- Regular
- Product - adds a field item to Cart
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Properties
Number of Columns
Sets the number of columns.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Radio Field
Radio Field
The radio field lets the user choose only one option from a list. The radio cannot be unchecked.
Items
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Image
Select an item and add an image.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value (value would not be displayed but will participate in the calculations).
Order
Move an item using the icon Drag & Drop.
General
Type
- Regular
- Product - adds a field item to Cart
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Properties
Number of Columns
Sets the number of columns.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Dropdown Field
Dropdown Field
The dropdown is a closed-ended field type where users can select only one answer from a menu of choices. Dropdown field suits for presenting a long list of options.
Items
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value (value would not be displayed but will participate in the calculations).
Order
Move an item using the icon Drag & Drop.
General
Type
- Regular
- Product - adds a field item to Cart
Label
Adds Field Title.
Placeholder
Adds a short example or hint text that is shown in a form field.
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Select Multiple Field
Select Multiple Field
The select multiple field allows users to select one or more values from a list.
Items
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value (value would not be displayed but will participate in the calculations).
Order
Move an item using the icon Drag & Drop.
General
Type
- Regular
- Product - adds a field item to Cart
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Upload File Field
Upload File Field
The upload file field allows a visitor to upload files by clicking a button and selecting it from a desktop. You can restrict the size, types, and a number of files that visitors can upload.
General
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Properties
Allowed File Types
Sets allowed file types.
Max. Upload File Size
Sets a maximum file size that can be uploaded (MB).
Allow Multiple Files
Allows multiple file uploads.
Max. Number of Files
Sets a maximum number of files that can be uploaded.
Advanced
Class Suffix
Adds a CSS class for the item.
To set Path to Uploads Storage or set Allowed File Types in the Media Manager navigate to Global Settings.
Slider Field
Slider Field
The slider field allows users to select numeric values from a defined range or set an exact value.
General
Type
- Slider - sets the exact value of a slider
- Range - sets a numeric value within a given range (minimum and maximum values)
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Properties
Range
Sets a range of numerical value.
Step
Sets increment value for range changes.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Calendar Field
Calendar Field
Calendar adds a field with a popup calendar that allows easily to select a date.
General
Type
- Regular
- Range - adds two pop up calendars for selecting dates
Label
Adds Field Title.
Placeholder
Adds a short example or hint text that is shown in a form field.
Default Value
None
Today - adds the date of the current day
Help Text
Adds the Help Text.
Required
Makes the field required.
Read Only
Makes the field inactive.
Hidden
Makes the field invisible.
Properties
First Day of The Week
Sets the first day of the calendar week.
Disable Past Dates
Disables past dates.
Disable Specific Days of the Week
Disables selected day of the week.
Disable Specific Dates
Disables specific dates.
Disable Range of Dates
Disables range of dates.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Phone Field
Phone Field
The phone field allows users to enter a phone number in the international format, depending on the country calling code you select.
General
Label
Adds Field Title.
Default Value
Adds a default value (country calling code and phone mask).
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Submit Button Field
Submit Button Field
The submit button field allows you to customize style, action after submission, and email notifications.
General
Label
Adds Field Title.
Icon
Adds an icon.
On Click
- Thank You Message - adds the field Message that appears after a form is submitted
- Redirect - adds the field Link that sends users to another page or site after form submission
- Payment Gateway - adds dropdown list with payment gateways. After submitting the form, the user will be redirected to the site of the payment system that you set
Admin Email Notifications
Send to Admin
Sends a notification to the site administrator or to the email addresses that you will add.
Admin Email
The email address to which the notification will be sent. In the field, you can enter one or more email addresses through Enter.
Cc
Stands for carbon copy.
* Whose address appears after the Cc: header would receive a copy of the message. The Cc header would appear inside the header of the received message..
Bcc
Stands for blind carbon copy.
* The Email address of the recipients specified in this field does not appear in the received message header..
From Email
- Default - email address from Joomla Global Configuration
- Customer Email - email address from where the forms are sent
Subject
Sends along with the form.
Text Editor
Edits structure of the email body.
PDF Attachment
Attaches PDF file.
Attach Uploaded Files
Attaches uploaded files.
Customer Email Notifications
Send to Customer
Sends a notification to form submitter.
Subject
Sends with the completed form.
Text Editor
Edits structure of the email body.
Subject
Sends along with the form.
Text Editor
Edits structure of the email body.
PDF Attachment
Attaches PDF file.
Attach Uploaded Files
Attaches uploaded files.
Spam Protection
reCAPTCHA
- None
- CAPTCHA-reCAPTCHA
- CAPTCHA-Invisible reCAPTCHA
Honeypot
Adds the invisible field to prevent spambots.
PHP Scripts
After Data Submission
The PHP code added in this field is executed after the form submission. PHP code shouldn't be wrapped in opening and closing PHP tags.
Advanced
Class Suffix
Adds a CSS class for the item.
Save Data to Database
Saves submitted data to a database.
Design settings
Background
Color
Changes background color and opacity.
Hover
Changes background color and opacity on hover.
Spacing
Padding
Sets the spacing within a Submit Button (px).
Border
Radius
Rounds the corners of the button (px).
Color
Changes border color and opacity of Submit Button.
Hover
Changes background color and opacity on hover.
Width
Sets the width of the border (px).
Font
Font
Sets Font Family.
Size
Sets the font size (px or em).
Letter Spacing
Sets the amount of space between letters (px or em).
Line Height
Sets the height of the line box.
Color
Sets the color and opacity.
Hover
Sets the color and opacity on hover.
Properties
Sets boldness, style, uppercase and align.
Shadow
Value
Sets shadow value.
Color
Changes shadow color and opacity.
Hover
Changes color of shadow and opacity on hover.
Icon
Size
Sets the size (px or em).
Color
Sets the color and opacity.
Hover
Sets the color and opacity on hover.
Properties
Sets alignment (Left, Center, Right).
Rating Field
Rating Field
The rating field allows you to add 1-5 ratings in your Joomla forms and provides the easiest way to get feedback about your business.
General
Type
- Smiles - adds smile rating
- Stars - adds star rating
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Acceptance Field
Acceptance Field
The accept field is a simple checkbox necessary to confirm the submitter’s consent to a specific condition.
General
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Properties
Text Editor
Edits acceptance text.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Cart Field
Cart Field
The cart field allows you to create order forms with promo codes, taxes, and an unlimited number of shipments. Using the cart field you can accept online payments from your customers.
General
Label
Adds Field Title.
Help Text
Adds the Help Text.
Products
Adds a field with product information.
Currency
Symbol
Adds a symbol, e.g. $, €, ₴.
Currency Code
Adds currency code, e.g. USD, EUR, UAH.
Currency Position
Sets position of currency (Before or After).
Thousand Separator
Sets the thousand separator (Comma, Dot, Space, None).
Decimal Separator
Sets the decimal separator (Comma, Dot).
Number of Decimals
Sets the number of decimals.
Shipping
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value (value would not be displayed but will participate in the calculations).
Order
Move an item using the icon Drag & Drop.
Promo Code
Promo Code
Adds the Coupon Code field.
Code
Adds a unique promo code.
Discount
Adds discount (Amount, Percentage).
Expires
Sets the expiration date of coupon code.
Tax
Tax
Adds the Tax field.
Label
Adds Field Title.
Rate %
Sets tax rate in %.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Calculation Field
Calculation Field
The calculation field lets to add mathematical operations between fields in your forms.
General
Type
- Regular
- Product - adds a field item to Cart
Label
Adds Field Title.
Help Text
Adds the Help Text.
Hidden
Makes the field invisible.
Calculation
Calculator
Creates mathematical operations using field values.
Properties
Value
Sets value, e.g. $, ℓ, m².
Position
Sets value position (Before or After).
Thousand Separator
Sets the thousand separator (Comma, Dot, Space, None).
Decimal Separator
Sets the decimal separator (Comma, Dot).
Number of Decimals
Sets the number of decimals.
Design
Inherit Global Styles
Disables Inherit Global Styles.
Type
- Label - sets the label settings
- Value - sets the value settings
Font
Sets Font Family.
Size
Sets the font size (px or em).
Letter Spacing
Sets the amount of space between letters (px or em).
Line Height
Sets the height of the line box.
Color
Sets the color and opacity.
Properties
Sets boldness, style, uppercase and align.
Background
Changes background color and opacity.
Padding
Sets the spacing within a field (px).
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Poll Field
Poll Field
The Poll field expands Balbooa Forms functionality and allows you to create online polls on your Joomla sites.
Items
Add
Click the icon Add New Item.
Default
Select an item and set the Default value.
Image
Select an item and add an image.
Copy
Select an item(s) and click the icon Copy Item.
Delete
Select an item(s) and click the icon Delete Item.
Rename
Click on an item title and rename it.
Value
Set value.
Color Picker
Set value color.
Order
Move an item using the icon Drag & Drop.
General
Label
Adds field title.
Help Text
Adds the help text.
Required
Makes the field required.
Properties
Allow Multiple Votes
Allows you to select multiple votes.
Allow Voting Again
Allows you to vote again.
Show Vote Count
Displays the number of votes.
Close Poll
Closes the poll.
Set End Date
Sets the end date for the poll.
Number of Columns
Sets the number of columns.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Google Maps Field
Google Maps Field
The Google Maps field embeds an interactive map into your form. Google Maps field allows uploading your own marker, display infobox with unique information, set the theme style of the map.
This field is based on the Google Maps API. To activate the field, you need to enter the Google Maps API Key in form integrations.
General
Address
Adds a location by typing a concrete address.
Google Maps
Adds a marker. To add a marker click on the map.
Infobox
Upload Marker
Uploads a custom marker.
Display Infobox
Displays infobox.
Text Editor
Edits infobox content.
Properties
Height
Sets the height (px).
Theme
Sets the theme (Standard, Silver, Retro, Dark, Night, Aubergine).
Controls
Displays map controls.
Scroll Zooming
Enables scroll wheel zoom.
Draggable Map
Makes the map draggable.
Advanced
Class Suffix
Adds a CSS class for the item.
Autocomplete Address Field
Autocomplete Address Field
The autocomplete address field lets you auto-complete address fields and makes filling out the form easier for users.
This field is based on the Google Maps API. To activate the field, you need to enter the Google Maps API Key in form integrations.
General
Label
Adds Field Title.
Placeholder
Adds a short example or hint text that is shown in a form field.
Default Value
Adds a default value.
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
Field ID
Copies the unique Field ID which can be used as a Data Tag.
Headline Field
Headline Field
The headline field displays text and provides a wide range of settings that allow you to create beautiful forms.
General
Label
Adds Field Title.
HTML Tag
Formats and displays the text (H1, H2, H3, H4, H5, H6, Paragraph).
Design
Font
Sets Font Family.
Size
Sets the font size (px or em).
Letter Spacing
Sets the amount of space between letters (px or em).
Line Height
Sets the height of the line box.
Color
Sets the color and opacity.
Properties
Sets boldness, style, uppercase and align.
Padding
Sets the spacing within a field (px).
Advanced
Class Suffix
Adds a CSS class for the item.
Text Field
Text Field
The text field displays text information. The text field supports any combination of letters, numbers, or symbols.
Text Editor
Add text using WYSIWYG CKEditor.
Image Field
Image Field
The image field lets you add an image to the form.
General
Source
Allows selecting images.
Alt
Adds an alternate text for an image.
Width
Sets the width of the image (px or %).
Properties
Sets alignment (Left, Center, Right).
Advanced
Class Suffix
Adds a CSS class for the item.
Signature Field
Signature Field
The Signature field gives your customers the ability to physically sign a form using a mouse, finger, or stylus on a touch device.
General
Label
Adds Field Title.
Help Text
Adds the Help Text.
Required
Makes the field required.
Advanced
Class Suffix
Adds a CSS class for the item.
HTML Field
HTML Field
The HTML field allows you to integrate the custom code.
Code Editor
Adds custom HTML.