¿Te gustaría poder añadir estilos personalizados a tus formularios? CSS es una poderosa herramienta que le permite dar a sus formularios un estilo único e individual.
Este tutorial le guiará a través de cómo crear CSS personalizado para dar estilo a sus formularios, con un montón de ejemplos incluidos.
En este artículo
¿Qué es CSS?
CSS son las siglas de Cascading Style Sheets (hojas de estilo en cascada), y es el código que leen los navegadores web para dar estilo a casi todo lo que se ve en Internet. Controla todo, desde el tamaño y el estilo de las fuentes hasta los colores y los efectos hover. Sin él, la mayor parte de la web parecería un aburrido archivo de texto.
Nota: Si prefiere dar estilo a su formulario pero omitir el código, considere consultar nuestro tutorial de estilo de formularios.
Lectura CSS
A diferencia de muchos otros tipos de código, CSS es bastante fácil de aprender incluso sin tener absolutamente ninguna experiencia en codificación. El primer paso es entender los tres componentes principales de CSS:
- Selectores: el "objetivo" al que desea aplicar los estilos
- Propiedades: el estilo específico que desea cambiar, como el tamaño o el color de la fuente.
- Valores: el efecto de estilo específico que desea aplicar
Como ejemplo, echa un vistazo a este fragmento de CSS que establece el tamaño del título de tu formulario:
.wpforms-form .wpforms-title {
font-size: 26px !important;
}
En selector en este ejemplo es .wpforms-form .wpforms-title y aplicará tu CSS al título de todos los WPForms de tu sitio.
A continuación, entre las llaves, hay un CSS propiedad en este ejemplo: font-size. Esta propiedad tiene un valor de 26 píxeles.
Nota: Cuando añada CSS a su sitio, puede que sea necesario incluir !important antes del punto y coma para asegurarse de que sus estilos personalizados se aplican correctamente. Consulta nuestra guía sobre resolución de problemas con CSS para obtener más información.
Si decidimos que queremos que el texto del título de nuestro formulario sea más grande (digamos 35 píxeles), sólo tendríamos que cambiar ese valor en el CSS:
.wpforms-form .wpforms-title {
font-size: 35px !important;
}
Elegir un selector CSS
El primer paso para escribir CSS es identificar el selector correcto para una parte específica del formulario. Hay dos maneras de elegir un selector:
1) Copiar un selector de nuestra lista
Hemos creado una lista completa de selectores para cada campo disponible en nuestros formularios, por lo que sólo tiene que elegir el selector para el área que desea aplicar CSS a.
2) Utilizar las herramientas de desarrollo del navegador
Este enfoque más avanzado puede ofrecer un poco de una curva de aprendizaje, pero es una gran opción si desea crear un montón de CSS personalizado.
Las herramientas para desarrolladores te permiten inspeccionar cualquier parte de la página web para ver qué CSS se está aplicando. También puedes probar cambios en el CSS sobre la marcha y ver cómo se aplican directamente en tu navegador. WPBeginner tiene un gran tutorial sobre el uso de las herramientas para desarrolladores que debería ayudarte a empezar, incluyendo un vídeo paso a paso sobre el uso de las herramientas para desarrolladores de Chrome.
Uso de propiedades y valores CSS
Ahora que sabes cómo elegir un selector CSS, podemos discutir cómo cambiar estilos específicos con propiedades y valores CSS.
A continuación, encontrarás algunas propiedades CSS básicas que pueden resultarte útiles para tus formularios. Además, encontrarás ejemplos de cambios de estilo que puedes realizar combinando selectores, propiedades y valores para crear un fragmento completo de CSS.
Sólo tiene que hacer clic en el enlace de esta lista para pasar a la sección que necesita:
Nota: ¿Busca otras propiedades? Consulta esta Referencia CSS para obtener una lista completa.
font-family
-
- Definición: El estilo de fuente por defecto
- Ejemplo: Para cambiar la fuente por defecto del título en los formularios de su sitio a Arial, utilizaría:
.wpforms-form .wpforms-title {
font-family: 'Arial', sans-serif !important;
}
Nota: Es habitual proporcionar fuentes alternativas en caso de que la fuente principal no esté disponible. En el ejemplo anterior, si Arial no está disponible, el navegador utilizaría cualquier fuente sans-serif disponible.
color
-
- Definición: Color de fuente
- Ejemplo: Para que el título de todos los formularios de su sitio sea azul, podría utilizar:
.wpforms-form .wpforms-title {
color: #007acc !important;
}
font-size
-
- Definición: Qué tamaño tendrá la fuente (las unidades pueden ser px, em o rem).
- Ejemplo: Para hacer que el título en todas las formas de su sitio 35px, que usaría:
.wpforms-form .wpforms-title {
font-size: 35px !important;
}
background-color
-
- Definición: El color que rellenará el fondo del área del selector
- Ejemplo: Para que todo el fondo de un formulario sea de color gris claro, podrías utilizar el siguiente CSS:
.wpforms-form {
background-color: #eee !important;
}
padding
-
- Definición: La distancia entre el elemento selector y su borde
- Por ejemplo: ¿Te has dado cuenta de que en el ejemplo anterior no hay ninguna distancia entre el texto y los bordes de la caja de color? Además del color de fondo, vamos a añadir 20 píxeles de relleno a la parte superior e inferior del formulario, así como 15 píxeles de relleno a los lados derecho e izquierdo. Lo haremos añadiendo
padding: 20px 15px;al CSS del ejemplo anterior:
.wpforms-form {
background-color: #eee !important;
padding: 20px 15px !important;
}
border
-
- Definición: Determina el estilo y el grosor del borde de un elemento
- Por ejemplo: Vamos a añadir un borde de 3 píxeles de grosor, una línea continua y gris oscuro a nuestro ejemplo anterior. Lo haremos añadiendo
border: 3px solid #666;al CSS existente para.wpforms-form:
.wpforms-form {
background-color: #eee !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
}
border-radius
-
- Definición: Cómo de curvadas serán las esquinas de un elemento (0px es un borde cuadrado, los números más altos son más curvados).
- Por ejemplo: Seguiremos construyendo a partir del ejemplo anterior, añadiendo un borde-radio de 20 píxeles para redondear los bordes de nuestros formularios. Podemos hacerlo añadiendo
border-radius: 20px;al CSS que ya hemos hecho:
.wpforms-form {
background-color: #eee !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
border-radius: 20px !important;
}
Nota: Si desea cambiar el estilo CSS de campos de formulario específicos, consulte nuestra guía sobre cómo personalizar el estilo de campos de formulario individuales.
Estilizar un formulario individual
Usando los selectores CSS descritos anteriormente, puedes aplicar fácilmente los mismos estilos a todos los WPForms de tu sitio. Sin embargo, si desea aplicar algunos estilos sólo a un formulario, tendrá que añadir el ID del formulario al selector.
Para encontrar fácilmente el ID del formulario, puede buscar en su shortcode. Esto se puede ver en el editor de página / post, o puede ir a WPForms " Todos los formularios y buscar en la columna Shortcode.
En este ejemplo, nuestro formulario tiene un ID de 4. Para aplicar nuestros estilos anteriores sólo a este único formulario, tendríamos que añadir #wpforms-4 al principio del selector. Aquí está nuestro CSS modificado:
#wpforms-4 .wpforms-form {
background-color: #eee !important;
padding: 20px 15px !important;
border: 3px solid #666 !important;
border-radius: 20px !important;
}
Una vez que hayas creado tu fragmento CSS, el siguiente paso es añadirlo a tu sitio. Puedes aprender a hacerlo siguiendo la guía de WPBeginner para añadir CSS personalizado a WordPress.
Ya está. Ya puedes crear estilos CSS personalizados para tus formularios. Para ver más ejemplos de CSS para crear diseños de formularios personalizados, consulta nuestro artículo sobre bonitos diseños de formularios que puedes robar.
A continuación, ¿te gustaría añadir estilos personalizados al botón de envío de tus formularios? Echa un vistazo a nuestro tutorial sobre la personalización del botón de envío para más detalles y ejemplos.