Wie Sie Ihre Formulare auf eine Rechts-nach-Links-Ausrichtung ausrichten

Arabisch, Hebräisch, Paschtu, Persisch, Urdu und Sindhi sind gängige Sprachen, die von rechts nach links geschrieben werden (RTL). Wenn das Skript Ihres Formulars in der RTL-Richtung sein muss, können Sie CSS verwenden.

So richten Sie Ihr Formular in der RTL-Richtung aus

1. Wählen Sie im Formular-Generator das Symbol für den Farbroller in der oberen rechten Ecke.
2. Gehen Sie im rechten Fensterbereich oben auf Stile.
3. Scrollen Sie nach unten zu Eigenes CSS einfügen.

4. Fügen Sie den folgenden Code in den CSS-Editor ein:

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

View your form in Preview or Live mode to see the changes.

Hier sehen Sie ein Demo-Formular, um zu sehen, wie es aussieht.