Resumen de IA
¿Te gustaría añadir estilos personalizados a tus formularios o aplicarles más estilos de tema? WPForms, por defecto, incluirá un estilo extenso para asegurar que tus formularios se vean geniales con cualquier tema de WordPress. Sin embargo, esto puede dificultar la aplicación de CSS personalizado o permitir que los estilos del tema se muestren.
Este tutorial cubrirá cómo elegir el nivel de estilo de tema incluido en tus formularios utilizando la configuración Incluir estilo de formulario en WPForms.
En este artículo
Ajustar la configuración "Incluir estilo de formulario"
Para cambiar la cantidad de CSS que incluye WPForms, ve a WPForms » Ajustes en tu menú de administración de WordPress.
En la sección General, encontrarás el desplegable Incluir estilo de formulario. Por defecto, este desplegable estará configurado en Estilos base y de tema de formulario.
Nota: El resultado de cada opción de estilo disponible puede variar significativamente de un tema a otro. Para obtener mejores resultados, recomendamos mantener la opción predeterminada Estilos base y de tema de formulario.
Si decides probar alguna otra opción de estilo, asegúrate de hacer clic en el botón Guardar ajustes para almacenar tus cambios.
Nota:
- Si deseas estilizar tus formularios en el editor de bloques sin escribir ningún código CSS, habilita la opción Usar marcado moderno. Consulta nuestra guía de estilos de formulario para obtener más información.
- Los nuevos usuarios con WPForms versión 1.8.1 o superior tienen la configuración de Marcado Moderno habilitada por defecto. Además, la opción para deshabilitarla está oculta en el panel de WordPress para los nuevos usuarios. Consulta nuestra guía si deseas aprender cómo mostrar esta opción en tu página de ajustes.
Habilitar estilos base y de tema de formulario
Al usar Estilos base y de tema de formulario, se incluirán dos capas de CSS: estilos base y estilos de tema de formulario.
El tema del formulario incluye los estilos más agresivos y generalmente anulará los estilos que tu tema de WordPress intente aplicar. Esta es la mejor manera de asegurar que tus formularios se vean geniales sin importar el tema que elijas usar.
Para ver ejemplos de esta configuración de estilo, veamos cómo aparece un formulario simple en dos temas comunes: Twenty Twenty y Astra.
Veinte Veinte
Astra
Como puedes ver en estas imágenes, los formularios en ambos temas tienen muchos de los mismos estilos. Por ejemplo, tienen el mismo color de botón de envío, fondos blancos en los campos de entrada y los mismos tamaños de fuente. Cada uno de estos estilos, y muchos más, proviene del estilo del tema del formulario.
Sin embargo, estos formularios todavía tienen algunos estilos diferentes. Por ejemplo, Twenty Twenty hace que el texto del botón de envío sea negrita, y cada formulario hereda la fuente utilizada por el tema de WordPress.
Habilitar solo estilos base
La opción Solo estilos base no incluirá estilos de tema de formulario. En su lugar, solo incluirá los estilos base para WPForms.
En la mayoría de los casos, la diferencia más notable con esta configuración son los estilos de los botones. Los estilos base de WPForms no incluyen ningún estilo de botón, por lo que todo el estilo de los botones provendrá del tema de tu sitio.
Sin embargo, muchos otros estilos ahora también serán manejados por tu tema. Con la mayoría de los temas, es probable que notes diferencias de estilo bastante significativas con esta configuración.
Usaremos los mismos temas de arriba como ejemplos de esta configuración en las capturas de pantalla a continuación. Notarás que algunas nuevas diferencias ahora incluyen el tamaño de fuente de las etiquetas de los campos, el peso de la fuente de las subetiquetas, el color de fondo de los campos de entrada y los estilos de los botones.
Veinte Veinte
Astra
Problemas comunes de estilo base y cómo solucionarlos
Al usar la configuración "Solo estilo base", pueden surgir algunos problemas, dependiendo de los diseños de tus formularios y otras características que hayas habilitado. A continuación, hemos explicado cómo solucionar los problemas más comunes.
Nota: ¿Quieres añadir estilos personalizados a tu botón de formulario, pero evitar problemas con la configuración "Solo estilo base"? Consulta nuestro tutorial de estilo de botones de envío para que puedas usar nuestra configuración de estilo "Estilo base y tema del formulario" en su lugar.
Diseños multicolumna
Con la configuración "Solo estilo base" activa, los diseños multicolumna generalmente no funcionarán correctamente. Para solucionarlo, deberás volver a la opción Estilo base y tema del formulario o añadir el siguiente CSS a tu sitio:
Nota: Si no estás seguro de cómo usar fragmentos de CSS personalizados, consulta el tutorial de WPBeginner sobre cómo añadir CSS personalizado a tu sitio.
Eliminar estilos de formulario (sin estilos)
La opción Sin estilo evitará que todos los estilos de WPForms se carguen para tus formularios incrustados. Esto significa que los únicos estilos que verás en tus formularios provendrán de tu tema de WordPress.
Nota: La opción Sin estilo está pensada solo para desarrolladores y requerirá un CSS personalizado extenso.
Además, muchas opciones de formulario ya no funcionarán correctamente con esta configuración. Por ejemplo, se eliminarán todos los diseños de formulario y todas las páginas de los formularios de varias páginas serán visibles a la vez.
¡Eso es todo! Ahora sabes todo lo que necesitas para determinar la mejor opción de estilo de formulario para tu sitio.
¿A continuación, te gustaría saber cómo personalizar el botón de envío de tu formulario? Asegúrate de consultar nuestro tutorial de estilo de botones de envío para obtener detalles sobre la personalización de colores de botones, tamaño y más.