Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Formulario de suscripción a la newsletter en POPUP

Publicado por Mailrelay en abril 17, 2013

Recientemente hemos publicado un artículo con los resultados de suscripción en dos periodos diferentes, y con dos herramientas diferentes. En el primer caso veíamos un formulario de suscripción a la lista situado directamente en el artículo, en la parte inferior o superior derecha. En el segundo caso utilizábamos la herramienta popupdomination.com que muestra un popup permitiendo la suscripción.

En nuestro caso se demostró que utilizando dicha herramienta se incrementó en un 300% el número de registros a nuestra lista ¿Nada mal no? Sin embargo esta herramienta es de pago, y aunque no es excesivamente cara, quizá no sea una opción para todo el mundo.

Hoy vamos a mostraros como crear un popup similar, aunque con muchas menos funcionalidades, no vamos a contar con estadísticas, ni tests ni muchas otras opciones que incluye popupdomination.com pero será una opción a mitad de camino entre no utilizar popup y si hacerlo.

Nos vamos a basar en este tutorial:

http://www.bloggermint.com/2011/06/how-to-create-modal-subscribe-box-using-jquery/

Y os vamos a mostrar paso a paso como conseguirlo. Lo primero que vamos a necesitar es el plugin de jQuery Colorbox:

http://www.jacklmoore.com/colorbox/

Descargaremos la librería y descomprimiremos el fichero:

email-suscription-popup-1

Dentro tenemos varios ficheros y carpetas, los que vamos a necesitar son:

jquery.colorbox.js o jquery.colorbox-min.js

– Dentro de cualquier carpeta example, podemos elegir el fichero colorbox.css y su correspondiente carpeta images.

Los copiaremos en las carpetas de nuestra web, de forma similar a como se muestra en la siguiente imagen:

email-suscription-popup-2

Y posteriormente en las páginas de nuestra web, haremos la inclusión de estos ficheros:

email-suscription-popup-3

Estas líneas las incluiremos dentro de la partede nuestra web. Pero además de estas líneas también vamos a necesitar insertar el formulario de suscripción de Mailrelay, como hemos visto en artículos anteriores, por ejemplo:

email-suscription-popup-4

Fíjate que hemos colocado el formulario de suscripción dentro de unas etiquetas:

1
2
3
<div style="display: none;">
<div id="subscribe">...</div>
</div>
<div style="display: none;">
<div id="subscribe">...</div>
</div>

Esto lo aprovecharemos en un momento, lo importante es que coloquemos el código de nuestro formulario dentro de estas etiquetas y dentro de las etiquetas. Tras esto nos queda añadir un pequeño script en la zona de la cabecera, será el siguiente:

1
<script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"480px", inline:true, href:"#subscribe"}); } }); // ]]></script>
<script type="text/javascript">// <![CDATA[ jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*15; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"480px", inline:true, href:"#subscribe"}); } }); // ]]></script>

Como podemos ver en esta imagen:

email-suscription-popup-5

Este código, además de mostrar el formulario de suscripción, lo que hace es crear una cookie de forma que no se muestre siempre el popup, para no agobiar al usuario, lo mostrará solo una vez cada quince días, y se verá así:

email-suscription-popup-6

Se mostrará al usuario la primera vez que acceda a la web, solo una vez, y posteriormente tras 15 días si vuelve a acceder se le volverá a mostrar. Es un método de captación más efectivo que dejar solamente el formulario de suscripción en el artículo.

¿Qué te parece? Ah, si aún no tienes cuenta de Mailrelay no te olvides de crearla ahora, con tu cuenta de Mailrelay podrás crear campañas de mailing masivo online totalmente gratis.

Suscríbete a la newsletter de Mailrelay

No te regalamos el típico PDF o ebook que luego nunca te lees (reconócelo). En su lugar trabajamos para publicar, semanalmente, contenidos que en la mayoría de casos sean útiles y prácticos

Solo, en los tres primeros emails que te enviaremos compartimos contigo:

1) El motivo por el cual muchos clientes potenciales no compran, aunque te dirijas a sus puntos de dolor

2) Cómo evitar que tus contactos se den de baja nada más suscribirse, y pierdan interés

3) Un enlace a un post con conceptos de venta por email, que no vas a ver en otro sitio (contrastado tras 9 años de leer blogs)

Comentarios

  1. victoria

    Muy interesante

    09/04/2016 - 07:53:53 Publicar una respuesta
    • samuel Manoel

      COMO FAÇO PARA ALTERAR OS DIAS?

      05/10/2016 - 13:19:08 Publicar una respuesta
      • Micheli

        Oi, por favor responder este comentário:
        Olá, obrigado pelo contato. Se você precisa de ajuda sobre a criação de formulários, favor enviar uma mensagem para nosso departamento de suporte em http://mailrelay.com/pt/contato e nossa equipe irá ajudar.

        06/10/2016 - 03:09:11
  2. marta

    ¿como lo puedo hacer para cambiar lo de los cookie, para que no sean 15 dias, si no menos?

    03/02/2016 - 12:14:09 Publicar una respuesta
  3. bryan

    Amigo quisiera probar el popup pero cuando haces click y te muestre. me puedes ayudar porfavor

    16/10/2014 - 19:43:19 Publicar una respuesta
    • Mailrelay

      ¡Hola! Pues ahora no tenemos un ejemplo de código como el que indicas ¿Has mirado en foros de JavaScript?

      17/10/2014 - 08:56:19 Publicar una respuesta
  4. Esther

    Hola!,
    Estoy intentando hacer que un pop-up se muestre sólo una vez al día y no lo consigo. He encontrado el código que proponéis vosotros para que el pop-up se muestre una vez cada quince días y a mi no me funciona… ¿Qué debería cambiar? Aquí va mi ejemplo: http://www.estherserra.com/pop-up/pop-up3.html
    Muchísimas gracias!

    16/12/2013 - 10:18:59 Publicar una respuesta
    • Mailrelay

      ¡Hola Esther! El código que tienes de ejemplo es algo diferente al mostrado en el ejemplo. No utilizas la misma librería de JavaScript, además el popup lo estás mostrando por CSS, independientemente de la cookie establecida, por eso se muestra siempre.

      Es algo un poco difícil de solucionar desde el blog, lo mejor es que pidas soporte a nuestro equipo técnico:

      http://mailrelay.com/es/contacto

      Ellos te ayudarán de la mejor forma 🙂

      16/12/2013 - 12:13:06 Publicar una respuesta
      • Esther

        Muchas gracias por la respuesta! Si no lo consigo me pondré en contacto con el equipo técnico. Gracias!

        17/12/2013 - 13:02:16
      • Mailrelay

        Claro, nuestro equipo estará encantado de ayudarte 🙂

        17/12/2013 - 13:03:22
  5. joan | dormitorios juveniles

    post muy interesante sobre todo lo del dato del aumento del 300% de altas en la lista. Gracias por darnos ideas de como hacer aumentar nuestras listas de correo de forma fácil.

    muchas gracias

    19/04/2013 - 20:54:11 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