Adaptar los estilos de Contact Form 7 a Divi

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.

¡Lo quiero!

 .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.

Código cortesía de Agentewp.

[ratings id=»1216″]

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.