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

    Correcting the RTL layout of the fields

    Asked by yedidya on January 20, 2017 at 08:23 PM

    Hello. 

    It's going to be a long... because I'm finished building the form, but so that I could show it to customers - I up here all the problems that still exist and I have not found a solution for them.

    I divided the message into 3 parts:

    Part 1: General issues that happened to me in the form.

    Part 2: problems related to a mobile responsive.

    Part 3: Problems related to writing from right to left (like Hebrew).

     

    Part 1: General issues that happened to me in the form.

     

    1. Field "Phone":

    When I think about it, even in English, the field does not show well - because the area code should be on the left side of the Phone number and not the right.

    Am I right?

    טלפון1.png

     

    2. Field “Time"

    As I wrote about the phone in section 1, the same is true for the field "Time".

    שעה.png

     

    3. And “Date”:

    תאריך1.png



     



     






     

     

     

     

    Thank you very much!!

    Page URL:
    https://form.jotform.me/70163936438461

  • Profile Image
    JotForm Support

    Answered by Welvin on January 21, 2017 at 06:44 AM

    I am now checking this for you, but I have moved the other issues to a separate thread. 

    For the phone and time fields: https://www.jotform.com/answers/1041845.

    For the image radio buttons: https://www.jotform.com/answers/1041848.

    For the page break: https://www.jotform.com/answers/1041849.

    For the dynamic dropdown widget: https://www.jotform.com/answers/1041850

     

    We have to separate the issues so we can address them properly and for you and us to follow up easily. 

  • Profile Image
    JotForm Support

    Answered by Welvin on January 21, 2017 at 07:06 AM

    Inject the following custom CSS codes to your form, this is for the desktop view:

    For the Phone field:

    [data-type="control_phone"] .form-sub-label-container {

        float: left;

    }

    .phone-separate {

        display: none;

    }

    [data-type="control_time"] .form-sub-label-container {

        float: left;

    }

     

    For the DateTime field:

    .date-separate {

        float: right;

        margin-left: 5px;

    }

    [data-type="control_time"] #sublabel_hour {

        display: block;

        position: relative;

        left: -15px;

    }

    [data-type="control_time"] #sublabel_hourRange {

        display: block;

        position: relative;

        left: -15px;

    }

     

    The result should be like this: 

     

    Here's how to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

  • Profile Image

    Answered by yedidya on January 21, 2017 at 01:31 PM

    Thanks, really helped me code to a phone, and for hours.

     

    The problem remained only in the date. Screenshot attached.

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 21, 2017 at 03:01 PM

    Please try adding this CSS to your Custom CSS field:

    #label_137{

    float : right;

    direction : rtl !important;

    }

    That will adjust the date field properly.

    If you have any additional questions please let us know.

    Thank you!

  • Profile Image

    Answered by yedidya on January 21, 2017 at 03:31 PM

    It did not help anything ...

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 21, 2017 at 03:51 PM

    This is how it showed for me after injecting the above CSS:

     

    Also you can add this line in the above block:

    #label_137{

    float : right;

    direction : rtl !important;

    unicode-bidi : bidi-override !important;

    }

    So the whole block should look like this:

    Is that what you had in mind?

    Please let us know.

  • Profile Image

    Answered by yedidya on January 21, 2017 at 04:08 PM

    No.

     

    The date and time is not well arranged on the screen.

     

    It should be as: hours: minute  ,   day / month / year 

    OR: day / month / year  , hours: minute   

     

    Not like now: minute hours :  ,   Year  Month / Day /

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 21, 2017 at 08:57 PM

    Inject this CSS code to your form.

    div#cid_93 {

        direction: ltr !important;

    }

    Should look like this afterward:

    If you want to apply it on all the date fields, use this:

    [data-type="control_datetime"] {

        direction: ltr !important;

    }

    Hope this helps!

  • Profile Image

    Answered by yedidya on January 21, 2017 at 09:50 PM

    Thank you. Helped me a lot in all this!