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.
Código cortesÃa de Agentewp.
[ratings id=»1216″]
