Move from writing from left to right.

Hi,

I need to change all the text from left to right (also the options)

I would love the CSS code

Hi administrator515,

Thanks for reaching out to Jotform Support. I've checked your account and I don't see the form that you're referring to on your screenshot. Can you share the form link so that we can assist you with your CSS code request?

Once we hear back from you, we'll be able to help you with this.

https://www.jotform.com/build/242583660555462

Hi administrator515,

When I checked your form, you have already made the choices from left to right. You can also align the sub-label text by injecting CSS code. Let me show how to do it:

1. First, copy this code:

/* General RTL Direction */

.form-sub-label, .form-all, .form-header, .form-subHeader, .form-textarea, .form-textbox {

  direction: rtl;

  text-align: right !important;

}



.form-line-column, .form-label-right, .form-radio-item {

  float: right;

}



.form-label.form-label-auto {

  display: inline-block;

  float: left;

  text-align: right;

}



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

}



/* Override RTL for Text and Checkboxes */

.form-checkbox-item, .form-checkbox-item label, .form-radio-item, .form-radio-item label, .form-textarea, .form-textbox, .form-label {

  direction: ltr; /* Set text direction to LTR */

  text-align: left; /* Align text to the left */

}



.form-checkbox-item label, .form-radio-item label {

  float: left; /* Ensure labels float to the left */

}



.form-checkbox-item label:before, .form-radio-item label:before {

  right: auto; /* Reset right positioning */

  left: 0; /* Position the icon to the left */

}



.form-checkbox-item label:after, .form-radio-item label:after {

  right: auto; /* Reset right positioning */

  left: 20px; /* Space between icon and label text */

}

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

3. Under the Styles tab, scroll down the menu and delete all the code.

4. Paste your code into the Inject Custom CSS field. That's it.

You can check out the screenshot below to see my results:

Give it a try and let us know if you need any help.