Adaptar los estilos de Contact Form 7 a Divi | SEO Wolf 馃惡

Adaptar los estilos de Contact Form 7 a Divi

Contact Form como Divi

Escrito por Miguel de Pineda

25 noviembre, 2016

Comenzamos esta categor铆a sobre trucos y consejos para el fant谩stico theme de WordPress, Divi. Si est谩is familiarizados con este theme seguramente sabr茅is que, aunque el m贸dulo de formularios de contacto es bastante completo, no permite realizar algunas personalizaciones que seguramente necesites en tu web. A saber, desplegables, selectores, check de pol铆tica de privacidad…

Para solucionarlo la mejor opci贸n es usar el ya m铆tico plugin, Contact Form 7, que permite crear formularios de manera sencilla y con un sinf铆n de posibilidades. Adem谩s, resulta m谩s sencillo monitorizar aquello que deseemos.

Sin embargo, un h谩ndicap de los formularios generados con Contact Form 7 son tremendamente feos y debemos darles estilo para que tengan posibilidades reales de general conversiones. Si estamos usando Divi, lo ideal es que nuestro formulario tenga los estilos del m贸dulo contact form de Divi.

Para aquellos menos familiarizdos con el CSS os dejamos el c贸digo necesario para replicar los formularios de Divi. Luego, solo tendr茅is que cambiar los colores para adaptarlos a vuestro dise帽o web.

驴Aun no tienes Divi?

Hazte ya con el theme de WordPress m谩s potente de la historia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 .wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
background-color: #eee !important;
border: none !important;
width: 100% !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
border-radius: 0 !important;
font-size: 14px;
color: #999 !important;
padding: 16px !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wpcf7-submit {
color: #2EA3F2 !important;
margin: 8px auto 0;
cursor: pointer;
font-size: 20px;
font-weight: 500;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 6px 20px;
line-height: 1.7em;
background: transparent;
border: 2px solid;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.wpcf7-submit:hover { 
background-color: #eee; 
border-color:#eee; 
padding: 6px 20px !important; 
}

Con este c贸digo podr谩s generar los estilos que necesitas, solo tienes que copiar y pegar en el archivo style.css de tu聽tema hijo, con un resultado como este.

Estilos Contact Form 7 Divi

C贸digo cortes铆a de Agentewp.

[ratings id=”1216″]

miguel pineda baja

Miguel de Pineda Pe帽uela

Consultor SEO, soy un apasionado de cosas tan variopintas como el dise帽o web en WordPress, las redes sociales, la pol铆tica o la Historia. Licenciado en Periodismo por la Universidad de Sevilla he trabajado en diferentes agencias de comunicaci贸n digital.

Quiz谩s tambi茅n te guste…

Mejores empresas de hosting WordPress

webempresa hosting
hosting raiola networks
siteground hosting
0 comentarios

Enviar un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.

Share This