The Country and States Lists element is a user interface component that simplifies the selection of geographical locations within forms
Overview
It consists of two dropdown lists: one for selecting a country and another for choosing a state or region within that country.
Users can navigate through the dropdown menus to easily pinpoint their country of residence and, if applicable, the specific state or region within that country. This element is commonly employed in address forms, registration pages, and scenarios where capturing users' location information is necessary.
By providing predefined lists of countries and states, this element streamlines the input process, enhances user experience, and ensures accurate and standardized data collection for various applications.
Example
Global Configuration
The global configuration is where you add/edit a country and it's states/region
To access the global configuration:
- Login to your Joomla! Administrator
- Go to Components » Formea Form Builder » Element types
- Click on the "Country & State"
Add/edit Country
- Add - Click on the "Add new Country"
- Edit - Click on the Country name
- Enter the country name, ISO codes. dial codes and status
- Click "Save" or "Save & close"
Option | Description |
---|---|
Country name | The country name to be displayed in the dropdown list |
ISO 2 Code | ISO 3166-1 alpha-2 - two-letter country code |
ISO 3 Code | ISO 3166-1 alpha-3 - three-letter country code |
Dial Code | Tel/Dial code for the country Ex: +1 |
Published | Publish/unpublish in the dropdown lists to be selectable |
Add/edit States
- Click on the country name which you want to add/edit the states
- To add a new state, click on the "Add new state" button. To edit, simply click on the state name
- Enter the state name, ISO code, and status
- CLick on "Save State"
Parameters
These parameters are on the element scope level and not to be confused with the Global scope level at "Element Types"
Available parameters for Country & States element.
Option | Description |
---|---|
Data source | Determine whether this element should populate a "Country" or "State" lists |
Country value |
Available when "Data source" is "Countries". The value that should be stored when user select. |
State field |
Available when "Data source" is "Countries". Select the element where the state input options will be updated according to the country selected |
Dial code field |
Available when "Data source" is "Countries". Select the element where the value will be updated with a dial code according to the selected country |
Dial code element ID |
Available when "Data source" is "Countries". Display dial code in a HTML element by ID. Example: tel_container |
Default country |
Available when "Data source" is "States". The state lists will be based on the selected country |