Con más de 1 millón de usuarios activos, el formulario de contacto 7 es uno de los plugins más populares para WordPress. Su mayor desventaja es que los formularios que se añaden son muy sencillos. Afortunadamente, el Formulario de Contacto 7 puede ser fácilmente estilizado usando CSS en tu tema de WordPress. En este artículo, le mostraremos cómo estilizar los formularios del formulario de contacto 7 en WordPress.
Nota: Ya no recomendamos el plugin Contact Form 7. En su lugar, recomendamos WPForms, que es el plugin de formulario de contacto más amigable para principiantes. También puede descargar WPForms Lite gratis.
Tenemos una guía paso a paso sobre cómo crear un formulario de contacto en WordPress.
Video Tutorial
Suscribirse a AprenderWP
Si no te gusta el video o necesitas más instrucciones, entonces continúa leyendo.
Introducción
Suponemos que ya ha instalado el plugin Contact Form 7 y ha creado su primer formulario de contacto. El siguiente paso es copiar el código abreviado de tu formulario de contacto y pegarlo en un post de WordPress o en una página donde quieras que aparezca tu formulario.
Por el bien de este artículo, hemos utilizado el formulario de contacto por defecto y lo hemos añadido a una página de WordPress. Así es como se veía el formulario de contacto en nuestro sitio de prueba.
Como puede ver, el formulario de contacto hereda algunos estilos de formulario del tema de WordPress. Aparte de eso, es muy básico.
Estaremos diseñando los formularios del Formulario de Contacto 7 usando CSS. Todo el CSS va en la hoja de estilo de su tema o tema infantil.
Estilo Formulario de contacto 7 Formularios en WordPress
El formulario de contacto 7 genera un código muy útil y normalizado para los formularios. Cada elemento del formulario tiene asociado un ID y una clase CSS.
Cada formulario de contacto utiliza la clase CSS.wpcf7 que puede utilizar para darle estilo a su formulario.
En este ejemplo estamos usando una fuente Google Lora en nuestros campos de entrada. Consulta cómo añadir fuentes de Google en WordPress.
12345678910111112131414151617181920div.wpcf7{ color de fondo: #fbefde;border: 1pxsolid#f28f27;relleno:20px;}.wpcf7input[type=»text»],.wpcf7input[type=»email»],.wpcf7textarea {background:#725f4c;color:#FFFF;font-family:lora, sans-serif; font-style:italic; }.wpcf7input[type=»submit»],.wpcf7input[type=»button»] { background-color:#725f4c;width:100%;text-align:center;text-transform:uppercase;}}.
Así fue como nuestro formulario de contacto aplicó este CSS.
Estilo del Formulario de contacto múltiple 7 Formularios
El problema con el CSS que utilizamos anteriormente es que se aplicará a todos los formularios del Formulario de Contacto 7 de su sitio web. Si utiliza varios formularios de contacto y desea cambiar su estilo, deberá utilizar el ID generado por el formulario de contacto 7 para cada formulario.
Simplemente abra una página que contenga el formulario que desea modificar. Lleve el ratón al primer campo del formulario, haga clic con el botón derecho del ratón y seleccione Inspeccionar elemento. La pantalla del navegador se dividirá y verá el código fuente de la página. En el código fuente, debe localizar la línea inicial del código del formulario.
Como puede ver en la captura de pantalla anterior, nuestro código de formulario de contacto comienza con la línea:
El atributo id es un identificador único generado por el formulario de contacto 7 para este formulario en particular. Es una combinación de la identificación de la forma y la identificación del poste donde se agrega esta forma.
Utilizaremos este ID en nuestro CSS para diseñar nuestro formulario de contacto. Sustituiremos .wpcf7 en nuestro primer fragmento de CSS por #wpcf7-f201-p203-o1.
12345678910101112131414151617181920div#wpcf7-f201-p203-o1{ color de fondo: #fbefde;border: 1pxsolid#f28f27;relleno:20px;}#wpcf7-f201-p203-o1input[type=»text»],#wpcf7-f201-p203-o1input[type=»email»],#wpcf7-f201-p203-o1textarea {background:#725f4c;color:#FFF;familia de fuentes:lora, «Open Sans», sans-serif; font-style:italic; }#wpcf7-f201-p203-o1input[type=»submit»],#wpcf7-f201-p203-o1input[type=»button»] { background-color:#725f4c;width:100%;text-align:center;text-transform:uppercase;}
Formulario de contacto de estilismo 7 Formularios con CSS Hero
Muchos principiantes de WordPress no tienen ninguna experiencia en escribir CSS, y no quieren perder tiempo aprendiéndolo. Afortunadamente, hay una maravillosa solución para principiantes que le permitirá no sólo estilizar su formulario de contacto, sino casi todos los aspectos de su sitio WordPress.
Simplemente instale y active el plugin CSS Hero y vaya a la página que contiene su formulario. Haz clic en la barra de herramientas de CSS Hero y luego haz clic en el elemento al que quieres darle estilo. CSS Hero te proporcionará una interfaz de usuario fácil de usar para editar el CSS sin tener que escribir ningún código.
Vea nuestra revisión completa de CSS Hero y cómo usarlo para estilizar cualquier cosa en su sitio de WordPress. Puedes usar el código de cupón de CSS Hero WPBeginner para obtener un descuento exclusivo del 34%.
Eso es todo lo que esperamos que este artículo te ayude a aprender a estilizar los formularios del Formulario de Contacto 7 en WordPress. También puedes ver nuestra guía sobre cómo añadir un formulario de contacto emergente en WordPress.
Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.