How to Customize International Phone Field (GF 3.0+)

Get Help
, , ,
1

Hi Team Gravity,

  1. I could not find a filter or method in your documentation that will allow us to customize the new International Phone Field format – introduced with GF 3.0+ (see attached). Can you help?

  2. It would be nice if you can update your code for the new International Phone Field to ensure it matches the format (i.e., styling) noted in GP Advanced Phone Field (see attached). In my opinion, it looks more elegant.

    Meanwhile, can you provide a filter and/or CSS rules that will: (a) Remove the background color of the flag field (i.e., white would be nice), and (b) Change the flag size and aspect ratio.

phone-field-gf-3.0
phone-field-gf-3.0705×142 17.5 KB

gf-advanced-phone-field-format-elegant
gf-advanced-phone-field-format-elegant753×196 5.65 KB

2

Hi Jonathan. There are currently no filters for the new International Phone field. If you have a customization request and a need for a filter, you can submit that request here:

For the sublabels (“Country” and “Phone Number” above the inputs) you can select “Hidden” for “Sub-Label Placement” on the Appearance tab for the field. Note that hiding the sublabels may result in the form failing an accessibility audit or scan.

For the background color behind the selected flag, you can use this CSS:

.gform-theme--framework .gfield--type-phone .gform-phone__country-selector {
    --gf-ctrl-btn-bg-color-tertiary: #ffffff;
    --gf-ctrl-btn-bg-color-hover-tertiary: #ffffff;
    --gf-ctrl-btn-bg-color-focus-tertiary: #ffffff;
    --gf-ctrl-btn-bg-color-disabled-tertiary: #ffffff;
}

.gform-theme--framework .gfield--type-phone .gform-phone__country-selector::after {
    filter: brightness(0);
}

Changing the size and aspect ratio of the flags is possible with CSS as well, but it will require quite a bit more work because other elements need to be resized.

3

There is a fix for an issue where the phone field sub-labels remain visible when the hidden placement is selected in the latest hotfix, 3.0.2.3.

4

Thank you, gentlemen! Looking forward to the fix. At your next convenient opportunity, offering a filter for restyling the flag and dropdown icon to make them look like GP Advanced Phone Field would be nice. Again, thank you.