adaptar estilo cf7 a divi

Adaptar estilo de Contact Form 7 a Divi Theme

Muchos de vosotros usáis el popular tema DIVI en vuestro wordpress y os habréis dado cuenta que, aunque el módulo de formulario de contacto es bastante completo, no permite realizar algunas personalizaciones que seguramente necesitéis (desplegables, selectores, checkbox de política de privacidad…etc). Pues vamos a enseñaros a solucionarlo usando el, también popular, plugin Contact Form 7.

Si no conocéis el plugin Contact Form 7 ya es hora de que lo hagáis, porque es mucho más completo que el de DIVI. Sin embargo, tenemos que reconocer que en diseño sale perdiendo por goleada en comparación con DIVI. Por esta razón debemos darle estilo a nuestro formulario creado con Contact Form 7 para que se parezca a nuestro tema DIVI.

Por tanto, el primer paso será descargarnos y activar el plugin Contact Form 7, para luego crear un formulario que podría ser como el siguiente;

<div class="et_pb_contact">
<div class="et_pb_contact_form">
<p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo Electrónico"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p>
<p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[text your-subject placeholder "Asunto"]</p>
<p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p>
</div>
</div>
[acceptance acceptance-758] He leido y acepto vuestra <a href="http://tudominio.com/politica-de-privacidad/" target="_blank">Política de Privacidad</a>.
[recaptcha]
<div class="et_contact_bottom_container">
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
</div>

Y una vez creado el formulario de contacto según nuestras necesidades, debemos añadir un trozo de código para conseguir nuestro objetivo de adaptar el estilo de Contact Form 7 a DIVI. Para aquellos menos familiarizados con el CSS os dejamos el código que tendréis que pegar en Divi > Opciones del tema > CSS personalizado.

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 !important;
-webkit-box-sizing: border-box !important;
box-sizing: border-box!important;
}
.wpcf7-submit {
color: #ffffff !important;
margin: 8px auto 0 !important;
cursor: pointer !important;
font-size: 20px !important;
font-weight: 500 !important;
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
padding: 6px 20px !important;
line-height: 1.7em !important;
background: transparent !important;
border: 2px solid !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
-moz-transition: all 0.2s !important;
-webkit-transition: all 0.2s !important;
transition: all 0.2s !important;
}
.wpcf7-submit:hover { 
background-color: #eee !important;
border-color:#eee !important;
padding: 6px 20px !important;
text-color: #000 !important;
}

Con esta simple acción hemos conseguido un formulario muy profesional y completo con un diseño bastante moderno como es el de DIVI Theme.

¡Y eso es todo amig@s!

Sobre el Autor: Franky Martin (ADMIN)

Deja un comentario

Tu dirección de email no será publicada.

16 − 6 =