How to Increase Spacing Between Country Code and Phone Number (Placeholder)

Good Day,

We are using Gravity Forms Advanced Phone Field. Everything is working great. However, in order to be consistent with all other GF fields, we’d like to increase the spacing between the Country Code/Flag Field and the “Phone Number” placeholder.

Details: Screenshot by Lightshot

We tried the CSS Rule provided below, but it only works for Country Codes with one digit (e.g, +1 for USA). When we select a Country Code with two or more digits, the spacing is lost.

Any takers to help solve us this issue? We’re publishing this topic in this forum to ensure current and future GF users benefit from the solution.

Hopefully, some of you can assist with this. Also, hoping that the developers of Gravity Forms and/or Gravity Wiz will make the proper CSS adjustments in their code to ensure consistency with all other GF fields.

Thank you!

#input_16_52_raw { 
    padding-left: 85px!important;

Where: 16 = GF Form No. and 52 = Form Field No.

I took a look at the demo on the GW page and it appears that the 77px pad is an inline style.

In the inspector, I edited it to the 85px you suggested, but then I changed the country code, and the inline padding changed.

It’s always the dang JS … It would be ideal if they would append a class to the div.iti__flag-container indicating how many digits in the country code. Or something that would allow for granular control of all possibilities. Anything but an inline style.

1 Like

Hey @CraigTommola,

Thank you for looking into this. Agree with you 100%.

Sooner than later, let’s hope the developers of this add-on will tweak its code to provide what we need.



1 Like

Hey Jonathan, we’d be happy to explore this with you via support. Drop us a line. :man_mage:

1 Like

Hey @david,

Great. We’ll reach out to you via your Support channels.

Hopefully, you already have a solution for this.

Thank you!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Hey @AeroStar, just shared this with you in your support ticket with us but wanted to share it here as well for others who may need it. :slightly_smiling_face:

1 Like