Este tutorial funciona en la versión 2.5 de Divi e inferiores
Pese a que Divi es un tema completísimo, y ahora con su última versión 2.4 ofrece aún más control sobre la personalización de casi todos sus elementos, una de las características más buscadas y que Elegant Themes todavía no ha extendido, es la posibilidad de añadir campos al formulario de contacto.
El módulo integrado de Divi es básico, ya que sólo cuenta con los tres campos consabidos: Nombre, Dirección de correo electrónico y Mensaje. Como opción, se puede activar un CAPTCHA para evitar el spam, pero no existe hasta el momento en ninguno de los ajustes la posibilidad de agregar más campos, que a veces son necesarios para enriquecer y facilitar el proceso de comunicación entre el usuario y el sitio web.
La solución en este caso, y aquella que recomiendan desde el mismo soporte de ET, es usar un plugin externo. Si bien existen incontables plugins de formularios (tanto gratuitos como pagos), el primero que nos viene a la mente es Contact Form 7. No solamente porque es el más usado, con más de un millón de instalaciones activas, sino porque es súper sencillo de implementar.
Entonces, pues, vamos a aprender cómo crear un formulario con Contact Form 7 y hacer que luzca prácticamente igual al formulario de Divi.
En primer lugar, buscamos el plugin desde Plugins > Añadir nuevo, y luego lo instalamos y activamos.
Veremos que una nueva opción del menú ha sido añadida a nuestro administrador de WordPress: Contacto. Si le damos clic a Contacto, abriremos la página de Contact Form 7 que contiene un bloque informativo con algunos enlaces a las preguntas más frecuentes, y más abajo una lista muy similar a la de Entradas o Páginas, donde tendremos el primer formulario de contacto que se instala con el plugin de manera predeterminada, llamado Formulario de contacto 1. Junto a ese título también veremos el código abreviado para pegar en la página donde queremos que se muestre el formulario (algo así como [contact-form-7 id="#" title="Formulario de contacto 1"], donde # es un número generado por el plugin).
Si simplemente pegamos ese código en un módulo de Texto o de Código (funciona de manera indistinta en ambos), lo que veremos en la página “en vivo” no nos gustará demasiado:
Así luce el formulario de CF7 “en crudo”
¿Cómo hacer, entonces, para que se vea lo más parecido posible al formulario de Divi?
Así luce el formulario de Divi
Esta pregunta tiene más de una respuesta, y la más común va a ser: aplicar estilos CSS al formulario CF7. Pero hay otra respuesta que es más práctica y sencilla de implementar, y es “hacerle creer” a Divi que estamos usando su propio formulario. De este modo, escribiremos menos código y lograremos que el formulario mantenga el diseño de Divi y se vea perfecto en todas las resoluciones de pantalla.
Para ello, vamos a envolver las etiquetas generadas por CF7 en las etiquetas correspondientes al formulario de Divi. 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.
Sección donde se debe pegar el código HTML con las clases de Divi
<p>Nombre (requerido)<br />
[text* your-name] </p>
<p>Correo electrónico (requerido)<br />
[email* your-email] </p>
<p>Asunto<br />
[text your-subject] </p>
<p>Mensaje<br />
[textarea your-message] </p>
<p>[submit "Enviar"]</p>Deberá ser:
<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>Nombre (requerido)<br />
[text* your-name] </p>
<p>Correo electrónico (requerido)<br />
[email* your-email] </p>
<p>Asunto<br />
[text your-subject] </p>
</div>
<p>Mensaje<br />
[textarea your-message] </p>
</div>
<p>[submit "Enviar"]</p>Aunque nos vamos acercando, todavía no conseguimos que se vea exactamente como queremos. El resultado es el siguiente:
Aplicamos las etiquetas de Divi al formulario CF7
Ahora necesitamos mover los títulos dentro de los campos, y aplicar el estilo de Divi al botón Enviar. Para los títulos, eliminamos el texto inmediatamente posterior a la etiqueta <p>, pasamos los rótulos dentro de los códigos abreviados, entre comillas, y les anteponemos la etiqueta placeholder. Para el botón, añadimos las dos clases CSS de Divi et_pb_contact_submit y et_pb_button, precedidas de la etiqueta class: sin espacio:
<div class="et_pb_contact"> <div class="et_pb_contact_left"> <p>[text* your-name placeholder "Nombre"]</p> <p>[email* your-email placeholder "Correo electrónico"]</p> <p>[text your-subject placeholder "Asunto"]</p> </div> <p>[textarea your-message placeholder "Mensaje"] </p> </div> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
El resultado es el siguiente:
Movemos los títulos dentro de los campos y aplicamos estilos al botón
¡Ya casi estamos! Se preguntarán por qué el campo Correo electrónico quedó debajo de Nombre, con el espacio en blanco arriba de Asunto. Y si añadimos uno, dos o más campos, quedarán uno arriba del otro, menos los dos últimos. Esto es porque en el ejemplo están agrupados en el mismo div, cuyo estilo les da el 50% de ancho.
Para resolver esto, necesitamos crear un div con la clase et_pb_contact_left para cada par de campos que queremos que se muestren juntos. Veamos el siguiente ejemplo, donde añadiremos un campo Teléfono para mostrar debajo de Correo electrónico y a la derecha de Asunto.
<div class="et_pb_contact"> <div class="et_pb_contact_left"> <p>[text* your-name placeholder "Nombre"]</p> <p>[email* your-email placeholder "Correo electrónico"]</p> </div> <div class="et_pb_contact_left"> <p>[text your-subject placeholder "Asunto"]</p> <p>[tel tel-1 placeholder "Teléfono"]</p> </div> <p>[textarea your-message placeholder "Mensaje"]</p> </div> <p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
¡Listo! Ya tenemos un formulario con dos campos más, al estilo Divi, sin agregar una sola línea en el CSS personalizado, y manteniendo intacta la propiedad adaptable (responsive).
Este pequeño tutorial seguramente cubrirá las necesidades de un gran número de usuarios, pero aún podríamos aprender algunos trucos más para poder sacarle el máximo provecho.
Por ejemplo, ¿qué tal si queremos añadir un CAPTCHA para evitar que nos lleguen mensajes spam? En primer lugar, instalamos el plugin Really Simple Captcha, el cual está desarrollado como extensión de Contact Form 7 por el mismo autor (Takayuki Miyoshi). Luego de activarlo, veremos que se habrán habilitado las opciones de CAPTCHA en la página de edición de CF7.
Todo lo que tenemos que hacer ahora es colocar la etiqueta generada por CF7 al final del código, y envolverla en las siguientes etiquetas de Divi:
<div class="et_pb_contact">
<div class="et_pb_contact_right">
<p>[captchac captcha-579] [captchar captcha-579]</p>
</div>
</div>Con lo cual, el código para el formulario completo sería:
<div class="et_pb_contact">
<div class="et_pb_contact_left">
<p>[text* your-name placeholder "Nombre"]</p>
<p>[email* your-email placeholder "Correo electrónico"]</p>
</div>
<div class="et_pb_contact_left">
<p>[text your-subject placeholder "Asunto"]</p>
<p>[tel tel-1 placeholder "Teléfono"]</p>
</div>
<p>[textarea your-message placeholder "Mensaje"]</p>
</div>
<p>[submit class:et_pb_contact_submit class:et_pb_button "Enviar"]</p>
<div class="et_pb_contact">
<div class="et_pb_contact_right">
<p>[captchac captcha-579] [captchar captcha-579]</p>
</div>
</div>Vamos a ver cómo queda:
Bastante bien, pero queremos el CAPTCHA al mismo nivel que el botón Enviar, ¿verdad? Ahora sí es necesario aplicar estilos. Vamos al recuadro CSS personalizado dentro de las Opciones del tema y pegamos el siguiente código (o mejor aún, lo pegamos en la hoja de estilo del tema hijo*):
.wpcf7 .et_pb_contact_right {
margin-top: -14px;
}Como el campo de entrada para los cuatro caracteres nos parece algo angosto, añadimos el siguiente código para ensancharlo un poco:
.wpcf7 .et_pb_contact_right p input {
max-width: 65px;
}Y, además, queremos centrar verticalmente la imagen de los cuatro caracteres:
.wpcf7-captchac {
position: relative;
right: 0px;
top: 7px;
}Por último, para evitar esto en los teléfonos móviles de menor resolución,
Evitar que el CAPTCHA se superponga con el botón “Enviar”
añadimos lo siguiente:
@media only screen and (max-width: 329px) {
.wpcf7 .et_pb_contact_right {
float: none;
text-align: left;
}
}Bien, ya tenemos un formulario con dos nuevos campos y un CAPTCHA para fortalecer la seguridad.
¿Qué tal si queremos un menú desplegable en lugar del campo de texto Asunto?
<p>[select menu-862 "Tipo de consulta" "Solicitud de presupuesto" "Soporte técnico" "Consulta general"]</p>
Nos da esto:
Aplicar estilos al menú desplegable
Tendremos que meter más mano en el estilo CSS y darle al menú el color de fondo y el ancho de nuestro formulario:
.wpcf7-select {
width: 100%;
padding: 15.5px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
font-family: inherit;
color:#aaa;
background-color: #eee;
}
Genial, ¿verdad? Y hasta podemos ir un poquito más allá y personalizar la flecha del menú (las últimas cinco líneas añadidas; no olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente), con el siguiente código:
.wpcf7-select {
width: 100%;
padding: 15.5px;
border: none;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0px;
font-family: inherit;
color:#aaa;
background-color: #eee;
-moz-appearance: none;
-webkit-appearance: none;
background-position: center right 15px;
background-image: url("https://urldelarchivo/arrow.png");
background-repeat: no-repeat;
}Como podemos ver, ya tenemos un formulario con los campos que queremos, sin resignar el estilo de Divi y usando la mínima cantidad de código necesaria.
El resultado final
Antes de terminar, un último consejo, porque nunca falta el despistado que se olvida de llenar algún campo obligatorio, o no lo completa con el tipo de datos que corresponde:
Para evitar que se superponga el aviso de error al botón, añadimos el siguiente código:
div.wpcf7-validation-errors {
margin-top: 50px;
}O, mejor aún, ya que lo consideramos redundante si cada campo muestra su propio mensaje de error en color rojo, lo suprimimos:
div.wpcf7-validation-errors {
display: none !important;
}
Casi olvidaba que cuando se envía el mensaje con éxito, también ocurre esto:
Lo corregimos con el siguiente código:
div.wpcf7-mail-sent-ok {
margin-top: 50px;
}O en caso de preferir no mostrar el borde en color verde:
div.wpcf7-mail-sent-ok {
border: none;
}Para tener en cuenta:
- *Si bien el usuario menos experimentado preferirá pegar los códigos CSS en las Opciones del tema, siempre será más recomendable trabajar con un tema hijo y añadir los códigos a la hoja de estilo correspondiente.
- Siempre separar en
divscon la claseet_pb_contact_leftcada par de campos que queremos que aparezcan juntos. En el caso de tener un número impar de campos y no desear que aparezca un espacio en blanco, lo recomendable es sacarlo afuera deldivpara que ocupe todo el ancho del formulario. - No dejar líneas en blanco dentro del código de CF7 (para evitar saltos de párrafo de más).
- ¡No olvidarse de cerrar los
divs! - Y no olvidarse de agregar a la plantilla de Correo electrónico las etiquetas correspondientes a los nuevos campos, ya que es la única manera de que nos lleguen en el mensaje todos los datos introducidos por el usuario en el formulario.
- Este tutorial sirve para aplicar los estilos de Divi a uno o a todos los formularios por igual. No nos sirve si necesitamos que varios formularios tengan un estilo diferente (por ejemplo, que uno tenga los campos con bordes y otro sin bordes, o distintos colores de fondo). Tal vez otro día haga otro tutorial para eso 😉
Espero que se haya comprendido y haya resultado útil. Desde ya me gustaría recibir comentarios, todas las preguntas que sean necesarias si algo no se entendió, y ¿por qué no? muestras de cómo les han quedado sus formularios CF7 al estilo Divi. 🙂
Edición para Divi 2.5.4 y superiores
Con la actualización a la versión 2.5.4 se modificó el estilo del botón Enviar, para que incluya la “flechita” al posar el puntero, que aparece por defecto en todos los botones de Divi.
Lamentablemente, no es posible recrear este efecto con CF7, ya que este usa la etiqueta input para el botón, mientras que Divi usa button con un seudoelemento :after. En caso de querer evitar esto:
hay dos alternativas. Una es ir al Personalizador de Tema > Botones > Estilo de botones y seleccionar No en la opción Añadir icono de botón. Esta corregirá el relleno del botón Enviar de CF7 pero desactivará el efecto de los botones a nivel global (se tendrá que manejar individualmente para cada módulo donde haya un botón presente).
La otra es añadir el siguiente código a la hoja de estilos:
.wpcf7-submit:hover {
padding: 0.3em 1em;
}
Finalmente obtendremos esto:
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,
Muchas Gracias por tu post, está genial! Lo implementé y funciona perfect, solo que no logro hacer que trabaje en 2 columnas. Al encerrar en el div el par de campos, solo me aparecen las dos filas pegadas una encima de otra, pero con el ancho total de la pantalla. ¿Puedes ayudarme?
Hola, Angélica.
Gracias por tu comentario.
¿Qué versión de Divi estás usando? Tené en cuenta que este tutorial sirve solo hasta la 2.5.
De todas maneras, si es posible enviame la URL donde lo hayas implementado, porque es imposible determinar la causa sin verlo directamente.
Saludos.
En efecto, uso la versión 3.0.40. Tienes alguna solución para esto? También tengo problemas con la ubicación del botón “Enviar”, no se ubica alineado a la derecha y choca con el captcha…
El formulario lo tengo aqui http://villaluengaventura.com/programa-a-la-carta
Gracias de nuevo!
Hola, Angélica.
En ese caso, tenés que seguir los pasos que se detallan en este tutorial, ya que las etiquetas del módulo del formulario cambiaron a partir de Divi 2.6.
Saludos.
Buenas, no entiendo este apartado para personalizar la flecha del menú desplegable. Mi pregunta es la siguiente, de donde saco la imagen para la flecha?
– Genial, ¿verdad? Y hasta podemos ir un poquito más allá y personalizar la flecha del menú (las últimas cinco líneas añadidas; no olvidar subir al servidor una imagen para la flecha y escribir la URL correspondiente).
Y una vez subido, debería coger la URL de la biblioteca de medio y sustituirla en la línea esta??:
background-image: url(“https://urldelarchivo/arrow.png”);
Gracias
Hola, Marcos.
Exacto, la URL será la ruta completa a la imagen, previamente subida (a la biblioteca de medios o a una carpeta del servidor).
Saludos.
Buenas, mi pregunta es la siguiente, de donde saco la imagen para subir al servidor de la flecha del menú desplegable? Gracias
Hola, Marcos.
Disculpas que no entendí bien la pregunta. La imagen debe ser un archivo en formato PNG, creado con algún editor tipo Photoshop o similar. También se puede descargar de un banco gratuito de imágenes, como por ejemplo Freepik.
Saludos.
Muchas gracias por el post, por fín he conseguido darle un paspecto adecuado a los formularios de contact from, pero sigo teniendo un problema, cuando intento dividir con los div para que aparezcan el formulario en dos columnas no me muestra como a ti te aparece, sinplemente me aparecen las dos filas pegadas una encima de otra, pero con el ancho total de la pantalla, he intentado diefentes métodos pero no consigo ponerlo en dos columnas tal como muestras en la imagen. ¿Alguna idea?
Hola, Enrique.
¿Tendrás una URL para verlo?
Saludos.
Muy buenas y gracias de antemano.
Tengo varios sitios funcionando con el típico “checkbox + Acepto las condiciones legales”.
Ahora estoy con otra web, última versión tanto de Divi como de Contact Form 7
Copie el mismo código y el checkbox no me aparece… y por más vueltas que le doy no se que puede ser.
Me pueden ayudar?
Ejemplo donde si funciona:
http://secundinoglez.com/contacto
Ejemplo donde no funciona:
https://beta.buendiatours.eu/contacto
Código empleado:
[text* nombre placeholder “Nombre*”]
[email* email placeholder “Correo electrónico*”]
[tel telefono placeholder “Teléfono”]
[text* asunto placeholder “Asunto*”]
[textarea mensaje placeholder “Mensaje”]
[checkbox* checkbox-689 use_label_element “Acepto las”]<a href=”https://buendiatours.eu/aviso-legal” rel=”nofollow”> <strong>condiciones legales</strong></a>
[dynamictext ticket “codigoticket”]
Enviar
[captchac captcha-579] [captchar captcha-579]
Hola, Gustavo.
En el código CSS correspondiente a la casilla te está faltando
:before. El selector completo es.wpcf7 input[type="checkbox"] + .wpcf7-list-item-label:before.Saludos.
Lo he modificado y está igual.
Sigo investigando, de todas formas mil gracias por responder.
Si doy con la solución os lo hago saber.
Un saludo
Hola, GSR.
Tenés mal los códigos CSS. Los dos selectores que debés usar son
.wpcf7 input[type="checkbox"] + .wpcf7-list-item-label:beforey.wpcf7 input[type="checkbox"]:checked + .wpcf7-list-item-label:before.Saludos.
Está todo probado y mirado y sigue igual…
Pero ya se que está pasando, es una incompatibilidad de un plugin.
En el momento que lo desactivo, el formulario funciona perfectamente.
Pondré una incidencia a los creadores de dicho plugin a ver si hay una solución.
Mil gracias por todo.
Ya está resuelto, al final el problema era la incompatibilidad entre 2 plugins.
Me puse en contacto con el desarrollador y sacaron un parche para ello.
Mil gracias
Hola Ana, quiero agradecerte por dar excelente contenido de valor. Gracias a este post pude adecuar mi formaulario de Contact Form a Divi 3.0. Sólo tengo una duda y es que no me sale el mensaje de exito cuando el suscritor rellena el formulario. Realicé las pruebas y a pesar que no indica el mensaje, llega el correo de confirmación suscribirse a la lista.
Coloque los codigos Css segun tu tutorial pero nada.
Agradeciendo de antemano tu ayuda, me despido,
Atentamente.
Hola un saludo desde Venezuela, quiero darte muchas gracias por compartir contenido de gran valor. Tengo una pregunta: En mi pagina web el tema es Divi 3.0. La configuración en html de Contact form me queda claro, pero para darle forma al formulario todos los códigos que indicas, se colocan en DIVI, en el area avanzado y luego en CSS personalizado?. Gracias de antemano por tu ayuda.
Hola, Eustorgio.
Gracias por tu comentario.
Los códigos van en Divi > Opciones del tema > Generales > CSS personalizado (o en el archivo
style.cssdel tema hijo, si estás usando uno).Saludos.
Hola Ana,
Gracias por toda esta aportación de conocimiento…
Tengo una consulta: Como podria poner un enlace en el titulo que acompaña a una casilla de verificación de “He leido y acepto las condiciones legales” y que me lleve a la pagina de Aviso Legal.
Gracias
Hola, Nacho.
Gracias por tu comentario.
Si estás usando CF7, el código del enlace debería ir dentro del formulario. Por ejemplo:
[acceptance acceptance-123] <a href="http://urldelsitio.com/aviso-legal/">He leído y acepto las condiciones legales</a>Saludos.
Gracias! Ahora ha cambiado un poco pero la idea general es muy buena!
Hola Srta. Ana Ayelén Martínez, el formulario esta super bien te felicito, pero como cambio de color el fondo gris de los campos
Hola, Alfredo.
Fijate en esta respuesta.
Saludos.
Gracias por tu tutorial. Tengo una duda, como se puede hacer para que al poner el cursor “onFocus” desaparezca el texto “placeholder”.
Gracias de nuevo.
Hola, Javier.
Gracias por tu comentario. Esta respuesta que le di a otro usuario te puede servir. También está explicado en el tutorial para Divi 2.6 (en la parte Estilos en los marcadores de posición), que para el caso del
placeholderes igual que para Divi 2.5.Espero que te sirva.
Saludos.
Hola, tengo la última versión de Divi y un problema a ver si me puedes ayudar.
Cuando alguien envía un mensaje desde el formulario de contacto de Divi, el mail que te llega es
y no puedo responder al quien ha escrito el mensaje ni puedo saber su mail. ¿esto es correcto o normal con el formulario de contacto de divi?Muchas gracias!
Hola, Marcos.
Gracias por tu comentario.
Si el formulario está configurado correctamente, deberías recibir el correo como un mensaje normal, con el nombre y la dirección del remitente. Esto es, el formulario debe tener el campo de tipo Correo electrónico en los Ajustes de campo y ser obligatorio. En todo caso, configurá el Patrón del mensaje para que incluya la información del campo Correo electrónico, así por lo menos recibís ese dato en el cuerpo del mensaje.
Saludos.
Por curiosidad, se sabe todo lo que admite el Patron del mensaje? Es decir, aparte del mail, nombre, tel, etc etc. se pude poner [URL] o cosas así como en CF7?
Se puede poner cualquier ID que uno quiera (siempre que no contenga caracteres especiales o espacios) y agregar todos los campos que uno quiera, pero el tipo de campo siempre va a estar limitado a correo electrónico, entrada de texto o área de texto. Por ejemplo, si el usuario introduce texto en el campo Teléfono, a Divi le da igual, mientras que CF7 lo toma como erróneo porque solo admite números.
Gracias! 🙂
No se trata de un bug, sino que es la manera más segura de que el formulario envíe los correos sin problemas de entrega, ya que muchos servidores bloquean mensajes de un dominio determinado, si es que ingresan con un dominio distinto en el remitente (por temas de spam, phishing, etc). Si bien el correo del remitente figura como
, la cabecera de respuesta (reply-to) es la correcta. Es decir, al hacer clic en Responder, se ve la dirección real del remitente.En todo caso, para estar completamente seguros de que recibimos la dirección del remitente, hay que configurarla en el Patrón de mensaje.
Marcos, justo me encuentro con el mismo dilema acá y no tengo ni idea donde esta el control para eso. Supongo que tendria que ser un bug pero tenemos la versión 2.7.4 y esta el 2.7.5 disponible pero no dice nada en las notaciones de la acutalizacion sobre un arreglo.
Todavia tienes el problema, o ya has descubierto una solución?
Hola, Brad.
Quizá esta respuesta te sirva. No es un bug, y fue explicado en el foro de soporte.
Voy a editar mi respuesta de esta entrada, para que no genere confusiones.
Saludos.
Hola de nuevo! 🙂
Tal como he comentado en la entrada que habéis publicado sobre la nueva versión de DIVI 2.6, la nueva actualización ha provocado que las modificaciones que hicimos en los formularios de CF7 para que tenga la misma apariencia que el formulario de Divi no funcione. Parece que el nuevo formulario de Divi utiliza otra estructura. Ahora todos los formularios creados con CF7 mediante esta forma ya no funcionan en Divi. Parece ser que los “div” ya no hacen efecto y apila los campos uno encima de otro.
Parece ser que han cambiado las clases para los campos del formulario. Utilizando el inspector he conseguido arreglarlo bastante. Pero se me resiste el botón de enviar. No he conseguido mejorarlo. Pero voy a pegar aquí los cambios del formulario con un antes y un después para mostrar hasta donde he podido llegar:
En un formulario básico con teléfono antes era:
[text* your-name placeholder “Nombre”]
[email* your-email placeholder “Correo electrónico”]
[text your-subject placeholder “Asunto”]
[tel* tel-1 placeholder “Teléfono”]
[textarea your-message placeholder “Mensaje”]
[submit class:et_pb_contact_submit class:et_pb_button “Enviar”]
Y ahora, con Divi 2.6 es:
[text* your-name placeholder “Nombre”]
[email* your-email placeholder “Correo electrónico”]
[text your-subject placeholder “Asunto”]
[tel* tel-1 placeholder “Teléfono”]
[textarea your-message placeholder “Mensaje”]
Enviar
Pero algo no estoy haciendo bien porque el botón “Enviar no se acaba de ver bien, aparece un poco recortado por encima.
Ops! lo siento, no deja pegar el código en las respuestas. Por favor, borrenlo, y disculpen. Sólo pretendía pegar el código que había puesto.
Saludos
Sí, no más se pegaron las etiquetas de CF7. Cuando pegues código en un comentario, hacelo dentro de las etiquetas
<pre></pre>😉Muchas gracias! 🙂
Esto es lo que pretendía mostrar:
Antes:
[text* your-name placeholder “Nombre”]
[email* your-email placeholder “Correo electrónico”]
[text your-subject placeholder “Asunto”]
[tel* tel-1 placeholder “Teléfono”]
[textarea your-message placeholder “Mensaje”]
[submit class:et_pb_contact_submit class:et_pb_button “Enviar”]
Y ahora he puesto:
[text* your-name placeholder “Nombre”]
[email* your-email placeholder “Correo electrónico”]
[text your-subject placeholder “Asunto”]
[tel* tel-1 placeholder “Teléfono”]
[textarea your-message placeholder “Mensaje”]
Enviar
¡Hola de nuevo!
Si pasás por aquí, encontrarás la solución a los campos del formulario. Y acabo de revisarlo y este código sirve para los
checkbox.Hola,
Muy interesante tu tutorial.
Tengo un problema, he introducido el campo telèfono en el formulario, pero la sorpresa surge cuando en el correo recibido no sale el nº de teléfono introducido en el formulario
También pasa cuando pongo fechas
No se que hacer.
Muchas gracias
Hola, Joan. Gracias por comentar.
Fijate que estés agregando las etiquetas correspondientes a estos campos dentro de la plantilla de la pestaña Correo electrónico, en el cuerpo del mensaje. Y recordá no usar acentos o caracteres especiales en las etiquetas, porque CF7 no los reconoce.
Otra solución no se me ocurre sin verlo directamente en funcionamiento. Cualquier otra duda, contactame.
Saludos 🙂
Primero de todo gracias.
Tengo una duda.
He de poner un enlace en el formulario, ver disponibilidad. Que al clicar se vaya a un calendario de reserva.
Saludos
Hola, Joan.
En ese caso, te convendría instalar un plugin de reservas que se pueda integrar a Contact Form 7. Por ejemplo, WP Availability Calendar & Booking.
Saludos.
Ana,
Quiero agradecerte infinitamente!!! Quedo perfecto!
Todo lo fui pegando en el “E-Panel” pero por algun motivo no se veian los cambios hasta la ultima explicación!
Muchas gracias por todo!
Saludos!!!
Quiero felicitarte por esta explicaciòn, llevo dos dias buscando esta solución y es increible lo bien y simple que lo has publicado! Muchas gracias y felicitaciones!
Aprovecho para consultarte como puedo hacer modificar los tamaños y hacer transparentes los campos, y ponerles un borde blanco? y modificar el color del botón?
De ante mano muchas gracias!
Hola, Damián. Gracias por tu comentario 🙂
Para modificaciones de apariencia, sí o sí tendrás que agregar código CSS en la hoja de estilos del tema hijo (lo más recomendable), o en el campo CSS personalizado de las Opciones del tema.
Los campos de texto tienen la clase
.wpcf7-text; los campos de área de texto,.wpcf7-textarea; el campo del CAPTCHA,.wpcf7-captchar, y los campos desplegables,.wpcf7-select.Por ejemplo, para los cambios de fondo y borde te quedaría algo así:
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select { background-color: transparent !important; border: 2px solid #fff !important; }Los tamaños del texto los manejás con
font-sizey el relleno conpadding.El botón enviar tiene la clase
.wpcf7-submit(y.wpcf7-submit:hoverpara el efecto al posar el puntero). Un botón también transparente y con borde blanco quedaría así:.wpcf7-submit { background-color: transparent !important; border: 2px solid #fff !important; color: #fff; }Si tenés campos desplegables es muy probable que también debas ajustar la altura. Por ejemplo:
.wpcf7-select { height: 30px; }Espero que se entienda, y cualquier otra duda podés volver a consultar.
Saludos.
Genios Absolutos! Pegué los códigos y quedo perfecto! Una consulta mas, como hago para que el texto de los datos que ingresa el contacto, dentro de cada campo, sea de color blanco? Actualmente tiene una tipografia por defecto y es de color gris y casi no se ve!
Aguardo la ayuda y una vez mas, Muchas gracias por tantas soluciones!!!
Para que el color del texto de los campos también sea blanco tendrás que agregar
color: #fff !important;a:.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select { background-color: transparent !important; border: 2px solid #fff !important; }Eso basta para que al llenar los campos se vea blanco… pero quizá también quieras evitar la semitransparencia de los
placeholder. Esto no tiene que ver ni con Divi ni con CF7, sino que es la manera en que el navegador interpreta ese atributo.Para que se vea en un blanco uniforme, tendrás que agregar lo siguiente:
::-webkit-input-placeholder { opacity: 1; color: #fff; } :-moz-placeholder { opacity: 1; } ::-moz-placeholder { opacity: 1; } :-ms-input-placeholder { opacity: 1; }Si tenés campos con menús desplegables, tené en cuenta que deberás agregar un color visible para las opciones, ya que quedarían sobre un fondo también blanco. Para esto:
.wpcf7-select option { color: #000 !important; }Y si querés controlar la opacidad del texto dentro del campo al hacer clic, 0.5 para semitransparente o 0 para “limpiar” el campo:
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { opacity: 0.5 !important; } input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { opacity: 0.5 !important; } input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { opacity: 0.5 !important; } input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { opacity: 0.5 !important; }Vaya cracks! Gracias! 🙂
De nada, Milton 😀 Al parecer con Divi 2.6 van a incluir la posibilidad de agregar campos personalizados. Está por verse si solo serán simples campos de texto o si se juegan y lo hacen bien completo, como con menús desplegables, casillas de selección, selectores numéricos, selectores de fechas… bueno, creo que estoy soñando demasiado, con desplegables y casillas supongo que bastará. 😉
Saludos.
Yo creo que con Divi 2.6 solamente se podrá añadir algún campo de texto… tipo teléfono, etc, y como mucho la opción de si el campo es obligatorio o no. Pero no creo que vayan más allá de eso. Porque para tener más funciones avanzadas ellos mismos seguirán recomendando CF7 o Gravity forms, como hacen siempre. Incluso también lo hacen los desarrolladores de del theme Avada que es un super ventas. Al final más vale controlar bien CF7 y tener la fantástica ayuda que ofrecéis desde Caribdis. 🙂
Aca si que me perdí!
El código que me pasas, para que se vea con un blanco uniforme, o el primero para que se vea blanco, donde tengo que pegarlo?
Perdon la molestia, pero probe en distintos lugares y no resulta!
Muchas gracias nuevamente!
Saludos,
Damián.
No sé si usaste la hoja de estilos o el ePanel. En el caso que sea, allí tenés que tener un código que ya pegaste:
.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select { background-color: transparent !important; border: 2px solid #fff !important; }Ahí agregás
color: #fff !important;. Te tendría que quedar así:.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-select { background-color: transparent !important; border: 2px solid #fff !important; color: #fff !important; }¡Muchas gracias por el aporte! Es genial, muy bien explicado y nos ha ayudado mucho a todos. He seguido los pasos pasos paso a paso, y me ha surgido el error de que llegan los correos pero no llega el asunto, ¿sabrías decirme a qué es debido?
Un saludo!
Hola, Jesús. Gracias por comentar.
Fijate que estés agregando la etiqueta correspondiente en el campo Asunto de la pestaña Correo electrónico (ninguna etiqueta debe contener caracteres especiales, tales como acentos, eñes, espacios u otros símbolos; solo letras, guiones y/o números).
Saludos 🙂
Ana,
Nuevamente necesito de tu ayuda! Me pasa exactamente lo mismo que a Jesús con el asunto, pero en mis formularios no llega el dato “teléfono”. He intentado de todas formas, sin acentos ni nada que lo complique, pero no se exactamente en que sector y como debo pegarlo dentro de la pestaña “correo electrónico” de la configuración de CF7. Una excelente explicación o una captura de pantalla me salvaría, ya que al ingresar contactos de Clientes, me pierdo el dato fundamental del teléfono.
De ante mano como siempre, muchas gracias por la ayuda!
Hola, Damián.
Fijate si esto te sirve:
Cuando la etiqueta está agregada correctamente a la plantilla de Correo electrónico, se muestra grisada donde la marqué con rojo.
Ana,
Una vez mas muchas gracias por la ayuda! Con la configuración que me enviaste, lo solucione al momento! Muchas muchas muchas gracias!
No se si se podrá realizar que el check box que genera contact form, tenga un cuadrado parecido al que tiene el botón de enviar por ejemplo (para que no parezca que pertenece a otra página.. ¿Sabrías como solucionarlo?
Mil gracias
Hola, Francisco.
Gracias por comentar. Con CSS todo se puede 😉
Para una serie de opciones con casilla de verificación el procedimiento es el siguiente:
En el formulario de CF7 agregamos el campo con las opciones (tildando “Envolver cada elemento con la etiqueta <label>”). El código nos quedaría algo así:
Luego, agregamos los siguientes estilos CSS (ePanel o
style.cssdel tema hijo):input[type="checkbox"] { display: none; } label { cursor: pointer; } 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; } input[type="checkbox"]:checked + .wpcf7-list-item-label:before { background: #fff; color: #666; content: "N"; text-align: center; }El resultado se verá más o menos así:
El color y radio del borde lo manejás con los valores
borderyborder-radius, lo mismo que el tamaño de fuente y losmarginypadding.También podrías optar por otro símbolo para seleccionar la casilla, como una x o un cuadrado. Para eso, reemplazás
content: "N";porcontent: "M";o porcontent: "^";respectivamente.Tené en cuenta que estos estilos no sirven para la casilla de aceptación de términos (porque no usa
label). En este caso, la alternativa sería manejarlo como una casilla de verificación con una única opción y asignarle obligatoriedad:Espero que te sirva.
Madre mía… es el mejor tutorial que he visto nunca para CF7 y Divi. Y mira que he visto muchos tutoriales en inglés al respecto, porque uso mucho Divi y CF7. No tenía fe en encontrar nada parecido en español y al buscar por “divi y contact form poner un campo al lado del otro” ( que es el problema que me encuentro siempre utilizando la solución mediante CSS y el e-Panel ) me he encontrado esta joya de tutorial. Todavía no lo he probado pero me lo he leído entero y tengo la impresión de que va a funcionar muy bien. Estoy ansioso por probarlo!
Muchas gracias de antemano.
Milton:
Gracias por tu comentario. Es genial saber que este tutorial es útil para muchos usuarios de Divi. Y sí, a veces el abordaje más simple al problema es el que mejores resultados da. Luego nos cuentas cómo te fue con la implementación, y te invito a que compartas la página o las páginas donde lo uses, así las puedo añadir como ejemplos.
Un cordial saludo.
Hola de nuevo, y muchas gracias por responder.
Ya he implementado todos vuestros pasos y funciona a la perfección excepto algo que se me resiste: El campo de menú desplegable. No hay forma de que el código CSS haga efecto:
.wpcf7-select { width: 100%; padding: 15.5px; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0px; font-family: inherit; color:#aaa; background-color: #eee; }Utilizando el inspector veo que aparece, por lo que está bien pegado en el Custom CSS panel. Pero incluso cambiando los valores en el inspector de Chrome, no hace caso. Solo se puede cambiar el color de fondo y texto, perono el padding. Con lo cual el campo queda muy delgado. Además no coge la fuente externa que tengo cargada, con lo cual algunos campos muestran la tipo del tema por defecto y otros la que tengo cargada. He probado a borrar todo el resto del código CSS del e-panel por si alguno causaba el conflicto, pero nada. Te pondría la URL aquí para que lo veas pero es un directorio de prueba y pide user y contraseña para visualizar la web. Que si fueras tan amable de darle un vistazo te los paso por correo, pero es para no poner aquí los accesos. He intentado de todo pero se me sigue resistiendo. No se que hago mal.
El
paddingdel ejemplo está asignado a la fuente heredada (es decir, la predeterminada del tema), pero si usás otra fuente, lo más probable es que tengas que ajustarlo, además obviamente de asignar la fuente correspondiente enfont-family. En una situación normal, elpaddingdebería tomarlo sin más, pero si todavía se resiste, agregale la declaración!important.Fijate si esto te sirve. Si no, enviame los datos desde la sección de contacto y lo veo.
Saludos.
Muchas gracias. Todo muy claro, conciso y funcionando a la perfección.
Un saludo
Un artículo impresionante! Felicidades y muchas gracias!
De nada, Carlos. Gracias a vos por dejar tu comentario. 🙂
Buenos días:
Lo primero enhorabuena por tu página y por este fantástico tutoria. Lo he seguido y he logrado crear mi nuevo formulario para Divi.
Pero no logro corregir el mensaje que aparece al enviar con éxito o con fallo el formulario. Aparece superpuesto al propio botón de enviar y Recaptcha.
¿Dónde tengo que escribir el siguiente código y los otros que indicas?:
div.wpcf7-mail-sent-ok { margin-top: 50px; }Lo he intentado tanto en “ajustes adicionales” del formulario Contact-form-7, como en Divi: Hoja de estilo (style.css) añadiendolo al final. Pero en ambos casos no logro que se modifique nada.
¡Muchas gracias de antemano. Saludos!
Hola, Jokin.
Gracias por comentar. El código indicado hay que pegarlo, preferiblemente, en la hoja de estilos del tema hijo. Si aún no toma el cambio, añadirle la declaración
!important, con lo cual quedaría:div.wpcf7-mail-sent-ok { margin-top: 50px !important; }Si no has creado un tema hijo, entonces deberás pegar el código dentro del recuadro CSS personalizado, desde Divi > Opciones del tema > Ajustes generales
Con eso, debería funcionar.
Saludos 🙂
Genial! ya funciona. Como utilizo el Recaptcha, he puesto un margen de 70px en lugar de los 50px que sugerías y así el recuadro del mensaje aparece sin superponerse.
Lo que no he logrado es que en el móvil el recuadro “Enviar” no se superponga al Recaptcha. Lo he intentado añadiendo el código que sugieres detrás del código anterior. De esta forma:
div.wpcf7-mail-sent-ok { margin-top: 70px !important; } @media only screen and (max-width: 329px) { .wpcf7 .et_pb_contact_right { float: none; text-align: left !important; } }¿Podrías darme alguna sugerencia? Muchas gracias Caribdis
Intentá con
float: none !important;Como el reCaptcha es bastante más ancho no sabría decirte si sirve. Si no, tendría que verlo en funcionamiento, ¿podrías pasarme la URL?
Hola, lo he intentado de nuevo sin éxito. Quizás Recaptcha es demasiado grande para que no se solape en los móviles. Si me das alguna nueva pista, perfecto. Pero de todas formas muchas gracias por tu ayuda, al menos en el PC queda bien. Saludos,
Ahora que lo veo, es porque está tomando el margen negativo que modificamos para alinearlo con el botón. Para eso, entonces hay que reemplazar:
.wpcf7 .et_pb_contact_right { margin-top: -14px; }por
@media only screen and (min-width: 539px) { .wpcf7 .et_pb_contact_right { margin-top: -14px; } }Hola,
He conseguido que deje de solaparse. Curiosamente si visualizo la pantalla del móvil en horizontal, Enviar queda perfectamente ubicado a la derecha del Recaptcha, pero al verlo en vertical como no caben ambos botones, entonces Enviar, queda encima. No importa, lo voy a dejar así.
Muchas gracias por tus instrucciones y te animo a continuar con este blog tan útil.
Un saludo,
Jokin
Hola Jokin, yo tampoco he dado con el lugar exacto para colocar el código. No encuentro el rcuadro “CSS personalizado, desde Divi > Opciones del tema > Ajustes generales”. Podrías ayudarme? gracias de antemano
Hola, Juan. El código CSS —en caso de no usar un tema hijo— se debe añadir en el ePanel. Opciones del tema (Theme Options) > Ajustes generales (General settings) > CSS Personalizado (Custom CSS).
El código HTML del formulario se debe añadir en la sección de CF7 Contacto > Formularios de contacto > Formulario de contacto 1 > Editar.
Muy buenas:
Tengo insalado wordpress con Divi (última versión) y Contact Form 7. He seguido tu tutorial para imitar el estilo de divi en el formulario de contacto y no me está funcionando, de forma que los campos con class=”et_pb_contact” siguen apareciendo uno debajo del otro. No flotan.
¿Qué puede estar fallando en mi caso?
Hola, Samuriosa.
Me resulta extraño lo que te sucede. Si el par de campos está contenido en un
divcon la claseet_pb_contact_leftdeben aparecer uno al lado del otro. Por casualidad, ¿no has hecho algún cambio anterior en los estilos? También recordar que todos los pares de campos deben estar contenidos en undivcon la claseet_pb_contact.Otra cosa no se me ocurre sin ver directamente el código. Si me pudieras pasar una dirección para verlo, podría revisarlo mejor.
Saludos. 🙂
Muy Buenas de nuevo:
Tenía la web en local para cacharrear un poco con ella, pero la he subido al servidor para que la veas a ver si puedes echarme un cable.
Te he dejado el enlace en el formulario, de todos modos vuelvo a ponerlo aquí. http://samualv.info. El módulo de contacto de Contact Form 7 es el último de abajo del todo.
Un saludo y un millón de gracias
Hola de nuevo 🙂
Fijate que tenés cinco cierres de etiqueta
<p>de más. Todos antes del cierre de los<div>. Los está tomando como párrafos flotados a la derecha, pero como están vacíos no ves nada. Aquí te paso el detalle:Simplemente eliminá esas
</p>que están sobrando y ahí debería verse correctamente.Muchas gracias:
Efectivamente ya ha funcionado. Simplemente era quitar los intros que había colocado en el formulario (por eso de evitar el “churro código”).
Un saludo y un millón de gracias
Muchísimas gracias por la aportación, estoy empezando a realizar páginas con WordPress y todavía no controlo mucho.
Un tutorial genial, la verdad es que la plantilla DIVI es fantástica pero en algunas cosas como los formularios se queda un poco coja. Tengo una duda, ¿cómo se pondría en el formulario un campo para adjuntar archivos?
¡Un saludo!
Hola, Juan. Gracias por dejar tu comentario.
El campo para adjuntar archivos lo generás con el botón
archivo(en el formulario de CF7 que estés creando o editando), y esa porcioncita de código podrías ponerla dentro de las etiquetasDepende de dónde quieras ubicarlo, por ejemplo, debajo del campo Mensaje, podría quedar así:
La etiqueta
<br />es para que no quede tan pegado al campo anterior. Y si querés agregar algún texto, como por ejemplo: “Envíe el archivo en formato tal y tal”Hola hola !!!
Ante todo gracias por la labor que desempeñas ayudándonos a todos con el tema Divi… lo hace genial !!!
Mi duda es la siguiente… Resulta que estoy intentando seguir el tutorial para personalizar el formulario según lo explicas, pero no tengo ni idea de dónde tendría que insertar el código para el formulario completo:
Lo que estoy intentando hacer es que necesito poner al final de mi formulario la típica casilla de verificación y Acepto los términos y condiciones… Algo que no puedo hacer con el formulario que viene por defecto con DIVI, pero que sí me permite hacer Contact Form aunque lo tengo que personalizar para que tenga el mismo estilo que lleve la web.
Desde ya muchísimas gracias por todo lo que nos enseñas !!!
Solucionado !!! He indagado y he comprobado que había que introducir ese código en el mismo sitio que donde Contact Form genera el suyo propio.
Gracias de antemano !!! Saludos !!!
Hola, Rafa:
Me alegro de que hayas podido resolver tu duda. Para cualquier otra, estoy para ayudar. Saludos 🙂
PD: Agrego tu sitio a la lista de ejemplos.
Hola!!! me encanta tu web, casualmente investigando sobre DIVI por que lo adquiri recientemente y estoy sacandole el máximo provecho, encontré que eres responsable por varias traducciones de manuales de este excelente tema, me gustaria aprender mucho mas, y este post por ejemplo me ha servido, por que uso CF7 para todos mis formularios en los sitios que diseño, me parece de lejos el mejor plugin para Forms ya lo uso desde hace años y me ha salvado la vida varias veces y aquí me enseñas a conectarlo con DIVI muy bien. Pero tengo otra dudita a ver si me pudieras dar luces: tengo unas imágenes colocadas en 4 columnas a todo lo ancho del explorador, estas actuarían con links que me llevan a otros sitios, pero las veo muy simples, me gustaría hacer algunos efectos con CSS de modo que al pasar el mouse o alguna otra acción, haga algún efecto llamativo, pero no se manejar mucho el tema del CSS personalizado, agradezco si me ayudas con algo.
Saludos desde Colombia!!
Hola, Luis:
Muchas gracias por tu comentario. Coincido totalmente con tus apreciaciones sobre el plugin Contact Form 7. A mí me encanta su flexibilidad y simplicidad para integrar a cualquier tipo de tema. Para el usuario principiante puede parecer muy básico por la forma en que está constituido (sin interfaz visual o drag and drop, ni adornos excesivos), pero con los conocimientos adecuados de CSS y HTML se puede lograr casi cualquier cosa.
En cuanto a tu otra consulta, tendrías que usar una clase personalizada para la fila en la cual están colocadas las cuatro columnas, y luego manejar todo con CSS.
Por ejemplo, le ponés el nombre “efectos” a la fila (en el campo Clase CSS de los Ajustes generales). Luego, en el recuadro CSS personalizado de las Opciones del tema, o mejor aún en la hoja de estilos del tema hijo, agregás lo siguiente:
.efectos img:hover { código css aquí; } /* para el efecto al posar el mouse */ .efectos img { código css aquí; } /* opcional, si usás alguna transición en el :hover, o para el estado inicial de la imagen */ .efectos .et_pb_image { código css aquí; } /* también opcional para determinados efectos */Un efecto de imagen ampliada podría ser:
.efectos img:hover { -webkit-transform: scale(1.3); transform: scale(1.3); } /* esto es para que al posar el mouse la imagen tenga un efecto de zoom aumentado */ .efectos img { -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } /* esto es para que la transición sea suave y la imagen no se agrande de golpe */Y el opcional:
.efectos .et_pb_image { overflow:hidden; } /* esto es para que la imagen no supere sus contornos actuales */En esta página encontrarás un montón de ejemplos de transiciones con sus respectivos códigos CSS. Para referencia,
.container:hover .imagesería el equivalente a.efectos img:hover,.imageel equivalente a.efectos img, y.containerel equivalente a.et_pb_image.También podés usar filtros (fijate en el manual Explorando Divi, en la sección Las nuevas pestañas CSS personalizado).
Espero no haberte confundido con tanta cosa junta 😉 De todas maneras, te recomiendo buscar algún buen tutorial de CSS; es un código muy fácil de aprender (por supuesto, complementar con HTML) y cuando lo dominás te das cuenta de las infinitas posibilidades que te ofrece.
Quedo a tu disposición por cualquier otra consulta. Un cordial saludo 🙂
Hola!!! super!!!! me quedo de maravilla, mejor de lo esperado, no me confundi con tus explicaciones, por que ya manejo un poco de CSS, ademas explicaste perfecto, solo que la mecanica del Theme para colocar el codigo CSS era lo que me daba dolores de cabeza, en este momento estoy leyendo tu manual, solo tengo algunas dudas con respecto a las galerias y portafolios, sobre todo a la forma de obtener informacion directa de los POST, PAGES y reflejarla en los controles del tema, pero seguro, estaran en el manual si me siento enredado seguro, te pediré ayuda… Gracias por tu ayuda!!!
¡Perfecto, entonces! Cualquier otra duda, aquí estoy. Saludos.
Gracias por tu ayuda, me sirvió muchisimo, sigue así crack!
De nada, Luis. Me alegro de que te haya servido.
Saludos 🙂