Resumen de IA
¿Te gustaría personalizar la apariencia de tus formularios de WordPress? En WPForms, puedes agregar fácilmente clases CSS y estilos personalizados para que tus formularios se vean como desees.
Este tutorial te mostrará cómo agregar clases CSS personalizadas para estilizar elementos específicos del formulario, así como cómo agregar cualquier CSS personalizado a tu 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 deseas estilizar en tu sitio web.
En WPForms, los campos se les asignan automáticamente varias clases CSS. Por ejemplo, si un campo tiene un Tamaño de campo de Grande, se le asignará la clase CSS wpforms-field-large.
Al agregar una clase CSS personalizada, puedes seleccionar fácilmente un campo de formulario específico o aplicar los mismos estilos a varios campos.
Nota: Si deseas estilizar tus formularios pero evitar usar clases CSS personalizadas o escribir código, considera echar un vistazo a nuestro tutorial de estilos de formularios.
Agregar clases CSS personalizadas en WPForms
En WPForms, puedes agregar tus propias clases CSS personalizadas a campos de formulario individuales, al botón de envío o al contenedor de tu formulario.
Agregar clases CSS a campos de formulario individuales
Para agregar una clase CSS personalizada a un campo de formulario, necesitarás crear un nuevo formulario o editar uno existente.
Dentro del panel de vista previa del constructor de formularios, haz clic en el campo para abrir sus Opciones de campo. Luego, abre la pestaña Avanzado y busca el campo etiquetado como Clases CSS.
Al nombrar una clase CSS, solo puedes usar 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 usar letras minúsculas. Si deseas que el nombre de la clase contenga más de una palabra, incluye un guion (-) o un guion bajo (_) en lugar de un espacio.
Para evitar problemas, siempre comienza los nombres de tus clases con una letra.
Para este ejemplo, nombraremos nuestra clase CSS wpf-blue-background.
Al agregar wpf- al principio de nuestras clases, es menos probable que agreguemos un nombre de clase que ya esté siendo utilizado por el tema de nuestro sitio. Esto ayudará a evitar conflictos de estilos y hará que sea más probable que nuestros estilos se apliquen correctamente.
Cuando estés listo, agrega la clase CSS wpf-blue-background al campo Clases CSS.
Si lo deseas, también puedes agregar clases adicionales a este campo. Para hacerlo, simplemente agrega 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 usar para mostrar campos de formulario en un diseño de varias columnas y como un diseño de una sola columna en dispositivos móviles.
Agregar clases CSS a un contenedor de formulario o al botón de envío
Para algunos estilos, puede ser útil seleccionar el contenedor del formulario o su botón de envío.
Por ejemplo, es posible que desee que los botones de envío de todos los formularios de registro en su sitio tengan un estilo y que los botones de envío de cualquier formulario de contacto general tengan un estilo diferente. Una forma fácil de lograr esto es agregando la misma clase CSS a cualquier botón de envío que desee estilizar de la misma manera.
Para agregar un nombre de clase CSS personalizado para cualquiera de las opciones, abra el constructor de formularios y vaya a Ajustes » General. Desde aquí, vaya a la sección Avanzado y podrá ver los campos para Clase CSS del formulario y Clase CSS del botón de envío.
Si desea agregar más de un nombre de clase, simplemente separe cada uno con un espacio.
Nota: Si lo desea, puede usar una clase CSS de formulario integrada para mostrar su formulario en una sola línea.
Crear y agregar estilos CSS para tu sitio
Ahora que ha agregado una clase CSS personalizada a un campo en su formulario, puede crear los estilos que desea aplicar.
Creación de estilos CSS
CSS es una herramienta potente con una gran cantidad de opciones de estilo disponibles. Para obtener instrucciones sobre cómo empezar a crear CSS, consulte nuestra Guía para principiantes de CSS.
Para nuestro ejemplo, simplemente agregaremos un fondo azul a cualquier campo con la clase wpf-blue-background. Al apuntar 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 su formulario, también es una buena idea hacer que su CSS sea más específico. Para hacerlo, simplemente agregue .wpforms-form delante de su nombre de clase personalizado.
Aquí está nuestro CSS de ejemplo:
.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: Usar !important solo es necesario si sus estilos no se aplican de otra manera. Nuestra guía para solucionar problemas de CSS contiene más detalles.
Añadir CSS a su sitio de WordPress
Una forma rápida y sencilla de agregar CSS personalizado a su sitio es con el Personalizador de temas de WordPress. Esta 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 de CSS del Personalizador de temas, vaya a Apariencia » Personalizar y luego seleccione la pestaña etiquetada como CSS adicional.
A continuación, agregue su fragmento de CSS personalizado. Cuando esté listo, haga clic en Publicar.
Así es como se ve nuestro formulario de ejemplo ahora con la clase CSS y los estilos CSS aplicados:
Nota: ¿Sus estilos personalizados no se muestran? Consulte nuestra guía para solucionar problemas de CSS para conocer los problemas y soluciones más comunes.
Otra forma de agregar CSS personalizado que se mantiene consistente en los cambios de tema es usando WPCode. Para obtener orientación sobre cómo aplicar CSS personalizado con WPCode, incluido el uso de su biblioteca de fragmentos de código CSS precompilados, consulte nuestra guía sobre el uso de fragmentos de código.
Si deseas ver métodos adicionales para agregar CSS, consulta el tutorial de WPBeginner sobre cómo agregar CSS personalizado a WordPress.
¡Eso es todo! Ahora puedes agregar clases CSS personalizadas para estilizar áreas específicas de tus formularios.
¿También deseas ver y modificar los estilos de formulario integrados? Consulta nuestro tutorial sobre cómo personalizar campos de formulario individuales para obtener todos los detalles.