Como agregar estilos a formularios de Contact Form 7

Si eres de las personas que trabaja en WordPress sin duda alguna conoces Contact Form 7, este plugin nos permite crear formularios de manera sencilla para agregarlos en nuestro sitio web.

Generalmente los estilos que toman los formularios que creamos son heredados de la plantilla o tema que estamos usando, pero existen ocasiones que esto no sucede debido a que el tema no tiene esta funcionalidad; el susto llega cuando insertas el shortcode y el formulario se muestra de una manera básica y nada profesional. No te preocupes, para solucionar esto existe la vieja confiable: CSS.

Contact Form 7 tiene definidas clases CSS que nos permiten personalizar a nuestro gusto los campos de entrada.

Para empezar con el trabajo revisemos si nuestro tema nos permite agregar CSS Personalizado, caso contrario nos podemos apoyar de un plugin como: Simple Custom CSS.

Bien, para personalizar los campos de entrada del formulario usamos las siguientes clases, no voy a enumerar todas, pero si las más utilizadas:

Para campo tipo texto: .wpcf7 input[type="text"]
Para campo tipo email: .wpcf7 input[type="email"]
Para campo tipo tel: .wpcf7 input[type="tel"]
Para campo tipo Submit: .wpcf7 input[type="submit"]
Para campo tipo Select: .wpcf7 select

Claro ¿verdad?, ahora vamos al código, en este ejemplo vamos a personalizar el estilo de los campos de tipo texto y e-mail, y el botón enviar con otro tipo de estilo.

Si necesitamos que el color del botón Enviar cambie al pasar el cursor agregamos lo siguiente:

Listo! con esta breve explicación podemos personalizar los campos del formulario a nuestro gusto.