Make the form fields display right to left

hey, i added the code for the right to left setting, but i still see my page on the left side. Can you help me please?
https://form.jotform.com/241832189557062

Hi Maya,

Thanks for reaching out to Jotform Support. Unfortunately, I can't access the form you've sent due to Password Protection. Removing the password from your form is easy. Let me show you how:

1. In Form Builder, in the orange navigation bar at the top of the screen, click on Settings.
2. Click on the button Show More Options

3. Scroll down and look for Password Protection option, then disable the Password protection by keeping it unchecked.

Also, if you can take a screenshot of what’s happening and send it to us, it will help us to better understand what you want to do with your form. We’ve got a guide here that’ll show you how to do that.

After we hear back from you, we’ll have a better idea of what’s going on and how to help.

Thanks, the password is 0544
Would appreciate your help

Hi Maya,

If I understand your concern correctly, do you want to move field labels to the right side of the page? If so, you can add this CSS code to your form:

.form-sub-label {

direction:rtl;

unicode-bidi:bidi-override;

}

.form-label.form-label-auto {

float: right !important;

text-align: right;

}

.form-sub-label {

  float : right;

}

Let me show you how to inject this code into your form:

• In Form Builder, click on the paint roller icon.
• Under the Styles tab, scroll down to the Inject Custom CSS section.
• Paste the code.

We also have a guide about How to Inject Custom CSS Codes that you can check out.

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

Yeah, thanks! As you can see, it doesn't really change the form, just moves a few labels to the right - the form is still on the wrong side of the page.

Hi Maya,

Unfortunately, I couldn't see the screenshot you shared on my end. Can you try to send it again? We’ve got a guide here that’ll show you how to do that.

Once we hear back from you, we'll be able to move forward with a solution.

IT doesn't move the fields, just the labels. See the form after the code inserted

Hi Maya,

Can you try the following CSS Code instead?

.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;

}

.form-line-column .form-label {

    text-align: right !important;

}

Here's the expected result:

Let us know if you need any more help.