Estilo de WPForms con CSS personalizado (Guía para principiantes)

¿Le gustaría poder añadir estilos personalizados a sus formularios? CSS es una herramienta potente 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 estilizar sus formularios, con muchos ejemplos incluidos.

---

¿Qué es CSS?

CSS significa 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 ve en internet. Controla todo, desde el tamaño y el estilo de la fuente hasta los colores y los efectos al pasar el ratón. Sin él, la mayor parte de la web parecería un archivo de texto muy aburrido.

Lectura de CSS

A diferencia de muchos otros tipos de código, el CSS es bastante fácil de aprender, incluso sin experiencia previa en codificación. El primer paso es simplemente entender los tres componentes principales del CSS:

• Selectores: el 'objetivo' al que desea aplicar estilos
• Propiedades: el estilo específico que desea cambiar, como el tamaño de fuente o el color
• Valores: el efecto de estilo específico que desea aplicar

Como ejemplo, eche un vistazo a este fragmento de CSS que establece el tamaño del título de su formulario:

.wpforms-form .wpforms-title {
    font-size: 26px !important;
}

El selector en este ejemplo es .wpforms-form .wpforms-title y aplicará su CSS al título de todos los WPForms de su sitio.

Luego, entre las llaves, hay una propiedad CSS en este ejemplo: font-size. Esta propiedad tiene un valor de 26 píxeles.

Si decidimos que queremos que el texto del título de nuestro formulario sea más grande (digamos 35 píxeles), solo tendríamos que cambiar ese valor en el CSS:

.wpforms-form .wpforms-title {
    font-size: 35px !important;
}

Elección de un selector CSS

El primer paso para escribir CSS es identificar el selector correcto para apuntar a una parte específica de su 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 puede simplemente elegir el selector para cualquier área a la que desee aplicar CSS.

2) Usar las herramientas de desarrollador de su navegador

Este enfoque más avanzado puede presentar una ligera curva de aprendizaje, pero es una gran opción si desea crear un montón de CSS personalizado.

Las herramientas de desarrollador le permiten inspeccionar cualquier parte de la página web para ver qué CSS se está aplicando. También puede probar cambios en el CSS sobre la marcha y verlos aplicados directamente en su navegador. WPBeginner tiene un excelente tutorial sobre el uso de herramientas de desarrollador que debería ayudarle a empezar, incluyendo un vídeo paso a paso sobre el uso de las herramientas de desarrollador de Chrome.

Uso de propiedades y valores CSS

Ahora que sabes cómo elegir un selector CSS, podemos hablar sobre cómo cambiar estilos específicos con propiedades y valores CSS.

A continuación, encontrarás algunas propiedades CSS básicas que te pueden resultar útiles para tus formularios. Además, encontrarás ejemplos de cambios de estilo que puedes hacer combinando selectores, propiedades y valores para crear un fragmento de CSS completo.

Simplemente haz clic en el enlace de esta lista para saltar a la sección que necesitas:

• font-family
• color
• font-size
• background-color
• padding
• border
• border-radius

font-family

• • Definición: El estilo de fuente predeterminado
  • Ejemplo: Para cambiar la fuente predeterminada del título en los formularios de tu sitio a Arial, usarías:

.wpforms-form .wpforms-title {
    font-family: 'Arial', sans-serif !important;
}

color

• • Definición: Color de la fuente
  • Ejemplo: Para que el título de todos los formularios de tu sitio sea azul, podrías usar:

.wpforms-form .wpforms-title {
    color: #007acc !important;
}

font-size

• • Definición: Qué tan grande será la fuente (las unidades pueden ser px, em o rem)
  • Ejemplo: Para que el título de todos los formularios de tu sitio tenga 35px, usarías:

.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 un gris claro, podrías usar el siguiente CSS:

.wpforms-form {
    background-color: #eee !important;
}

padding

• • Definición: La distancia entre el elemento selector y su borde
  • Ejemplo: ¿Notaste cómo el ejemplo anterior no tiene ninguna distancia entre el texto y los bordes de la caja de color? Además del color de fondo, agreguemos 20 píxeles de relleno en la parte superior e inferior del formulario, así como 15 píxeles de relleno en los lados derecho e izquierdo. Haremos esto agregando 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
  • Ejemplo: Agreguemos un borde de 3 píxeles de grosor, una línea sólida y de color gris oscuro a nuestro ejemplo anterior. Haremos esto agregando 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: Qué tan curvos serán los bordes de un elemento (0px es un borde cuadrado, números más altos son más curvos)
  • Ejemplo: Continuaremos basándonos en el ejemplo anterior, agregando un radio de borde de 20 píxeles para redondear los bordes de nuestros formularios. Podemos hacer esto agregando border-radius: 20px; al CSS que ya hemos creado:

.wpforms-form {
    background-color: #eee !important;
    padding: 20px 15px !important;
    border: 3px solid #666 !important;
    border-radius: 20px !important;
}

Estilo de un formulario individual

Al usar los selectores CSS descritos anteriormente, puede aplicar fácilmente los mismos estilos a todos los WPForms de su sitio. Sin embargo, si desea aplicar algunos estilos solo a un formulario individual, deberá agregar el ID del formulario al selector.

Para encontrar fácilmente el ID del formulario, puede buscarlo en su shortcode. Esto se puede ver en el editor de páginas/entradas, 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 solo a este formulario individual, necesitaríamos agregar #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 haya creado su fragmento de CSS, el siguiente paso es agregarlo a su sitio. Puede aprender cómo hacerlo siguiendo la guía de WPBeginner para agregar CSS personalizado a WordPress.

¡Eso es todo! Ahora puede crear estilos CSS personalizados para sus formularios. Para obtener más ejemplos de CSS para crear diseños de formularios personalizados, consulte nuestro artículo sobre hermosos diseños de formularios que puede copiar.

A continuación, ¿le gustaría agregar estilos personalizados al botón de envío de sus formularios? Consulte nuestro tutorial sobre cómo personalizar el botón de envío para obtener detalles y ejemplos.