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:
.et_pb_newsletter_form p:nth-child(2) { display: none !important; }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í:
.et_pb_newsletter_form p:nth-child(1) { display: none !important; }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):
function replace_input_text() { ?>
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('#et_pb_signup_email input[type="text"]').attr('value', 'E-mail');
});
</script>
<?php }
add_action( 'wp_footer', 'replace_input_text' );Cómo poner el Email Optin de Divi en una franja horizontal
De nuevo recurriremos al código CSS para efectuar los cambios. Inserta este código (de nuevo, desde Divi o en un childtheme):
.home-3 .et_pb_newsletter_form, .demo-subscribe-section .et_pb_newsletter_form {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
float: inherit;
width: 100%;
}
.home-3 .button {
position: relative;
padding: 0.3em 1em;
border: 2px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f0ad4e;
font-size: 20px;
font-weight: 500;
line-height: 1.7em !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
color: #fff;
}
.home-3 .et_pb_newsletter_form p, .demo-subscribe-section .et_pb_newsletter_form p {padding-bottom: 0; margin-right: 0.3em;}
.home-3 .et_pb_text_align_left, .demo-subscribe-section .et_pb_text_align_left {text-align: center;}
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:
💡 [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Í }
Por lo que nos quedaría todo el código así:
.home-3 .et_pb_newsletter_form, .demo-subscribe-section .et_pb_newsletter_form {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
float: inherit;
width: 100%;
}
.home-3 .button {
position: relative;
padding: 0.3em 1em;
border: 2px solid #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #f0ad4e;
font-size: 20px;
font-weight: 500;
line-height: 1.7em !important;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
color: #fff;
}
.home-3 .et_pb_newsletter_form p, .demo-subscribe-section .et_pb_newsletter_form p { width: 100%; padding-bottom: 0; margin-right: 0.3em;}
.home-3 .et_pb_text_align_left, .demo-subscribe-section .et_pb_text_align_left {text-align: center;}
@media (max-width: 767px) {
.home-3 .et_pb_newsletter_form, .demo-subscribe-section .et_pb_newsletter_form {flex-direction: column !important;}
.home-3 .et_pb_newsletter_form p, .demo-subscribe-section .et_pb_newsletter_form p {margin-bottom: 0.3em !important;}
}
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
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Muy buen tutorial y muy completo 😉
Gracias Fernando, tanto por tu comentario como por abrirme las puertas de este blog. Espero ayudar a alguien que tenga que «pelearse» con Divi en algún momento. ¡Saludos!
Hola Lúa
Muy buen post. Para los que somos un poco zotes con la
tecnología, estos posts donde nos lo dais todo tan mascado son una
maravilla.
Genial el formulario a ancho completo. Es justo lo que necesitaba 😀
Un saludo!
Cova
¡Hola Cova! Gracias, me alegro de que el post te haya servido de ayuda. La verdad es que he intentado hacerlo lo más visual y práctico posible.
Un abrazo
¡Hola Lúa!
Gran artículo, creo que este tipo de contenido que arroja un poco más de luz sobre determinadas funciones de las plantillas es necesario y muchas veces viene en ayuda de personas que quieren hacerlo por su cuenta en plan Do It Yourself, pero para un resultado profesional (mi opinión es:) contrata a un profesional,
Delegar es una de las mejores cosas que he hecho este 2016
Un abrazo Lúa
¡Buenas Dean!
Gracias por pasarte por aquí. La grandeza de WordPress es precisamente la posibilidad del «yo me lo guiso, yo me lo como», así que en mi opinión cuantos más tutoriales existan mejor para todos. Tanto para los usuarios como para los que nos dedicamos a esto, que estamos inmersos en un aprendizaje continuo.
Para alguien que está empezando a moverse por la red trastear con estas cosas le es suficiente si dispone del tiempo y las ganas necesarias, pero es cierto que cuando alcanzas cierto nivel de visibilidad -como es tu caso- delegar y empezar a abordar el proyecto como lo que es, es lo apropiado.
Saludos compañero
Hola,
Lo primero es lo primero. Un gran artículo y un gran descubrimiento.
Muchas gracias por publicarlo.
A todo esto me surge una duda, ¿no sería obligatorio el campo checkbox para dar el consentimiento de la LOPD al suscribirse? ¿Se podría hacer fácilmente?
Lo dicho, muchas gracias.
¡Ah por cierto! Este tutorial también puede seguirse si se utiliza cualquier otro servicio que no sea MailChimp, simplemente el código ofrecido variará pero la forma de hacerlo será en esencia la misma.
Si estás interesado en todo lo relacionado con la LOPD y otros temas legales te recomiendo ver el blog de Marina Brocca ( https://marinabrocca.com/marketing-legal/mail-chimp-y-safe-harbor-ahora-que/), probablemente te ayude a disipar muchas dudas.
Un abrazo
Ok! Muchas gracias por la explicación.
Hola! Gracias por tu ayuda, tengo una duda porque no se mucho de programación, he intentado cambiar Dirección de correo electrónico por E-mail en mis suscripciones, pero el código no me funciona. Imagino que tendrá que ver con que la actuación se le da al wp_footer, yo lo tengo en la página de blog y en la página principal. Me podríais ayudar para ponerlo correctamente y que cambie en ambas páginas? Muchas gracias.
En tus suscripciones tendrás que cambiarlo en tu cuenta de mailchimp o similares
Hola, tuve el mismo problema. Pudiste resolverlo??