¡Bienvenida, bienvenido a la décima clase del curso gratuito donde estás aprendiendo a diseñar tu propio blog desde cero en WordPress En esta clase, te enseñaré a indexar tu sitio web en Google utilizando Google Search Console. En este clase, te muestro cómo añadir un formulario de suscripción para que los usuarios de tu blog puedan suscribirse a la newsletter, lo hacemos de la manera más fácil cuando empezamos desde cero sin conocimientos previos, con el plugin de WordPress para email marketing Mailpoet. Aquí te dejo todo lo que hemos visto en el video. ¡Empezamos!
Antes recuerda que puedes suscribirte gratis al blog.
Si te suscribes puedes proponer artículos y cursos. También te envío un email semanal con todas las novedades que publico en el blog.
Lecciones del curso Diseño web de un blog:
- 1.
Presentación curso diseño web de un blog. - 2.
Preparamos WordPress para el diseño del blog. - 3.
Guía práctica para organizar categorías y etiquetas del blog. - 4.
Crear y personalizadar entradas en WordPress. - 5.
Diseño de la página de blog, categorias y autor. - 6.
Personalizamos la página de inicio del blog. - 7.
Hacemos una página de contacto para el blog. - 8.
Configuramos plugin de SEO para el blog. - 9.
Indexamos web completa con Google Search Console - 10.
Añadimos formulario suscripción newsletter del blog - 11.
LECCIÓN EXTRA. Configuramos la suscripción a la newsletter del blog.
¿Por qué elegimos Mailpoet?
Si estás comenzando con tu blog y aún no tienes suscriptores, MailPoet es la opción más sencilla para añadir un formulario de suscripción a tu sitio web hecho con WordPress. Este plugin permite gestionar todo desde el panel de control de WordPress y es totalmente gratuito hasta los primeros mil suscriptores. Además, si tu lista de suscriptores crece, siempre puedes cambiar a otra herramienta de mailing más económica como Mailrelay.
Instalación de Mailpoet.
¡Vamos a empezar con la instalación de MailPoet! Este plugin te permitirá crear y gestionar formularios de suscripción fácilmente. Primero, añade el plugin desde la sección de plugins de WordPress. Luego, configura tu información y conecta tu cuenta. ¡Así de fácil estarás listo para enviar correos electrónicos atractivos!
Añadir el plugin.
¡Añadir el plugin MailPoet a tu WordPress es muy fácil! Solo dirígete a la sección de plugins y selecciona «Añadir nuevo». Luego, busca «MailPoet» y haz clic en «Instalar ahora». Una vez instalado, actívalo. ¡Así de sencillo! Estarás listo para crear formularios de suscripción y gestionar tus newsletters en poco tiempo.
Configuración inicial del plugin Mailpoet.
Una vez instalado MailPoet, es hora de la configuración inicial. Configura la información del remitente con tu nombre y una dirección de correo de tu dominio. Revisa y acepta los ajustes de privacidad y datos. Finalmente, en el video te muestro cómo conectar tu cuenta de Mailpoet con tu WordPress para gestionar el envío de correos electrónicos de manera efectiva.
Configuración del envío de emails.
Vamos a configurar MailPoet. La herramienta te guía de manera ordenada los pasos que has de seguir para dejarla preparada para que los lectores de tu blog se puedan suscribir a tu newsletter.
Verificación de la cuenta.
Ahora, vamos a verificar tu cuenta de MailPoet. Conecta tu cuenta y selecciona el plan gratuito, que permite hasta mil suscriptores. Luego, revisa tu correo electrónico y confirma la cuenta para completar el proceso. ¡Así de fácil!
Configuración del servicio de envío.
Vamos a configurar el servicio de envío de MailPoet. Primero vemos cómo te aseguras de que el servicio está activado. Luego, contesta las preguntas sobre cómo recopilas y confirmas suscriptores para completar la configuración.
Creamos un formulario de suscripción a la newsletter.
En el tercer punto del configurador de Mailpoet, creamos nuestro primer formulario para unirse a una lista de distribución. Repasamos las opciones que ofrece el plugin y creamos un primer formulario muy básico para familiarizarnos con su editor.
Creamos un formulario desde cero.
Vamos a crear un nuevo formulario en MailPoet. Vemos que en el apartado de formularios, tenemos varias opciones para añadir uno nuevo. Podemos elegir distintas opciones de diseños creados por la propia herramienta, o bien crear un formulario en blanco utilizando el editor de bloques nativo de WordPress. Esta es la opción que vemos en el video, crear nuestro primer formulario de suscripción en blanco, desde cero.
Añadirmos campos al formulario.
Vamos a añadir campos a tu formulario. Primero, agrega los campos para el nombre y el correo electrónico, es muy buena idea saber como se llama la persona que te deja su email. Luego, añade un checkbox para que los usuarios acepten las políticas de privacidad, para cumplir con temas legales. Asegúrate de configurar estos campos como obligatorios y ajusta las etiquetas según tus necesidades. De esta manera tan y tan sencilla, conseguimos tener preparado un formulario de suscripción, para añadir en la parte que quieras de tu web.
Autentificación del dominio.
En el último punto del configurador del plugin Mailpoet, nos pide autentificar nuestro dominio. En el videotutorial ves punto por punto como hacerlo.
Agregar valores DNS.
El resumen de este punto que vemos en el video es este. Vamos a autenticar tu dominio. Dirígete a tu hosting y accede al editor de DNS. Añade los valores DNS que MailPoet te proporciona para autenticar tu dominio. Luego, verifica la autenticación en MailPoet. ¡Así de sencillo tendrás tu dominio autenticado!
Añadimos formulario en el blog del curso.
Ahora que ya has visto cómo dejar configurado Mailpoet en una web real, pasamos a la maqueta de nuestro blog, nos vamos al WordPress de la web que estamos haciendo en el curso, para ver como añadir el formulario de suscripción en la parte del blog que queramos y personalizar todos los estilos de diseño que nos hacen falta.
Creamos formulario en blanco.
Desde el item Mailpoet que tenemos en la barra de administración de WordPress, pulsamos Formularios para añadir un nuevo formulario en blanco.
Al igual que hemos hecho antes, creamos un formulario con el campo nombre, email, botón de envío y checkbox para aceptar las políticas de privacidad. Le damos un nombre al formulario y elegimos la lista en la cual queremos que agregue los suscriptores.
Diseñamos también una segunda propuesta de diseño de formulario, esta vez como el que tenemos en la demo de nuestro blog. Como la herramienta que utiliza Mailpoet para diseñar los formularios es el propio editor de bloques de WordPress, vemos que podemos elegir el bloque de columnas y elegimos dos columnas, la de la izquierda el doble de grande que la columna de la derecha. Luego, ya ves en el video, que es simplemente arrastrar los bloques queremos a cada columna y crear las que necesites de manera fácil y super rápida.
Publicar formulario en el blog.
Cuando tenemos ya nuestros formularios creados, nos vamos directamente al personalizador del tema ASTRA. Localizamos la parte de nuestra web de muestra en la cual está el formulario de suscripción a la newsletter. Vemos que es la parte de la web llamada «Encima del pie de página», y desde el personalizador vemos como cambiar y añadir el que nosotros queremos.
Lo bueno de añadirlo de esta manera, es que añadiremos a todas y cada una de nuestras páginas del blog el formulario de suscripción que tu elijas. Es super práctico.
Personalizamos CSS del formulario.
Como viene siendo habitual en las clases de este curso, procuro añadir CSS personalizado para familiarizarte con él y poco a poco ir cogiendo el truquillo a este recurso tan y tan útil.
En este video vemos como, a través del inspector de páginas web de Google Chrome, podemos identificar bloques de una web y hacer pruebas de estilo CSS para posteriormente añadir el código que necesitamos en la web. Super, super útil.
Código CSS que ulilizamos en el video.
Aqui te dejo el código que usamos en el video, simplemente lo puedes copiar y pegas en personalizar > CSS adicional y listo.
Formulario de suscripción con campos uno encima del otro, con los campos en vertical.
/*FORMULARIO 1 MAILPOET VERTICAL*/
#mailpoet_form_1 .mailpoet_text{
border-radius: 20px;
}
#mailpoet_form_1 .mailpoet_submit {
padding: 12px 0px !important;
}
Formulario de suscripción con campos uno al lado del otro, con los campos en horizontal.
/*FORMULARIO 1 MAILPOET HORIZONTAL*/
#mailpoet_form_3 .mailpoet_text {
border-radius: 20px;
}
#mailpoet_form_3 .mailpoet_submit {
padding: 11px 0px !important;
}
Asegúrate con el inspector que las clases e ID CSS coinciden con el del código que comparto.
Código HTML para añadir enlace a la página de políticas de privacidad.
<a href="cópia y pega el enlace" target=”_blank”>Texto que quieres enlazar</a>
Seguimos…
Ya tienes tu herramienta de email marketing preparada para captar suscriptores interesados en el contenido que creas y compartes. En el próximo video, te explicaré cómo gestionar la lista de suscripciones y todo el proceso que sigue una persona cuando se suscribe, desde la confirmación del correo hasta las páginas de bienvenida.
Tienes a tu disposición el formulario de la página de contacto por si tienes alguna duda hacérmela llegar. Espero que disfrutes del curso tanto como yo haciéndolo. ¡Nos vemos en la siguiente lección!

Albert Gimeno, diseñador y consultor web.