Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Cómo duplicar tus suscriptores gracias a un pop-up personalizado

Publicado por Celia en julio 28, 2015

Crea un pop-up personalizado con el que duplicar tus suscriptores

¿Quieres conseguir duplicar tus suscriptores gracias a un pop-up personalizado? Pues no te pierdas este pop y lee hasta el final, verás lo sencillo que es.

Tu blog es tu escaparate, el lugar donde muestras tus servicios o productos online. Piensa que es lo único que tienen tus visitas para valorar si lo que ofreces es capaz de solucionar sus problemas o no.

Y recuerda que muy pocas visitas compran en la primera visita a tu web…

¿Vas a permitir que se vayan por dónde han venido?

Ni hablar. Ya que están ahí, aunque aún no estén preparadas para hacer ese clic que tanto esperas y sacar la tarjeta de crédito, vas a conseguir su correo electrónico para poder contactar con ellas de una manera más cercana y personal. Y ahora voy a contarte cómo hacerlo.

Mi blog es de blogger. Eso a veces es problemático porque no contamos con esos maravillosos plugings de wordpress. Aún así, aquí puedes ver mi actual pop-up. Y uso Mailrelay.

Pop-up con Blogger

Como ves puede no solo añadirse la suscripción por pop-up en blogger, sino que podemos personalizarla y ponerla a juego con el resto de nuestro diseño.

Eso sí, con una pequeña ayudita externa. Una aplicación estupenda que te va a encantar pues además de ser gratuita, no solo te servirá para recolectar emails, también podrás crear mapas de calor y ver dónde hacen clic tus visitas.

¿A qué es genial?

Pues si eres de wordpress… ¡no te preocupes! Que tú también puedes hacerlo y de una forma mucho más rápida y sencilla. Solo tienes que buscar esta aplicación maravillosa en tu panel de plugings, configurarla y personalizarla.

Te aseguro que el tiempo que inviertas en ponerla a tu gusto merece la pena. Ya sabes, la primera impresión es la que cuenta.

Vamos a ver cómo añadir y personalizar nuestro pop-up en blogger y wordpress para duplicar nuestro número de suscriptores y aumentar el número de clientes potenciales para nuestras campañas.  Y usaremos SUMOME ¿lo conoces? Pues déjame que te cuente.

Cómo duplicar tus suscriptores con un pop-up personalizado

Instalar Sumome en blogger

Como te comentaba Blogger no tiene los maravillosos plugings de WordPress, pero en este caso no nos hace falta.

Vamos a utilizar SUMOME como aplicación externa y a asociarla a nuestra lista de Mailrelay.

1.- Entramos en la web de SUMOME: http://sumome.com/

2.- Pinchamos en Try It Now.

Página principal de Sumome

3.- Introducimos nuestro correo electrónico, el mismo que usamos en Mailrelay.

Registrate con tu correo de Mailrelay

4.- Copiamos el código que nos vuelca la aplicación en nuestra plantilla HTML.

Copia el código HTML

Justo debajo de <head> pero con una pequeña modificación para que funcione correctamente en blogger.

Código original
Código que copiaremos en blogger

Como ves solo hemos eliminado la última parte: async=”async”. Asegúrate de utilizar tu id, no la mía que aparece en este ejemplo ¡o estarás enviándome a mí tus suscriptores!

5.- Si lo has instalado correctamente, aparecerá una pestañita azul a la izquierda de tu blog, en la parte de arriba y al hacer clic te pedirá que te registres.

Mensaje de confirmación de que hemos instalado correctamente Sumome

6.- Una vez nos hayamos registrado, iremos a SumoStore.

Accede a Sumome

7.- En la opción EMAIL escogemos LIST BUILDER.

Selecciona la opción "List Builder"

8.- Pinchamos en el botón azul de la derecha que pone FREE ¡y ya tenemos nuestro popup instalado! Vamos a configurarlo.

Porque ahora mismo se ve así y los emails se guardan en SUMOME no en MAILRELAY.

Configura tu pop-up

9.- Bajamos hasta la opción ADVANCED para incluir el código de nuestro popup de MailRelay.

duplicar-suscriptores-9

10.- El siguiente paso es entrar en Mailrelay para conseguir nuestro código de formulario de suscripción.

Lo encontrarás en Formulario de suscripción – Obtener código. En el panel de la derecha.

Obtén el código del formulario de suscripción

11.- Copiamos el primer código que nos aparecerá a la derecha. Volvemos a SUMOME y lo pegamos en la caja de ADVANCED.

Configura con el código html tu formulario

12.- Pero si pinchamos en PREVIEW ¡el formato es horrible! Y nosotros queremos personalizarlo para que nuestras visitas se animen a hacer click.

Cómo instalar Sumome en WordPress

No pienses que te he dejado a medias, es que el tema de la personalización es igual en ambas plataformas, así que antes de entrar en detalles, te enlazo una entrada del blog de Mailrelay dónde te guían paso a paso para instalar SUMOME en tu wordpress.

¡Ahora sí! Seguimos.

Pop-up personalizado en Sumome: cómo configurarlo a tu gusto

Actualmente nuestro pop-up personalizado luce así ¡horroroso!

pop-up sin personalizar

Pero de nuevo los chicos de Mailrelay compartieron con nosotros un código con estilos para personalizarlo.

El código puedes descargarlo de aquí.

En ese artículo tienes las indicaciones de cómo instalarlo. Una vez lo hayas hecho, vuelve aquí para personalizarlo.

13.- Acabamos de instalar el código proporcionado por Mailrelay y nuestro pop-up personalizado se ve así.

Así se ve nuestro pop-up

Así que ahora vamos a ver qué partes del código puedes cambiar para adaptarlo a la estética de tu blog.

14.- La primera parte del código es esta:

.f-popup {width:380px; height:330px; background:#FFFFFF; z-index:999999999; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

Y da estilo al fondo de nuestro popup.

Width: ancho en píxels.
Height: alto en píxels.
Background: color de fondo.

Si no te gusta el blanco, puedes sustituir el código #FFFFFF (blanco) por el que prefieras de esta web.

z-index: es lo que hace que se vea por encima de todos los demás elementos que componen tu blog, así que mejor no tocarlo.
Los tres códigos siguientes son los que hacen que las esquinas se vean redondeadas en todos los navegadores, si decides aumentar o reducir el número de píxels, hazlo en los tres.

Por ejemplo:

.f-popup {width:380px; height:330px; background: #610B21; z-index:999999999; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px;}

Se vería así:

Ejemplo de formulario pop-up personalizado

Te recomiendo elegir un color de fondo suave para no entorpecer la lectura y espantar a tus posibles suscriptores.

Si quieres añadir un color más vivo, puedes hacerlo bordeando tu formulario pero manteniendo el fondo blanco, así:

.f-popup {width:380px; height:330px; background:#ffffff; z-index:999999999; border: 1px solid #610B21; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px;}

Formulario de suscripción con pop-up personalizado

El código que hemos añadido y te he marcado en negrita es lo que hace que aparezca ese marco de color granate alrededor. Pero puedes usar diferentes tipos y grosores de borde:

1px es el grosor del borde.

Puedes ir aumentándolo o reduciéndolo hasta que quede tal y como quieres.

Solid: borde continuo.

Puedes cambiarlo por: dotted (punteado) dashed (rayas) double (doble).

Y por último el código de color, puedes utilizar el que prefieras.

Un ejemplo con borde doble fucsia y un redondeo de 10px:

.f-popup {width:380px; height:330px; background:#ffffff; z-index:999999999; border: 4px double #FE2E64; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}

Ejemplo de formulario con doble línea de borde

15.- Cuando esté tal y como quieres, pasamos al siguiente fragmento:

.f-popup .fptitulo {font-family: Rockwell; color:#1c4c74; width:100%; text-align:center; font-size:24px; padding: 15px 0 20px 0;}

Este trocito de código afecta al título de nuestro popup:

  • Font-family: puedes sustituir la actual por cualquiera que tengas activa en tu web.
  • Color: el color del título. Ya sabes cómo modificarlo ¿verdad?
  • Width: el ancho total que ocupa el título.
  • Text-align: la alineación. Actualmente está centrado, pero puedes cambiar center por right (derecha) o left (izquierda).
  • Padding: son los espacios que quedan alrededor del formulario, no solo del título.

Si te fijas al empezar pone: .f-popup .fptitulo que son las partes a las que se le aplican estilos en este fragmento que va entre llaves {}

En tu código padding aparecen cuatro valores, te cuento a qué parte afectan por orden: 15px (superior) – 0 (derecho) – 20px (inferior) – 0 (izquierdo).

Si quieres añadir más espacio a los lados, recuerda añadir px al final.

Por ejemplo:

padding: 25px 25px 25px 25px;

Ejemplo de formulario con padding

Al añadir tanto padding arriba, el botón nos queda fuera del marco.

Por lo que seguiremos probando:

.f-popup .fptitulo {font-family: Arial; color:#FE2E64; width:100%; text-align:center; font-size:24px; padding: 15px 5px 15px 5px;}

Además del padding hemos cambiado el tipo de letra y el color. ¿Qué te parece?

Formulario con un cambio de letra y color

Esto ya va cogiendo forma.

16.- Seguimos con el siguiente fragmento de código:

.f-popup .fpparrafo {text-align:center; width:90%; margin:0 5%; padding-bottom:20px;}

Como ves, afecta al párrafo del popup (.fpparrafo), es decir, al texto que aparece debajo del título de nuestra ventana emergente. Vamos a ver lo que significa cada apartado.

Text-align: la alineación del texto.
Width: el ancho total.
Margin: el margen o espacio que queda alrededor.
Padding-bottom: efectivamente, es como el padding que hemos visto antes, pero desglosado. Este afecta solo a la zona inferior (bottom).

Vamos a añadir dos nuevos estilos: tipo de letra y color:

.f-popup .fpparrafo {text-align:center; width:90%; margin:0 5%; padding-bottom:20px; font-family: Courier; color:#000000;}

Nuevos estilos

Mucho mejor ¿verdad? Recuerda utilizar siempre las mismas tipografías y colores que hayas elegido para tu imagen de marca, es muy importante ser coherentes.

Pero al cambiar el tipo de letra el botoncito vuelve a salirse del marco. Podemos añadir el tamaño y reducirlo.

.f-popup .fpparrafo {text-align:center; width:90%; margin:0 5%; padding-bottom:20px; font-family: Courier; color:#000000; font-size: 14px;}

Font-size: afecta al tamaño de tu letra en píxels, puedes aumentar o reducir hasta que quede tal y como quieres.

17.- Ya no nos queda nada. Vamos a cambiar el texto que aparece por defecto dentro de los campos para introducir el nombre y correo electrónico.

.f-popup input[type=’text’] {width:380px; height:34px; margin:0 0 20px 30px; border:1px solid #cccccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#888888; padding:0; text-align:center; font-size:14px;}

Te he marcado en negrita los códigos principales con los que ya hemos trabajo y puedes cambiar según tus preferencias. También puedes añadir el tipo de letra que quieres que aparezca:

.f-popup input[type=’text’] {width:380px; height:34px; margin:0 0 20px 30px; border:1px solid #000000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#FE2E64; padding:0; text-align:center; font-family: Courier;  font-size:14px;}

Formulario pop-up personalizado

¿Y si ponemos el texto en mayúsculas?

.f-popup input[type=’text’] {width:380px; height:34px; margin:0 0 20px 30px; border:1px solid #000000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#FE2E64; padding:0; text-align:center; font-family: Courier;  font-size:14px; text-transform: uppercase;}

Formulario con texto de CTA en mayúsculas

Text-transform: puedes ponerlo en mayúsculas como acabamos de hacer usando uppercase, pero hay otras dos opciones:

  • Lowercase: minúsculas.
  • Capitalize: versalitas.

¡Vamos, que no nos queda nada para tener nuestro pop-up personalizado a juego completamente con nuestra web!

18.- El código del botoncito naranja con degradado:

.f-popup .fpboton {width:322px; height:40px; margin:0 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#ffffff; text-align:center; cursor:pointer; font-size:18px; border:none;

background: #fa923e; /* Old browsers */
background: -moz-linear-gradient(top, #fa923e 0%, #e9700d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa923e), color-stop(100%,#e9700d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* IE10+ */
background: linear-gradient(to bottom, #fa923e 0%,#e9700d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fa923e’, endColorstr=’#e9700d’,GradientType=0 ); /* IE6-9 */
}

Vale, esto de los degradados es más complicado, pero no te preocupes. Empieza por el principio:

.f-popup .fpboton {width:322px; height:40px; margin:0 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#ffffff; text-align:center; cursor:pointer; font-size:18px; border:none;

Esta parte es la que afecta al color, disposición y tamaño del texto del botón. También puedes añadir el tipo de letra que quieres que aparezca usando Font-family como ya hemos visto. Y añadirle un borde:

.f-popup .fpboton {width:322px; height:40px; margin:0 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#ffffff; font-family: Arial; text-align:center; cursor:pointer; font-size:18px; border: 1px solid #FE2E64;

Si te fijas hemos cambiado none por el estilo que queremos para nuestro borde, si quieres eliminarlo solo tienes que volver a escribir none.

Aplica los últimos cambios a tu formulario

Y terminamos con el gradiente de colores del botón:

background: #fa923e; /* Old browsers */
background: -moz-linear-gradient(top, #fa923e 0%, #e9700d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa923e), color-stop(100%,#e9700d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* IE10+ */
background: linear-gradient(to bottom, #fa923e 0%,#e9700d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fa923e’, endColorstr=’#e9700d’,GradientType=0 ); /* IE6-9 */
}

Si quieres un fondo uniforme, solo tienes que eliminar este último fragmento y añadir el color de fondo que quieras al anterior fragmento. Así:

.f-popup .fpboton {width:322px; height:40px; margin:0 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color:#000000; font-family: Arial; text-align:center; cursor:pointer; font-size:18px; border: 1px solid #FE2E64;

background: #ffffff;
}

El fondo sería de color blanco, por lo que tendríamos que modificar también el color de la letra que la teníamos blanca también.

Cambio de color de fondo

Si te gustan los diseños sencillos y minimalistas esta puede ser tu mejor opción ¡pasa de los degradados!

Pero si prefieres mantener el degradado… ¡prepárate!

background: #fa923e; /* Old browsers */

Siento decirte que en los navegadores antiguos (old browsers) no se verá el gradiente, así que tienes que escoger un color uniforme.

Y el resto del código:

background: -moz-linear-gradient(top, #fa923e 0%, #e9700d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fa923e), color-stop(100%,#e9700d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fa923e 0%,#e9700d 100%); /* IE10+ */
background: linear-gradient(to bottom, #fa923e 0%,#e9700d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#fa923e‘, endColorstr=’#e9700d‘,GradientType=0 ); /* IE6-9 */

¿Te has fijado en que los dos códigos de color que aparecen en cada background son los mismos? ¡Exacto! La única diferencia es que están adaptados a los diferentes navegadores. Así que la buena noticia es que solo tienes que escoger el color principal y el secundario, cambiarlos en cada background ¡y ya lo tienes listo!

Yo he usado fucsia y blanco:

background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #FE2E64 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#FE2E64)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#FE2E64 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fffffff 0%,#FE2E64 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#FE2E64 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#FE2E64 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ffffff’, endColorstr=’#FE2E64′,GradientType=0 ); /* IE6-9 */
}

Pop-up personalizado con degradado

19.- Y ahora sí que terminamos ¡prometido! Cambiar los textos que aparecen en tu formulario por los tuyos propios.

Este es el código que encontrarás después del cierre de la etiqueta de estilo </style>

<div class=”f-popup”>
<div class=”fptitulo”>SUSCRÍBETE A NUESTRA NEWSLETTER</div>
<div class=”fpparrafo”>Recibirás las últimas novedades sobre nuestra plataforma y los mejores tips para aprovecharla al máximo.</div>
<form enctype=”application/x-www-form-urlencoded” action=”http://demo.ip-zone.com/ccm/subscribe/index/form/” method=”post”>
<input name=”name” id=”name” type=”text” value=”Ingresa tu nombre” onblur=”if(this.value==”)this.value=’Ingresa tu nombre’;” onfocus=”if(this.value==’Ingresa tu nombre’)this.value=”;” width=”320px” style=”width: 320px !important;”/>

<input name=”email” id=”email” type=”text” value=”Ingresa tu direción de mail” onblur=”if(this.value==”)this.value=’Ingresa tu direción de mail’;” onfocus=”if(this.value==’Ingresa tu direción de mail’)this.value=”;” width=”320px” style=”width: 320px !important;”/>

<input name=”” type=”submit” value=”SUSCRIBIRSE” class=”fpboton”/>
</form>
</div>

Te he marcado en negrita cada campo para que puedas modificarlo según tus preferencias.

¡Que sí! ¡Que ya lo tienes! Puede que al cambiar el texto tengas que volver atrás para modificar los márgenes o tamaños de la tipografía escogida ¡pero ya sabes hacerlo! Así que sin miedo.

No olvides guardar los cambios en SAVE, el botón verde de arriba a la derecha.

¿A que no ha sido tan complicado?

Ya tienes tu pop-up listo para empezar a recolectar emails. Recuerda configurar bien en qué páginas quieres que aparezca, en cuáles no y cuándo.

Por si no terminas de aclararte te dejo algunos consejos para tomar la decisión más beneficiosa para ti:

· Si tienes una portada, como yo, establece la regla de NO mostrar el pop-up ahí.
¿Cómo hacerlo?
DISPLAY RULES – don´t show – on home page

Aplica una regla en Sumome

Esa página es tu página de aterrizaje y se llama así precisamente porque es dónde “aterrizan” tus visitas por primera vez. Y si es la primera vez que te visitan… ¿crees que se suscribirán antes de haber leído nada y saber si eres de fiar? Yo creo que no, incluso puede que el resultado sea el contrario al que esperas.

Asegúrate de que el pop-up se muestra cuando tus visitan hayan podido leer al menos una entrada de tu blog.

¿Cómo hacerlo?

Lamentablemente esta regla es solo para la versión PRO, pero si valoras como debes tu lista de suscriptores, puede que no sea mala idea abonarte.

DISPLAY RULES – When a visitor’s page view are – greater than- 1

Lo que es lo mismo, cuando tus visitas han visitado más de una página de tu blog o web.
Teniendo en cuenta que este pop-up se basa en las cookies y no se muestra cada vez que tu nueva visita entra a tu blog, dale un poco de tregua para que pueda leer al menos una entrada completa.

Si intentas captar su email antes, te aseguro que la X de la derecha para cerrar la ventanita es muy sugerente…

No te limites a poner el pop-up.

Instala tu caja de suscripción al final de tus entradas, debajo del header de tu blog o bien visible en la sidebar.
Así evitas que esas visitas que han cerrado el pop-up por el motivo que sea se queden sin poder suscribirse, aunque quieran, hasta que les vuelva a saltar la ventanita.

Es posible que al empezar a leerte no se fíen tanto de ti como para abrirte las puertas de su correo electrónico, pero quizá al terminar tu entrada sí.

Tenlo muy en cuenta tanto a la hora de configurar el pop-up como de diseñar tu web. Y recuerda siempre que tus suscriptores son el auténtico valor de tu blog. Cualquier acción que emprendamos para aumentar su número, es poca.

Y ya no tienes la exclusa de “es que yo soy de blogger y claro…”, puedes hacerlo igualmente con un poco de paciencia e interés.

Cuando lo hayas instalado, no olvides pasarte por aquí a contarme qué tal te ha ido y cómo ha quedado. ¡Y si has notado un aumento en tu tasa de conversión habitual! Seguro que sí.

Suscríbete al blog y recibe los mejores contenidos semana a semana:







Acepto la política de privacidad.



Comentarios

  1. Lynn Vazper

    Hola. Creo que esta forma de hacerlo ya no funciona con sumome, las opciones son distintas ahora y no veo ninguna opción para cambiar el código 🙁
    Habrá una manera de hacerlo ahora en 2017?

    05/01/2017 - 03:53:03 Publicar una respuesta
    • Mailrelay

      ¡Hola Lynn! Yo te recomiendo que utilices un plugin más compatible con Mailrelay, como optingun.com

      05/01/2017 - 08:29:16 Publicar una respuesta
  2. Cristina

    Hola,
    El sumome,¿se puede instalar en prestashop? ¿Cómo se haría?
    Gracias

    15/11/2016 - 18:00:49 Publicar una respuesta
  3. ANA AVILA

    Hola… he instalado el pop un sin problemas pero cuando pinchas en el boton aparece esta página para rellenar
    http://demo.ip-zone.com/ccm/subscribe/index/form/
    y yo lo que quiero es que vayan a una página de bienvenida….
    ¿Como se hace esto? Estoy empezando con los formularios y me lio un poco

    Un saludo

    08/08/2016 - 20:00:01 Publicar una respuesta
    • José Facchin

      Hola Ana! Déjanos un ticket de soporte mejor, porque tendremos que revisar el código que estás utilizando para poder ayudarte mejor.

      08/08/2016 - 21:11:45 Publicar una respuesta
  4. Liliana

    Hola!
    He seguido todo el proceso y hecho los cambios como se aconseja pero solo puedo verlo en la preview, luego no aparece… Agradecería mucho vuestra ayuda

    19/07/2016 - 16:21:07 Publicar una respuesta
  5. Aitor

    Muy buen artículo, es justo lo que estaba buscando! De todas formas tengo un pequeño problema. En la plantilla que adjuntáis para que el popup no se vea tan feo creo que no se especifica el grupo de suscriptores al que se va a añadir el nuevo suscriptor, que debería ser “default”.Los suscriptores añadidos a través de este boletín no se añaden a ninguna lista (por lo que tampoco les llega ningún autoresponder asignado a un grupo). ¿Me podéis echar una mano? Gracias!

    07/06/2016 - 22:00:49 Publicar una respuesta
  6. German Castillo

    Buen día se puede implementar en opencart

    21/04/2016 - 01:28:34 Publicar una respuesta
  7. Etna Hernandez

    Listo, instalado!! Muchisimas gracias he podido cambiar las cosas que querias, y con tu explicacion tambien he cambiado texto, y forma a mi gusto 🙂

    10/04/2016 - 19:30:02 Publicar una respuesta
  8. Hector

    Hola, hay manera de aplicarlo sin que sea pop-up y que solo aparezca fijo en la página.

    27/02/2016 - 19:52:10 Publicar una respuesta
  9. Eva

    Qué buen tutorial!! Lo he aplicado en mi blog y todo ha ido perfecto. Muchas gracias, está muy bien explicado y es súper útil 🙂

    11/02/2016 - 23:38:43 Publicar una respuesta
  10. Carolina Mamá Resiliente

    Hola, estoy siguiendo los pasos y todo bien hasta la instalación del estilo. En ese punto, sigo las instrucciones de la otra entrada y cuando pego el código, ¡me salen dos formularios! ¿Qué hago mal? Espero que me podáis ayudar. Estoy a medio camino…

    06/02/2016 - 23:56:00 Publicar una respuesta
    • Mailrelay

      ¡Hola Carolina! Pásanos el código en un ticket, igual se ha duplicado alguna cosa, le echamos un vistazo y lo corregimos 🙂

      07/02/2016 - 06:05:26 Publicar una respuesta
  11. daniel

    Hola, después de seguir los pasos, sale la ventana de inscripción en la web pero no queda registrado el nuevo seguidor por ninguna parte ni a él le llega ningún mail de confirmación (tampoco en correo no deseado) gracias

    18/12/2015 - 16:31:47 Publicar una respuesta
  12. Irene - Amigushop

    Hola!
    Hace unos días apliqué este código en mi web y perfecto.
    Ahora quiero cambiarlo a otro formulario que he creado para que que dirija a pagina de suscripción, error y exito, pero manteniendo el mismo diseño al actual.
    ¿Podría hacerlo? ¿Cómo?
    Gracias!

    25/11/2015 - 13:36:26 Publicar una respuesta
    • Mailrelay

      ¡Hola Irene! Solo has de añadir estas tres líneas dentro del código del formulario:



      Cambiando lo que pone dentro de “value” por las direcciones que quieras utilizar.

      25/11/2015 - 14:18:53 Publicar una respuesta
      • Irene - Amigushop

        Debe haber algún fallo, porque no salen las líneas para añadir…

        25/11/2015 - 16:54:04
      • Mailrelay

        uhm, debe ser tema del blog, te las mando al email mejor 🙂

        25/11/2015 - 16:56:02
  13. Juan

    Hola
    Intento descargarme el código html de estilo y lo que s eme descarga es el formulario como tal. Ingreso mis datos para ver si así me descarga algo pero no es posible. Me pueden decir como obtener el código? Gracias

    08/11/2015 - 11:19:16 Publicar una respuesta
  14. Jose

    ¿Es posible configurar más de un formulario de suscripcion? Por ejemplo, un formulario diferente para cada articulo de mi blog.
    Saludos y gracias anticipada por tu respuesta

    09/10/2015 - 23:43:31 Publicar una respuesta
  15. Silvina

    Gracias!! aunque no consigo que se visualice…el básico de Mailrelay si, pero el otro código personalizado, cuando le doy a previw no se ve nada…

    07/10/2015 - 16:46:25 Publicar una respuesta
  16. Sandra Ruiz-Gijon

    hay alguna manera de que una vez que se suscriba el lector se le envie algo de valor que tengamos para el a su bandeja. Algo que hayamos creado para suscriptores

    03/10/2015 - 10:14:25 Publicar una respuesta
  17. German

    Gracias Esther por compartir. Sabes como poder convertir esta plantilla para adaptarla a mobile? (No pop up sino embedded) gracias

    25/09/2015 - 13:45:27 Publicar una respuesta
  18. carmen

    Muchísimas gracias Celia, necesitaba poner un popup en mi blog, ahora tengo que seguir con tus consejos del diseño y adaptarlo al blog. Magnifico trabajo el tutorial. Gracias

    18/09/2015 - 23:00:07 Publicar una respuesta
  19. Esther

    Hola!
    He aplicado el tutorial, pero no me gustaba el tema de que al cambiar el fondo del pop-up y que se quedara el hueco en gris detrás… así que lo he arreglado!
    Justo antes de la línea que cierra estilos, es decir, justo encima de tenéis que pegar: .sumome-popup .sumome-popup-content-default {
    background:#eaa500 !important;}
    Cambiando el código del background por el mismo que hayáis puesto en el pop-up, en el primer paso de este tutorial.
    Mil gracias por el tutorial, Celia! 😀

    15/09/2015 - 22:06:28 Publicar una respuesta
  20. Rafael

    Esto funciona para Joomla??

    03/08/2015 - 16:28:18 Publicar una respuesta
  21. Jorge

    Muy buen tutorial! explicado hasta el más mínimo detalle! Muchas gracias!

    29/07/2015 - 10:40:55 Publicar una respuesta
  22. Leonides

    como puedo crear un formulario pero para prestashop?

    28/07/2015 - 18:59:23 Publicar una respuesta
  23. vikingo

    Tremendo!!siempre quise MI propio popup!! gracias! en breve lo implementare en mis sites, impecable y UTILISIMO como siemopre, no dejan de sorprenderme gratamente.

    28/07/2015 - 17:08:59 Publicar una respuesta
  24. Beatriz

    Excelente post.
    Aunque a estas alturas dudo que alguna web o blog no tenga instalado ya el sumome ¡gran éxito en pop-ups!

    Desde luego yo lo tengo en todos mis sitios y los de mis clientes, funciona estupendamente.

    Excelentes consejos para personalizarlo, ahora toca probar.

    Un abrazo amigos de mailrelay!

    28/07/2015 - 14:48:46 Publicar una respuesta
  25. Elizabeth

    Muy buen artículo. Gracias por compartirlo.

    28/07/2015 - 10:11:12 Publicar una respuesta

Deja un comentario

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


Menu Title