Todas las colecciones
Resolver situaciones de tus usuarios
Crear un formulario de Suscripción a Newsletter
Crear un formulario de Suscripción a Newsletter

En este artículo te mostraremos cómo crear y configurar un formulario para que tus usuarios se suscriban a tu newsletter

Lara Macarena Sastre avatar
Escrito por Lara Macarena Sastre
Actualizado hace más de una semana

Un Newsletter es un boletín digital que se envía con cierta periodicidad (por ejemplo semanal, mensual o trimestral) a una lista de contactos. Estos contactos previamente deben haber aceptado su conformidad expresa para el envío de los mismos.

Esta acción es fundamental para incentivar a los usuarios a suscribirse a planes, comprar nuevas publicaciones, mantenerlos informados con las novedades, ofrecer descuentos o promociones, etc.


💡 Algunas ideas que puedes incluir en tu newsletter:

  • "Ebooks más vendidos del mes" o "Ebooks que no puedes dejar de leer": puedes promocionar el ranking de estos ebooks y agregar una breve sinopsis, imágenes, links directos a la tienda y compartir un cupón de descuento para adquirirlos.

  • "Próximos lanzamientos" o "Promociones de la semana": comparte las novedades con tus usuarios para mantenerlos informados sobre el contenido y promociones de la tienda. Puedes utilizar imágenes y textos atractivos, links directos, ¡y más!


Tienes dos maneras de enviar estos correos:

1. Desde la tienda puedes configurar los lifecycle emails: Esto te servirá para incentivar la suscripción a planes y se enviará a todos tus usuarios que no hayan adquirido ningún plan.

2. Creando un formulario de suscripción vinculado a Mailchimp: Esto te permitirá configurar los datos que desees solicitar a tus usuarios y crear una lista de contactos que podrás administrar desde Mailchimp.


En este artículo te mostraremos cómo crear un formulario en Mailchimp y conectarlo a la tienda

Mailchimp es una plataforma de automatización de marketing que te ayuda a compartir campañas de correo electrónico y publicitarias con tus usuarios lectores. Al conectarlo a la tienda permitirás a tus usuarios suscribirse y recibir emails periódicos con novedades, promociones, campañas, etc.

Icono Mailchimp Gratis de SuperTiny

Desde Mailchimp

1. Ingresa a Mailchimp y crea una cuenta. Puedes elegir un plan gratuito o uno pago.

2. Una vez hayas ingresado, ve al panel de administración.

3. Haz clic en Create > Signup Form. Se abrirá a continuación, la sección para construir el formulario en donde podrás editar los campos: podrás cambiarles el nombre, eliminarlos o añadir nuevos.
💡Te recomendamos marcar como requerido el Email.


4. Cuando hayas terminado de editar los campos, haz clic nuevamente en Create y elige la opción Embedded form. Quédate en la sección Classics y haz scroll para acceder al código del formulario.

5. Copia el código proporcionado por Mailchimp.

Mira el video con el paso a paso:

:publicala:

Desde la tienda en Publica

6. Ve a Panel de control > Ajustes > Avanzados y pega el código del paso anterior en Custom before </body> code

7. Te compartimos los estilos CSS utilizados en el ejemplo de la imágen del inicio, si tienes conocimientos en CSS podrás modificarlos a tu gusto:

<style>
body {
overflow-x: hidden !important;
}
/* Formulario de suscripción a NL */
/* Desktop */
#mc_embed_signup h2{
text-align: center !important;
}
#mc_embed_signup {
background: url('https://i.ibb.co/kBFbKZ3/mails.png') !important;
color:#fff;
box-shadow: inset 0 0 20px rgb(0,0,0,0.5);
padding: 60px 0px;
font-family: Raleway,sans-serif;
}
#mc_embed_signup form{
opacity: 60%;
background: black;
}
#mc_embed_signup_scroll {
width:1370px;
margin-left:calc(50% - 685px);
}
#mc_embed_signup .mc-field-group {
padding-bottom:30px;
clear: none !important;
width: 32% !important;
float: left;
padding-left: 2%;
}
#mc_embed_signup .mc-field-group:first-of-type {
padding-left: 0%;
}
#mc_embed_signup .button {
background-color: #FCB0F7 !important;
padding: 0px 30px !important;
height: 45px !important;
font-size: 1.1rem !important;
font-weight:bold !important;
line-height: 20px;
width: 300px !important;
margin-left: calc(50% - 150px) !important;
color: #000 !important;
font-family: Raleway,sans-serif;
box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#mc_embed_signup .button:hover {
background-color: pink !important;
color: #000 !important;
}

#suscription-title {
color: white;
text-align: center;
width: 100%;
font-weight: bold;
margin-bottom: 20px;
}
#mc_embed_signup .datefield .monthfield input, #mc_embed_signup .datefield .dayfield input{
width: 45px !important;
height: 34px;
}
/* Laptop */
@media (max-width: 1400px) {
#mc_embed_signup_scroll {
width:955px;
margin-left:calc(50% - 478px);
}
#mc_embed_signup .mc-field-group {
padding-left: 0%;
}
#mc_embed_signup .mc-field-group, #mc_embed_signup .indicates-required {
width:100% !important;
}
}

/* tablet */
@media (max-width: 984px) {
#mc_embed_signup_scroll {
width:738px;
margin-left:calc(50% - 381px);
}
#suscription-title {
font-size:1.6rem;
}
}
/* mobile */
@media (max-width: 767px) {
#mc_embed_signup_scroll {
width:97%;
margin-left:0px;
}
#mc_embed_signup .button {
margin-top: 10px !important;
}
#suscription-title {
font-size:1.3rem;
}
#mc_embed_signup .mc-field-group input {
left: 5%;
width: 100%;
}
}

/* Fin estilos*/
</style>


Pega este código en el recuadro de Custom before </body> code o en CSS Personalizado.

👉Si tienes el campo CSS Personalizado, puedes colocar el código allí quitando las etiquetas <style></style> del inicio y el final del código.


8. Por último haz clic en Guardar.

¡Listo! ya tienes tu formulario de suscripción vinculado a la tienda.

PRO TIP: Si quieres automatizar emails cada vez que subas una nueva publicación, ¡puedes utilizar Zapier!
Aquí te compartimos nuestro artículo donde te enseñamos sobre esta integración.

Si quieres conocer más sobre las funcionalidades de Mailchimp o necesitas ayuda, aquí te compartimos el link a su Centro de Ayuda.

Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a support@publica.la

¿Ha quedado contestada tu pregunta?