Comment utiliser un agencement horizontal pour les formulaires ?

Les thèmes de Webmecanik Automation vous permettent de personnaliser l'affichage des formulaires. Si ceux-ci sont généralement disposé verticalement, un thème particulier permet de disposer les éléments horizontalement.

Tout d’abord, téléchargez le thème horizontal :

>> Télécharger le Thème Horizontal <<

Installer le thème horizontal dans Automation :

• Pour cela cliquez sur la roue cranté accessible à droite de n’importe quelle page d’Automation.

• Sélectionnez “Thèmes”, puis choisissez votre fichier et chargez-le, cliquez sur “Installer” pour terminer la procédure.

• Le formulaire horizontal présente 2 agencements différents comme montré ci-dessous :

Note : Si vous utilisez des cases à cocher ou des boutons radios, vous aurez 3 colonnes par défaut.

Utiliser le thème horizontal dans Automation :  

• Editez le formulaire dans Automation et sélectionnez le thème “Horizontal Form”

• Une fois le thème sélectionné, vous pouvez éditer chaque champ pour changer l’arrangement. Pour ce faire, copiez le code suivant dans le champ “Attributs de conteneur de champs” (“Field Container Attributes” en anglais)

class="mauticform-column-half"

• Appuyez sur “Ajouter” / “Mettre à jour”, cela va ressembler à ça :

• Si vous voulez 3 colonnes, utilisez plutôt :

class="mauticform-column-third"

• Si vous n’avez qu’une colonne mais que vous voulez qu’elle ne prenne que la moitié de la largeur utilisez :

class="mauticform-column-half-last"

      Et insérez dans la case “Attributs d’entrée” la valeur :

style="width:50%;"

• Vous obtenez ces paramètres :

• Vous pouvez aussi régler la taille au tier avec ce code :

style="width:32%;"

• Enfin vous pouvez mélanger différentes tailles de colonnes pour chaque éléments pour varier l'agencement comme cela :