RTL form

Can you please help me RTL the Arabic version only?

Hi ADD,

Thanks for reaching out to Jotform Support. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

To make your form display in Right-to-Left (RTL) direction for the Arabic version only, you can use custom CSS in the Form Designer. Here’s how to do it:

1. Open your form in the Form Builder.
2. Click on the roller paint icon in the upper-right corner to open the Form Designer.
3. Go to the Styles tab at the top.
4. Scroll down to Inject Custom CSS and enter the following CSS code:

.form-all, .form-header, .form-subHeader, .form-textarea, .form-textbox {direction: rtl;text-align: right !important;}.form-checkbox-item:not(#foo) label:before, .form-radio-item:not(#foo) label:before {right: 0;margin-right: 0;float: right;}.form-radio-item:not(#foo) label:after {right: 4px;}.form-checkbox-item:not(#foo) label:after {right: 8px;}.form-checkbox-item:not(#foo) label {float: right;}.form-all .form-section .form-col-2 {width: 33.3% !important;}.form-label, label.form-label.form-label-auto, label.form-label:not(.form-label-top) {text-align: right !important;}span.phone-separate {display: none;}.form-line-error .form-error-message {right: unset !important;left: 0 !important;text-align: left;}.form-checkbox-item:not(#foo) label:after {right: 0;}.form-multiple-column, .form-single-column {width: 100%;display: inline-flex;flex-wrap: wrap;}.form-multiple-column .form-checkbox-item, .form-multiple-column .form-radio-item, .form-single-column .form-checkbox-item, .form-single-column .form-radio-item {width: 100%;}.form-checkbox+label, .form-checkbox+span, .form-radio+label, .form-radio+span {padding-right: 30px;padding-left: 0;}.form-matrix-values label.matrix-choice-label {padding-right: 20px;padding-left: 0;}.form-label:not(.form-label-top) + .form-input .form-address-line + .form-address-line, .form-sub-label-container + .form-sub-label-container {margin-right: 8px;}.form-address-line + .form-address-line {margin-left: 0;}.form-product-item .p_image .image_area {margin-left: 10px;margin-right: 10px;}

This CSS will align your form elements to the right and set the direction to RTL, which is suitable for Arabic.

After adding the CSS, preview your form to see the changes.

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

Hi ADD,

Sure, you can make your form display in Right-to-Left (RTL) direction for the Arabic version only. A couple of quick steps is all it takes:

1. First, copy this code:

.form-all:lang(ar), .form-header:lang(ar), .form-subHeader:lang(ar), .form-textarea:lang(ar), .form-textbox:lang(ar) {

direction: rtl;

text-align: right !important;

}

.form-checkbox-item:not(#foo) label:before:lang(ar), .form-radio-item:not(#foo) label:before:lang(ar) {

right: 0;

margin-right: 0;

float: right;

}

.form-radio-item:not(#foo) label:after:lang(ar) {

right: 4px;

}

.form-checkbox-item:not(#foo) label:after:lang(ar) {

right: 8px;

}

.form-checkbox-item:not(#foo) label:lang(ar) {

float: right;

}

.form-all .form-section .form-col-2:lang(ar) {

width: 33.3% !important;

}

.form-label:lang(ar), label.form-label.form-label-auto:lang(ar), label.form-label:not(.form-label-top):lang(ar) {

text-align: right !important;

}

span.phone-separate:lang(ar) {

display: none;

}

.form-line-error .form-error-message:lang(ar) {

right: unset !important;

left: 0 !important;

text-align: left;

}

.form-checkbox-item:not(#foo) label:after:lang(ar) {

right: 0;

}

.form-multiple-column:lang(ar), .form-single-column:lang(ar) {

width: 100%;

display: inline-flex;

flex-wrap: wrap;

}

.form-multiple-column .form-checkbox-item:lang(ar), .form-multiple-column .form-radio-item:lang(ar), .form-single-column .form-checkbox-item:lang(ar), .form-single-column .form-radio-item:lang(ar) {

width: 100%;

}

.form-checkbox+label:lang(ar), .form-checkbox+span:lang(ar), .form-radio+label:lang(ar), .form-radio+span:lang(ar) {

padding-right: 30px;

padding-left: 0;

}

.form-matrix-values label.matrix-choice-label:lang(ar) {

padding-right: 20px;

padding-left: 0;

}

.form-label:not(.form-label-top) + .form-input .form-address-line + .form-address-line:lang(ar), .form-sub-label-container + .form-sub-label-container:lang(ar) {

margin-right: 8px;

}

.form-address-line + .form-address-line:lang(ar) {

margin-left: 0;

}

.form-product-item .p_image .image_area:lang(ar) {

margin-left: 10px;

margin-right: 10px;

}

.form-matrix-table:lang(ar) {

direction: rtl !important;

}

2.In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Also, we’ve got a guide that’ll show you How-to-Inject-Custom-CSS-Codes.

Here you can see my screencast demonstrating the result:

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

Looks perfect, but there is an overlap in the gold slider with the arrow, is it fixable?

Hi ADD,

Here's the simple way to solve overlap issue about arrow icon.

1.Copy the following code block:

.form-collapse-mid:lang(ar){

  margin-right: 30px;

}

2.In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3.Now, in the Form Designer menu, click on the Styles tab, scroll down to line 53 and paste the code (after the line 53) into the Inject CSS Code box. That’s it. The code is automatically saved.

That's how it looks like:

Let us know if you need any more help.