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:

5. 1. 1. Negritas

      2. Cursiva

      3. Alineación

      4. Color

      5. Fuente

      6. 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:

  • 1. Negritas

    2. Cursiva

    3. Alineación

    4. Color

    5. Fuente

    6. 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:

  • 1. Negritas

    2. Cursiva

    3. Alineación

    4. Color

    5. Fuente

    6. 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.