Arabic Formatting (From L to R)

Greetings All, 

Your kind and usual support is highly appreciated to reformat/design the Arabic version of below form to be from right to left. 

https://form.jotform.com/201636142013440 

Thanks in advance and looking forward for your kind feedback.. 

Try to inject these custom CSS code to your form:

.form-sub-label {
     direction:rtl;
}
.form-all {
     direction:rtl;
}
.form-line-column,.form-label-right,.form-radio-item { 
     float:right;
}
.form-label.form-label-auto {
    text-align: right;
    direction:rtl;
}

Guide: How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.

Hi, 

Thank you for your support..

Please note that my form are dual languages (English & Arabic). By using the provided code it will impact the English version too.. 

Could you please check and advise..

Thanks,

Hello! Please allow me some time to look into this, I'll get back to you shortly with an update.

Thank you!

Hi! Thank you for your patience, please find answer to your query below.

- Please note that my form are dual languages (English & Arabic). By using the provided code it will impact the English version too.. 

To apply CSS code top only RTL languages, you can make use of the following selector:

.form-all[dir="rtl"]{/* css code here */}

As you might have noticed in the above selector, the container which consists of all the form elements gets an dir="rtl" attribute as soon as the form language is switched to an RTL language.

This means that we can define our CSS only for RTL languages using the above selector. As an example, the following CSS code will only work for RTL languages:

.form-all[dir="rtl"]{
  background-color: beige;
}
.form-all[dir="rtl"] .form-line-column,
.form-all[dir="rtl"] .form-label-right,
.form-all[dir="rtl"] .form-radio-item{
  float: right;
}
.form-all[dir="rtl"] .form-label.form-label-auto {
  text-align: right;
}

Here is a cloned version of your form that uses this code: https://form.jotform.com/201761887884976
Please feel free to test this form by switching its languages.

I hope this helps. If you need further assistance, feel free to write back to us.

Hi Patrick, 

Thanks for your great support..

I have checked the cloned form and sill there is some modification required, below screen shot might clear the idea.. 

The questions (In Arabic) should start from RTL then follow them the input fields. 

Looking forward for your valuable support..

Thanks, 

You can add this custom CSS Code to your form:

.form-all[dir="rtl"] .form-label.form-label-auto {
    float: right!important;
    position: relative;
}

Here's the demo form: https://form.jotform.com/201762784758973

Give it a try and let us know if it still not works as expected.

Hi,

Thanks a lot for your great support..

The form is good but there is small modification that I need your kind support in.. :) 

There is 2 questions are still from L2R in the Arabic version, please refer to the below snapshots.

Moreover, the English form background is white, I have used the clone form that you have shared and the Arabic version is kind of yellow, can you advise how to make the Arabic version same as the English (white).. 

Thanks & Regards, 

Please replace all of the RTL Code in your form with this:

/* RTL code */
.form-all[dir="rtl"]{
background-color: white!important;
}
.form-all[dir="rtl"] .form-line-column,
.form-all[dir="rtl"] .form-label-right,
.form-all[dir="rtl"] .form-radio-item{
float:right;
}
.form-all[dir="rtl"] .form-label.form-label-auto {
    text-align: right;
}
.form-all[dir="rtl"] .form-label.form-label-auto {
    float: right!important;
    position: relative;
}
.form-all[dir="rtl"] .form-label-top{
    text-align:right!important;
    position: relative;
}

Give it a try and let us know how it goes.

Demo form: https://form.jotform.com/201762784758973

Jherwin, 

Thanks a lot for your great support. Much appreciated!

Just a quick query, when you ask me to replace the new CSS code, can you specify where.. :) 

For the time-being, I will use the share form in your past reply.. 

I'm referring to these line of codes, please check my screencast below.

Just look for the "/* RTL code */" comment.

Anyway, since you clone my demo form, it has the updated CSS code so there is no need to update it.

Let us know if you need any further assistance. We will be happy to help.