The Country and States Lists element is a user interface component that simplifies the selection of geographical locations within forms


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.

The Country & States element has a global scope configuration and an element scope configuration



Global Configuration

The global configuration is where you add/edit a country and it's states/region

To access the global configuration:

  1. Login to your Joomla! Administrator
  2. Go to Components » Formea Form Builder » Element types
  3. Click on the "Country & State"
Global configuration UI for Country & States elements
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
Editing country and states elements
Add/edit States
  1. Click on the country name which you want to add/edit the states
  2. To add a new state, click on the "Add new state" button. To edit, simply click on the state name
  3. Enter the state name, ISO code, and status
  4. CLick on "Save State"


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
On this page