Si alguna vez se ha registrado en una suscripción de correo electrónico, debe saber acerca de MailChimp. Es una compañía que ayuda a los webmasters y los vendedores a entregar boletines y otras campañas similares. Proporcionan algunas plantillas HTML para usar en formularios de registro y páginas de confirmación, pero son tan genéricas que la mayoría de los suscriptores están aburridos de esta misma interfaz.
Me gustaría demostrar cómo personalizar el formulario de registro de MailChimp en algo más único. Todo se basa en el código original de MailChimp HTML / CSS y el envío del formulario utilizará Ajax. Suena complicado pero todo el proceso es más simple de lo que cabría esperar. Eche un vistazo a mi ejemplo de demostración para tener una idea del tutorial completo.
Demo en vivo - Descargar código fuente
Empezando
Primero necesitamos acceder al panel de control de MailChimp para recopilar su código HTML. Inicie sesión en su cuenta o cree una nueva cuenta gratuita. Haga clic en? Listas? desde el menú principal y obtendrá una tabla de todas sus listas de suscripción. Es posible que desee utilizar una lista existente o crear una nueva lista para este tutorial. De cualquier manera, haga clic en el nombre de la lista y obtendremos otra tabla organizando todos los suscriptores por correo electrónico.
Cualquier nueva lista comenzará vacía, pero no importa cuántos suscriptores tenga. En esta página, haga clic en? Formularios de inscripción? y se nos presentarán algunas opciones. Los formularios generales son demasiado básicos y no tenemos control sobre el código. Seleccionar? Formularios incrustados? y obtendrás una interfaz elegante para copiar / pegar el HTML.
He elegido Super Slim en lugar de Classic porque hay menos CSS en tu diseño, pero aún así es mejor que Naked sin ningún estilo.
El bloque de arriba es mi código predeterminado de MailChimp. Hay mucho que organizar, es decir, eliminar todos los comentarios a menos que realmente los necesites. También he creado una nueva hoja de estilo. estilos.css Y voy a combinar todo juntos. El en linea #mc_embed_signup debe combinarse en un archivo CSS unificado junto con el código delgado de MailChimp. Esta es mi estrategia para personalizar el diseño original y arreglar todo el diseño.
Cambios en HTML
Será más fácil explicar este proceso mostrando el bloque de código actualizado para que pueda comparar. Todas las clases e identificaciones y nombres se han dejado solos. Es más inteligente personalizar el CSS utilizando las clases / ID existentes para garantizar la compatibilidad.
El cambio más importante es el atributo de acción de mi formulario. Todo en la URL es idéntico hasta post-json, que fue originalmente enviar en la plantilla de MC. La acción posterior devuelve una página de finalización típica con la que todos estamos familiarizados. post-json devolverá una respuesta JSON basada en el éxito o fracaso de la suscripción de correo electrónico. Tenga en cuenta que también he adjuntado & c =? hasta el final de esta URL.
El propósito sería delegar un método de devolución de llamada que sea sinónimo en las respuestas JSON. No he encontrado un uso para él personalmente, pero hay muchas publicaciones e hilos de discusión sobre el tema de las funciones de devolución de llamada. Solo recuerda que debe ser parte de la URL de acción.
También es posible que note un div adicional en la parte inferior del contenedor del formulario. Estoy usando la identificacion #notification_container en una sintaxis familiar como los nombres de identificación de MailChimp. Una vez que JSON devuelve un valor, verificamos JavaScript y luego se agrega a la página dentro de esta división.
Actualizando CSS
Aparte de los restablecimientos de página típicos, también he escrito mis propios estilos para los contenedores de mensajes de alerta / éxito. Las propiedades son bastante típicas, por lo que no entraré en detalles, pero puedes encontrarlas dentro de mi archivo styles.css consolidado.
La mejor manera de personalizar los estilos de formulario de MC es reconocer cómo desea que se vea. La forma es una mezcla de porcentajes y píxeles, por lo que realmente depende de usted como diseñador hacer lo que quiere. Elementos sensibles o fijos, en línea o de estilo bloque. etc.
He agregado un espacio adicional a mi código para que haya selectores de nivel de bloque y estilos en línea.
Esto es solo una pequeña parte y se enfoca en las entradas y el botón de envío. Estoy usando un borde inferior para hacer que el botón aparezca en 3D, que luego se aplana cuando se hace clic.Todo es bastante sencillo y ninguno de mis códigos CSS debería ser confuso. Acabo de reposicionar el contenedor de formularios a 350 px de ancho para que todo aparezca centrado en la página.
Su posicionamiento cambiará si lo necesita dentro de la barra lateral, el encabezado o tal vez incluso el pie de página. En estos casos, puede reubicar el contenedor de notificaciones sobre el formulario, o lo que sea más conveniente. Siéntase libre de comenzar con mi código, pero comenzar con los valores predeterminados de MailChimp probablemente sean igual de buenos.
Si utilizamos la URL de acción original, podríamos detenernos en este punto y terminar. La mayoría del formulario se ha rediseñado y, una vez que un usuario hace clic en enviar, se abrirá una nueva pestaña que le pedirá que confirme la suscripción por correo electrónico. Pero para simplificar este proceso veremos una alternativa jQuery para manejar el envío.
Registro de MailChimp y jQuery
Si aún no tiene una copia de jQuery, descargue una e inclúyala dentro del encabezado de la página. Todo mi código está escrito en etiquetas de script en la parte inferior de la página. De hecho, me topé con esta solución en Stack Overflow que describía gran parte del proceso.
Justo cuando se carga el documento, estoy configurando una variable de referencia jQuery $ formulario. Cada vez que se hace clic en el botón de envío, evitamos el envío predeterminado (que abriría una página de resultados JSON) y, en cambio, llamamos a una función definida por el usuario llamada registro(). los $ formulario se pasa a la función como un parámetro.
Puede parecer confuso, pero esta función es en realidad un método largo .ajax (). Observe que podemos quitar el atributo GET / POST del formulario, junto con la URL de acción actualizada. Todos los valores de entrada se serializan y pasan como PHP. Esta es la razón principal para dejar los nombres de entrada de formulario solos y mantener la plantilla original.
Finalmente, hay dos devoluciones de llamada de respuesta Ajax en caso de éxito o error. Si recibimos un error, MailChimp no pudo aceptar nuestra solicitud y aparece el mensaje de alerta. De lo contrario, aceptaron la solicitud, pero no sabemos si funcionó.
Si Ajax tuvo éxito, obtenemos un nuevo parámetro que se devuelve a jQuery. En este caso se llama datos que debería aparecer como un objeto JSON. Si los datos del resultado dicen que no funcionó, entonces sabemos que hay un problema con la dirección de correo electrónico, ya sea que no es válida o simplemente no es una cadena de correo electrónico. De cualquier manera, el mensaje de error se envía a la página. Estoy usando substr () para eliminar la primera parte del código del mensaje de error.
O si el mensaje de datos es exitoso, deberíamos obtener una cadena de devolución que indique que el usuario necesita revisar su bandeja de entrada y confirmar esta nueva suscripción. De cualquier manera, el mensaje de retorno se envía al contenedor de notificaciones utilizando el método .html () de jQuery's.
Tenga en cuenta que incluso si se registra con un correo electrónico aleatorio, este no lo hará aparecerá en su lista hasta que se haya confirmado. Para comprobar si este script realmente funciona, deberá utilizar una dirección real y hacer clic en el correo electrónico de confirmación.
Demo en vivo - Descargar código fuente
Clausura
Siempre me ha molestado un poco la forma de suscripción predeterminada de MailChimp. Espero que este tutorial pueda ofrecer un enfoque ligeramente diferente para los desarrolladores web y los comercializadores de Internet. También recuerde que puede actualizar el diseño de la interfaz para las páginas de confirmación y los correos electrónicos enviados a cada suscriptor. Siéntase libre de descargar mi código fuente e incluir este formulario actualizado de MailChimp dentro de cualquiera de sus propios proyectos.