Website Snippet Country Phone Code Dropdown
This module enhances the features of the website_snippet_country_dropdown module, and its implementation and functionality are very similar. It offers a snippet with a dropdown for selecting a country as well as an input text field that auto-populates with the corresponding phone code. This module is intended to serve as a base for other modules to inherit and integrate into HTML forms.
auto_awesome What this module does
AI-generated from the code · Odoo 16.0Adds a website building block where visitors pick a country from a flag dropdown and the matching international phone code is filled in automatically next to a phone number field.
This module extends the existing country dropdown website snippet so that it also handles phone codes. When a visitor opens the dropdown, they see a list of countries with their flags; choosing one immediately updates the small phone-code box with that country's international prefix (for example +34) and refreshes the flag shown on the button.
The snippet is made of three parts: a country button with flag, a read-only phone-code box, and a free text field where the visitor types the local phone number. As soon as the number is typed or changed, a hidden field is updated with the full value combining the prefix and the number (for example "+34 111 22 33 44"), so the complete phone number is submitted with the form.
Website builders can drop this block into any HTML form and set options such as the label text, the field names, a default country prefix, a default number, and a read-only mode. If no default is given, the country is guessed from the visitor's country, the company country, or the first country in the list.
A demo page is published at /website_snippet_country_phone_code_dropdown.demo_page and a menu entry "Country Phone Code Dropdown Demo" is added under the main website menu so the behaviour can be tested. The module is meant as a base for other modules to inherit.
Depends on
Text generated by AI (DeepSeek) from reading the Odoo 16.0 code on GitHub; it may contain mistakes, so check the code before deciding. View the code on GitHub
Availability by version
Reviewed: 2026-11-03Confirmation status: 1 confirmed, 8 with no information of 9 versions.
Sources · Odoo 16.0
Confirmed on 2026-11-03 in branch 16.0 of OCA/website.
terminal Installation and usage
OCA documentation · Odoo 16.0Usage
Source · Odoo 16.0To extend this template, you should inherit the country_dropdown template and add your custom code. This template includes three input text fields, which are the following:
no_country_field: Field without code country.country_phone_code_field: Field with only country code (read only)complete_field: Field with the previous two joined (hidden)
The name of the complete field is customizable when user insert the snippet into a form element with the website editor.
Development
In order to use this element, you can call the reusable Qweb template
`website_snippet_country_phone_code_dropdown.country_dropdown` in your views or
forms to add a sensible country-combined field, which could be a useful element
for the registration of international phone numbers.
**Default Country Selection**
The default country will be determined by the first match among:
#. Extracted from the `default_country` variable.
#. Extracted from the `default_value_prefix` variable, searching by phone code.
#. The current user's country.
#. The current website's company's country.
#. The first country in the list.
**Variables**
All variables you can use to modify its behavior:
#. ``complete_field``: To give the form information a name. Habitually it will
match the field name.
#. ``default_value_prefix``: The phone prefix to be used in the complete_field.
#. ``default_value_number``: The phone number to be used in the complete_field.
#. ``countries``: A recordset of res.country containing all the available
countries.
#. ``default_country``: A res.country record representing the default country.
#. ``no_country_placeholder``: A placeholder text for the phone number input
field.No verified information in OCA: Installation, Configuration.
Installation instructions, the distribution package, dependencies and configuration steps are not shown because they have not yet been verified in the module documentation for any version.
Data imported from GitHub: this sheet reflects the latest catalog review, not a live lookup. Always check the module documentation and staging before installing in production.