Adaptar los estilos de Contact Form 7 a Divi

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.

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

Miguel de Pineda

Consultor SEO, dando vueltas en Google desde 2013. He trabajado en varias agencias de Marketing Digital, con clientes y proyectos propios. Focalizado en SEO para ecommerce desde 2015.