En esta entrada, que se ha convertido en una de las más solicitadas del blog, aprendimos cómo integrar el plugin Contact Form 7 a Divi para tener la posibilidad de agregar campos que no estaban disponibles en el módulo nativo del tema de cabecera de Elegant Themes.
La última actualización de Divi trajo algunos cambios, entre ellos un módulo extendido del Formulario de contacto, que ahora permite añadir campos personalizados, aunque limitados a entrada de texto.
Para la mayoría de los usuarios esta ampliación bastará (por ejemplo, para quienes nada más necesitaban añadir un campo para el número de teléfono), pero sigue quedándose corta para aquellos que precisan campos un poco más avanzados.
Con el nuevo módulo de Formulario de contacto en Divi 2.6, gran parte de la estructura del código ha cambiado, por lo cual el tutorial anterior solo aplica hasta la versión 2.5. Sin embargo, para aquellos que aún necesiten agregar tipos de campos que no están disponibles en Divi (desplegables, casillas de selección, etc.), vamos a adaptarlo a la versión 2.6.
La nueva estructura del formulario CF7
Para comenzar, tendremos que reconocer la estructura para poder adaptarla a Divi. Veamos el formulario estándar de CF7, con los campos Teléfono y Asunto:
<p>Nombre (requerido)<br /> [text* your-name] </p> <p>Correo electrónico (requerido)<br /> [email* your-email] </p> <p>Teléfono<br /> [tel tel-1] </p> <p>Asunto<br /> [text your-subject] </p> <p>Mensaje<br /> [textarea your-message] </p> <p>[submit "Enviar"]</p>
A esta estructura asignaremos las clases de Divi:
<div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p> <p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[text your-subject placeholder "Asunto"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p> </div> </div> <div class="et_contact_bottom_container"> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p> </div>
Notemos que el div contenedor se mantiene: .et_pb_contact. Tenemos que agregar un nuevo div inmediatamente a continuación, con la clase .et_pb_contact_form a la porción que contenga todos los campos de entrada.
Y luego manejar los pares de campos que queremos juntos como párrafos individuales con las siguientes clases:
.et_pb_contact_field
.et_pb_contact_field_half para el campo a la izquierda
.et_pb_contact_field
.et_pb_contact_field_half
.et_pb_contact_field_last para el campo a la derecha
Y si necesitamos un campo en ancho completo, usar un párrafo individual con las siguientes clases:
.et_pb_contact_field
.et_pb_contact_field_last
El botón quedará fuera de ambos div, estará dentro de un div nuevo con la clase .et_contact_bottom_container, y la etiqueta de CF7 tendrá las clases .et_pb_contact_submit .et_pb_button.
El resultado será este:
El botón queda con algo de margen innecesario a la derecha, que se debe al icono de carga (
) cuando se hace clic al enviar. Lo corregiremos con este código en el recuadro CSS personalizado del ePanel o en el archivo style.css del tema hijo:
div.wpcf7 .ajax-loader {
/* para versiones anteriores a 4.6 de CF7 la clase es div.wpcf7 img.ajax-loader */
position: absolute;
left: 0;
}
Recordemos que para evitar esto:
Tenemos que agregar el siguiente código:
.wpcf7-submit:hover {
padding: 0.3em 1em;
}
Bien. Este es un ejemplo para comprender la estructura nueva, ya que aquí CF7 no hace nada diferente de lo que hace ahora el flamante módulo de Divi.
Pues bien, si necesitamos campos que no están disponibles en Divi, vamos a tener que seguir esa estructura detallada anteriormente.
Agregar Really Simple CAPTCHA
Pese a que CF7 ya no ofrece más soporte para Really Simple CAPTCHA y lo reemplazó por reCAPTCHA de Google, el plugin sigue funcionando correctamente con aquella extensión.
En mi caso particular, prefiero seguir usando Really Simple CAPTCHA siempre que demuestre funcionar: la imagen es clara, pequeña, con pocos caracteres y no desentona con el formulario desde el punto de vista del diseño.
Google reCAPTCHA me resulta recargado, molesto y estéticamente monstruoso. No dudo de su efectividad, pero… gustos son gustos.
Para tener en cuenta, es que ya no encontraremos el botón para añadir RSC en el editor del formulario de CF7. Simplemente tendremos que agregar el código abreviado correspondiente: captchac para la imagen y captchar para el campo de ingreso de texto.
Veamos cómo integrarlo en CF7 al formulario anterior.
Colocamos la etiqueta al final del código (sí, debajo del botón Enviar) y la envolvemos en las siguientes etiquetas de Divi:
<div class="et_contact_bottom_container cf7_rscaptcha "> <div class="et_pb_contact"> <div class="et_pb_contact_right"> <p>[captchac captcha-579] [captchar captcha-579]</p> </div> </div> </div>
Con lo cual, el código para el formulario completo sería:
<div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p> <p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[text your-subject placeholder "Asunto"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p> </div> </div> <div class="et_contact_bottom_container"> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p> </div> <div class="et_contact_bottom_container cf7_rscaptcha"> <div class="et_pb_contact"> <div class="et_pb_contact_right"> <p>[captchac captcha-579] [captchar captcha-579]</p> </div> </div> </div>
Casi perfecto; simplemente ensanchamos un poco el campo de ingreso para los cuatro caracteres y centramos verticalmente la imagen:
.wpcf7 .et_pb_contact_right p input {
max-width: 65px;
}
.wpcf7-captchac {
position: relative;
right: 0px;
top: 7px;
}
La clase .cf7_rscaptcha la agregamos para evitar esto en los teléfonos móviles,
Evitar que el CAPTCHA se superponga con el botón “Enviar”
Solo nos quedará añadir el siguiente código CSS:
@media only screen and (max-width: 329px) {
.wpcf7 .et_contact_bottom_container.cf7_rscaptcha {
float: none;
overflow: initial;
}
}Estilo en mensajes de error y de envío exitoso
Recordemos que al enviar un formulario con datos incompletos o erróneos se produce la siguiente advertencia:
Para evitar que ese mensaje con borde amarillo se superponga al botón Enviar, añadiremos el siguiente código:
div.wpcf7-validation-errors {
clear: both;
border: none;
}O bien, si por considerarlo redundante al mostrar cada campo su propio mensaje de error en color rojo, queremos suprimirlo:
div.wpcf7-validation-errors {
display: none !important;
}Para el mensaje de envío con éxito, también tenemos que evitar la superposición con el botón enviar. Opté también por eliminar el borde, ya que no “pega” con el resto del diseño:
div.wpcf7-mail-sent-ok {
clear: both;
border: none;
}Agregar campo desplegable de opciones
Vamos a reemplazar el campo Asunto por un desplegable. Este será el código completo:
<div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p> <p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-2 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p> </div> </div> <div class="et_contact_bottom_container"> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p> </div>
Los estilos CSS serán prácticamente los mismos que para Divi 2.5:
.wpcf7-select {
width: 100%;
padding: 15px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
color:#999;
background-color: #eee;
font-size: 14px;
}
¿Queremos personalizar la flecha del menú? (No olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente):
.wpcf7-select {
width: 100%;
padding: 15px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
color: #999;
background-color: #eee;
font-size: 14px;
-moz-appearance: none;
-webkit-appearance: none;
background-position: center right 15px;
background-image: url("https://urldelarchivo/arrow.png"); /* URL del archivo de la imagen */
background-repeat: no-repeat;
}
Agregar casillas de selección
En este último ejemplo, vamos a añadir un campo con tres opciones para seleccionar, y al cual aplicaremos estilos para que coincida con el diseño del formulario de Divi.
En el formulario de CF7 agregamos el campo con las opciones tildando Envolver cada elemento con la etiqueta <label>.
El código completo quedaría así:
<div class="et_pb_contact"> <div class="et_pb_contact_form"> <p class="et_pb_contact_field et_pb_contact_field_half">[text* your-name placeholder "Nombre"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[email* your-email placeholder "Correo electrónico"]</p> <p class="et_pb_contact_field et_pb_contact_field_half">[tel tel-1 placeholder "Teléfono"]</p> <p class="et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last">[select menu-2 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[checkbox checkbox-738 use_label_element "Opción 1" "Opción 2" "Opción 3"]</p> <p class="et_pb_contact_field et_pb_contact_field_last">[textarea your-message placeholder "Mensaje"]</p> </div> </div> <div class="et_contact_bottom_container"> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p> </div>
Veremos que sin estilos es un espanto:
Esto se puede corregir con estos dos códigos CSS:
.wpcf7-checkbox label {
display: inline-block;
}
.wpcf7-checkbox input {
width: initial !important;
}
Pero como queremos que se vea más acorde con el diseño de Divi, vamos a aplicar estilos a las casillas.
Suprimimos la casilla predeterminada del navegador:
.wpcf7 input[type="checkbox"] {
display: none;
}Aplicamos el cursor de la manito al pasar encima de las opciones:
.wpcf7 label {
cursor: pointer;
}Y luego creamos nuestras propias casillas personalizadas:
.wpcf7 input[type="checkbox"] + .wpcf7-list-item-label:before {
border: 2px solid #2EA3F2;
border-radius: 3px;
display: inline-block;
font: 16px/1em ETmodules;
content:"\00a0";
height: 16px;
margin: 0 .25em 0 0;
padding: 0;
vertical-align: top;
width: 16px;
}
.wpcf7 input[type="checkbox"]:checked + .wpcf7-list-item-label:before {
background: transparent;
color: #666;
content: "N";
text-align: center;
}Voilà!
Estilos en los marcadores de posición
Con estas personalizaciones, vamos a controlar el aspecto de los nombres dentro de los campos, que se ven un poco más tenues que su color verdadero.
Con el siguiente código tomarán el valor real:
.wpcf7 ::-webkit-input-placeholder {
opacity: 1;
color: #999;
}
.wpcf7 :-moz-placeholder {
opacity: 1;
}
.wpcf7 ::-moz-placeholder {
opacity: 1;
}
.wpcf7 :-ms-input-placeholder {
opacity: 1;
}Nótese que el primer código es para Google Chrome, que sí necesita el valor inicial del color para interpretarlo correctamente.
Con esta lógica, podemos usar los valores necesarios si es que queremos cambiar el color de los textos dentro de los campos (por ejemplo, a rojo):
.wpcf7 ::-webkit-input-placeholder {
opacity: 1;
color: #cc0000;
}
.wpcf7 :-moz-placeholder {
opacity: 1;
color: #cc0000;
}
.wpcf7 ::-moz-placeholder {
opacity: 1;
color: #cc0000;
}
.wpcf7 :-ms-input-placeholder {
opacity: 1;
color: #cc0000;
}
Recordar que el campo desplegable no es un placeholder, por lo cual para cambiar el color hay que modificar el valor de color en la clase .wpcf7-select en el CSS. Lo mismo para las opciones de la casilla de selección.
Por último, le daremos el mismo estilo de Divi al efecto de “activar” el campo cuando llevamos el cursor.
Con CF7 el campo permanece visible al seleccionarlo, y en el caso del campo Nombre, incluso se oscurece un poco.
Aplicamos los siguientes estilos, y tendremos el mismo efecto que en Divi:
.wpcf7 input:focus::-webkit-input-placeholder, .wpcf7 textarea:focus::-webkit-input-placeholder {
opacity: 0 !important;
}
.wpcf7 input:focus:-moz-placeholder, .wpcf7 textarea:focus:-moz-placeholder {
opacity: 0 !important;
}
.wpcf7 input:focus::-moz-placeholder, .wpcf7 textarea:focus::-moz-placeholder {
opacity: 0 !important;
}
.wpcf7 input:focus:-ms-input-placeholder, .wpcf7 textarea:focus:-ms-input-placeholder {
opacity: 0 !important;
}
Una posdata importante de este tutorial es recordar dónde pegar los códigos para Divi y dónde colocar correctamente las etiquetas de CF7 para poder recibir todos los datos enviados desde el formulario.
En el menú Contacto > Formularios de contacto le damos clic al título Formulario de contacto 1 para editarlo y veremos en la pestaña Formulario la porción de código que debemos reemplazar/editar.
Sección donde se debe pegar el código HTML con las clases de Divi
En tanto, en la pestaña Correo Electrónico de nuestro formulario activo pegaremos las etiquetas generadas por CF7 de acuerdo con el siguiente ejemplo:
Algunos ejemplos en funcionamiento
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola.
Muy bueno y útil el post. gracias por compartirlo y explicarlo con tanto detalle.
Yo tengo Divi 3.19.15 y casi todo me ha funcionado perfectamente.
Solo no he conseguido que me salga la casilla de verificacion, o cuando aparece no se puede marcar, ni he conseguido quitar o personalizar los mensajes de error o éxito.
Sabes si esto se debe a la versión de Divi? Tienes alguna sugerencia?
Mucahs gracias. Un saludo.
Buenos días, gracias por el tutoríal me va a venir genial porque en mi página que estoy construyendo se me plantea un problema con un formulario. A ver si soy capaz de explicarme: Estoy montando la web con el Tema Divi Versión: 3.19.5. y necesito hacer tres formularios distintos con un solo botón de envío. Estos tres formularios debería estar en un solo módulo pero el problema es que los tres tienen un texto de cabecera diferente. Con el DIVI me temo que no puedes insertar una línea de texto y un separador para delimitar los tres modelos de formulario. En el primer formulario el texto de cabecera sería “Datos del jugador”, el segundo sería “Datos del tutor” y el tercero (Opciones del curso); todos ellos con sus correspondientes campos para rellenar.
La pregunta es… se puede hacer esto con DIVI (tres formularios con un solo botón de envío). La otra opción es seguir tu tutoríal y adaptar los códigos fuente y sus CSS a mi diseño.
Muchas gracias por tu ayuda y espero tu respuesta para empezar con ello….
Hola, Luiso25.
Gracias por tu comentario.
Divi falla en este aspecto, ya que tendría que tener una opción para agregar una simple etiqueta
<p>que permita introducir texto entre los campos.Se puede lograr una apariencia muy similar, con un campo de texto y ajustando un poco los estilos. No es lo más prolijo, pero sirve para salir del paso.
Como texto de cabecera insertá un campo de texto que no sea obligatorio y que tenga el mismo color de fondo de la página (ajustá el tamaño y color de fuente a tu conveniencia). Podés usar también un borde superior que haga las veces de separador. Por último, en el recuadro Elemento principal del CSS personalizado de los ajustes de este campo de texto escribí
pointer-events: none;. Esto último hará que el campo no sea cliqueable y no se pueda escribir dentro.Eso sería todo. 🙂
Espero que te sirva.
Saludos.
Buenos días Ana, gracias por la rápida respuesta… Lo pondré en práctica y te cuento….
Muchas gracias
Hola Ana, gracias por tu ayuda, ya pude adecuar mi formulario con Contact form, siguiendo tu tutorial. Me queda un problema y es que no me sale el mensaje de exito, cuando la persona deja los datos. Cuando reviso el correo sale la pagina de suscripción, lo que indica que el formulario funciona. ¿Como hacer que aparezca el mensaje de exito en el formulario?. Copie el codigo que me indicas en el tema hijo pero no toma el cambio.
De antemano agradezco tu ayuda.
Saludos
Hola, Eustorgio.
¿Cuál es el código que usaste? En todo caso, eviame la URL del formulario para revisarlo.
Saludos.
Para que aparezca en los mensajes la linea verde o amarilla donde se debe pegar el codigo? :
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng {
clear: both;
border: none;
}
Hola, Ernesto.
El código citado es para ocultar los bordes de color en los mensajes de validación. Si querés mostrarlos, tenés que borrar la línea que dice
border: none;.Y el código va en el archivo
style.cssdel tema hijo (si está creado y en uso), o en el panel CSS personalizado de las opciones del tema.Saludos.
Genial ésta guía. La he seguido paso a paso y ya tengo mi formulario como quiero, se ve genial. Sólo tengo un problema, y es que el checkbox del acceptance no se ve. ¿Sabes por qué puede ser? Gracias!
Hola, Jesús.
La casilla de aceptación de términos no usa
labely no se ve por los estilos agregados a las otras casillas. En este caso, reemplazá:.wpcf7 input[type="checkbox"] { display: none; }Por:
.wpcf7 input[type="checkbox"]:not(.wpcf7-acceptance) { display: none; }Y agregá:
.et_pb_contact p input.wpcf7-acceptance { width: initial; }Saludos.
Funciona! Ya se ve el checkbox del acceptance. Gracias!
Una pregunta: hay algun truco para que no aparezca el recuadro verde cuando se envía el formulario con éxito? Estoy aplicando el CSS que mencionas arriba pero aún así aparece el borde verde (o amarillo en caso de un error). Estoy usando la versión 3.0 de DIVI. No sé si tendrá algo que ver.
Aparte de eso el tutotial ha sido excelente. Me quedó todo genial. Gracuas
El código completo es este y funciona para todas las advertencias:
div.wpcf7-validation-errors, div.wpcf7-mail-sent-ok, div.wpcf7-mail-sent-ng { clear: both; border: none; }Fijate que el navegador esté cargando correctamente los cambios en la hoja de estilos.
Fenomenal tu tutorial! Ha funcionado a la perfección y he aprendido a hacer mis propios cambios.
Lo único es que tengo qeu agregar un campo de subida de archivo a mi formulario y no logro darle la forma que quiero y que se adapte al DIVI. Alguna sugerencia?
Hola, Paula.
Gracias por tu comentario.
Fijate si esta respuesta te sirve.
Saludos.
Muy completo todo! tengo una pregunta: cómo puedo hacer para que queden 3 cuadros, quiero que ingresen Alto, Ancho y Largo.
Hola, Mati.
Tendrías que darles una clase personalizada a los tres campos, en lugar de
.et_pb_contact_field_half. Por ejemplo:Y luego, aplicarles estilos con CSS:
.un_tercio { width: 33.33%; float: left; }Espero que te sirva.
Saludos.
Estimada Anita, en primer lugar te saludo cordialmente y te deseo un año 2017 lleno de satisfacciones y alegría. Por otra parte como en muchas otras ocasiones, recurro a ti para solicitar ayuda. Tengo una página hecha con Divi, y al agregar un mapa en la sección de contacto, éste me aparece siempre en modo mapa y no en satelite como yo quiero, lo he grabado mil veces en modo satélite y siempre vuelve a aparecer en modo mapa, hay alguna posibilidad de “forzar” la vista en modo satélite?
De antemano, muchas gracias.
Saludos cordiales.
Hola, Ricardo.
Gracias por tu saludo y te deseo un excelente año también 🙂
Divi no incluye esa opción y si quisieras aplicarla tendrías que editar un archivo del tema (es poco práctico porque cada vez que se actualice tendrás que volver a editarlo, pero si es estrictamente necesario es la única alternativa).
El archivo en cuestión es
frontend-builder-scripts.jsde la carpeta/Divi/includes/builder/scripts/y la línea que tendrías que editar esmapTypeId: google.maps.MapTypeId.ROADMAP,pormapTypeId: google.maps.MapTypeId.SATELLITE,Un abrazo.
Nuevamente, muchas gracias estimada Anita, lo probaré a ver como anda. Pero me queda una duda, no hay forma de “enlazar” este archivo en un child theme para no tener que modificarlo cada vez que se actualice Divi?
Saludos.
No sería lo aconsejable, porque es un archivo del core del tema y si en el futuro se actualiza para corregir alguna incompatibilidad o para añadir una función nueva, tu sitio jamás se enterará y podrían ocurrir efectos indeseados.
Pero sí es posible. Creás una carpeta
/js/en el tema hijo y le pegás el archivofrontend-builder-scripts.jscon la línea modificada. Luego enfunctions.phppegás el siguiente código:function override_parent() { add_action('wp_enqueue_scripts','override_js'); } add_action ('after_setup_theme','override_parent'); function override_js() { wp_dequeue_script( 'et-builder-modules-script' ); wp_enqueue_script( 'et-builder-modules-script', get_stylesheet_directory_uri() . '/js/frontend-builder-scripts.js', array( 'jquery' ), true ); }Eso sería todo.
Saludos.
Muchas gracias Anita, probaré ambas opciones.
Saludos.
Buenas tardes,
muchas gracias por tu trabajo, que nos ayuda mucho. Estoy probando este diseño en la plantilla Extra de Elegant Themes, en principio funciona perfectamente con alguna pequeña variación, de hecho me gusta como queda en distintos navegadores.
El problema que tengo es que no las dos columnas en móvil se siguen viendo, no funciona responsive http://ofertassingles.com/prueba2/ desde aquí pueden verlo.
He intentado añadir al css este código pero no funciona correctamente, …
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.et_pb_contact_field et_pb_contact_field_half et_pb_contact_field_last {
width: 100%;
}
…supongo que algo he hecho mal, me puedes ayudar?
Hola, Eduardo.
La verdad, no puedo reproducir el incidente. En mi instalación de Extra se ven de ancho completo en resoluciones menores.
Este es el código tal cual lo tengo:
Fijate copiarlo y pegarlo como está. (Las clases del botón las suprimí, porque en Extra generan un efecto raro al posar el puntero).
Si sigue sin verse correctamente fijate que no sea algún estilo (agregado al tema o de algún plugin) que lo esté sobrescribiendo.
Saludos.
Gracias por la respuesta, pero sigue funcionando de forma no deseada, he revisado los plugins y no veo ninguno que afecte a las clases que hace referencia el formulario, y como código personalizado solamente tengo el siguiente:
body {background: #f7f7f7;}
.et_pb_widget .widgettitle {background: none; color: #800000;}
.no-activo {background: #F3F781; color: #ff0000; text-align: center; font-size: 120%; padding: 10px; margin-top: 20px;}
.et_pb_toggle_content ul {padding: 0 0 0 3.143em; margin-top: 0;}
.et_pb_toggle_content ul li ul {padding: 0 0 0 4.143em;}
.et_pb_toggle_content p {padding-bottom: 0;}
.et_pb_slide_description {color: #fff; text-shadow: 0px 2px 3px #000;}
.excerpt {
font-size: 80%;
text-align: justify;
}
.et_pb_module.et_pb_toggle { border-color: #ccc !important; }
/* Customization – make links in posts bold */
.post-content p a {
text-decoration: none;
color: #848484 !important;
}
/* Customization – underline links in posts when hovering */
.post-content p a:hover, a:focus {
text-decoration: underline;
color: #a4a4a4 !important;
}
.cat.esc {border-bottom: 2px solid #890963 !important;}
.custom-field-fechas {float: left; font-size: 11px; color: #000; clear: right; font-weight: bold;}
.cff2 {float: left; margin-right: 3px; font-weight: bold; font-size: 11px; color: #800000;}
/*LATERAL CON TELÉFONO DE BARRA LATERAL*/
.edu1 {margin-top: 30px; text-align: center; float: left; width: 30%;}
.edu2 {margin-bottom: 18px; text-align: center; float: left; width: 60%;}
.edu-img {padding: 10px;}
.edu-txt-rojo {text-align: center; padding-bottom: 5px; color: #800000; font-size: 18px !important;}
.edu-txt-negro {float: left; padding: 5px; color: #000000; font-size: 18px !important;}
.edu-txt-tel {float: left; padding: 10px 5px; color: #800000; font-size: 24px !important; font-weight: bold;}
Tampoco veo que podría ser… me puedes ayudar?
Muchas gracias
Hola, Eduardo.
¿Desactivaste los plugins? ¿Activaste el tema padre?
Por otro lado, fijate que la hoja de estilos del tema hijo está cargando dos veces (como
child-style-cssy comoextra-style-css). Esto no debería influir en la cuestión del formulario, pero tampoco debería ocurrir (revisá el código defunctions.php).Saludos.
Hola que tal… he modificado el achivo functions.php, he activado extra, he desactivado todos los plugins, he limpiado chaché de navegadores… no se que le pasa, no podría forzarse el diseño para esas clases respondan correctamente?
Si no es posible no quiero molestarte más, muchas gracias por todo de todas formas…
Hola, Eduardo.
Probá con este código:
@media (max-width: 767px) { .et_pb_contact_field, .et_pb_contact_field .wpcf7-textarea, .wpcf7-select { width: 100% !important; }En una situación normal no debería ser necesario, pero para este caso puntual creo que bastará.
Saludos.
Muchisimas gracias por tu respuesta. Disculpa que no te diese el feedback antes pero me ha pillado de viaje, pasé el código y vi que funcionaba al final, pero no pude agradecerte tu tiempo.
Por si sirve de algo he visto que mi child theme no está bien configurado, ya que código que pongo ahí no lo interpreta bien, y si lo pongo en el espacio de la plantilla padre si lo hace bien, será cuestión de crear otro child theme para que no vuelva a pasar.
Tomo nota de la web caribdis y os tendré muy en cuenta para futuros proyectos así como os recomendaré siempre que pueda.
Un saludo !!
Hola,
De nuevo gracias por el blog.
He puesto un checkbox de dos casillas. El problema es que deja marcar las dos opciones que pongo y cundo se envia el formulario te lo deja realizar.
Muchas gracias
Hola, Joan.
Para hacer las casillas exclusivas, tenés que usar la etiqueta
exclusive. El código sería algo así:Con el asterisco el campo es obligatorio.
Saludos.
Muy agradecido por esta ayuda!
Saludos!!!
Hola me sirvió de mucha ayuda tu guía.
Una pregunta como has hecho para traducir tu pagina y poner la bandera arriba
saludos.
Hola, José.
Gracias por tu comentario. Fijate en esta respuesta.
Saludos.
Hola, primero que todo muchas gracias por compartir estas soluciones. Son perfectas! No sé si el nuevo divi ha cambiado el css del botón de enviar para poderlo poner más a la derecha lo comento porque el código que tienes que es el siguiente con el Divi que estoy utilizando no funciona, para que funcione hay que quitar img.
Este es el que tienes publicado:
div.wpcf7 img.ajax-loader {
position: absolute;
left: 0;
}
Este es el que me funciona:
div.wpcf7 .ajax-loader {
position: absolute;
left: 0;
}
Hola, Josep.
Gracias por tu comentario.
Lo que ha cambiado es el marcado HTML del icono de carga en la última actualización de Contact Form 7, que pasó de ser una imagen a ser un
<span>. Gracias por señalarlo. Voy a actualizar el código también en la entrada.Saludos.
Genial todo Ana.
Solo hay una cosa que no consigo dejar con el mismo estilo que DIVI.
Es la altura de los campos Select.
Se queda aprox. la mitad de un campo convencional (Si el alto de un xampo Text es de 1 cm. el select se queda en menos de 0,5 cm).
¿Se te ocurre algún remedio?
Gracias anticipadas
Hola, Juan Carlos.
Tenés que probar con los valores de
paddingde la clase.wpcf7-selecthasta encontrar el que se ajuste a tu diseño.Saludos.
Saludos Ana y muchas gracias por tus aportaciones.
Actualmente estoy usando DIVI 3.0
Soy un completo novato y siguiendo tus indicaciones, mi formulario CF7 ya se parece al formulario de DIVI.
Pero tengo un problema con los campos desplegables y no consigo averiguar donde hay que meter tu código:
==========
.wpcf7-select {
width: 100%;
padding: 15px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
color:#999;
background-color: #eee;
font-size: 14px;
}
======
¿Se mete en algun lufar de CF7?
¿Tal vez en DIVI en CSS personalizado de DIVI?.
Muchas gracias
Hola, Juan Carlos.
Gracias por tu comentario.
El código CSS va en la hoja de estilos del tema hijo,
style.css(si estás usando uno), o en el recuadro CSS personalizado de Divi.Saludos.
Buenos días Ana:
En primer lugar felicitarte por la labor que estás realizando. El tutorial es impresionante…He seguido tus pasos para integrar el plugin Contact form7 en la web que estoy dearrollando en DIVI 3.0 y me ha quedado bien, excepto que al divididir la sección en 2 partes (formulario y a la derecha una foto), los campos del formulario no llegan hasta el final de la sección. El botón de enviar si que llega.
Como estoy desarrollando en localhost, ¿puedo enviarte un pantallazo y me das tu opinón?
Hola, Nacho.
Gracias por tu comentario. Es difícil determinar la causa; la captura no sirve porque tendría que inspeccionar el código. Fijate que no estés aplicando algún margen o relleno en algún lado (sección, columna o módulo).
Saludos.
La verdad es que antes de mandarte la duda estuve mirando y mirando, y al final me decidí a preguntarte. Volveré a mirarlo y, en todo caso, cuando la suba al servidor te mandaré el enlace. Aprovecho para consultarte otra duda. Estoy con otra página en la que he colocado el logo en medio del menú (es un logo más bien cuadrado, y cuando lo veo para móvil o tablet el logo sale ‘pequenísimo’. Tengo que tocar alguna función o solo el CSS para conseguir que aparezca mucho más grande?
Muchas gracias
Un saludo
Hola, Nacho.
El tamaño del logo en móviles lo manejás con CSS. Por ejemplo:
@media (max-width: 980px) { .et_header_style_left #logo { max-height: 100%; } }Saludos.
Gracias de nuevo
¿Sabes si existe algún manual o web donde se pueda ver cómo construye/nombra DIVI las secciones?
Un saludo
Nacho
Hola, Nacho.
Podés ver los nombres de todas las clases en la pestaña CSS personalizado de cualquier sección, fila o módulo, haciendo clic en cada campo. Para más info, podés revisar el manual Explorando Divi (capítulo Las pestañas CSS personalizado).
Saludos.
Buenos días:
He puesto el tutorial en funcionamiento paso por paso y me ha funcionado todo correctamente, muchísimas gracias.
Sólo me he encontrado con un problema, y es que necesito meter un campo de aceptación (del aviso legal) y al haber modificado los estilos del campo checkbox no se visualiza el checkbox de este tipo de campo.
¿Podrías, por favor, ayudarme a resolver este problema? Gracias
Hola, Samuriosa.
Fijate en esta respuesta.
Saludos.
Gracias. Efectivamente, ha funcionado. Siento las molestias
Hola Ana,
Gracias por tu ayuda en este tutorial tan detallado.
¿Me puedes confirmar si este código es compatible con la versión actual de DIVI 3.0.15 y el Contact Form 7 v. 4.5.1?
No sé si no lo he aplicado bien o si es que no es compatible…
Gracias de nuevo, un saludo desde España.
Raquel MS
Hola, Raquel.
Sí son compatibles. ¿Qué sería exactamente lo que no te funciona?
Hola Ana,
Llevo tiempo utilizando tu guía para implementar CF7 con Divi y me va fantástico!
Lo único es que hay algo que se me resiste. En el caso de un selector desplegable (.wpcf7-select) no tengo manera que hacer para tratar el texto como un place holder de un color y que al selecionar aparezca como los demás campos de entrada. Me explico mejor:
Los campos de texto normales los tengo para que, cuando no hay nada escrito aún aparezcan en rojo, y que al introducir texto éste sea en negro. El problema viene en que, si hago esto, en el caso del selector ya aparece en negro directamente. Por lo que el formulario queda un poco feo porque aparecen todos los placeholders en rojo y el del select en negro directamente. Sabes si se puede hacer algo?
Hola, Milton.
Fijate que está aclarado en la entrada: “Recordar que el campo desplegable no es un
placeholder, por lo cual para cambiar el color hay que modificar el valor decoloren la clase.wpcf7-selecten el CSS.” La única macana es que al quedar seleccionada una opción se va a mostrar del color que le asignes a.wpcf7-select. La verdad, no sé si habrá alguna manera de cambiarle el color mediante jQuery. 😕Saludos.
Hola,
Excelente. Quiero poner campo fecha de nacimiento. ¿Es posible?
¿Cómo?
Muchas gracias
Hola, Joan.
Tendrías que usar la opción de CF7
fechadentro de las etiquetas<p></p>como se explica en esta entrada. No hay muchas opciones de estilo, el calendario no se ve en algunos navegadores y hay que integrarlo mediante este filtro en el archivofunctions.phpdel tema hijo:Saludos.
Muchas gracias
Quiero insertar campo de código postal.
Saludos
Joan
Hola, Joan.
El código es el mismo y tendrías que insertar el campo de CF7
número.Hola gracias por responder. El campo número para el código postal oK.
Pero quiero que salgan sólo las 5 posiciones. Ejemplo 08600. ¿Es posible?
Muchas gracias
En el caso del número no es posible asignar un mínimo/máximo de caracteres. Lo que podrías hacer es usar el campo
teléfono, con el siguiente formato:Recordá editar el mensaje de error “El número de teléfono que introdujo el usuario no es válido” para que no diga “teléfono” (podría ser algo así como “El número no es correcto”).
Saludos.
Estimada Anita:
Excelente guía, me sirvió muchisimo, sobre todo para “migrar” mis formularios de contacto desde la versión anterior. El único problema es que no logro hacer que el campo mensaje, quede con el mismo estilo de los demás (recuadro con bordes redondeados y fondo transparente). No sé cual es la clase a la que debo aplicar el estilo respectivo.
Saludos desde Chile.
Hola, Ricardo.
La clase que tenés que modificar es
.wpcf7 .et_pb_contact p textarea.Quedaría algo así (editá los valores correspondientes):
.wpcf7 .et_pb_contact p textarea { padding: 16px; border: 3px solid #000000; border-radius: 3px; background-color: transparent; }Espero que te sirva.
Saludos.
Muchas gracias nuevamente Anita, justo unos minutos antes de que me llegara tu correo, había logrado determinar que esa era la clase correcta. Me sirvió mucho todo lo que publicaste y ahora he podido desarrollar un formulario de lujo.
Me aprovecho de este contacto para pedirte ayuda en otro tema que me tiene muy complicado. Se trata de la forma en que aparecen las imágenes en Divi en el Fullwidth Slider, ya que no logro evitar que se “agranden” y sólo aparezca una parte de la fotografía. He probado con todos los ajustes de imágen que ofrece el componente y nada, incluso he dejado las imágenes del tamaño específico de la pantalla y nada.
Te agradezco nuevamente y por favor continúa con este blog que es una luz para muchos que encontramos en él la solución a nuestros problemas de desarrollo Web.
Atentos saludos.
Hola, Ricardo.
Te había respondido sobre esto aquí. Cuando seleccionás la opción tamaño de fondo “Cubrir”, lo que hace es adaptar el ancho, pero el alto depende del relleno inferior y superior que uses en el módulo. Y si usás varias imágenes, todas tienen que tener la misma proporción, de lo contrario siempre va a haber alguna que no va a coincidir.
Fijate si te sirve.
Saludos.
Muchas gracias estimada Anita, te cuento que he probado de todo y no logro conseguir ajustar las imágenes como corresponde. Además al poner cualquier valor en Relleno superior e inferior, la imágen se acorta y queda de una altura pequeña fija.
Me he leído con mucha atención la documentación de Divi y no encuentro nada que me pueda ayudar con esto.
De todas formas te agradezco por tru ayuda.
Saludos.
Estimada Anita:
Disculpa que te vuelva a molestar con este tema, pero la verdad es que no logro dar con la regla adecuada para resolver la alineación de los controles radio en el formulario, los que me salen corridos a la izquierda.
Este es el css que tengo en el tema (trabajo con divi)
.et-cart-info span { display: none; } /* Códigos para Contact Form 7 */ div.wpcf7 img.ajax-loader { position: absolute; left: 0; } .wpcf7-submit:hover { padding: 0.3em 1em; } .wpcf7 .et_pb_contact_right p input { max-width: 65px; } .wpcf7-captchac { position: relative; right: 0px; top: 7px; border: 2px solid #000; border-color: #6F7577; background: #E3E3E3; border-radius: 7px; } @media only screen and (max-width: 329px) { .wpcf7 .et_contact_bottom_container.cf7_rscaptcha { float: none; overflow: initial; } } div.wpcf7-validation-errors { clear: both; border: none; } div.wpcf7-mail-sent-ok { clear: both; border: none; } /* Estilo de los cuadros de texto - Con bordes redondeados y transparente */ .wpcf7 .et_pb_contact p input { border: 2px solid #000; border-color: #6F7577; background-color: #E3E3E3; border-radius: 7px; } /* Estilo del área de texto - Con bordes redondeados y transparente */ .wpcf7 .et_pb_contact textarea { border: 2px solid #000; border-color: #6F7577; background-color: #E3E3E3; border-radius: 7px; } /* Estilo para el Botón enviar */ .wpcf7 .et_pb_button { border-radius: 7px; border: 2px solid #6F7577; background-color: #E3E3E3; font-family: Arial, Helvetica, Verdana; color: #00396F; } /* Estilo para lista de selección */ .wpcf7-select { width: 100%; padding: 15px; border: 2px solid #6F7577; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 7px; color:#999; background: #E3E3E3; font-size: 14px; color: #00396F !important; } /* Estilo para textos en formularios */ .wpcf7 ::-webkit-input-placeholder { opacity: 1; color: #00396F; font-family: Arial, Helvetica, Verdana; } .wpcf7 :-moz-placeholder { opacity: 1; color: #00396F; font-family: Arial, Helvetica, Verdana; } .wpcf7 ::-moz-placeholder { opacity: 1; color: #00396F; font-family: Arial, Helvetica, Verdana; } .wpcf7 :-ms-input-placeholder { opacity: 1; color: #00396F; font-family: Arial, Helvetica, Verdana; } .wpcf7 .boton-radio { opacity: 1; color: #00396F; font-family: Arial, Helvetica, Verdana; } /* Controles radio */ .wpcf7 input[type="radio"] { display: none; } .wpcf7 label { cursor: pointer; } .wpcf7 input[type="radio"] + .wpcf7-list-item-label:before { border: 2px solid #6F7577; border-radius: 7px; display: inline-block; font: 14px/1em ETmodules; content:"\00a0"; height: 14px/1em; margin: 0 .25em 0 0; padding: 0; width: 16px; } .wpcf7 input[type="radio"]:checked + .wpcf7-list-item-label:before { background: transparent; color: #999; content: "^"; text-align: center; } .wpcf7 .boton-radio { padding: 15px; border: 2px solid #6F7577; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; color:#999; background: #E3E3E3; font-size: 14px; color: #00396F !important; height: 54px; text-align: left; margin: 0 auto; }Espero me puedas ayudar con esto, que me tiene superado hace rato.
Saludos y muchas gracias de antemano.
Hola, Ricardo.
Un gusto saludarte nuevamente. 🙂
La verdad, no entiendo la lógica que usa ET en los márgenes del formulario, jaja. Pero como todo tiene su vuelta, lo único que tendrías que hacer es, en la clase
.wpcf7 .boton-radio, borrarmargin: 0 auto; y agregarmargin-left: 3%;ywidth: 47%;. Y para que no se descalabre en los dispositivos móviles, agregá:@media all and (max-width: 767px) { .wpcf7 .boton-radio { width: 97% !important; }Con eso debería bastar.
Saludos.
Estimada Anita:
Lo has hecho nuevamente, eres genial, tu solución me funcionó a la perfección y hoy por fin pude sacar a producción ese formulario que me estaba molestando tanto. Te recontra agradezco por tu paciencia y buena voluntad.
Un abrazo.
Saludos.
De nada, Ricardo. Un placer.
Saludos.
Hola, Paco.
Gracias por tu comentario.
Para ajustar los estilos del botón y de los campos tenés que usar CSS. Las clases del botón son
.et_pb_contact_submity.et_pb_buttony las de los campos/área de texto,.et_pb_contact p inputy.et_pb_contact p textarea.Por ejemplo, para los campos con bordes de 2px y fondo transparente, sería:
.et_pb_contact p input, .et_pb_contact p textarea { border: 2px solid #000; background: transparent; }Y para el botón, la clase
.et_pb_contact_submitte sirve para cambiarle el color. Por ejemplo:.et_pb_contact_submit { color: #000; }Con la clase
.et_pb_buttonmanejás rellenos, color de fondo, tamaño de fuente, bordes, etc. Por ejemplo:.et_pb_button { border: 1px solid #999; font-size: 15px; background: #f00; }Espero que te sirva.
Saludos.
Me sirvió todo perfecto. Mil gracias Ana.
Solo me ocurre algo raro y es que se superponen dos botones. El texto no. Se ve el borde del botón ant… Cuando posiciono el ratón (hover) me sale el color gris sobre el color burdeos que he asig… ejem
En la página de contacto lo puedes ver mejor (si tienes un ratito) que tratar de explicartelo.
Y un detalle mas que no consigo. El texto dentro de los campos me gustaría que fuera blanco (mas concretamente #e2e2e2) en lugar de ese grisaceo actual.
Por lo demás y como puedes ver y tras seguir tus indicaciones, está todo recontrarechulo, como a mi me gusta y con el resultado que tan magnificamente has expuesto en tu estupendo post y tras incorporar tus anotaciones posteriores.
Un millón de gracias maja.
PD: No consigo enviar archivos pero ese es otro cantar que voy a investigar mas adelante en algún post que he visto de pasada sobre ese asunto.
OK, buenísimo.
El tema de los botones… es probable que tengas que agregarle la declaración
!importantalborder. Y, en la respuesta anterior me olvidé de aclararlo, el código CSS conviene que apunte solo a los estilos de CF7 para que no te cambie los botones o campos de otros módulos. Esto es:.wpcf7 .et_pb_contact p input,.wpcf7 .et_pb_contact_submity.wpcf7 .et_pb_button.En cuanto al texto de los campos, aplicale
color: #e2e2e2;a.wpcf7 .et_pb_contact p inputy usá los valores de losplaceholdercomo se explica en esta entrada para que no se vean semitransparentes.Saludos.
Genial Ana:
No consigo resolver el asunto del boton pero creo que lo añadiré a una lista que tengo para dejar en manos del experto igual que el hecho de que aparezca el nombre del archivo cuando lo selecciono porque pienso que despista un poco que no se refleje a la derecha del boton “seleccionar archivos”.
Aún así, mil gracias. He conseguido que mi formulario tenga el aspecto que deseaba con la posibiliad de adjuntar archivo, con tu ayuda gratuita y usando un plugin gratuito. ¿Qué mas puedo pedir?
Ademas tus respuestas son rapidas y fiables. Un placer y un gusto.
Hola Ana:
Ya creo que se por donde pueden ir los tiros en cuanto al asunto del botón enviar.
Yo tengo instalado woocommerce y el botón que tu creaste y que yo intento modificar según el gusto y estética de mi página para el FC7, justo está incorporando los estilos del boton de woocommerce.
De hecho me gustaría modificar este botón genérico del carrito de woocommerce pero lo intenté hace tiempo sin ningun exito.
Bueno solo era eso.
Un saludo
Hola Ana:
Fantástico post. He seguido al pie de la letra todos los pasos y practicamente he conseguido los resultados deseados. El botón de enviar es el problema mayor pues no se donde introducir los codigos de clase y etiqueta.
la cuestión es que me gustaría añadir recuadros (bordes) en los campos de nombre, mail, mensaje… y despues de tres días volviendome loco he decidido pedirte ayuda.
Un saludo
Felicitaciones
Hola de nuevo!
Quería pedirte consejo para una cosa que no consigo hacer. He hecho un formulario que contine dos campos de “carga de archivo” y he añadido la clase .wpcf7-file a los ajustes css para que el campo tenga el mismo fondo, texto, etc… pero no consigo ver en el inspector cómo apuntar a la clase que controla el botón que aparece para cargar los archivos, el que pone “seleccionar archivo”. Ahora sale un botón con el fondo blanco y texto negro. Y me preguntaba si esto pertenece a CF7 o si debe pertenecer a una clase de Divi. De igual forma no logro encontrarla para poder hacer el botón con otro estilo. Te adjuntaría una captura aquí si pudiera para que vieses a qué botón me refiero. Alguna idea de como puedo encontrar dónde se controla este botón? Gracias de antemano!
Hola, Milton.
La apariencia del botón Examinar o Seleccionar archivo depende del navegador. Te copio el código que usé para un formulario con carga de archivos.
.wpcf7 input[type="file"] { display: none; } .cf7_file label { border: 1px solid #EF8112; border-radius: 3px; padding: 5px 10px; display: inline-block; } .wpcf7-file { background: transparent !important; padding: 11.5px !important; border: none !important; }El código en CF7 es:
La única contra es que al hacer un
display: none;en el campofiletambién queda oculto el nombre del archivo una vez seleccionado (esto puede confundir al usuario). No sé si existirá algún snippet de JavaScript para mostrarlo, pero mis conocimientos de JS no llegan a tanto…Fijate si te sirve. Saludos.
Vaya, es genial tu solución! Además el diseño es fantástico. Lo que sí es verdad es que es una lástima que no aparezca el nombre del archivo pero es un mal menor. Gracias por la ayuda, me ha servido muchísimo. 🙂
De nada, un placer. Dándole vueltas al código del
input[type="file"], probé poner en lugar dedisplay: none;unopacity: 0;y luego ajustarle el tamaño para que coincida con el botón (label).El código quedó así:
.wpcf7 input[type="file"] { opacity: 0; position: absolute; left: -178px; /* este valor depende del tamaño del botón */ width: 189px; /* este valor depende del tamaño del botón */ height: 53px; /* este valor depende del tamaño del botón */ margin-top: -19px; /* este valor depende del tamaño del botón */ cursor: pointer; }De esta manera, aunque no se muestra en pantalla el nombre del archivo, se ve una etiqueta al posar el puntero: Ningún archivo seleccionado como inicial, y el
nombre-del-archivo.nnnuna vez seleccionado. No es la solución ideal, pero es un poco mejor que la anterior.Pues si, aún mejor!
Muchas gracias por compartirlo! 🙂
Muchas gracias por tu excelente aportación.
Después de aplicar tus pasos me encuentro con un problema. Necesito hacer un botón desplegable y con select* debería hacerse obligatorio al ponerle asterisco pero a mi no mefunciona.
Veo aquí en la demo que el desplegable obligatorio sí funciona:
http://contactform7.com/checkboxes-radio-buttons-and-menus/
¿A alguien más le pasa que en Divi no le funciona?
Muchas gracias
Hola, Zeng.
Lo que te debe estar sucediendo es que te falta agregar la primera opción en blanco (la etiqueta
include_blankde CF7).Tendrías que agregar lo siguiente:
Espero que te sirva.
Saludos.
Excelente! Funcionó. Muchas gracias!
Una última cuestión que me lleva loco desde hace días y no consigo solucionar. Uso un pie como elemento global y quiero duplicarlo para usarlo en un segundo idioma que tengo en la web.
El problema es que si lo copio y voy a Divi > Biblioteca de Divi y creo un elemento nuevo, le pego el pie (en memoria) y lo traduzco al otro idioma resulta que me cambia también el original, a pesar de que tienen diferente nombre en la biblioteca. Tampoco encuentro la manera de quitarle el ser global al original para poder modificar la copia sin que afecte al primero ¿sabes como solucionarlo?
Muchas gracias de nuevo.
Saludos
He usado poco y nada los elementos globales de la Biblioteca, así es que no estoy muy segura de cuál es la solución… Si guardaste como global la fila o sección y sincronizaste las tres pestañas, fijate si te permite desmarcar la opción Incluir ajustes generales en el módulo global correspondiente al pie. Ahora bien, si creaste el módulo global de cero, desde la Biblioteca, no es posible quitarle la propiedad de global. No te quedará otra que duplicarlo a mano :(.
He probado y no hay manera de desactivar tampoco las pestañas, gracias igualmente. A ver si añaden esta característica para ahorrar todavía más tiempo.
Muchas gracias por todo.
Hola guapa. Acabo de descubrir la solución. Creas una fila nueva y puedes arrastrar elementos de un bloque global al que acabas de crear y dejan de ser globales. Pasan de ser verdes a grises. Perfecto!
Saludos y gracias!
¡Excelente! Gracias por compartir la solución 😀
Excelente. Muchas gracias, me ha servido muchísimo.
¿Podrías explicar como personalizar los botones “radio”? Los de elegir sólo una opción entre varias.
Muchas gracias
Hola, David.
Gracias por tu comentario.
Para los botones radio es muy similar a los checkbox:
.wpcf7 input[type="radio"] { display: none; } .wpcf7 label { cursor: pointer; } .wpcf7 input[type="radio"] + .wpcf7-list-item-label:before { border: 2px solid #2EA3F2; border-radius: 999px; display: inline-block; font: 16px/1em ETmodules; content:"\00a0"; height: 16px; margin: 0 .25em 0 0; padding: 0; width: 16px; } .wpcf7 input[type="radio"]:checked + .wpcf7-list-item-label:before { background: transparent; color: #666; content: "^"; text-align: center; }El código de CF7 sería
[radio radio-1 use_label_element "Opción 1" "Opción 2" "Opción 3"]o bien[radio radio-1 use_label_element default:1 "Opción 1" "Opción 2" "Opción 3"]para el primer botón seleccionado de manera predeterminada.Espero que te sirva.
Saludos.
Felicidades. Gracias por tu explicación. Funciona a la perfección.
Recibe un cordial saludo y sigue adelante con el blog!
Excelente recurso como siempre!
Pregunta de novato ¿qué diferencia hay entre el Divi Builder y el Divi Theme? ¿Cuál es el que hay que instalar sobre el WordPress?
Hola, Dany.
Gracias por dejar tu comentario. En cuanto a tu duda, es simple: uno es un plugin y el otro es un tema. La diferencia es que si instalás solo el plugin, podés usarlo con cualquier otro tema (aunque no siempre se integra de manera óptima), y si instalás el tema, tenés todas las características del plugin más los ajustes propios de Divi. La razón de ser del plugin está más bien relacionada con el hecho de no perder el aspecto de las páginas creadas con el constructor de Divi, en caso de decidir cambiar de tema. Yo sugiero instalar el tema, ya que está garantizado que todos los módulos (en especial los de ancho completo) van a funcionar como corresponde.
Espero que te sirva.
Saludos. 🙂
Excelente guía paso a paso, todo perfectamente explicado. Enhorabuena y gracias!
De nada, me alegro de que te haya servido. Saludos 🙂
Fantástica actualización del tutorial Contact Form 7 y Divi que ya hiciste. Muchas gracias por actualizarlo tan rápido y por el gran aporte que realizas. Es de gran ayuda!
Saludos,