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

  • Profile Image
    raledo
    Asked on January 16, 2017 at 09:29 AM

    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

  • Profile Image
    KadeJM
    Answered on January 16, 2017 at 11:00 AM

    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.

  • Profile Image
    KadeJM
    Answered on January 16, 2017 at 11:10 AM

    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: