Tutorial Divi: Adaptar los estilos de Contact Form 7 a Divi

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.

formulario-contact-form-7

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.

formulario-de-contacto-divi

campos-formulario-de-contacto-divi

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.

an%cc%83adir-css-contact-form-7-opciones-divi

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.

insertar-contact-form-7-en-divi

Espero que te haya gustado, otro día vemos más trucos para personalizar Divi.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(1 votos, promedio: 5)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

10 comentarios en “Tutorial Divi: Adaptar los estilos de Contact Form 7 a Divi”

  1. ibuprofenopalcuerpo

    Gracias Fernando, parece mentira pero era mi tarea de esta mañana era precisamente esto. Gracias por aportar conocimientos.

  2. 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

  3. Marlon Alvarado

    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?

    1. 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.

  4. 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 [email protected] blog. A qué se puede deber esto? Cómo puedo conocer la dirección original del remitente? Gracias

  5. Paula Soldini

    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!

Deja un comentario

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

 

Ir arriba Ir al contenido