Tutorial Divi: Cómo personalizar el Email Optin

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&amp;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

<!-- Begin MailChimp Signup Form --> 
<div id="mc_embed_signup"> 
<form action="//tuusuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&amp;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-->

#mc_embed_signup { 
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 200;
}

#mc_embed_signup label {display:none;}

#mc_embed_signup #mc_embed_signup_scroll {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  -webkit-justify-content: center; /* Safari */
  justify-content: center;  
  align-items: center;
  float: inherit;
}

#mc_embed_signup input, #mc_embed_signup .button {
  font-size: 1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 0.5em 1em;
  border: none;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
}

#mc_embed_signup .button {
  position: relative;
  padding: 0.4em 3em;
  border: 0.15em solid #fff;
  -webkit-border-radius: 0.2em;
  -moz-border-radius: 0.2em;
  border-radius: 0.2em;
  background-color: #f0ad4e;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: .03em;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  color: #fff;
}

#mc_embed_signup .mc-field-group {
  width: 100%;
  padding-bottom: 0; 
  margin-right: 0.3em;
}
@media (max-width: 767px) {
 #mc_embed_signup #mc_embed_signup_scroll {flex-direction: column !important;}
	#mc_embed_signup input {margin-bottom: 0.3em !important;}
}

function replace_input_text() { ?>
    <script type="text/javascript">
    jQuery( document ).ready(function() {
        jQuery('#et_pb_signup_lastname input[type="text"]').attr('value', 'Provincia');
    });
    </script>
<?php }
add_action( 'wp_footer', 'replace_input_text' );

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