Estilo de sus formularios

¿Te gustaría personalizar fácilmente el aspecto de tus formularios de WordPress? Nuestra función de estilo de formularios te permite estilizar tus formularios sin escribir ningún CSS.

Este tutorial te mostrará cómo dar estilo a tus formularios en el creador de formularios de WPForms.

---

Personalizar los temas de tu formulario

Para empezar, primero deberás crear un formulario nuevo o editar uno existente para acceder al creador de formularios.

Una vez que hayas abierto el creador de formularios, ve a Ajustes » Temas para acceder a la configuración de personalización de tu formulario.

Aquí, a la izquierda, encontrarás opciones para personalizar el tema de color, los campos del formulario, las etiquetas, los botones y los estilos del contenedor y el fondo sin necesidad de escribir CSS.

La sección de Vista Previa a la derecha muestra un diseño de ejemplo con campos comunes, para que puedas ver instantáneamente cómo aparecerán tus cambios de estilo.

Cubriremos cada una de las opciones disponibles con más detalle a continuación.

Temas

La configuración Temas te permite elegir un tema de color predefinido para actualizar automáticamente el estilo de los campos, etiquetas, botones, contenedor y fondo de tu formulario.

Para aplicarlo, simplemente haz clic en tu tema preferido y ajustará instantáneamente los colores de los campos, etiquetas, botones, contenedor o fondo de tu formulario.

Si personalizas ajustes individuales después de seleccionar un tema, estos cambios se guardarán como un nuevo tema de formulario personalizado. Este nuevo tema se añadirá a tu lista de temas disponibles y se podrá aplicar a cualquier formulario como lo harías con cualquier otro tema de formulario.

Estilos de campo

En la sección Estilos de campo, encontrarás las opciones para ajustar el tamaño, el borde, el grosor del borde, el radio del borde y los colores de los campos de tu formulario. A continuación, explicamos las opciones de campo disponibles.

• Tamaño: Ajusta el tamaño general de los campos de tu formulario. Las opciones incluyen Pequeño, Mediano y Grande.
• Borde: Esta configuración te permite añadir o quitar un borde de los campos de tu formulario. Las opciones incluyen bordes Sólido, Discontinuo o Punteado.
• Grosor del borde: Establece el grosor de los bordes de tus campos. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a tus necesidades de diseño.
• Radio del borde: Úsalo para aplicar esquinas redondeadas a los campos de tu formulario para una apariencia más suave y moderna. La unidad predeterminada es píxeles (px), pero puedes cambiarla a la unidad que prefieras.

A continuación, encontrarás opciones para actualizar los colores del Fondo, el Borde y el Texto de los campos de tu formulario.

Para cambiar un color, haz clic en la etiqueta correspondiente para abrir el selector de color. Puedes elegir un color visualmente o introducir un código hexadecimal específico para un control preciso.

Estilos de etiqueta

En la sección Estilos de Etiqueta, encontrarás la opción para actualizar el tamaño de las etiquetas de tu formulario. Las opciones de tamaño disponibles incluyen Pequeño, Mediano y Grande.

También encontrarás la opción para actualizar los colores de las etiquetas, subetiquetas y mensajes de error. A continuación, hemos explicado las opciones de color de etiqueta disponibles.

• Etiqueta: Esta opción controla el color del texto de la etiqueta principal de tu campo.
• Subetiqueta y Pista: Esta opción controla el color de las subetiquetas y pistas de campo que aparecen cuando WPForms sugiere valores a los usuarios en el frontend.
• Mensaje de Error: El color del texto que se muestra si ocurre un error cuando los usuarios completan tu formulario.

Estilos de botón

La configuración de Estilos de Botón te permite cambiar el tamaño, el borde, el grosor del borde, el radio del borde y los colores de tus botones. A continuación, hemos explicado las opciones de botón disponibles.

• Tamaño: Esta opción establece el tamaño del botón. Las opciones incluyen Pequeño, Mediano y Grande.
• Borde: Esta configuración te permite delinear tus botones con un borde Sólido, Discontinuo o Punteado.
• Grosor del Borde: Establece el grosor de los bordes de tu botón. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a las necesidades de tu diseño.
• Radio del Borde: Ajusta la redondez de las esquinas de tu botón para un aspecto más suave o más nítido. Los píxeles (px) son la unidad estándar, con opciones para cambiar según tus preferencias de diseño.

También encontrarás la opción para actualizar los colores de fondo y texto de tu botón.

Estilos de contenedor

La configuración de Estilos del Contenedor te permite personalizar el relleno, el estilo del borde, el grosor del borde, el radio del borde, la sombra y los colores del contenedor de tu formulario. A continuación, hemos detallado las opciones del contenedor disponibles.

• Relleno: Esta opción establece el espacio dentro de los bordes del contenedor del formulario. Puedes aumentar o disminuir este valor para ajustar el espaciado alrededor del contenido de tu formulario.
• Estilo del Borde: Esta configuración te permite elegir el contorno de tu contenedor, con opciones para un borde Sólido, Discontinuo o Punteado.
• Grosor del Borde: Determina el grosor del borde de tu contenedor. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a las necesidades de tu diseño.
• Radio del Borde: Ajusta la redondez de las esquinas de tu contenedor, añadiendo un borde más suave o más definido a la apariencia de tu formulario. La medida predeterminada es en píxeles (px) pero se puede modificar para adaptarse a tu estilo.
• Sombra: Elige el tamaño del efecto de sombra para tu contenedor para añadir profundidad al diseño de tu formulario, con opciones que van desde ninguna hasta grande.
• Colores: Actualiza el color del borde de tu contenedor para que coincida con tu tema visual, mejorando la estética general del formulario.

Estilos de fondo

Los ajustes de Estilos de fondo te permiten controlar la imagen y el color de fondo de tu formulario.

Para empezar, selecciona una fuente de imagen en el menú desplegable Imagen. Para imágenes ya subidas a tu sitio web o para subir nuevas, selecciona la opción Biblioteca de medios. Para explorar una selección más amplia de imágenes profesionales, selecciona la opción Fotos de stock.

Después de hacer tu selección, haz clic en el botón Elegir imagen para continuar.

Si seleccionas Biblioteca de medios en el menú desplegable Imagen, se abrirá la galería de medios de tu sitio web, lo que te permitirá elegir una imagen o subir una nueva. Si se selecciona Fotos de stock, se te presentará una selección de fotos de stock para elegir para el fondo de tu formulario.

Una vez que hayas seleccionado tu imagen, la sección Estilos de fondo ofrece opciones de personalización adicionales:

• Posición: Este ajuste te permite alinear tu imagen de fondo dentro del formulario seleccionando opciones como Arriba centro, Abajo centro y más para obtener la colocación perfecta.
• Repetir: Elige cómo se repite tu imagen de fondo. Las opciones son Sin repetición para una sola imagen, Mosaico para repetir la imagen en todo el fondo, Repetir horizontal para repetir a lo ancho y Repetir vertical para repetir a lo largo.
• Tamaño: Esto ajusta cómo tu imagen de fondo encaja dentro del formulario. Cubrir asegura que la imagen cubra todo el fondo, adaptándose al tamaño del formulario. Si se selecciona Dimensiones, puedes especificar el ancho y alto exactos para tu imagen.
• Colores: Esta opción te permite seleccionar un color de fondo, que será visible cuando no se utilice ninguna imagen.

Estilos avanzados

En la pestaña Avanzado, encontrarás dos opciones útiles para dar estilo adicional a tus formularios.

• El cuadro CSS Personalizado te permite añadir tus propias clases CSS para una personalización adicional. Para obtener más información, consulta nuestro tutorial sobre cómo añadir clases CSS personalizadas.
• La sección Copiar / Pegar Ajustes de Estilo muestra el código CSS de todos los estilos que has aplicado en el creador de formularios. Puedes copiar este código para reutilizar los mismos estilos en otro formulario.

Después de dar estilo a tu formulario, puedes continuar editando los campos si es necesario. Una vez que hayas terminado, haz clic en Guardar, luego usa el botón Vista Previa para ver tu formulario real con los estilos aplicados.

Probar tus formularios

El último paso es realizar una prueba rápida para asegurarte de que tu formulario se ve y funciona como esperas.

Para probarlo, simplemente tendrás que enviar una entrada a tu formulario. Para obtener más información, consulta nuestra lista de verificación completa para probar formularios.

Preguntas frecuentes

A continuación, hemos respondido a algunas de las preguntas más frecuentes que recibimos sobre el estilo de tus formularios.

¿Conservará mi formulario sus estilos cuando lo incruste en diferentes páginas?

Sí. Cuando aplicas estilos a un formulario en el constructor de WPForms, esos ajustes se guardan con el formulario y se aplican por defecto en cualquier lugar donde se incruste el formulario.

Si utilizas el editor de bloques o Elementor para aplicar cambios de estilo adicionales al incrustar el formulario, esos cambios solo afectarán a esa página específica. Los estilos originales del constructor permanecen sin cambios para todas las demás instancias.

Esto te permite usar el mismo formulario en todo tu sitio web, personalizando opcionalmente su apariencia página por página.

¿Puedo usar las opciones de estilo del constructor de formularios con constructores de páginas como Divi?

Sí. Las opciones de estilo disponibles en el constructor de formularios de WPForms (Ajustes » Temas) se guardan con el formulario y se aplican en cualquier lugar donde se incruste, incluidas las páginas creadas con Divi, Elementor o cualquier otro constructor de páginas. No se requiere ninguna configuración adicional.

Si prefieres estilizar tus formularios usando el editor de bloques, necesitarás tener habilitado el marcado moderno. Para más detalles, consulta nuestra guía sobre cómo estilizar tus formularios en el editor de bloques. Ten en cuenta que las opciones de estilo del editor de bloques solo están disponibles cuando se utiliza el editor de bloques de WordPress o Elementor; no son accesibles desde el constructor visual de Divi.

¡Eso es todo! Ahora sabes cómo personalizar la apariencia de tus formularios de WordPress usando WPForms.

A continuación, ¿te gustaría usar iconos para mejorar la visualización de tu formulario? Asegúrate de consultar nuestro tutorial sobre el uso de opciones de iconos para aprender cómo.