How can I style the country code widget fields onto one line?

Hi

I'd like to use CSS to style the country code widget so that the two fields (country and phone number) appear side-by-side.

Can you help me with the CSS to do that?

Thanks

Chris

I understand that you'd like to restyle the country code widget are side by side and to answer your question yes, this is certainly possible.

Here's the Demo Form:

https://form.jotform.com/70154281161952   [clone it!]

And here's the CSS Code:

#countries_phone1 { width: 190px; }

#countries_phone2 {

width: 190px !Important;

margin-bottom: 46px;

margin-left: 250px !Important;

}

Please note that you'll need to check your widget's field ID and replace the number with it to ensure that it works properly on your form.

I also meant to tell you that obtaining the Field ID's inside of widgets isn't always visible in the form field's properties tab so sometimes it's a lot easier to just open the form into a preview, right-click on the field, and copy or look for it.

Here's an example screenshot of how to do that: