Si tienes una larga lista de productos, puedes minimizar su extensión habilitando columnas, además de agregar categorías de productos. A continuación te mostramos los métodos, que dependen del tema del formulario que estés utilizando.
Configurar dos columnas con diseño de lista de productos
Al usar el nuevo tema predeterminado, encontrarás el diseño de lista de productos en la configuración de lista de productos. Te permitirá cambiar el diseño de una a dos o tres columnas. Así es cómo puedes hacerlo:
- En el Constructor de Formularios, haz clic en el icono de Configuración de Pago del Elemento de Pago.
- Haz clic en el botón Continuar en la parte inferior del panel derecho.
Nota
Al utilizar el elemento de Lista de Productos, verás el icono de Lista de Productos en lugar del icono de Configuración de Pago. Al hacer clic en el icono de Lista de Productos, se abrirá automáticamente el panel de Configuración de Pago sin necesidad de pulsar un botón.
- Haz clic en el icono de Configuración para acceder al diseño de lista de productos y otras opciones.
- En diseño de lista de productos, elige Dos o Tres columnas. Verás automáticamente las columnas al seleccionar la opción.
Configurar dos columnas con código CSS personalizado
Algunos de los temas antiguos pueden no soportar esta función, pero no te preocupes, ya que puedes usar el siguiente código CSS si este es el caso de tu formulario. Estiliza el campo de pago de una sola columna en una formación de dos columnas inyectando los siguientes códigos CSS personalizados en el formulario de pago.
.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;
}Para inyectar, sigue los pasos de esta guía: Cómo inyectar códigos CSS personalizados.
Consulta este formulario demo: https://www.jotform.com/212403280219950 para ver un resultado.
Enviar Comentario: