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

    Is there a way to have the flags show side by side?

    Asked by Becki on November 24, 2016 at 11:06 PM

    Is there a way to have the flags show side by side, instead of in a drop down menu? Thank you!



    This is a re-post of a comment on How to Make your Forms Multilingual

    flags side by side side thank
  • Profile Image
    JotForm Support

    Answered by BJoanna on November 24, 2016 at 11:41 PM

    Do you want to achieve something like this? 

    This is possible to achieve whit CSS. Inside of my demo form I have added this CSS code:

    ol.lang-list, ul.lang-list {

        visibility: visible!important;

        display: block!important;

    }

    li.es {

        position: relative!important;

        left: 120px;

        top: -32px;

    }

    li.zh {

        position: relative;

        left: 240px;

        top: -64px;

    }

    li.tr {

        position: relative;

        left: 360px;

        top: -96px;

    }

    ul#langList {

        box-shadow: none;

    }

    .lang-list {

        -webkit-box-shadow: none!important;

        box-shadow: none!important;

        -moz-box-shadow: none!important;

    }

    How to Inject Custom CSS Codes

     

    Here is my demo form: https://form.jotform.com/63288398441972 

    Feel free to clone it

    If you want to do the same on your form, please provide us ID of you form.

     

    Let us know if you need further assistance.

  • Profile Image

    Answered by paikofflaw on November 27, 2016 at 05:53 PM

    Thank you very much!  That works, and is similar to what I want.  But I'd rather not have the original box with the arrow pointing down, but rather have just English and Russian boxes, and then the one that is selected is highlighted, like this:  

  • Profile Image
    JotForm Support

    Answered by Nik_C on November 27, 2016 at 06:33 PM

    Please insert the below CSS in your Custom CSS field in order to remove the arrow:

    .language-dd:before {

    content: none!important;

    }

    Regarding the red border around it, I wasn't able to change the color of it on focus. If I find the way to do that I'll get back to you.

    Thank you!

  • Profile Image

    Answered by paikofflaw on November 27, 2016 at 07:06 PM

    Thank you so much!  I greatly appreciate your help, and for getting back to me so quickly!  :-) 

  • Profile Image
    JotForm Support

    Answered by Nik_C on November 29, 2016 at 03:31 PM

    I'm sorry it took this long, but I had a hard time to make language field be focused on click, the farthest I could get is to make that field change color on click:

    If that could work for you this is the CSS:

    .language-dd:active { 

        outline: none !important;

        background-color: red!important;   

    }

    If you have any additional questions please let us know.

    Thank you!