How to create a field with country code & country flag

To Add Flag in Phone Field need to do some customization and create some files as below:

  1. <YOUR CRM>/custom/Extension/application/Ext/LogicHooks/AddFlagPhoneField_Hook.php


if (!isset($hook_array) || !is_array($hook_array)) {

$hook_array = array();


if (!isset($hook_array['after_ui_frame']) || !is_array($hook_array['after_ui_frame'])) {

$hook_array['after_ui_frame'] = array();


$hook_array['after_ui_frame'][] = array(

1, //Hook version

'AddFlagPhoneField', //Label

'custom/include/AddFlagPhoneField/AddFlagPhoneField.php', //Include file

'AddFlagPhoneField', //Class

'AddFlagPhoneFieldMethod' //Method

  1. <YOUR CRM>/custom/include/AddFlagPhoneField/AddFlagPhoneField.php


if(!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');

class AddFlagPhoneField{

function AddFlagPhoneFieldMethod($event,$arguments){

if($_REQUEST['module'] == 'Accounts' && ($GLOBALS['app']->controller->action == 'EditView' || $_REQUEST['action'] == 'EditView')){

echo '<link rel="stylesheet" type="text/css" href="custom/include/AddFlagPhoneField/build/css/intlTelInput.css">';

echo '<script src="custom/include/AddFlagPhoneField/build/js/intlTelInput.js"></script><script src="custom/include/AddFlagPhoneField/AddFlagPhoneField.js"></script>';



  1. <YOUR CRM>/custom/include/AddFlagPhoneField/AddFlagPhoneField.js

var input = document.querySelector("#phone_office");

window.intlTelInput(input, {

utilsScript: "custom/include/AddFlagPhoneField/build/js/utils.js",


For Point #4, #5 and #6, Download the files from below link and upload as suggested path.

Add Phone Field JSCSS

  1. <YOUR CRM>/custom/include/AddFlagPhoneField/build/css/intlTelInput.css

  2. <YOUR CRM>/custom/include/AddFlagPhoneField/build/js/intlTelInput.js

  3. <YOUR CRM>/custom/include/AddFlagPhoneField/build/js/utils.js

1 Like

Thank you for the solution could you help me with adding a button besides a field and on click it should dynamically add and remove multiple fields

Hey @jessica1 Jessica please share the Image folder with flag images as well it’s missing.

Are you talking about the Flag Image which was added in the Phone Field? If yes then Flag is coming through the CSS file. So no need for an Image folder.

Image Folder is mentioned in the path whereas it is missing in the css folder

Did you upload CSS file which was mentioned in the point #4 as per the path? If yes then please cross check folder and files having the recursive 777 permission or not.

tried all that you have mentioned still the issue persists

Upload the flag images as suggested below in your SuiteCRM.


Download flag images

Thanks it’s working .
Can you help me with multiple dynamic fields in suitecrm something like this

Hello. Where to locate the placeholders? I want to edit a few placeholder

what kind of placeholders?
elaborate your query

I see this is an old post, but if you’re still interested, take a look at the post:

Hello, how to add validation of input length of each country code? sample in the philippines without country code the length of our mobile number is 11 if it has the country code will be 13. It is include the “+” sign. 09170000827 (without country code) and +639170000827(w/ country code).

Additional how to remove the spacing of each number during edit? I tried to trim the result but the space still there.