Making your form arabic aligned

I am doing currently an Arabic version of the English for I have created already, however I am finding it difficult to align the text and questions properly as in Arabic writing style is from Right to Left, therefore the question should be on the right and the choices/selection shall be on the left. Is there anyway to do it in Jotforms?

To fix the alignment issue with your form you need to do a CSS injection. You can easily do this by following these steps:

1) Click to your form designer.

2) Click on CSS Tab

3) Paste this code into the text box:

.form-all {
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}

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

} 

This should make all of your fields align to right, but you need to change the alignment of labels and headers manually to the right.

Headers:

Labels:

If you have any more questions feel free to ask.

Thank you for your quick reply,

the questions have been aligned right, however the selection/alternatives still and if you go the mobile view it comes all messed up. Have I missed anything

Can you try using this custom CSS code.

.form-label{
   direction: rtl;
float: right
}

.form-all {
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}

@media (max-width: 480px){
 
.form-label{
   direction: rtl;
float: right
}

.form-all {
text-align: right;
direction: rtl !important;
unicode-bidi: bidi-override !important;
}

}

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

Appreciate your answers, still it is not working.

I am attaching a picture of how it looks now with CSS Code embedded and a picture of what I wish it to look like

Hello, Please check screencast below:

If alignment looks correct, please add this code to your form: 

.form-all {

text-align: right;

direction: rtl !important;

unicode-bidi: bidi-override !important;

}

.form-line-column,

.form-label-right, .form-label-top, .form-label-left,

.form-radio-item {

float:right;

text-align: right;

}

.form-header {

  text-align: right;

}

.form-all .form-label-top, 

.form-all .form-label-left, 

.form-all .form-label-right {

float: right;

text-align: right;

width:100% !important;

}

Let us know if you need more help. 

Thank you so much, yes it is aligned and it worked perfectly. Thank you Marvin, Richie_P and Victoria_K.