¿Le gustaría personalizar la apariencia de sus formularios WordPress? En WPForms, puede añadir fácilmente clases y estilos CSS personalizados para que sus formularios tengan el aspecto que desee.
Este tutorial le mostrará cómo añadir clases CSS personalizadas para dar estilo a elementos de formulario específicos, así como la forma de añadir cualquier CSS personalizado a su sitio de WordPress.
En este artículo
Nota: Si eres nuevo en CSS, nuestra guía para principiantes sobre cómo estilizar formularios con CSS es el mejor lugar para empezar.
¿Qué es una clase CSS?
Las clases CSS son una forma de seleccionar los elementos que desea estilizar en su sitio web.
En WPForms, a los campos se les asignan automáticamente varias clases CSS. Por ejemplo, si a un campo se le asigna una clase Tamaño del campo de Grandese le asignará la clase CSS wpforms-field-large.
Añadiendo una clase CSS personalizada, puede dirigirse fácilmente a un campo de formulario específico o aplicar los mismos estilos a varios campos.
Nota: Si quieres dar estilo a tus formularios sin tener que usar clases CSS personalizadas ni escribir código, échale un vistazo a nuestro tutorial de estilo de formularios.
Añadir clases CSS personalizadas en WPForms
En WPForms, puede añadir sus propias clases CSS personalizadas a los campos de formulario individuales, el botón de envío o el contenedor alrededor de su formulario.
Añadir clases CSS a campos individuales del formulario
Para añadir una clase CSS personalizada a un campo de formulario, tendrás que crear un nuevo formulario o editar uno existente.
En el panel de vista previa del constructor de formularios, haga clic en el campo para abrir sus Opciones de campo. A continuación, abre la pestaña Avanzadas y busca el campo Clases CSS.
Al nombrar una clase CSS, sólo puede utilizar letras o números, y no se permiten espacios. Los nombres de clase distinguen entre mayúsculas y minúsculas, por lo que se recomienda utilizar letras minúsculas. Si desea que el nombre de la clase contenga más de una palabra, incluya un guión (-) o un guión bajo (_) en lugar de un espacio.
Para evitar problemas, empiece siempre los nombres de las clases por una letra.
Para este ejemplo, llamaremos a nuestra clase CSS wpf-blue-background.
Añadiendo wpf- al principio de nuestras clases, es menos probable que añadamos un nombre de clase ya utilizado por el tema de nuestro sitio. Esto ayudará a evitar conflictos de estilo y hará más probable que nuestros estilos se apliquen con éxito.
Cuando esté listo, añada el wpf-blue-background a la clase CSS Clases de CSS campo.
Si lo desea, también puede añadir clases adicionales a este campo. Para ello, basta con añadir un espacio entre cada nombre de clase. Por ejemplo:
wpf-blue-background wpf-bold-font wpf-xl-margin
Nota: El campo Clases CSS también se puede utilizar para mostrar los campos de formulario en un diseño de varias columnas y como un diseño de una sola columna en móviles.
Añadir clases CSS a un contenedor de formulario o a un botón de envío
Para algunos estilos, puede ser útil dirigirse al contenedor del formulario o a su botón de envío.
Por ejemplo, es posible que quieras que los botones de envío de todos los formularios de registro de tu sitio tengan un estilo determinado y que los botones de envío de los formularios de contacto generales tengan un estilo diferente. Una forma sencilla de conseguirlo es añadir la misma clase CSS a todos los botones de envío que quieras que tengan el mismo estilo.
Para añadir un nombre de clase CSS personalizado para cualquiera de las opciones, abre el generador de formularios y ve a Configuración " General. Desde aquí, ve a la sección Avanzado y podrás ver los campos Clase CSS del formulario y Clase CSS del botón Enviar.
Si desea añadir más de un nombre de clase, separe cada uno con un espacio.
Nota: Si lo desea, puede utilizar una clase CSS integrada en el formulario para mostrarlo en una sola línea.
Creación y adición de estilos CSS para su sitio web
Ahora que ha añadido una clase CSS personalizada a un campo de su formulario, puede crear los estilos que desea aplicar.
Creación de estilos CSS
CSS es una poderosa herramienta con una gran cantidad de opciones de estilo disponibles. Para obtener instrucciones sobre cómo empezar a crear CSS, consulta nuestra Guía CSS para principiantes.
Para nuestro ejemplo, simplemente añadiremos un fondo azul a cualquier campo con la clase wpf-blue-background. Cuando se apunta a un nombre de clase dentro de CSS, siempre debe comenzar con un punto (.), por ejemplo .wpf-blue-background.
Dado que ya se están aplicando muchos estilos a tu formulario, también es una buena idea hacer que tu CSS sea más específico. Para ello, basta con añadir .wpforms-form delante del nombre de la clase personalizada.
Este es nuestro ejemplo de CSS:
.wpforms-form .wpf-blue-background {
background-color: #d1effd;
}
Si sus estilos personalizados no se aplican correctamente, puede incluir !important antes del punto y coma.
Nota: El uso de !important sólo es necesario si sus estilos no se están aplicando de otra manera. Nuestra guía sobre solución de problemas con CSS contiene más detalles.
Añadir CSS a su sitio WordPress
Una forma rápida y sencilla de añadir CSS personalizado a tu sitio es con el personalizador de temas de WordPress. Es una opción popular porque está disponible en casi todos los temas y tiene un área de vista previa en vivo.
Para acceder al área CSS del personalizador de temas, vaya a Apariencia " Personalizar y seleccione la pestaña CSS adicional.
A continuación, sigue adelante y añade tu fragmento de CSS personalizado. Cuando esté listo, haga clic en Publicar.
Así es como se ve ahora nuestro formulario de ejemplo con la clase CSS y los estilos CSS aplicados:
Nota: ¿No se muestran tus estilos personalizados? Consulta nuestra guía de solución de problemas de CSS para conocer los problemas y soluciones más comunes.
Otra forma de añadir CSS personalizado que se mantiene consistente a través de los cambios de tema es mediante el uso de WPCode. Para obtener más información sobre cómo aplicar CSS personalizado con WPCode, incluido el uso de su biblioteca de fragmentos de código CSS predefinidos, consulta nuestra guía sobre el uso de fragmentos de código.
Si desea ver otros métodos para añadir CSS, consulte el tutorial de WPBeginner sobre cómo añadir CSS personalizado a WordPress.
Ya está. Ahora puedes añadir clases CSS personalizadas para dar estilo a áreas específicas de tus formularios.
¿Le gustaría también ver y modificar nuestros estilos de formulario incorporados? Echa un vistazo a nuestro tutorial sobre la personalización de campos de formulario individuales para todos los detalles.