How can I change the alignment to the right side because I'm creating an Arabic form?

  • iEyado
    Asked on July 3, 2017 at 4:31 AM

    hey, how can I change alignment to right side because I'm creating Arabic form? ... thanks 

  • AIDAN
    Replied on July 3, 2017 at 4:48 AM

    Could you please provide us with the form ID or URL so we can inspect and assist you further? Thank you in advance.

  • iEyado
    Replied on July 4, 2017 at 10:15 AM

    form URL https://form.jotform.me/71823015011440 ... I wrote in Arabic words ... Arabic words should come from the right side ( from right to left ) as this form http://www.emailmeform.com/builder/form/3dVi8Eafge .

     I hope you understand me ... thanks 

  • Kiran Support Team Lead
    Replied on July 4, 2017 at 11:58 AM

    Please inject the following CSS code to the form to display the form in Right to left mode.

    .form-sub-label {direction:rtl;unicode-bidi:bidi-override;}

    .form-all {direction:rtl;}

    .form-line-column,.form-label-right,.form-radio-item {float:right;}

    It should be displaying the form as shown in the screenshot below:

    How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 20

    Hope this information helps! 

  • iEyado
    Replied on July 5, 2017 at 3:34 AM

    thanks for your help. but it doesn't work! after applying CSS code and save then published the form it appears in a wrong way https://form.jotform.me/71823015011440 "see the second photo" 

     

    How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 30

     

     

    How can I change the alignment to the right side because Im creating an Arabic form? Image 2 Screenshot 41

  • iEyado
    Replied on July 5, 2017 at 3:35 AM

    and what about header and subheader? 

     

    thanks ... 

  • Kiran Support Team Lead
    Replied on July 5, 2017 at 4:47 AM

    I have checked your JotForm and it seems that you have removed the CSS code from the form. I have added it again to your form and see that the labels are aligned to left. The issue was caused by the label alignment on the form which was set to left. I changed it to Right now on your form and it is displaying the labels correctly.

    How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 20

    The headers are also aligned to right now on the form. Please check and let us know if you need any further assistance.

  • iEyado
    Replied on July 5, 2017 at 5:09 AM

    thanks for your quick response. unfortunately, it's displaying in wrong side .. I open the form link in explorer and firefox same results.

     

     How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 30

     

    How can I change the alignment to the right side because Im creating an Arabic form? Image 2 Screenshot 41

  • Kiran Support Team Lead
    Replied on July 5, 2017 at 5:53 AM

    Sorry about that. Though the preview is displaying the labels to the right, the actual form view is displaying them to the left. This is due to the individual form fields label alignment is not correctly. I have set them to the right side now.

    Please check now and let us know if you see any further issue.

  • iEyado
    Replied on July 5, 2017 at 6:36 AM

    it's working know. thanks 

  • iEyado
    Replied on July 5, 2017 at 7:55 AM

    dear, when I add new fields it doesn't match right side?

    https://form.jotform.me/71823015011440 

    how you did it for each field as you sid "This is due to the individual form fields label alignment is not correctly. I have set them to the right side now" ?

  • Kiran Support Team Lead
    Replied on July 5, 2017 at 11:28 AM

    Please try disabling the option Set as Form default in the field properties as shown in the screencast below:

    How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 20

    Hope this information helps! 

  • iEyado
    Replied on July 6, 2017 at 8:50 AM

    thanks it's work. but the box fields alignment on left ??

     

    How can I change the alignment to the right side because Im creating an Arabic form? Image 1 Screenshot 30

     

    How can I change the alignment to the right side because Im creating an Arabic form? Image 2 Screenshot 41

     

  • David JotForm Support
    Replied on July 6, 2017 at 11:58 AM

    Inside of the form templates gallery my colleague created one template form that you can use. 

    Inside of that form they used Custom CSS that will enable Arabic language from right to left. Custom CSS used inside of this form can also be applied to Hebrew language.

    You can find my form inside of the Form Templates gallery:

    http://www.jotform.com/form-templates/arabic-financial-application-form-rtl-css-2 

    If you use that as your base template for forms, all text and fields will be right to left. 

    For your specific form, the theme applied to the form is overwriting any change made to field positioning.  If you remove the theme or apply the default theme, your form fields will be moved to the right with the current CSS.  You can also add the following CSS after the theme is removed:

    .form-sub-label {

    direction:rtl;

    unicode-bidi:bidi-override;

    }

    .form-all {

    direction:rtl;

    }

    .form-line-column,

    .form-label-right,

    .form-radio-item {

    float:right;

    }