Personalizar Formularios en Página en blanco
Personalizar diseño general de un Formulario
En una Página en blanco, el componente de "Formulario" es totalmente personalizable en estilos y colores. También puedes ordenar y posicionar los campos dentro del área que ocupa el formulario. Cada campo tiene su propia área.
Para personalizar un formulario haz clic en Editar desde tu componente o desde la sidebar.
En "Nombre del formulario" cambia el nombre del formulario para identificarlo fácilmente en nodos como "Cambiar componente", "Integraciones", etc.
Para agregar campos, haz clic en "Configurar campos del formulario" y selecciona los campos que vas a agregar.
Información general
Modifica el área del formulario en "Información general". El área del formulario es el espacio que ocupa el componente en la sección, y en el que se van a contener los campos.
Utiliza la propiedad "Ancho" para definir, en pixeles, el ancho del área del formulario.
Utiliza la propiedad "Alto" para definir, en pixeles, el alto del área del formulario.
Utiliza la propiedad "Top" para definir el número de píxeles que hay entre el tope superior de la sección, y el tope superior del área de formulario.
Utiliza la propiedad "Left" para definir el número de píxeles que hay entre el borde izquierdo de la sección, y el borde izquierdo del área del formulario.
En “zIndex”, escribe un número del 1 al 10 para determinar en qué “capa” de la página va a estar tu Formulario.
Estilos label
En "Estilos label" puedes personalizar el estilo de la etiqueta, o nombre del campo.
Desactiva la función "Mostrar label" si no quieres mostrar el nombre del campo.
Utiliza las opciones de texto para personalizar el texto de tu barra de avance:
Negritas
Cursiva
Alineación
Color
Fuente
Tamaño
Las propiedades Padding y Margen, te ayudan a posicionar el nombre del campo.
Padding: controla el espacio que hay entre el nombre del campo y el input. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Margen: controla el espacio que hay entre el nombre del campo y los bordes del área del campo. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Estilos input
En "Estilos Input" puedes personalizar el estilo del Input y placeholder de tu campo.
En "Color de fondo", selecciona un color, o ingresa un código hexadecimal de color para tu Input.
Utiliza las opciones de texto para personalizar el texto, o placeholder, del input:
Negritas
Cursiva
Alineación
Color
Fuente
Tamaño
Padding: controla el espacio que hay entre el texto del input y los bordes del input. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Margen: controla el espacio que hay entre el input y los bordes del área del campo. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Puedes agregar un borde al input, sólo tienes que activar la función "Tiene borde".
En “Color del borde” selecciona un color para tu borde
En “Ancho” determina el grosor de tu borde
En “Tipo” selecciona el estilo de tu
Solid: Para un borde continuo.
Dashed: Para un borde rayado.
Dotted: Para un borde punteado.
En "Redondez" puedes suavizar las puntas de tu input.
Estilos error
En "Estilos error" puedes personalizar el texto que le indicará al usuario final cuando hay un error en el dato que capturó.
En "Posición" puedes determinar dónde se mostrará el error en caso de haber uno, despliega la lista y selecciona una de las siguientes opciones:
Arriba a la derecha
Arriba a la izquierda
Arriba al centro
Abajo a la derecha
Abajo a la izquierda
Abajo al centro
Utiliza las opciones de texto para personalizar el texto de error:
Negritas
Cursiva
Alineación
Color
Fuente
Tamaño
Padding: controla el espacio que hay entre el texto de error y el input. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Margen: controla el espacio que hay entre el texto de error y los bordes del área del campo. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Estilos checkbox
En "Estilos checkbox" puedes cambiar el color de los checkbox para campos de tipo checkbox.
En "Color seleccionado" selecciona el color que va a tomar un checkbox cuando el usuario final lo seccione. Puedes seleccionarlo, o ingresarlo con el código hexadecimal.
En "Color no seleccionado" selecciona el color que van a tener los checkbox que el usuario final no seleccione. Puedes seleccionarlo, o ingresarlo con el código hexadecimal.
Estilos botones
En "Estilos botones" puedes personalizar el diseño de los botones, para campos que tienen botones, por ejemplo, los de Sí/No.
En "Color de fondo" selecciona el color del botón. Puedes seleccionarlo, o ingresarlo con el código hexadecimal.
En "Color del fondo seleccionado" selecciona el color que va a tomar un botón cuando el usuario final lo seleccione. Puedes seleccionarlo, o ingresarlo con el código hexadecimal
En "Color de letra en hover" selecciona el color que va a tomar el texto del botón, cuando el usuario final ponga su cursor sobre el botón. Puedes seleccionarlo, o ingresarlo con el código hexadecimal
En "Color de letra al estar seleccionado" selecciona el color que va tomar el texto del botón cuando el usuario final lo seleccione. Puedes seleccionarlo, o ingresarlo con el código hexadecimal
*Para visualizar estos ajustes realiza una vista previa.
Utiliza las opciones de texto para personalizar el texto del botón:
Negritas
Cursiva
Alineación
Color
Fuente
Tamaño
Puedes agregar bordes a los botones, sólo tienes que activar la función "Tiene borde".
En “Color del borde” selecciona un color para tu borde
En “Ancho” determina el grosor de tu borde
En “Tipo” selecciona el estilo de tu
Solid: Para un borde continuo.
Dashed: Para un borde rayado.
Dotted: Para un borde punteado.
En "Redondez" puedes suavizar las puntas de tu botón.
Padding: controla el espacio que hay entre el texto del botón y los bordes del botón. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Margen: controla el espacio que hay entre el botón y los bordes del área del campo. Este espacio se define con las propiedades, Arriba, Izquierda, Derecha, Abajo.
Personalizar diseño de campos individuales
También puedes personalizar los campos de forma individual, para ello, selecciona tu campo, haz clic en los tres puntos y selecciona el "lápiz" para editar.
Las propiedades Nombre del campo, Placeholder, Valor por defecto, funcionan igual que en cualquier formulario de Kosmos.
Utiliza la propiedad "Ancho" para definir, en pixeles, el ancho del área del campo.
Utiliza la propiedad "Alto" para definir, en pixeles, el alto del área del campo.
Utiliza la propiedad "Top" para definir el número de píxeles que hay entre el tope superior del área de formulario y el tope superior del área de campo.
Utiliza la propiedad "Left" para definir el número de píxeles que hay entre el borde izquierdo del área de formulario, y el borde izquierdo del área del campo.
Para cada campo, puedes personalziar las propiedades de
"Estilos error", "Estilos label", "Estilos input" de la misma forma que la personalización general del formulario.
Si quieres que tu campo, mantenga el estilo general del formulario, haz clic en "Utilizar estilos del formulario"
Para configurar el campo haz clic en "Opciones avanzadas" aquí podrás configurar todas las opciones de la estructura de campo como la "obligatoriedad" o la visibilidad. También podrás activar las funciones especiales como Validación con Código SMS para campos de teléfono, o validación con RENAPO para campos de CURP, en tus páginas web.
