Tutorial Divi: Cómo personalizar el Email Optin

Tutorial de Divi para personalizar 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:

Captación de leads mediante formulario

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).

El módulo Email Optin de Divi

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í:

El Email Optin que crea Divi por defecto

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.

Añadir CSS personalizado en Divi

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

Cambiar el texto del Optin Email de Divi
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

Email Optin de Divi con ancho completo
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:

Ver la clase de una página en Divi
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í:

Email Optin de Divi a ancho completo

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

Añadir un campo nuevo en el Email Optin de Divi
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:

Añadir campo en Email Optin de Divi con MailChimp

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.

Embedded form en MailChimp

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.

Código de MailChimp para Divi

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:

Módulo Código en Divi

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

. Sustituye //tuusuario.us11.list-manage.com/subscribe/post?u=f34786af337810bbda1812dac&id=1acdf2e46b por la que te haya dado a ti MailChimp.

Guarda los cambios y dale al módulo un color de fondo:

Cambia el color de fondo del módulo en Divi

 

Ahora mismo, tu formulario debe de tener este aspecto:

Formulario de MailChimp en Divi

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

 

Y no olvides que sin aplicar el CSS en tu childtheme no podrás verlo bien:

#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;}
}

Así obtendrás algo parecido a esto:

Personalización del Email Optin de Divi

¿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:

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' );

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 😉

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(8 votos, promedio: 4.6)

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

12 comentarios en “Tutorial Divi: Cómo personalizar el Email Optin”

    1. 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!

  1. 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

  2. ¡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

    1. ¡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

  3. 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.

    1. ¡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

  4. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido