This documentation page is for Quform version 1 and may not be applicable for Quform 2 click here to visit the documentation for Quform 2.
With some extra CSS, you can make the form layout work with RTL languages. We are planning to add out-of-the-box RTL support in a future version of the plugin, for now you need to add the CSS styles manually. Quform also supports UTF-8 encoding which is compatible with most RTL languages. Add the following CSS to the page with the form (see this page for help adding custom CSS).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <style> .iphorm-group-row > .iphorm-element-wrap, .iphorm-group-row > .iphorm-group-wrap, .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap, .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-wrap, .iphorm-errors-list > .iphorm-error, .iphorm-input-wrap-date-select-wrap, .iphorm-datepicker-icon, .ifb-captcha-image-inner, .iphorm-swfupload-browse, .iphorm-labels-left > .iphorm-element-spacer > label, .iphorm-options-inline > .iphorm-input-checkbox-li, .iphorm-options-inline > .iphorm-input-radio-li, .iphorm-upload-queue-file, .iphorm-group-wrap .iphorm-group-row > .iphorm-group-style-bordered.iphorm-group-wrap { float: right; } .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap .iphorm-element-spacer { padding: 0 0 10px 10px; } .iphorm-options-inline > .iphorm-input-checkbox-li, .iphorm-options-inline > .iphorm-input-radio-li { padding-left: 15px; padding-right: 0; } .iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap > .iphorm-group-elements { margin-right: 0; margin-left: 10px; } .iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap.last-child { margin-right: 0; margin-left: -10px; } .qtip { direction: rtl; } .qtip-content { text-align: right; } .iphorm-upload-queue-filename:after { content: "\200E" } @media only screen and (max-width: 767px) { .iphorm-responsive .iphorm-element-spacer { padding-left: 0 !important; } } </style> |
<style>
.iphorm-group-row > .iphorm-element-wrap, .iphorm-group-row > .iphorm-group-wrap,
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap, .iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-wrap, .iphorm-errors-list > .iphorm-error, .iphorm-input-wrap-date-select-wrap, .iphorm-datepicker-icon, .ifb-captcha-image-inner, .iphorm-swfupload-browse, .iphorm-labels-left > .iphorm-element-spacer > label, .iphorm-options-inline > .iphorm-input-checkbox-li, .iphorm-options-inline > .iphorm-input-radio-li, .iphorm-upload-queue-file, .iphorm-group-wrap .iphorm-group-row > .iphorm-group-style-bordered.iphorm-group-wrap {
float: right;
}
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap .iphorm-element-spacer {
padding: 0 0 10px 10px;
}
.iphorm-options-inline > .iphorm-input-checkbox-li, .iphorm-options-inline > .iphorm-input-radio-li {
padding-left: 15px;
padding-right: 0;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap > .iphorm-group-elements {
margin-right: 0;
margin-left: 10px;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap.last-child {
margin-right: 0;
margin-left: -10px;
}
.qtip {
direction: rtl;
}
.qtip-content {
text-align: right;
}
.iphorm-upload-queue-filename:after {
content: "\200E"
}
@media only screen and (max-width: 767px) {
.iphorm-responsive .iphorm-element-spacer {
padding-left: 0 !important;
}
}
</style>Note: this will also make the “Left” Label placement option become right aligned.