Wie man ein Zahlungsformular in Spalten einfügt

Wenn Sie eine lange Liste von Produktartikeln haben, können Sie deren Länge minimieren, indem Sie neben dem Hinzufügen von Produktkategorien auch Spalten aktivieren. Wir haben die unten stehenden Methoden, die von dem von Ihnen verwendeten Formular-Theme abhängen.

Einrichten von zwei Spalten mit Produktlisten-Layout

Wenn Sie das neue Standard-Theme verwenden, finden Sie das Produktlisten-Layout in den Einstellungen der Produktliste. Dort können Sie das Layout von einer auf zwei oder drei Spalten ändern. So geht’s:

1. Klicken Sie im Formular-Generator auf das Zahlungseigenschaften-Symbol des Zahlungselements.
2. Klicken Sie auf die Schaltfläche Weiter am unteren Rand des rechten Panels.

3. Klicken Sie auf das Einstellungen-Symbol, um auf das Layout der Produktliste und andere Optionen zuzugreifen.

4. Unter Produktlisten-Layout wählen Sie zwei oder drei Spalten. Sobald Sie die Option auswählen, werden die Spalten automatisch angezeigt.

Einrichten von zwei Spalten mit benutzerdefiniertem CSS-Code

Einige der alten Themes unterstützen diese Funktion möglicherweise nicht, aber keine Sorge, denn Sie können den folgenden CSS-Code verwenden, falls dies bei Ihrem Formular der Fall ist. Verwandeln Sie das standardmäßige einspaltige Zahlungsfeld in eine zweispaltige Anordnung, indem Sie die folgenden benutzerdefinierten CSS-Codes in das Zahlungsformular einfügen.

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

Um den Code einzufügen, befolgen Sie bitte die Schritte aus diesem Leitfaden: Anleitung zum Einfügen von benutzerdefiniertem CSS-Code.

Schauen Sie sich dieses Demobeispiel an: https://www.jotform.com/212403280219950, um das Ergebnis zu sehen.