How to Align Your Forms to a Right-to-Left Direction?

January 18, 2022

Arabic, Hebrew, Pashto, Persian, Urdu, and Sindhi are common languages that are written from right to left (RTL). If your form’s script needs to be in the RTL direction, this guide is for you.

form-builder-inject-custom-css
  1. From the Form Builder, open the Form Designer by clicking on the roller icon in the upper-right.
  2. Click on the Styles tab.
  3. Scroll down to the Inject Custom CSS section, paste the following CSS code:
.form-all,.form-header,.form-subHeader,.form-textarea {
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-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-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;
}

Preview your form or view its live version to see the changes.

quick-access-view-form

Here’s a demo form with the code above applied: https://www.jotform.com/213125369330954

The code is only applicable to basic form elements (and some widgets). If you need help aligning your form elements that are not covered by the code, let us know: Contact Us

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments:

  • Reidman College