Estilizar contact form 7 con Divi

 

En primer lugar, decir que Divi ya cuenta con un módulo de contacto, todos los sabemos.

Por lo tanto puede dar problemas al no recibir sus mensajes por considerarlos spam (se arregla con un plugin).

Y tampoco es demasiado completo, no se pueden subir archivos o desplegar listas.

Finalmente, una opción genial es utilizar contact form 7 (el plugin de contacto más famoso) manteniendo el estilo Divi, y es realmente sencillo de configurar.

 

Contact form 7 con todas sus opciones y con estética Divi

 

Y lo único que hay que hacer es añadir un poco de código a nuestro style.css, o si lo prefieres al panel de css adicional que hay en las opciones de tema en el menú de Divi.

Código:

.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: #8B3C90 !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;
}

 

Cambia #eee y #8B3C90 por la combinación de colores que necesites.

Y ya está, ya sólo tenemos que crear nuestros formularios y pegar el shortcode donde querámos, con nuestra estética Divi.

 

¿Te ha parecido útil este post? ¡Ven a los comentarios y saluda!

 

Fuente

 

Deja un comentario

DISEÑA EN WORDPRESS DE MANERA PROFESIONAL

CURSO POR EMAIL GRATUITO [EDICIÓN I]

¡Perfecto!

DISEÑA  EN WORDPRESS DE MANERA PROFESIONAL

CURSO POR EMAIL GRATUITO [EDICIÓN I]

¡Perfecto!

Échame un cable

¿Compartes mi artículo con tus amigos?