Inicio ┬╗ Divi ┬╗ Adaptar los estilos de Contact Form 7 a Divi

Adaptar los estilos de Contact Form 7 a Divi

Escrito por Miguel de Pineda

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.

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

0 comentarios

Enviar un comentario

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

Información básica sobre protección de datos Ver más

  • Responsable SEO Wolf .
  • Finalidad Moderar los comentarios.
  • Legitimaci├│n Tu consentimiento.
  • Destinatarios RAIOLA NETWORKS, S.L..
  • Derechos Acceder, rectificar y suprimir los datos.
  • Informaci├│n Adicional Puedes consultar la informaci├│n detallada en la Pol├ştica de Privacidad.

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

Share This