Cómo diseñar formularios de formulario de contacto 7 en WordPress

Con más de 1 millón de usuarios activos, Contact Form 7 es uno de los complementos de formularios de contacto más populares para WordPress. Su mayor inconveniente es que los formularios listos para usar que agrega son muy simples. Afortunadamente, Contact Form 7 se puede diseñar fácilmente usando CSS en su tema de WordPress. En este artículo, le mostraremos cómo diseñar los formularios de contacto 7 en WordPress.


Nota: Ya no recomendamos el complemento Formulario de contacto 7. En su lugar, 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.

Video Tutorial

Suscríbase a WPBeginner

Si no le gusta el video o necesita más instrucciones, continúe leyendo.

Empezando

Suponemos que ya instaló el complemento Contact Form 7 y creó su primer formulario de contacto. El siguiente paso es copiar el shortcode para su formulario de contacto y pegarlo en una publicación de WordPress o en una página donde desea 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.

Formulario de contacto predeterminado 7 en un sitio de WordPress usando el tema predeterminado de WordPress

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 Formulario de contacto 7 usando CSS. Todo el CSS va en la hoja de estilo de su tema o tema secundario.

Formularios de formulario de contacto 7 en WordPress

Contact Form 7 genera un código compatible muy útil y estándar para los formularios. Cada elemento en el formulario tiene un ID apropiado y una clase CSS asociada.

Cada formulario de contacto usa la clase CSS .wpcf7 que puede usar para diseñar su formulario.

En este ejemplo, estamos utilizando una fuente de Google Lora en nuestros campos de entrada. Vea cómo agregar fuentes de Google en WordPress.

div.wpcf7 {
color de fondo: #fbefde;
borde: 1px sólido # f28f27;
acolchado: 20px;
}
.wpcf7 input [tipo ="texto"],
.wpcf7 input [tipo ="correo electrónico"],
.wpcf7 textarea {
fondo: # 725f4c;
color: #FFF;
font-family: lora, sans-serif;
estilo de fuente: cursiva;
}
.wpcf7 input [tipo ="enviar"],
.wpcf7 input [tipo ="botón"] {
color de fondo: # 725f4c;
ancho: 100%;
alinear texto: centro;
transformación de texto: mayúscula;
}

Así es como se veía nuestro formulario de contacto después de aplicar este CSS.

Diseño de formularios de Contact Form 7 con CSS en WordPress

Diseño de múltiples formularios de formulario de contacto 7

El problema con el CSS que utilizamos anteriormente es que se aplicará a todos los formularios del Formulario de contacto 7 en su sitio web. Si está utilizando múltiples formularios de contacto y desea diseñarlos de manera diferente, deberá usar la ID generada 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.

Encontrar la ID del elemento para su formulario de contacto

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 identificación de formulario y la identificación de publicación donde se agrega este formulario.

Utilizaremos 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 {
color de fondo: #fbefde;
borde: 1px sólido # f28f27;
acolchado: 20px;
}
# wpcf7-f201-p203-o1 input [type ="texto"],
# wpcf7-f201-p203-o1 input [type ="correo electrónico"],
# wpcf7-f201-p203-o1 textarea {
fondo: # 725f4c;
color: #FFF;
Familia tipográfica: lora, "Abierto sin", sans-serif;
estilo de fuente: cursiva;
}
# wpcf7-f201-p203-o1 input [type ="enviar"],
# wpcf7-f201-p203-o1 input [type ="botón"] {
color de fondo: # 725f4c;
ancho: 100%;
alinear texto: centro;
transformación de texto: mayúscula;
}

Formularios de formulario de contacto 7 con CSS Hero

Muchos principiantes de WordPress no tienen experiencia en escribir CSS, y no quieren pasar tiempo aprendiéndolo. Afortunadamente, hay una solución maravillosa para principiantes que le permitirá no solo diseñar su formulario de contacto, sino 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 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 escribir ningún código.

Formulario de contacto Formulario 7 Formulario con CSS Hero

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 CSS Hero WPBeginner para obtener un descuento exclusivo del 34%.

Es todo lo que esperamos que este artículo te haya ayudado a aprender cómo diseñar los formularios de Formulario de contacto 7 en WordPress. También puede consultar nuestra guía sobre cómo agregar una ventana emergente de formulario de contacto en WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me