Comment créer un formulaire de paiement à deux colonnes

Si votre liste de produits est longue, vous pouvez la réduire en activant les colonnes, en plus d’ajouter des catégories de produits. Les méthodes sont décrites ci-dessous et dépendent du thème de formulaire utilisé.

Configurer une liste de produits à deux colonnes

Dans le nouveau thème par défaut du Générateur de formulaires Jotform, vous trouverez l’option Mise en page de la liste des produits dans les Paramètres de la liste des produits. Vous pourrez alors choisir d’afficher la liste sur une, deux ou trois colonnes. Voici comment procéder :

1. Accédez à votre formulaire dans le Générateur de formulaires Jotform, cliquez sur l’icône Paramètres de paiement dans l’élément 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 des produits et aux autres options.

4. Dans la section Mise en page de la liste de produits, choisissez l’option Deux colonnes ou Trois colonnes. Les colonnes s’afficheront automatiquement une fois l’option sélectionnée.

Configurer deux colonnes à l’aide d’un code CSS personnalisé

Certains thèmes anciens peuvent ne pas prendre en charge cette fonctionnalité. Pas d’inquiétude : vous pouvez utiliser le code CSS suivant si tel est le cas pour votre formulaire. Transformez le champ de paiement par défaut à une seule colonne en une mise en page à deux colonnes en insérant le code CSS personnalisé suivant 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 le code, veuillez suivre les étapes décrites dans notre guide Comment injecter du code CSS personnalisé.

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