Introducción
Para personalizar la apariencia de su formulario, simplemente vaya al Generador de formularios, en el lado derecho verá el panel “Diseño”. Desde allí, establezca las diferentes propiedades que desea para el diseño de su formulario, el área de vista previa del formulario se actualizará en tiempo real.
El Panel “Diseño” tiene las siguientes secciones. Cada sección se centra en una clase de formulario que se puede aplicar a varios elementos.
- Global: Es el Contenedor de Formulario.
- Forma: La forma en sí. De forma predeterminada, no tiene relleno, para mantener la compatibilidad cuando se muestra un widget de formulario en un sitio web externo.
- Grupo de Formulario: Grupo de Etiqueta, Entrada, Texto de Ayuda y Mensaje de Validación.
- Control de formulario: campo de entrada.
- Botón: Botón Enviar (Botón principal de Bootstrap).
- Etiqueta: Campo de etiqueta (Etiqueta de control de Bootstrap)
- Marcador de posición
- Bóveda
- Párrafo
- Texto de ayuda
- Enlace
- Pasos del formulario: aparece cuando se agrega un campo de salto de página al formulario.
- Alertas de formulario: mensaje de éxito o error que aparece cuando se envía un formulario.
- Validación de campos: para personalizar el estado de error de sus campos.
- Otros componentes: también están disponibles opciones para casillas de verificación personalizadas, botones de opción personalizados, reCAPTCHA, panel de firmas y barra de progreso.
El Diseñador de temas viene con herramientas útiles para hacer que los diseños complejos sean más fáciles.
– Selector de fuentes de Google
Seleccione las fuentes de Google con vista previa en vivo de una lista desplegable.
– Selector de degradado web
Puede encontrar el selector de degradado para crear su propio degradado (lineal, radial, elegir sus colores y paradas y más) o elegir entre más de 100 hermosos degradados web listos para usar.
– Patrones sutiles
Elige entre cientos de Patrones Sutiles seleccionados por Toptal, bellas texturas para tus formas.
El Diseñador de temas es una herramienta flexible que le permite personalizar diferentes partes del formulario para generar una hoja de estilo. Algunos casos de uso comunes son:
– Ocultar etiquetas de campo
Si desea ocultar una etiqueta de campo, simplemente haga clic en el campo e ingrese la siguiente Clase CSS de etiqueta: sr-only
Pero, si desea eliminar todas las etiquetas del formulario de una sola vez, simplemente siga los siguientes pasos:
- En el panel Diseño -> Abra la sección Etiqueta
- Desplácese hacia abajo hasta la subsección Extra
- En Pantalla, elija Ninguno.
¡Eso es todo!
Nota: Nunca deje un campo sin etiqueta, ya que le ayudará a identificar su campo dentro de todo el sistema.
– Alinee su formulario al centro
Si desea mostrar su formulario en una página completa (Compartir formulario -> Enlace sin cuadro), este consejo será muy útil.
Hay varias formas de centrar un formulario, a continuación describiremos la opción más común:
- En la sección Global, seleccione Alinear texto: Centro
- Y en la sección Formulario, seleccione:
- Alinear texto: Izquierda – Margen: Automático – Ancho: 80%
¡Eso es todo! Puede ampliar o reducir el ancho del formulario según sus necesidades.
– Diseño de botones de ancho completo
Si desea mostrar un botón específico con ancho completo, simplemente haga clic en el campo e ingrese la siguiente Clase CSS: btn-block
Pero, si desea diseñar todos los botones del formulario a la vez, simplemente siga los siguientes pasos:
- En el panel Diseño -> Abra la sección Botón
- Desplácese hacia abajo hasta la subsección Tamaño
- En Ancho elija 100%.
¡Eso es todo!