Nadie puede poner en duda de que Divi es un theme que atrae desde el minuto 1 a los clientes. Se sienten interesados en poder tener una web que para ellos resulte manejable, pudiendo cambiar lo que necesiten de forma rápida y fácil cuando ellos quieran y sin tener que depender de nadie.
El otro día, trabajando con un cliente que quería usar este theme, surgió una pregunta y propuesta a la vez: quería tener un formulario de suscripción de los que se llevan ahora, en el que todos los campos se sitúan en una misma franja horizontal. Seguro que ya has visto algo parecido a esto:
Este tipo de formulario que se utiliza para captar leads, en Divi se inserta desde Divi Builder mediante el módulo llamado "Email Optin" (o Correo Electrónico Optin, si lo tienes en español).
Si haces uso de ese módulo, lo que vas a lograr es un formulario que distribuye los campos y el botón verticalmente, tal que así:
Te darás cuenta de que lo único que puedes cambiar desde el módulo es el texto del botón (que aquí dice Suscribirse), además de los colores. Y por supuesto, los campos de Nombre, Apellido y Dirección de correo electrónico son intocables. No podrás decidir si quieres prescindir de uno, o modificar el texto que en ellos aparece desde el panel.
Un poco coñazo, ¿no?
Ahora, si te parece, vamos a ver un caso concreto: cómo prescindir del campo "Apellido" y alinearlo en una franja horizontal.
Cómo eliminar el campo "Apellido" del Optin Email de Divi
En realidad no lo eliminaremos, sino que lo ocultaremos mediante código CSS.
Dicho código puedes introducirlo directamente desde Divi en Opciones del Tema > En General, abajo del todo, en la casilla de Css personalizado.
Mi recomendación es que utilices siempre un child theme para este tipo de cambios. Hagas lo que hagas, el código a utilizar es el siguiente:
Este código lo que hace es ocultar el segundo campo del formulario. En el ejemplo se correspondería con el campo de Apellido. Imagínate que quisieras ocultar el primer campo (Nombre), el código sería así:
Cómo cambiar "Dirección de correo electrónico" por E-mail
Si lo que quieres es que en lugar de Dirección de correo electrónico aparezca E-mail o cualquier otra cosa, tendrás que copiar y pegar esta función en tu functions.php (lo recomendable es que lo hagas en el archivo de tu child theme):
En este caso, únicamente queríamos modificar el aspecto del Optin en la home. Dicha home tenía por nombre home-3, por eso puedes ver que todas las líneas empiezan utilizando esa clase. Si quieres saber qué clase debes utilizar para una página en concreto, bastará con que abras el Inspector de Elementos y te fijes en la primera clase que aparece tras la etiqueta body:
En este ejemplo la primera clase que tiene body es home, por lo que utilizaríamos .home en lugar de .home-3 en el código expuesto.
[Extra] Cómo hacer que el formulario ocupe todo el ancho de la web
El código anterior está pensado para cuando utilizamos este formulario en una sección dividida en 2 columnas.
¿Y si lo ponemos justo debajo de una imagen o un bloque de color, a ancho completo? Algo así:
Para empezar, tendremos que crear una sección estándar que contenga una fila de única columna. A esta fila, en Ajustes Generales, le dejaremos marcada la opción de Hacer que esta fila tenga anchura completa. Insertamos el módulo del Correo electrónico email y lo configuramos.
En el código del anterior apartado tendremos que añadirle esta característica:
width: 100%;
Dentro de esta línea:
.home-3 .et_pb_newsletter_form p, .demo-subscribe-section .et_pb_newsletter_form p { AQUÍ }
Rizando el rizo: Cómo añadir un campo de formulario
Está muy bien conseguir el nombre de tus suscriptores para enviarles newsletters, pero es posible que en función del proyecto que estés gestionando necesites otro tipo de información. ¿Qué ocurre si quieres saber de dónde son? ¿Cómo puedes añadir un campo en Divi?
Ahora mismo, esto no puede hacerse mediante el módulo Email Optin.
Tal vez en el futuro sea posible, pero actualmente la única posibilidad de hacer esto es copiando y pegando el código que nos facilitará nuestro proveedor de mensajería.
En nuestro caso, el cliente utilizaba MailChimp. Por lo que si también lo estás usando estos son los pasos a seguir.
1) Añadiendo el campo en MailChimp
En la página principal de MailChimp, una vez hayas ingresado con tu usuario y contraseña, dirígete a Lists. Suponiendo que ya tienes creada la lista en la que quieres guardar a los suscriptores que te lleguen a través del formulario que vamos a crear, en el lado derecho de la pantalla verás una flecha al lado de Stats. Tras presionar la flecha, pincha sobre Signup forms y luego sobre Select al lado del icono General forms.
Asegúrate de que en Forms and response emails tengas seleccionada la opción Signup form.
Ahora tienes que prestar especial atención en esta zona:
Simplemente piensa qué tipo de campo vas a querer insertar (un campo de texto, una dirección, una fecha…) y añádelo seleccionando la opción que corresponda de la columna derecha. Por ejemplo, un campo de texto.
Tan pronto pulsas una opción entras automáticamente en Field settings para establecer la descripción del campo si lo deseas en Field label (aunque no lo utilizarás en este ejemplo), decidir si será un campo obligatorio, si estará oculto o visible, etc. Lo relevante aquí es que marques si es obligatorio o no y que estará visible.
OJO: fíjate en que los campos sigan el orden que tú quieras. En la imagen puedes ver que el primer campo es el E-mail, y yo quiero que pase al final de todo. Desde esta misma pantalla puedes desplazarlos.
Cuando termines presiona sobre Save Field.
2) Copiando y pegando el código en nuestra web
Ahora vamos a conseguir el código que necesitamos insertar en nuestra web. Volvemos a List > (la flecha de al lado de Stats) > Signup Forms > Select al lado del icono Embedded forms.
Dentro de la pestaña Classic vamos a desmarcar las casillas de "Include form title" y "Show required field indicators", y nos aseguraremos de que la opción "Disable all JavaScript" aparece desmarcada. Seleccionas todo el código que te brinda MailChimp en el lado derecho de la pantalla y lo copias.
Fíjate en que este código:
Carga una hoja de estilos externa desde la CDN de MailChimp.
Inserta estilos CSS directamente.
Inserta código HTML para crear el formulario.
Carga un código jQuery externo para formar los mensajes de error.
Inserta directamente la traducción al español del código jQuery anterior.
Te digo esto para que sepas que este procedimiento tiene margen de optimización, y que insertarlo así directamente no es lo más ideal.
Ahora vete a la página de tu web en la que quieras insertar el formulario y pon el módulo de Código:
Te toca pegar el código de MailChimp. El que me dio a mí era algo así:
<!-- Begin MailChimp Signup Form --> <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="//tuusuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&id=1acdf2e46b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <label for="mce-FNAME">Nombre </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME"> </div> <div class="mc-field-group"> <label for="mce-MMERGE2">Untitled </label> <input type="text" value="" name="MMERGE2" class="" id="mce-MMERGE2"> </div> <div class="mc-field-group"> <label for="mce-EMAIL">E-mail </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f34786af337810bbda1812dac_1acdf2e46b" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='MMERGE2';ftypes[2]='text'; /* * Translated default messages for the $ validation plugin. * Locale: ES */ $.extend($.validator.messages, { required: "Este campo es obligatorio.", remote: "Por favor, rellena este campo.", email: "Por favor, escribe una dirección de correo válida", url: "Por favor, escribe una URL válida.", date: "Por favor, escribe una fecha válida.", dateISO: "Por favor, escribe una fecha (ISO) válida.", number: "Por favor, escribe un número entero válido.", digits: "Por favor, escribe sólo dígitos.", creditcard: "Por favor, escribe un número de tarjeta válido.", equalTo: "Por favor, escribe el mismo valor de nuevo.", accept: "Por favor, escribe un valor con una extensión aceptada.", maxlength: $.validator.format("Por favor, no escribas más de {0} caracteres."), minlength: $.validator.format("Por favor, no escribas menos de {0} caracteres."), rangelength: $.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."), range: $.validator.format("Por favor, escribe un valor entre {0} y {1}."), max: $.validator.format("Por favor, escribe un valor menor o igual a {0}."), min: $.validator.format("Por favor, escribe un valor mayor o igual a {0}.") });}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup-->
OJO: No copies y pegues el código anterior sin prestar atención a la URL de este trozo
Guarda los cambios y dale al módulo un color de fondo:
Ahora mismo, tu formulario debe de tener este aspecto:
3) Dando estilo al formulario de MailChimp en Divi
Yo voy a quitarle el color blanco del fondo, ocultar las etiquetas y utilizar en su lugar los placeholder, introducir el texto dentro de los campos (mediante value), ponerlos todos alineados horizontalmente y cambiarle el estilo del botón.
Si quieres tener más información sobre los ID y las clases que utiliza MailChimp para sus formularios, te recomiendo que veas este enlace en el que aparecen todos listados junto con una breve explicación.
Código retocado (recuerda sustituir la URL del formulario por la que a ti te corresponda):
<!-- Begin MailChimp Signup Form --> <div id="mc_embed_signup"> <form action="//tuusuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&id=1acdf2e46b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <label for="mce-FNAME">Nombre </label> <input type="text" value="" name="FNAME" class="" id="mce-FNAME" placeholder="Nombre"> </div> <div class="mc-field-group"> <label for="mce-MMERGE2">Provincia </label> <input type="text" value="" name="MMERGE2" class="" id="mce-MMERGE2" placeholder="Provincia"> </div> <div class="mc-field-group"> <label for="mce-EMAIL">E-mail </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL" placeholder="E-mail"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_f34786af337810bbda1812dac_1acdf2e46b" tabindex="-1" value=""></div> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </div> </form> </div><!--End mc_embed_signup--> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[3]='PROVINCIA';ftypes[3]='text'; /* * Translated default messages for the $ validation plugin. * Locale: ES */ $.extend($.validator.messages, { required: "Este campo es obligatorio.", remote: "Por favor, rellena este campo.", email: "Por favor, escribe una dirección de correo válida", url: "Por favor, escribe una URL válida.", date: "Por favor, escribe una fecha válida.", dateISO: "Por favor, escribe una fecha (ISO) válida.", number: "Por favor, escribe un número entero válido.", digits: "Por favor, escribe sólo dígitos.", creditcard: "Por favor, escribe un número de tarjeta válido.", equalTo: "Por favor, escribe el mismo valor de nuevo.", accept: "Por favor, escribe un valor con una extensión aceptada.", maxlength: $.validator.format("Por favor, no escribas más de {0} caracteres."), minlength: $.validator.format("Por favor, no escribas menos de {0} caracteres."), rangelength: $.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."), range: $.validator.format("Por favor, escribe un valor entre {0} y {1}."), max: $.validator.format("Por favor, escribe un valor menor o igual a {0}."), min: $.validator.format("Por favor, escribe un valor mayor o igual a {0}.") });}(jQuery));var $mcj = jQuery.noConflict(true);</script> <!--End mc_embed_signup-->
Y no olvides que sin aplicar el CSS en tu childtheme no podrás verlo bien:
¿Quieres jugar con el código y aplicar diferentes estilos? Te lo he dejado en CodePen para que puedas trastear con él.
El método rápido (y más cutre): sustituyendo el texto de un campo por otro
Por defecto los campos del Email Optin son Nombre, Apellido y Correo electrónico. Si no necesitas o no quieres tener el apellido de tus suscriptores para nada, lo que podemos hacer es sustituir el texto que sale en el campo por la información que queramos. En este caso nos interesa que en lugar de Apellido diga Provincia.
Lo que hay que hacer es introducir este código en tu archivo de
functions.php
. Lo mejor es que lo hagas en el archivo de tu child theme, para no perder los cambios cuando aparezcan las actualizaciones:
Mediante esto lo que hacemos es reemplazar el texto que aparece en el campo
et_pb_signup_lastname
, que es el campo de Apellido.
Y hasta aquí los "trucos" que he traído. Espero que te ayuden lo suficiente y no te den muchos dolores de cabeza.
¿Crees que este código se puede mejorar y te gustaría aportar el tuyo? ¡No te cortes y comparte en los comentarios tu sabiduría! Estaré encantada de ver mejoras u otras formas de hacerlo.
Divi es un tema con el que se puede hacer prácticamente cualquier cosa. Pero hay ciertas modificaciones que requieren tener conocimientos sobre el funcionamiento de WordPress y los temas, además del código. Si crees que necesitas ayuda para poner tu web a punto no descartes la opción de contactar con algún profesional
[Extra] Cómo hacer que el formulario ocupe todo el ancho de la web
OJO: fíjate en que los campos sigan el orden que tú quieras. En la imagen puedes ver que el primer campo es el E-mail, y yo quiero que pase al final de todo. Desde esta misma pantalla puedes desplazarlos.
No hay comentarios:
Publicar un comentario