Presentamos los pasos para saber c贸mo crear un formulario de suscripci贸n y conectarlo a Mailchimp con MB Frontend Submission.
Los propietarios de sitios web a menudo crean un formulario de suscripci贸n y luego lo integran con un servicio de marketing por correo electr贸nico para enviar correos electr贸nicos de manera m谩s r谩pida. Y uno de los servicios de correo electr贸nico m谩s comunes es Mailchimp.
Con WordPress se puede crear un formulario de suscripci贸n y luego conectarlo a Mailchimp. Esto se puede hacer f谩cilmente con MB Frontend Submission, una extensi贸n del complemento Meta Box.
Para hacerlo, se necesitan los siguientes complementos para comenzar:
- Meta Box: para usar los complementos Meta Box Builder y MB Frontend Submission, hay que instalar el complemento principal Meta Box. Es gratis y est谩 disponible en wordpress.org.
- Env铆o de MB Frontend: es una extensi贸n premium de Meta Box que permite a los usuarios enviar contenido directamente en el front-end del sitio web de WordPress.
- MB Custom Post Type & Custom Taxonomy: es una extensi贸n gratuita del complemento Meta Box que ayuda a crear diversas publicaciones personalizadas.
- Meta Box Builder: sirve para crear campos personalizados, adem谩s de codificar manualmente. Es una extensi贸n premium del complemento Meta Box que tiene una interfaz intuitiva de arrastrar y soltar para crear campos.
- Cuenta de Mailchimp.
Despu茅s de instalar y activar los complementos anteriores, se deben de seguir los siguientes pasos:
Crea un nuevo tipo de publicaci贸n para suscriptores
Se debe crear un nuevo tipo de publicaci贸n llamada Suscriptor, esto se puede hacer con la extensi贸n MB Custom Post Type & Custom Taxonomy.
Ir a Meta Box > Tipos de publicaci贸n > Nuevo tipo de publicaci贸n. Despu茅s de eso, ingresar el nombre y la barra del tipo de publicaci贸n, finalmente Publicar.
Crear un formulario de suscripci贸n
Normalmente, un formulario de suscripci贸n tiene dos campos: Nombre y Correo electr贸nico. Adem谩s, se puede agregar campos personalizados seg煤n sea necesario (este es el beneficio de usar campos personalizados para crear el formulario).
Adem谩s, para ahorrar espacio en la base de datos, se puede usar el post title para name y el post content para correo electr贸nico. Tambi茅n se puede configurar el ID para este cuadro meta como subscription-form.
El ID del campo Nombre es post_title, y el ID del campo Correo electr贸nico es post_content porque post_titley post_content son dos ID predeterminados en WordPress para el t铆tulo y el contenido del tipo de publicaci贸n.
Se uso la extensi贸n Meta Box Builder para crear campos. Pero para ahorrar dinero, se puede utilizar la herramienta gratuita Online Generator de Meta Box para generar c贸digo autom谩ticamente.
Ir a Meta Box > Campos personalizados > Agregar nuevo para ingresar el nombre y la ID del metabox. Despu茅s de eso, elegir el tipo de campo como Textpara los campos Nombre y Correo electr贸nico.
Al crear los campos, ir a la pesta帽a Configuraci贸n para elegir el tipo de publicaci贸n del suscriptor.
Finalmente, dar clic en Guardar cambios.
Insertar y mostrar el formulario de suscripci贸n en la interfaz
Para insertar el formulario de suscripci贸n en el sitio web y dejar que los usuarios completen el formulario directamente en la interfaz, se debe usar la extensi贸n MB Frontend Submission. Esto se puede hacer con el c贸digo corto:
[mb_frontend_form id = “formulario de suscripci贸n” ajax = “true” recaptcha_key = “…” recaptcha_secret = “…” ]
Se puede crear una p谩gina de suscripci贸n para insertar este c贸digo corto. Adem谩s, se puede insertar este c贸digo corto en cualquier otra publicaci贸n o widget que desee.
Para evitar el spam de formularios, se utiliz贸 Google reCaptcha. La integraci贸n de Google reCaptcha en el formulario de interfaz es f谩cil, solo necesita ingresar la clave del sitio y la clave secreta en el c贸digo corto del formulario.
Asignar estilo del formulario de suscripci贸n
De forma predeterminada, Meta Box muestra formularios. Sin embargo, para personalizar el formulario de suscripci贸n, se necesita compensarlo con algo de CSS. Se puede consultar un c贸digo CSS a continuaci贸n y agregarlo a Apariencia > Personalizar > CSS adicional :
.rwmb-form {
fondo : # e2e8f0 ;
relleno : 24px ;
radio del borde : 4px ;
ancho m谩ximo : 768px ;
margen : 0 autom谩tico;
}
.rwmb-form .rwmb-meta-box {
pantalla : flex;
justificar-contenido : espacio-entre;
brecha de cuadr铆cula : 12px ;
}
.rwmb-form .rwmb-field {
flex : 1 ;
}
.rwmb-form .rwmb-field : not ( : last-of-type) {
margin : 0 0 12px ;
}
.rwmb-form .rwmb-label ,
.rwmb-form .rwmb-field .rwmb-input {
float : none;
ancho : 100% ;
margen inferior : 5px ;
}
.rwmb forma de bot贸n , .rwmb-forma de entrada {
anchura : 100% ;
}
Conectar el formulario de suscripci贸n a Mailchimp
En este paso, se integrar谩 el formulario de suscripci贸n a MailChimp. Esto es para enviar la informaci贸n del suscriptor a trav茅s del formulario de suscripci贸n a MailChimp. Despu茅s de eso, se puede usar MailChimp para enviar campa帽as de marketing a los suscriptores.
Para hacerlo, se puede usar la siguiente biblioteca para conectar a la API de Mailchimp: https://github.com/drewm/mailchimp-api
Hay que descargar el archivo Mailchimp.php y luego insertarlo en el tema.
A continuaci贸n, se debe agregar este c贸digo al archivo functions.php:
incluir get_stylesheet_directory (). ‘/inc/MailChimp.php’ ;
use \ DrewM \ MailChimp \ MailChimp ;
function insertList () {
$ key = ‘Claves API mailchimp c峄 b岷’ ;
$ list_id = ‘id de la lista que desea integrar’ ;
$ merge_var = array (
‘FNAME’ => $ _POST [ ‘post_title’ ],
‘LNAME’ => ” ,
);
$ mailchimp = nuevo MailChimp ($ clave);
$ resultado = $ mailchimp-> publicaci贸n ( ‘/ listas /’ . $ id_lista. ‘/ miembros’ , array (
‘direcci贸n_de_correo electr贸nico’ => $ _POST [ ‘post_content’ ],
‘merge_fields’ => $ merge_var,
‘estado’ = > ‘suscrito’ ,
));
return json_encode ($ resultado);
}
add_action ( ‘rwmb_frontend_after_process’ , function ($ config, $ post_id) {
if ( ‘formulario de suscripci贸n’ === $ config [ ‘id’ ]) {
insertList ();
morir ;
}
}, 10 , 2 );
Explicaci贸n :
‘rwmb_frontend_after_process’: el gancho que tenemos despu茅s de enviar el formulario.
subscription-form: id del metabox que hemos creado en el paso 2
Para obtener la clave API de Mailchimp, se debe iniciar sesi贸n en su cuenta de Mailchimp y luego copiar la clave API en la secci贸n Sus claves API.
En caso de la identificaci贸n de la lista, hay que iniciar sesi贸n en la cuenta de Mailchimp y luego ir a Audiencia> Todos los contactos, dar clic en Configuraci贸n y elegir el nombre de la audiencia y los valores predeterminados.
Le铆ste: C贸mo crear un formulario de suscripci贸n y conectarlo a Mailchimp con MB Frontend Submission, te recomendamos: C贸mo sincronizar registros de usuario de WordPress con Mailchimp
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil:聽@tortugacode
