Comment avoir un formulaire de paiement à deux colonnes

Si vous avez une longue liste d’articles de produits, vous pouvez en réduire la longueur en activant les colonnes, en plus d’ajouter des catégories de produits. Nous vous proposons les méthodes ci-dessous, qui dépendent du thème de formulaire que vous utilisez.

Configurer Deux Colonnes avec la Mise en Page de la Liste de Produits

En utilisant le nouveau thème par défaut, vous trouverez la Mise en Page de la Liste de Produits dans les Paramètres de la Liste de Produits. Cela vous permettra de changer la mise en page d’une à deux ou trois colonnes. Voici comment procéder :

1. Dans le Générateur de Formulaires, cliquez sur l’icône Paramètres de Paiement de l’Élément de Paiement.
2. Cliquez sur le bouton Continuer en bas du panneau de droite.

3. Cliquez sur l’icône Paramètres pour accéder à la Mise en Page de la Liste de Produits et à d’autres options.

“`

4. Sous Mise en Page de la Liste de Produits, choisissez Deux ou Trois Colonnes. Vous verrez automatiquement les colonnes une fois l’option choisie.

Configurer Deux Colonnes avec du Code CSS Personnalisé

Certains anciens thèmes peuvent ne pas prendre en charge cette fonctionnalité, mais ne vous inquiétez pas, car vous pouvez utiliser le code CSS suivant si c’est le cas pour votre formulaire. Transformez le champ de paiement à une seule colonne par défaut en une formation à deux colonnes en injectant les codes CSS personnalisés suivants dans le formulaire de paiement.

.form-product-item {
border: 1px solid #eee;
margin: 5px;
width: calc(50% - 20px);
vertical-align: top;
display: inline-block !important;
}
.form-product-item+br,
.form-product-container+br {
display: none;
}
.form-product-item img {
width: 100%;
margin-bottom: 10px;
}
.form-product-item>img+.form-product-item-detail {
width: calc(100% - 40px);
padding: 0 20px 10px;
}
.form-product-item-detail>.form-checkbox {
position: absolute;
top: 10px;
left: 10px;
width: 18px;
height: 20px;
}
.form-product-details {
display: block;
}

Pour injecter, veuillez suivre les étapes de ce guide : Comment Injecter des Codes CSS Personnalisés.

Consultez ce formulaire de démonstration : https://www.jotform.com/212403280219950 pour voir un résultat.