Hoy vamos a ver uno de los trucos para personalizar Divi que más me gustan, porque implica adaptar el plugin de formularios de contacto más utilizado, Contact Form 7, a los estilos de este fantástico tema WordPress.
Porque, seamos sinceros, Contact Form 7 es un plugin fantástico, pero los estilos por defecto que incluye para sus formularios son de todo menos agradables a la vista, tiene un aspecto realmente espartano y soso.
Podrías decir que por qué no usar los formularios que vienen con el constructor Divi, pero no te lo recomiendo, pues los campos que ofrece son limitados y no puedes, por ejemplo, añadir listas desplegables, ni carga de archivos, ni todas esas cosas que nos gusta incluir y personalizar en los formularios.
Así que, si usas Divi, es prácticamente obligatorio, por un lado, usar Contact Form 7 para los formularios y, además, personalizar su aspecto para que se ajuste a los estilos de formulario de Divi, mucho más bonitos, pero sobre todo es vital para ofrecer un diseño uniforme en tu web.
Adaptar los estilos de Contact Form 7 a Divi es, además, muy fácil. Solo tienes que añadir el siguiente código en Divi -> Opciones del tema -> CSS personalizado:
.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;
}Del código anterior tendrás que cambiar los colores, en el ejemplo #eee y #8B3C90, a los de la combinación de colores que estés usando o tus gustos personales.
Una vez hayas personalizado a tu gusto los estilos de Contact Form 7 en Divi solo tienes que añadir el shortcode de tu formulario en un módulo de texto del constructor Divi para que se muestre con los nuevos estilos.
Espero que te haya gustado, otro día vemos más trucos para personalizar Divi.
Puede que también te interese…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Gracias Fernando, parece mentira pero era mi tarea de esta mañana era precisamente esto. Gracias por aportar conocimientos.
Fernando como siempre dando en el clavo. Enhorabuena y gracias!!!!
En el código que compartes no aplica estilos a los desplegables (select).
En un rato seguramente retoque tu código y lo dejaré por aquí.
Un saludo
que tal colega, al final pudiste retocar el código? me serviría un montón.
Hola Ángel, ya han pasado cinco años… Pero por si te sigue interesando o a quien entre buscando:
En la primera línea donde dice <> sólo tienes que añadir tras <> <> con lo que te quedaría ese «listado» así: <> y ya está.
Lo vuelvo a poner sin comillas ni nada para que quede claro:
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select
Saludos y gracias a todos.
jajaja… he «anotado» los códigos…
Resumen: de «.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar» hay que pasar a «.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select».
Sin comillas, claro.
jajajaja… cá día soy mas tonto, jajajaja
Sucede e las mejores casas 😀
Hola muchas gracias por tu aporte, tengo un problema necesito cambiar el texto del boton por defecto dice ENVIAR y lo quiero cambiar a SEND me podrías ayudar?
Marlon, supongo que a estas alturas ya lo habrás resuelto pero por si no, es muy sencillo, tienes que ir a editar el formulario (dentro de la opción Contacto) y en la pestaña Formulario fíjate al final que verás el código correspondiente al botón, será algo así: [submit «Enviar»]
Ahí cambia Enviar por lo que quieras y guarda los cambios. Saludos.
Hola, tengo un problemilla con mi formulario de contacto. Uso la plantilla de divi extra y.cuando alguien rellena el formulario se envía correctamente a mi direccion de correo, puedo ver el nombre y contenido del mensaje pero no me llega en la cabezera con la dirección de correo del usuario q lo ha rellenado sino con la de mail@yeldominiodemi blog. A qué se puede deber esto? Cómo puedo conocer la dirección original del remitente? Gracias
Tienes que configurar el email en los ajustes del plugin
El botón queda sin el elemento after
Hola Fernando, te consulto:
cuando me llega el mail a través del formulario, me llega sin formato. Cómo puedo darle formato, para poder enviar mi respuesta con el diseño que tengo armado para ese fin…? (cuerpo de mensaje, firma del mail, etc).
Gracias!
Gracias Fernando. Estás siempre ahí. Me has solucionado muchas dudas. Un abrazo
Gracias a ti por tu comentario 🙂