Phone number, incorrect structure

Hello,

I used the code that appears in this link: https://www.jotform.com/help/how-to-align-your-forms-to-a-right-to-left-direction/

The result is that the phone number structure appears in reverse: 456-7890 (123)

Of course, even in languages ​​that write from right to left, the phone number should remain from left to right.

The same in the "Email" field, the address should be aligned to the left.

Thank you for your help.



In addition, the code that appears in this link: https://www.jotform.com/help/how-to-align-your-forms-to-a-right-to-left-direction/

Takes the text to the right side - which is excellent, but the box is moved to the left side, instead of it being to the right (below the text).

See screenshot

Hello chabadze,

Thanks for reaching out to Jotform Support. I’m sorry that you're having difficulties with this.  I checked your form and I was able to replicate the issue that some of the fields are still floating to the left of the screen. Please replace the CSS you added in your form with the below 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;

}

input#input_4_full {

  direction: ltr !important;

}

.form-pagebreak {

  direction: ltr;

}

This is how it works now :

I have made changes in the cloned form. Here is the link to the clone form. If needed, you can clone my form to check the CSS code and its placement. We also have a guide on How to Clone an Existing Form From a URL that you can check out.

Reach out again if you need any other help.