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

    RTL layout when shrinking fields

    Asked by yuno89 on October 11, 2015 at 05:18 AM

    Iv'e added those suggested lines of CSS code to make my form direction RTL (right-to-left). It seems to work, but if I want my fields to be "shrinked" (I mean two fields in the same row), the whole row\cell aligned left instead of aligning right (See screenshot)

    How do I make it align to th right? 

    rtl left to right shrink fields
  • Profile Image

    Answered by yuno89 on October 11, 2015 at 12:08 PM

    bouncing

  • Profile Image
    JotForm Support

    Answered by jonathan on October 11, 2015 at 08:02 PM

    In your jotform http://www.jotform.com/52832434074453

    Please try this CSS code 

     

    .form-all {

        text-align : right;

        direction : rtl !important;

        unicode-bidi : bidi-override !important;

    }

     

    .form-line-column,

    .form-label-right,

    .form-radio-item {

        float : right;

    }

     

    .form-input {

        -moz-border-radius : 5px 0 0 5px;

        -webkit-border-radius : 5px 0 0 5px;

        border-radius : 5px 0 0 5px;

    }

     

    this is my clone version https://form.jotform.com/52837640293965?

    Hope this help. Let us know if you need further assistance.

     

  • Profile Image

    Answered by yuno89 on October 12, 2015 at 05:28 AM

    Thank you very much!

    The only thing is that the label text have gone left and I need it right as before

  • Profile Image

    Answered by yuno89 on October 12, 2015 at 08:14 AM

    Hi sorry, another thing, number fields only (e.g phone number fields) should stay LTR Left-to-Right 

    SHOULD BE

     

     

    BTW Suggestion - maybe you can make it that a form can be auto-configured RTL correctly when a user pick up a RTL language (such as Hebrew, Arabic...) so there won't be issues anymore. It will be great feature though

  • Profile Image

    Answered by Ben on October 12, 2015 at 11:24 AM

    I took a look at this form: http://www.jotform.com/52832434074453

    Now in regards to what you have asked, I have added the entire CSS code that would make your form into RTL available here: https://pastebin.com/fz7Y36h7

    It does not matter what is the form, all that you should do is to copy paste it from that paste bin to your form.

    It will also fix the issue with the label alignment and the phone field - It will move the top aligned label to the right side of the field, while left and right alignments will still work as they were previously.

    I have also made the same changes for the time and date time fields so that they are left to right as well.

    Of course, you can see the segments have been commented through so it is easy to simply remove the section that you are not interested into and add it without it to your form.

    You can add it to your form by following the steps here: Inject Custom CSS Codes

  • Profile Image

    Answered by yuno89 on October 15, 2015 at 09:09 AM

    Hi

    Unfortunately, the RTL issue is not seems to be fully resolved. Look what happens when I try putting the labels right to the fields. Look at the phone field. https://form.jotform.me/52845766176468

     

    Also there is difference between mobile and desktop vies of this forms.

     

    Hope you can help.

  • Profile Image
    JotForm Support

    Answered by Boris on October 15, 2015 at 12:18 PM

    I have opened the form you have linked to, and since I do not understand Arabian, I believe that this may be the issue you are describing:

    If you want that label's text to be on the right, you will have to add the full code that my colleague had provided, including this part:

    /* Set the top aligned label to be on the right part of the field instead of the TL */
    .form-label-top {
        text-align: right;
    }

    When it comes to differences between the mobile and desktop view, that is often the case with forms that are fairly customized. We can provide you with mobile responsive code that will make it look better on mobile phones.

    It looks like there have been some manual changes done to the default CSS codes on your form. I have re-saved the cloned version of your form in the Designer (Setup & Embed > Designer), in order to restore the default styling. After that, I have added this code to the bottom of the Custom CSS:

    @media only screen and (max-width:532px) {
      .form-label {
        width: 100% !important;
        display: block !important;
        float: none !important;
      }
      .form-line {
        width: 100%;
      }
    }
    @media only screen and (min-width:533px) and (max-width:682px) {
      .form-label {
        width: 100% !important;
        display: block !important;
        float: none !important;
      }
      .form-line {
        width: 50%;
      }
    }

    Here is a cloned version of your form with default styles restored, and after that all the recommended CSS codes applied to it:

    https://form.jotformpro.com/52874460745968

    It is made fully mobile responsive, please check it out at various screen sizes to see if that is what you intended to achieve. You can clone it back to your own account by following this guide: How to Clone an Existing Form from a URL.

    Please let us know how it goes.

  • Profile Image

    Answered by yuno89 on October 19, 2015 at 01:28 PM

    Hello Boris, thanks so much for your detailed answer!

    The fields go one on another, look:

     

    Same for your cloned version. 

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 19, 2015 at 03:08 PM

    Append this CSS codes.

    .form-line-column {width: 50%;}

    .form-buttons-wrapper {text-align: right !important;}

    [data-type="control_phone"] .form-input-wide{max-width:100%;}

    It should look like this afterwards https://form.jotform.com/52916209958972

    Labels - Top Aligned:

    Labels - Right Aligned:

     

  • Profile Image

    Answered by yuno89 on October 19, 2015 at 04:48 PM

    Thank you, now I want the submit button to align left and something interrupting it, Oh I'm so sorry it never ends.. :/ hope it's the last issue

    Thank you so much for your support.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 20, 2015 at 12:41 AM

    I've made a small change on your form https://form.jotform.me/52916287625464?. I think it's the quickest way. You can now align it using the button align option in the form builder.

    I have removed the previous CSS codes injected on your form that make it stick to the right. These are the codes I removed for your reference. 

    .form-buttons-wrapper {

    margin-left: 0 !important;

    text-align: left !important;

    }

    .form-buttons-wrapper {

    text-align: right !important;

    }