What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.

  • Profile Image

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

    Asked by raledo on January 16, 2017 at 09:29 AM



    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?




  • Profile Image

    Answered by KadeJM 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

    Answered by KadeJM 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: