Does Quform support RTL languages?

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.

Be inspired. © 2024 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy