Phone field not using column width

Hi @thiruc

I hope you are doing good today.

We already reported this issue to our Forminator Team.
Could you add this temporary fix on your site:
#forminator-module-8808 .forminator-field--phone {padding-left:50px !important;}
where 8808 is your form ID.

Kind Regards,
Kris

Hi Kris,

Thanks for the reply.
I have implemented the above for both my forms in the Additional CSS section and cleared all cache to test. It had no effect.
I then also removed all relevant “Combine” Asset optimisation configurations in Hummingbird, cleared Asset Optimization Cache and page cache again and tried with a clean browser.

Again, there seemed to be no impact of the change you suggested.
I note, the above is also for the field width only and does not address the CSS colours that are also not being honoured since the latest update.

Can you share / investigate why this may be please?

For referenceL: here is all the relevant Forminator CSS I have embedded in the Custom CSS:

/* FORMINATOR BASED CSS */

/* Forminator - phone list formatting override */
/* DEFAULT */

.intl-tel-input .country-list { 
	background-color: #0F3A48 !important;
	}
.intl-tel-input .country-list .country-name { 
	color: #FCC000 !important;
	}
.intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;
	}

/* Additional CSS to overide phone field padding */
#forminator-module-6163 .forminator-field--phone {padding-left:50px !important;} 
#forminator-module-8808 .forminator-field--phone {padding-left:50px !important;} 

/* Forminator - MODERN phone list formatting override */
/* MNG MODERN FORM SPECIFIC */

#forminator-module-6163 .intl-tel-input .country-list { 
	background-color: #0F3A48 !important;
	}
#forminator-module-6163 .intl-tel-input .country-list .country-name { 
	color: #FCC000 !important;
	}
#forminator-module-6163 .intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;}

/* Forminator CLASSIC - phone list formatting override */
/* MNG CLASSIC FORM SPECIFIC */
#forminator-module-6162 .intl-tel-input .country-list { 
	background-color: #FFF !important;
	}
#forminator-module-6162 .intl-tel-input .country-list .country-name { 
	color: #215257 !important;
	}
#forminator-module-6162 .intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;
	}

/* Forminator - MNG Classic Phone List Override for Mobile only * */
/* Forminator CLASSIC - phone list formatting override MOBILE */
/* PAGE-ID Reliant */

@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

/* Forminator tel-test - phone list formatting override for mobiles */
#forminator-module-6131 .intl-tel-input .country-list { 
	background-color: #FFF !important;
	}

#forminator-module-6131 .intl-tel-input .country-list .country-name {
    color: #215257 !important;
}

#forminator-module-6131 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}

@media only screen and (max-width: 768px) {
  .page-id-6132 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6132 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
	.page-id-6132 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}
}

Thanks,

Thiru

Hi again Kris,

Further to the above, just to let you know I have rolled back the plugin to the previous version for now as I sell many business services, including the importance of VI, branding and website. As such I could not leave the forms on my own site in that way for longer than I had.
Please let me know when both of the issues are fixed, until such time I will stay with v1.15.7 that I have retested and the form field rendering and drop-down colours are all good with the custom CSS I have.

Thanks,
Thiru

PS: Anyone who wants to learn how to safeguard with a simple, very quick and effective DR procedure that ensures you can achieve this on even on multisite (which I have) can contact me. ??
No plugin needed that does everything blindly without ability to test.

Hello @thiruc ,

I just want to confirm that this issue is planned to be fixed in 1.15.10 version of the plugin.

kind regards,
Kasia

Thanks for letting me know Kasia.

I will look out for the update and schedule implementation and testing in my next upgrade batch – unfortunately I had just completed an upgrade round yesterday with WP 5.8.3 and the version you mention was not available as yet.

Thanks once again.
BR,
Thiru

Hello @thiruc ,

The latest version of Forminator has the fix for this issue.

kind regards,
Kasia

Hi,

I have tried the updates up to version 1.15.12.
Whilst from 1.15.10, the country flag icon in phone list padding corrected, the regression of the dropdown background colour persisted.
This causes a legibility issue, as it does not match my website colours, which, with a white font renders the dropdown text illegible.

Can you please look at the above CSS and see why it may not work in the later updates please.

I have regressed my website to 1.15.7, so it cannot be tested there, other than to see that the drop-down background colours are honoured in the earlier version.

Thanks,

Thiru

Hi @thiruc

If the site does not have the Forminator plugin updated it will be hard for us to replicate the issues and provide a fix. It seems more like a CSS theme conflict here. Are you able to create a staging site, make all updates and share staging URL with the same form enabled on the page?

Kind Regards,
Kris

Hi,

Unfortunately my host cannot create a staging for a multi-site.
As my theme uses serialisation too, it is not so straightforward to duplicate the site as the URL strings would need to be the same length with manual adjustments in the DB… which I could do though are time consuming, etc.

So, to enable you to take a look I have updated the plugin to the latest version.
I am happy to leave the update in place until the end of the weekend, or a little longer if you need, before rolling back.

Please let me know if you can take a look in that time-frame to debug or how long you might need beyond that.
You may need to append the ?Nocache parameter as I have not cleared the site cache.

Thanks,
Thiru

Hi @thiruc

Could you please try this CSS?

#forminator-module-8808 .iti__country{
    display: flex;
    align-items: center;
}

#forminator-module-8808 .iti__country span{
    color: #000;
}

#forminator-module-8808 .iti__dial-code{
    margin-left: auto;
}

Best Regards
Patrick Freitas

Patrick,

Thanks for this.
Am I right to presume that the field name for the country phone-list was updated in more recent versions,
from, ,
to, .

On that basis, I have made the following changes in my CSS and would appreciate if you can have a quick look to and confirm I did get all the field name changes correct. ??
The CSS with previous and updated field name versions are below my name.

Thanks,
Thiru

/* FORMINATOR BASED CSS */

/* Forminator - phone list formatting override */
/* DEFAULT */

.intl-tel-input .country-list { 
	background-color: #0F3A48 !important;
	}
.intl-tel-input .country-list .country-name { 
	color: #FCC000 !important;
	}
.intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;
	}
	
/* V1.5.12 field name updates */
.iti__country-list{
    	background-color: #0F3A48 !important;
	}
.iti__country-name{
    	color: #FCC000 !important;
	}	
.iti__dial-code{
    	color: #BFBFBF !important;
	}	
	
/* Additional CSS to overide phone field padding */
#forminator-module-6163 .forminator-field--phone {padding-left:50px !important;} 
#forminator-module-8808 .forminator-field--phone {padding-left:50px !important;} 

/* Forminator - MODERN phone list formatting override */
/* MNG MODERN FORM SPECIFIC */

#forminator-module-6163 .intl-tel-input .country-list { 
	background-color: #0F3A48 !important;
	}
#forminator-module-6163 .intl-tel-input .country-list .country-name { 
	color: #FCC000 !important;
	}
#forminator-module-6163 .intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;}

/* V1.5.12 field name updates */
#forminator-module-6163 .iti__country-list{
    	background-color: #0F3A48 !important;
	}
#forminator-module-6163 .iti__country-name{
    	color: #FCC000 !important;
	}	
#forminator-module-6163 .iti__dial-code{
    	color: #BFBFBF !important;
	}		

/* Forminator CLASSIC - phone list formatting override */
/* MNG CLASSIC FORM SPECIFIC */
#forminator-module-6162 .intl-tel-input .country-list { 
	background-color: #FFF !important;
	}
#forminator-module-6162 .intl-tel-input .country-list .country-name { 
	color: #215257 !important;
	}
#forminator-module-6162 .intl-tel-input .country-list .country .dial-code { 
	color: #BFBFBF !important;
	}

/* V1.5.12 field name updates */	
#forminator-module-6162 .iti__country-list{
    	background-color: #FFF !important;
	}
#forminator-module-6162 .iti__country-name{
    	color: #215257 !important;
	}	
#forminator-module-6162 .iti__dial-code{
    	color: #BFBFBF !important;
}

	
/* Forminator - MNG Classic Phone List Override for Mobile only * */
/* Forminator CLASSIC - phone list formatting override MOBILE */
/* PAGE-ID Reliant */

@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6491 .intl-tel-input .country-list .country .dial-code {
  color: #BFBFBF !important;}
}

/* V1.5.12 field name updates */
@media only screen and (max-width: 768px) {
  .page-id-6491 .iti__country-list{
  background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6491 .iti__country-name{
  color: #215257 !important;}
}	
@media only screen and (max-width: 768px) {
  .page-id-6491 .iti__dial-code{
  color: #BFBFBF !important;}
}	

@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7124 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

/* V1.5.12 field name updates */
@media only screen and (max-width: 768px) {
  .page-id-7124 .iti__country-list{
  background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7124 .iti__country-name{
  color: #215257 !important;}
}	
@media only screen and (max-width: 768px) {
  .page-id-7124 .iti__dial-code{
  color: #BFBFBF !important;}
}	

@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}

@media only screen and (max-width: 768px) {
  .page-id-7125 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

/* V1.5.12 field name updates */
@media only screen and (max-width: 768px) {
  .page-id-7125 .iti__country-list{
  background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7125 .iti__country-name{
  color: #215257 !important;}
}	
@media only screen and (max-width: 768px) {
  .page-id-7125 .iti__dial-code{
  color: #BFBFBF !important;}
}	

@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7126 .intl-tel-input .country-list .country .dial-code {
		color: #BFBFBF !important;
}
}

/* V1.5.12 field name updates */
@media only screen and (max-width: 768px) {
  .page-id-7126 .iti__country-list{
  background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-7126 .iti__country-name{
  color: #215257 !important;}
}	
@media only screen and (max-width: 768px) {
  .page-id-7126 .iti__dial-code{
  color: #BFBFBF !important;}
}	

/* Forminator tel-test - phone list formatting override for mobiles */
#forminator-module-6131 .intl-tel-input .country-list { 
	background-color: #FFF !important;
	}

#forminator-module-6131 .intl-tel-input .country-list .country-name {
    color: #215257 !important;
}

#forminator-module-6131 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}

/* V1.5.12 field name updates */	
#forminator-module-6131 .iti__country-list{
    	background-color: #FFF !important;
	}
#forminator-module-6131 .iti__country-name{
    	color: #215257 !important;
	}	
#forminator-module-6131 .iti__dial-code{
    	color: #BFBFBF !important;
}

@media only screen and (max-width: 768px) {
  .page-id-6132 .intl-tel-input .country-list{
		background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6132 .intl-tel-input .country-list .country-name{
		color: #215257 !important;}
}
@media only screen and (max-width: 768px) {
	.page-id-6132 .intl-tel-input .country-list .country .dial-code {
    color: #BFBFBF !important;
}
}

/* V1.5.12 field name updates */
@media only screen and (max-width: 768px) {
  .page-id-6132 .iti__country-list{
  background-color: #FFF !important;}
}
@media only screen and (max-width: 768px) {
  .page-id-6132 .iti__country-name{
  color: #215257 !important;}
}	
@media only screen and (max-width: 768px) {
  .page-id-6132 .iti__dial-code{
  color: #BFBFBF !important;}
}

Hi @thiruc

It looks fine to me and the phone field – unless I’m missing something – looks fine on both yours and mine site (on mine I just tried to quickly replicate similar form so it might have slightly different configuration).

I think it’s okay but if you notice some issues again, please don’t hesitate to re-open this ticket and we’ll be happy to continue working with you.

Best regards,
Adam