Popup de Mailchimp para WordPress

He tenido problemas para poner un popup de Mailchimp en esta web. Así que aquí estoy compartiendo la solución. He tratado de usar la utilidad que viene en el panel de control de Mailchimp. Pero todo apunta a que tengo algún conflicto entre los Javascripts de Mailchimp, los Javascripts de mi plantilla, algún plugin de cacheado o del minificado del código fuente. En fin, que no funcionaba y he terminado antes haciendo el popup artesanal que se puede ver en la barra lateral derecha de la web.

Si has tenido el mismo problema, aquí dejo mi solución, que espero que funcione en el 100% de las webs. Simplemente necesitas tener instalado en la web jQuery, el resto viene todo en el código de abajo. Se puede copiar y pegar en el widget de WordPress donde lo quieras y adaptarlo para tu web.

En líneas generales el funcionamiento es el siguiente:

• Muestra el popup a los 7 segundos de entrar.
• Si el visitante ya ha cerrado el popup en los últimos 3 días no se lo muestra.
• Si el visitante ya se ha suscrito en los últimos 60 días no se lo muestra.

Ya tu puedes adaptarlo como quieras.

El código para tu web

Para empezar, incluimos la hoja de estilo de Mailchimp actual y algo de estilos CSS inline:

<!-- 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;
}
#mc_embed_signup .mc-field-group {
    width: 100% !important;
}
.my-modal-centered {
    position: fixed;
    top: 50%;
    left: 50%;
    /* bring your own prefixes */
    transform: translate(-50%, -50%);
    z-index: 1000;
    border-radius: 10px;
    background-color: white;
    padding: 10px 20px 10px 10px;
    box-shadow: 0px 5px 15px black;
}
.my-modal-normal {
    box-shadow: 0px 2px 2px black;
    border-radius: 10px;
    padding: 10px 20px 10px 10px;
}
.my-modal-normal:hover {
    transition: 1s;
    box-shadow: 0px 10px 10px black;
}
a.boxclose {
    float: right;
    margin-top: -18px;
    margin-right: -28px;
    cursor: pointer;
    color: #fff;
    border: 1px solid #AEAEAE;
    border-radius: 30px;
    background: #605F61;
    font-size: 31px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;
    padding: 11px 3px;
}
.boxclose:before {
    content: "×";
}
.acceptance-label {
    margin-top: 5px;
}
</style>

La caja responsiva lateral

Ahora el código para la caja responsiva lateral. Atención, esto sí que tendrás que personalizarlo con tus códigos personales de tu cuenta. Si no lo haces, entonces donde pongas esto, harás que se suscriban a jnjsite.com:

<div id="myMailchimpModal" class="my-modal-normal">
    <a id="boxclose"></a>
    <div id="mc_embed_signup">
    <form action="https://jnjsite.us12.list-manage.com/subscribe/post?u=0761a0946723d5a52564de709&amp;id=164772d9ad" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate
    onsubmit="setFormSubmited()">
        <div id="mc_embed_signup_scroll">
            <h2>¡Suscríbete a las novedades!</h2>
            <p>Sólo te enviaré un email cuando haya posts nuevos.</p>
            <div class="mc-field-group">
                <label for="mce-FNAME">Nombre <span class="asterisk">*</span></label>
                <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
            </div>
            <div class="mc-field-group">
                <label for="mce-EMAIL">Email <span class="asterisk">*</span></label>
                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                <label class="acceptance-label" for="aceptance"><input type="checkbox" value="" name="aceptance" id="aceptance" required="required" style="display: inline; width: 25px;">Acepto la <a href="https://jnjsite.com/politica-de-privacidad/" target="_blank">política de privacidad</a>. </label>
            </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_0761a0946723d5a52564de709_164772d9ad" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Suscríbeme" name="subscribe" id="mc-embedded-subscribe" class="button" style="width: 100%"></div>
        </div>
    </form>
    </div>
</div>

He marcado en negrita los códigos míos que puedes ver a la derecha en mi popup, pon los tuyos.

El Javascript que lo hace funcionar

Ahora ya sólo queda el Javascript. Es decir, un par de librerías externas, y las funciones para que haga el popup y luego vuelva a su sitio.

<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script type='text/javascript'>
(function($) {
    window.fnames = new Array();
    window.ftypes = new Array();
    fnames[1] = 'FNAME';
    ftypes[1] = 'text';
    fnames[0] = 'EMAIL';
    ftypes[0] = 'email';
    fnames[3] = 'ADDRESS';
    ftypes[3] = 'address';
    fnames[4] = 'PHONE';
    ftypes[4] = 'phone';
    /*
     * 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);
function setFormSubmited() {
    Cookies.set("formSubmited", 1, { expires: 60, path: '/', secure: true });
}
function setFormClosed() {
    Cookies.set("formClosed", 1, { expires: 3, path: '/', secure: true });
}
jQuery(window).load(function() {
    setTimeout(function() {
        if(Cookies.get("formSubmited") === undefined && Cookies.get("formClosed") === undefined) {
            jQuery('#myMailchimpModal').removeClass('my-modal-normal');
            jQuery('#myMailchimpModal').addClass('my-modal-centered');
            jQuery('#boxclose').addClass('boxclose');
        } else {
            console.log('Cookies setted for non popup form.');
        }
    }, 7000);
    jQuery('#boxclose').click(function() {
        jQuery('#myMailchimpModal').addClass('my-modal-normal');
        jQuery('#myMailchimpModal').removeClass('my-modal-centered');
        jQuery('#boxclose').removeClass('boxclose');
        setFormClosed();
    });
});
</script>
<!--End mc_embed_signup-->

Esto es todo. ¡Un saludo!