Ninja Forms Layout and Styles

Con Layout & Styles , verá aparecer opciones en el generador de formularios para cambiar el diseño del formulario.

Puede crear una columna tomando un campo y arrastrándolo hacia el lado izquierdo o derecho de su formulario.

A continuación, puede crear un espacio vacío en la fila arrastrando el campo debajo de otro campo.

• Puede agregar un campo a la misma columna que otro campo arrastrándolo debajo de ese campo.
• Puede agregar un campo a su propia fila arrastrándolo fuera de una columna y debajo de una columna de tamaño completo.
• Elimine el espacio vacío en su formulario haciendo clic en “Eliminar columna”
• Puede cambiar el tamaño de las columnas arrastrando la barra que aparece entre los campos.
• Puede cambiar el orden de las filas haciendo clic en la barra del lado izquierdo de la fila y arrastrándola a su lugar.

Agregar estilos

Ya sea que esté editando los estilos de formulario predeterminados, los estilos de campo predeterminados, los tipos de estilo de campo, los estilos de error o los estilos de campo individuales, se le presentan muchas de las mismas opciones. En este documento, espero explicar los conceptos básicos de CSS que quizás necesites saber para liberar el poder de la extensión Layout & Styles para Ninja Forms.

Propiedades CSS básicas

Si bien es posible que agreguemos más en el futuro, aquí mantenemos los elementos básicos que están disponibles para que pueda diseñar los elementos de su formulario.

Color de fondo

Esto ofrece un selector de color muy simple para marcar en un color seleccionado o escribir un valor de color HEX.

Ancho del borde

Puede aceptar de 1 a 4 valores. Compruebe los siguientes ejemplos:

• 1px: esto agregará un borde de 1 píxel en los cuatro lados.
• 1px 2px: esto agregará un borde de 1 píxel en la parte superior e inferior y un borde de 2 píxeles en los lados izquierdo y derecho
• esto 1px 2px 3px:  agregará un borde de 1 píxel en la parte superior, un borde de 2 px en los lados izquierdo y derecho y un borde de 3 píxeles en la parte inferior.
• 1px 2px 3px 4px: esto agregará un borde de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

Color del borde

Esto ofrece un selector de color muy simple para marcar en un color seleccionado o escribir un valor de color HEX.

Color de texto

Esto ofrece un selector de color muy simple para marcar en un color seleccionado o escribir un valor de color HEX.

Altura

Elija la altura de su elemento con un número entero seguido de px o%. Como en 500px o 100%.

Ancho

Elija el ancho de su elemento con un número entero seguido de px o%. Como en 500px o 100%.

Propiedades CSS avanzadas

Estos son elementos que puede que no necesite con tanta frecuencia para el usuario promedio, pero los incluimos en caso de que desee un poco más de control.

Flotador

Esto acepta izquierda, derecha o ninguna.

Tamaño de fuente

La mayoría de las veces será un número entero seguido de px o em. Como en 16px o 1 em.

Margen

Puede aceptar de 1 a 4 valores. Agrega espacios en blanco en el exterior de donde lo aplica, siempre que sea un elemento de nivel de bloque. Compruebe los siguientes ejemplos:

• esto 1px:  agregará un margen de 1 píxel en los cuatro lados.
• 1px 2px: esto agregará un margen de 1 píxel en la parte superior e inferior y un margen de 2 píxeles en la izquierda y la derecha.
•  medidas 1px 2px 3px: esto agregará un margen de 1 píxel en la parte superior, un margen de 2 px a la izquierda y a la derecha, y un margen de 3 píxeles en la parte inferior.
•  1px 2px 3px 4px: esto agregará un margen de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

Relleno

Puede aceptar de 1 a 4 valores. Agrega espacios en blanco en el interior de lo que lo aplica, siempre que sea un elemento de nivel de bloque. Compruebe los siguientes ejemplos:

• 1px: esto agregará un relleno de 1 píxel en los cuatro lados.
• 1px 2px: esto agregará un relleno de 1 píxel en la parte superior e inferior y un relleno de 2 píxeles a la izquierda y a la derecha.
• esto  1px 2px 3px:  agregará un relleno de 1 píxel en la parte superior, un relleno de 2 px a la izquierda y a la derecha, y un relleno de 3 píxeles en la parte inferior.
• 1px 2px 3px 4px: esto agregará un relleno de 1 píxel en la parte superior, 2 píxeles a la derecha, 3 píxeles en la parte inferior y 4 píxeles a la izquierda.

CSS avanzado

Esta opción es para aquellos que están bien versados ​​en CSS o no les importa experimentar. Aquí puede escribir las reglas que desee, tal como lo haría si estuviera escribiendo CSS dentro de su propio archivo. Ejemplo:

• radio del borde: 5px;
• altura de línea: 18px;
• caja-sombra: 2px 2px 2px 3px # 333;

Recuerde terminar cada línea con un punto y coma.

Jerarquía de diseños y estilos

La extensión Ninja Forms Layout & Styles le ofrece la capacidad de crear diseños y estilos de formularios muy complejos de forma predeterminada y por formulario, pero comprender el orden en el que se aplican los estilos es crucial para aprovechar al máximo esta extensión.

Para comenzar, cuando instales la extensión Layout & Styles, obtendrás un submenú Styling en tu menú Ninja Forms. Al hacer clic en eso, verá 4 pestañas y estas representan los estilos predeterminados de Ninja Forms. Cuando establezca estas opciones, se aplicarán en un orden muy específico.

Ficha Estilos de formulario

Esta pestaña representa los valores predeterminados de los elementos de tus Ninja Forms. Cosas como el contenedor principal, las filas y el mensaje de éxito se establecen aquí y se aplican a cada formulario que cree con Ninja Forms, así que asegúrese de que desea que estos estilos se apliquen a cada formulario antes de continuar.

Ficha Estilos de campo predeterminados

Cuando crea un campo o cualquier otro elemento con Ninja Forms, crea cierta salida requerida. Un div envolvente alrededor de una etiqueta y el elemento real. Las únicas excepciones son los elementos de diseño donde no hay etiqueta y quizás no hay div de ajuste, en cuyo caso solo se aplicarán los estilos de elemento.

En cualquier caso, estos estilos se aplican a TODOS los campos creados en Ninja Forms independientemente del tipo. Nuevamente, si no desea que se aplique a absolutamente todo, use esta opción con moderación.

Ficha Estilos de tipos de campo

Aquí se le presentarán las mismas opciones que los Estilos de campo predeterminados con la adición de la opción para seleccionar un campo o tipo de elemento específico. Esto significa que puede diseñar todos los cuadros de texto de una forma y todos los botones Enviar de otra forma. Básicamente, puede crear estilos predeterminados para cada tipo de elemento que Ninja Forms le permite crear.

Ficha Estilos de error

Si el formulario no se completa correctamente, hay mensajes que se muestran en la parte superior del formulario, así como con cada campo que tiene un error adjunto. Esto le permitirá diseñar estos mensajes y campos que tienen errores para todos sus formularios Ninja.

Entender la jerarquía

Básicamente, cuanto más específico eres, más peso se aplica a ese estilo. Teniendo esto en cuenta, los estilos de tipos de campo se aplican primero y luego los estilos de campo predeterminados. Tenga esto en cuenta cuando las cosas no parezcan aparecer como cree que deberían.

Cambiar el número de columnas en una lista usando un nombre de clase

Puede usar el nombre de clase NUMBER -col-list como el nombre de clase del contenedor del campo de lista debajo de las opciones del campo de lista.

Para ver esta función, deberá habilitar el “Modo de desarrollador” .

Ejemplo: puede utilizar la lista de tres columnas para que las opciones de la lista se muestren en tres columnas.