Contact Phone Number – International Phone List Selector

Hi @thiruc,

I believe you tried adding the custom CSS under the Appearance tab of the form. Can you please try adding the same at WP Dashboard >> Appearance >> Customize >> Additional CSS?

I hope that helps.

Kind Regards,
Nebu John

Hi Nebu John,

Thanks, this did get honoured on mobile too though it seems a little limiting.
It means that all my forms have to have the same styling if it is added to
WP –> Additional CSS.
Is that correct?

In fact I build forms in at least Classic and Modern styles to suit the user / page within my site.
Is there any other possible solution whereby I can align the phone list to the form style rather than globally to all forms within the site?

Thanks for any further suggestions.

Thiru

Hi @thiruc

though it seems a little limiting.
It means that all my forms have to have the same styling if it is added to
WP –> Additional CSS.
Is that correct?

No, forms don’t have to use the same styling in such case. All you need is an additional selector in your custom CSS.

For example, custom css that you share in your initial post here starts with this:

.intl-tel-input .country-list

These are just CSS classes that identify the field to apply style rule to. But you can change it to address only specific form by changing it to

#forminator-module-123 .intl-tel-input .country-list

The “#forminator-module-123” part is the css ID specific to the specific form and if you use it like that, these CSS rules will be applied only to the specific form.

The number (123 in my example) in ID is the ID of the form. It’s the same ID as the one in form shortcode that Forminator gives you for the form.

Best regards,
Adam

Hi Adam,

Thanks for this, but when I entered the following in Additional CSS in WP Customisation, I ended up with the same White on White issue on mobile.
Not sure if I did anything wrong, so am pasting in the CSS I added.

‘/* Forminator – Modern phone list formatting override for mobiles */
#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 for mobiles */
#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;
}’

Any advise is appreciated.

Thanks,

Thiru

Hi @thiruc,

I checked the mentioned page, and I could notice the colour defined in the above CSS is what’s getting applied when I check the page via mobile and on desktop.

Screenshot at 17:23:01.png

so, I’m afraid I’m not sure whether I fully understand where exactly you notice the issue when you mention White on White.

Could you please share a screenshot regarding this, so that we could have a better idea for which exact section you are looking to make it work?

Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin / team,

In fact I expect that you got the behaviour in the previous message as the page is live and I needed it to be legible so had tested to the same.
However, if you try this page in Chrome in standard and the phone emulation, you will see that the CSS directives are there for white background and green/grey text – as this is inserted to my WP – Additional CSS:

/* Forminator Classic - phone list formatting override for mobiles */
#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;
}

I have created a simple test page (https://fiigure.co/en/tel-test/) on my site (with form id is 6131) with the following:

Forminator Appearance Custmo CSS:

body { font-family: Lato; font-weight: 400; font-size: 16px; line-height: 1.6; color: blue; !important }

.intl-tel-input .country-list { background-color: #fff !important;}

.intl-tel-input .country-list .country-name {
    color: #215257 !important;
}
.intl-tel-input .country-list .country .dial-code {
    color: blue !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;
}

Though on emulators, including phone render on Chrome this looks to work, on my real test devices, it is not rendering to the directive, rather falling back to the defaults, therefore I have had to declare these without the module prefix in the additional CSS to support my live forms so that they are legible on mobile as else it was being ignored on mobile when just using the ‘#forminator-module-xxxx’ form-id for each to try to achieve the desired outcome.

Let me know if you can find any reason or other suggested workaround.
I obviously cannot remove the original directives as I have pages live that need to be legible.

Thanks,

Thiru

Hi @thiruc

Can you please replace the ID from

#forminator-module-6131 to #forminator-custom-form-6131?

The issue is on mobile it is not getting the correct custom CSS and load the wrong one only:

https://monosnap.com/file/m3FTpO4b6LgAS4orzfzeXDW4z3xf0R

Let us know the result you got.
Best Regards
Patrick Freitas

Hi @thiruc

Please, ignore my latest reply, the forminator-custom-form-6131 is a class, not an ID.

However, after some extra tests, I found why this is happening.

The issue is related to the Library that uses, it doesn’t create the select element inside the form on the real mobile from what I see in the source code, so the selector never reaches any element on the real mobile.

#forminator-module-6131 .intl-tel-input .country-list

https://monosnap.com/file/i0azUQn9PKZzC8e8yQfXxPCgos3fzW

To trigger a specific page you can use the media query plus

.page-id-ID .intl-tel-input .country-list

For example for your test page:

@media only screen and (max-width: 768px) {
  .page-id-6132 .intl-tel-input .country-list{ }
}

Let us know if that worked for you now.

Best Regards
Patrick Freitas

Hi Patrick,

Thanks for looking into this over the weekend too. ??
I have tried the suggestion, though not sure why your above example states page-id-6132, as my form id was 6131 and is not related to the page-id.

I ended with this code, both combined and ultimately like below; though it had no effect on the mobile rendering.

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

I therefore also tried the following – (this one I rolled back now as it also did not work)

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

Any further thoughts?

Thanks,

Thiru

Hi @thiruc,

On the example page provided https://fiigure.co/en/tel-test/, if you inspect the source code, you will see this page has a body class of .page-id-6132 which is not related to the actual Forminator ID as they are different. See here: https://snipboard.io/p5eISz.jpg

Since page-id is used to only target the form on this page, could you try as Patrick suggested and add the code with the media query for this form?

Best,
Jonathan S

Hi guys,

Thank you. I had got myself very confused with the similar ID’s.
I now have it working thanks to your great input and guidance.

So for record and reference if others encounter the same, the solution involves two blocks of custom CSS in the WP –> Customizer –> Additional CSS.

One for the form itself on normal page rendering
One for mobiles (media only screen viewport).

The code I have used is below to share for others if needed.

Standard Page – using Forminator Form ID:

/* Forminator Classic - phone list formatting override */
#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;
}

Mobile Page – phone list formatting

/* Forminator - Phone List Override for Mobile only
 * */
@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;
}
}

Thanks again guys and hope the snipets above help others if they meet the same challenge.

BR,
Thiru