Añadir un formulario de suscripción emergente a tu sitio web 

El Form Builder (Constructor de formularios) de MailChimp te permite crear y arreglar un formulario de suscripción que se muestra en un modal emergente cuando alguien viste a tu sitio. El Form Builder te permite personalizar el formulario emergente y promocionar los obsequios, las competencias, y ofertas en tu sitio.

Esta es una tarea avanzada, recomendada solo para usuarios familiarizados con la codificación personalizada. Si necesitas ayuda, ponte en contacto con tu desarrollador o contrata a un experto de MailChimp.

En este artículo, aprenderás a diseñar un formulario emergente, generar el código del formulario para tu sitio y publicar los cambios en los formularios emergentes existentes.

Antes de empezar

Estas son algunas cosas que debes saber antes de empezar este proceso.

  • Como todos los formularios de MailChimp, los de suscripción emergentes se crean en la sección de formularios de suscripción para cada una de tus listas. Personaliza las páginas de respuesta y correos electrónicos relacionados en General forms (Formularios generales).
  • Un formulario emergente que anuncia una competencia o un obsequio tiene la posibilidad de atraer a los suscriptores interesado en solamente una oferta o un evento específico. Es posible que estos suscriptores no abren o hagan clic en los mensajes futuros que envías a tu lista. Para combatir esto, crea una campaña emocionante que es más probable ganar destinatarios participativos sobre el tiempo.
  • Dependiendo del sitio web, el formulario de suscripción emergente puede tener un aspecto distinto de lo que esperabas. A veces, se necesita CSS adicional para diseñar correctamente el formulario en tu sitio.
  • Cuando un visitante ve al formulario emergente en tu sitio, almacenaremos un cookie en su explorador para que el formulario no aparezca otra vez, incluso si no llena el formulario. Si el visitante borra sus cookies o visita a tu sitio después de un año, verá el formualario de nuevo.

Diseña el formulario

El constructor de formularios para el formulario de suscripción pop-up te permite diseñar el tuyo en el panel de edición y ver los cambios en tiempo real. Utiliza los botones Desktop (Escritorio) y Mobile (Móvil) en la esquina superior izquierda de la pantalla para comprobar cómo se verá tu formulario en diferentes dispositivos.

Use the Desktop and Mobile buttons to see the layout of your form on different devices.

Sigue estos pasos para diseñar el formulario y generar el HTML para pegar en el código de tu sitio web.

  1. Ve a la página de Lists (Listas).
  2. Haz clic en el menú desplegable de la lista y en Sign-up forms (Formularios de suscripción).​
    Select Signup forms from the list drop-down menu.
  3. Selecciona Subscriber pop-up (Pop-up del suscriptor).
  4. En la pestaña Design (Diseño) del panel de edición, elige entre cuatro opciones de diseño y formatea las Form Lables (Etiquetas de los formularios), Button Styling (Estilo de los botones), y Modal Styling (Diseño del modal).
    Screenshot of the Design tab options.
    Cuando aparece el formulario pop-up en tu sitio, la pantalla de detrás del mismo se oscurece para enfatizar el pop-up. Establece la Overlay Opacity (Opacidad de superposición) de 1 a 100, donde los valores más bajos indican más transparencia, mientras que los más altos son más sólidos. Utiliza solo valores numéricos (los ajustes no se aplicarán si usas texto u otros caracteres, como el símbolo de %). Si dejas el campo de la Overlay Opacity (Opacidad de superposición) en blanco, pondremos nuestro nivel de opacidad predeterminado recomendado.
    Screenshot of the Modal Styling section.
    Para ver el Hover Color (Color de desplazamiento), Close Link Color (Cerrar enlace del color), y Overlay Opacity (Opacidad de superposición), haz clic en Preview Pop-up (Vista preliminar de popup) en la esquina superior derecha de la pantalla. Cursor hovers over the Preview Popup button.
  5. En la pestaña Fields (Campos), marca las casillas de los campos que deseas incluir en el formulario. Haz clic y mantén presionada la palanca a la izquierda de los campos para arrastrar y soltar los campos en el orden que desees.
    Click and drag fields into the order you want on the Fields tab.
    Para requerir un campo, mueve el control deslizante hasta una marca de verificación verde en la columna Required (Necesario).
    Toggle the button to make the fields on the Subscriber popup required.
  6. En la pestaña Content (Contenido), sube tu imagen desde el Administrador de contenido y añade contenido a los bloques del cuerpo y pie de página. El contenido del cuerpo aparece por encima de los campos de formulario y el del pie de página, debajo de la sección del campo de formulario.

    Si el diseño que seleccionaste en la pestaña Design (Diseño) es de solo texto, no verás la opción para subir una imagen.

  7. En la pestaña Settings (Opciones), selecciona Pop-up Delay (Retraso del pop-up) establece la Max Pop-up Width (Anchura máxima de la ventana emergente) en píxeles.
  8. Haz clic en Generate Code (Generar código).
    Click Generate Code and then copy the code from the modal to paste in your site's HTML.
  9. Copia el código del formulario del modal pop-up y añádelo al HTML de tu sitio. El mejor lugar para añadir el código varía de un sitio a otro. Ponte en contacto con un desarrollador si no estás seguro de cómo modificar el HTML de tu sitio.

Edita el formulario

Después de añadir el código del formulario de suscripción pop-up a tu sitio web, puedes realizar cambios en el pop-up en el constructor de formulario. 

A continuación aprenderás cómo publicar los cambios para que el formulario de suscripción pop-up se actualice automáticamente en tu sitio. 

  1. Ve a la página de Lists (Listas).
  2. Haz clic en el menú desplegable de la lista y en  Sign-up forms (Formularios de suscripción).
    Select Signup forms from the list drop-down menu.
  3. Selecciona Subscriber pop-up (Pop-up del suscriptor).
    Select Subscriber popup
  4. Realiza los cambios que desees y haz clic en Publish (Publicar).
    After you make changes to your popup form, click Publish.
  5. Haz clic en Publish (Publicar) en el modal emergente para publicar automáticamente estos cambios al código del formulario en tu sitio.
    Click Publish to push the form changes to the code on your site.

¿Te fue útil este artículo?
¿Qué podemos hacer para mejorar tu experiencia con artículos como este?