Con más de 1 millón de usuarios activos, Contact Form 7 es uno de los complementos de formulario de contacto más populares para WordPress. Su mayor desventaja es que los formularios listos para usar que agrega son muy sencillos. Afortunadamente, el Formulario de contacto 7 se puede diseñar fácilmente usando CSS en su tema de WordPress. En este artículo, le mostraremos cómo diseñar formularios de formulario de contacto 7 en WordPress.
Nota: Ya no recomendamos el complemento Contact Form 7. En cambio, recomendamos WPForms, que es el complemento de formulario de contacto más amigable para principiantes. También puedes descargar WPForms Lite gratis.
Tenemos una guía paso a paso sobre cómo crear un formulario de contacto en WordPress.
Tutorial en video
Si no le gusta el video o necesita más instrucciones, continúe leyendo.
Empezando
Suponemos que ya ha instalado Formulario de contacto 7 plugin y ha creado su primer formulario de contacto. El siguiente paso es copiar el código corto de su formulario de contacto y pegarlo en una publicación de WordPress o en una página donde le gustaría que aparezca su formulario.
Por el bien de este artículo, hemos utilizado el formulario de contacto predeterminado y lo hemos agregado 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 de su tema de WordPress. Aparte de eso, es muy básico.
Diseñaremos formularios de Contact Form 7 usando CSS. Todo el CSS entra en la hoja de estilo de su tema o tema hijo.
Diseñando Formularios de Contacto 7 en WordPress
Contact Form 7 genera un código estándar y muy útil para los formularios. Cada elemento del formulario tiene un ID y una clase CSS adecuados asociados.
Cada formulario de contacto usa la clase CSS .wpcf7 que puede utilizar para diseñar su formulario.
En este ejemplo, estamos usando una fuente de Google Lora en nuestros campos de entrada. Vea cómo agregar fuentes de Google en WordPress.
div.wpcf7 {
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, sans-serif;
font-style:italic;
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Así lucía nuestro formulario de contacto tras aplicar este CSS.
Diseño de formularios de contacto múltiple 7 formularios
El problema con el CSS que usamos anteriormente es que se aplicará a todos los formularios del Formulario de contacto 7 en su sitio web. Si está utilizando varios formularios de contacto y desea aplicarles un estilo diferente, 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 mouse al primer campo del formulario, haga clic con el botón derecho 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 ubicar la línea de inicio 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:
<div role="form" class="wpcf7" id="wpcf7-f201-p203-o1" lang="en-US" dir="ltr">
El atributo id es un identificador único generado por Contact Form 7 para este formulario en particular. Es una combinación de la identificación del formulario y la identificación de la publicación donde se agrega este formulario.
Usaremos esta ID en nuestro CSS para diseñar nuestro formulario de contacto. Reemplazaremos .wpcf7 en nuestro primer fragmento de CSS con #wpcf7-f201-p203-o1.
div#wpcf7-f201-p203-o1{
background-color: #fbefde;
border: 1px solid #f28f27;
padding:20px;
}
#wpcf7-f201-p203-o1 input[type="text"],
#wpcf7-f201-p203-o1 input[type="email"],
#wpcf7-f201-p203-o1 textarea {
background:#725f4c;
color:#FFF;
font-family:lora, "Open Sans", sans-serif;
font-style:italic;
}
#wpcf7-f201-p203-o1 input[type="submit"],
#wpcf7-f201-p203-o1 input[type="button"] {
background-color:#725f4c;
width:100%;
text-align:center;
text-transform:uppercase;
}
Diseñando Formularios de Contact Form 7 con CSS Hero
Muchos principiantes de WordPress no tienen experiencia en escribir CSS y no quieren perder tiempo aprendiéndolo. Afortunadamente, existe una solución maravillosa para principiantes que le permitirá no solo diseñar su formulario de contacto, sino también casi todos los aspectos de su sitio de WordPress.
Simplemente instale y active el complemento CSS Hero y vaya a la página que contiene su formulario. Haga clic en la barra de herramientas de CSS Hero y luego haga clic en el elemento que desea diseñar. CSS Hero le proporcionará una interfaz de usuario fácil 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 diseñar cualquier cosa en su sitio de WordPress. Puedes usar el código de cupón de CSS Hero adrimadiseño para obtener un descuento exclusivo del 34%.
Eso es todo lo que esperamos que este artículo le haya ayudado a aprender a diseñar formularios de Contact Form 7 en WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar una ventana emergente de formulario de contacto en WordPress.
Si le gustó este artículo, suscríbase a nuestro Canal de Youtube para tutoriales en video de WordPress. También puedes encontrarnos en Gorjeo y Facebook.