Comment aligner vos formulaires dans le sens de droite à gauche

Dernière mise à jour : 26 juin 2026

Résumer avec :

L’arabe, l’hébreu, le pachto, le persan, l’ourdou et le sindhi sont des langues courantes qui s’écrivent de droite à gauche (RTL). Si le script de votre formulaire doit être orienté dans la direction RTL, vous pouvez utiliser du CSS.

Pour aligner votre formulaire dans la direction RTL

Dans le générateur de formulaires, sélectionnez l’icône de rouleau de peinture dans le coin supérieur droit.

Étape pour ouvrir le concepteur de formulaire dans Jotform

Dans le concepteur de formulaire, allez dans Styles en haut.
Faites défiler jusqu’à Injecter du CSS personnalisé.

Étapes pour appliquer du CSS personnalisé dans Jotform

Saisissez le code suivant dans l’éditeur CSS :

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

Remarque

Le code s’applique uniquement aux éléments de formulaire de base et à certains widgets. Si vous avez besoin d’aide pour aligner les éléments de votre formulaire qui ne sont pas couverts par le code, contactez l’assistance Jotform.

Affichez votre formulaire en mode aperçu ou en direct pour voir les modifications.

Étapes pour afficher le formulaire en direct dans Jotform

Voici un formulaire de démonstration pour voir à quoi cela ressemble.