Diseña tu formulario emergente

Después de seleccionar una plantilla y crear tu formulario emergente de Mailchimp, diseña y personaliza el formulario para que coincida con tu marca. Sube un logotipo, cambia las fuentes y los colores, añade pasos de seguimiento y otros elementos llamativos para atraer a tu público.

En este artículo, aprenderás a diseñar tu formulario emergente.

Antes de empezar

A continuación, se detallan algunos puntos que debes conocer antes de empezar este proceso.

• Los formularios emergentes de Mailchimp requieren una plantilla. Para obtener más información, consulta Crear un formulario emergente.
• El diseño de tu formulario emergente debe cumplir con los requisitos del RGPD. Para obtener más información, consulta Recopilar consentimiento con formularios emergentes.

Diseña tu formulario

Después de crear un formulario emergente y elegir una plantilla, diséñalo en el editor de formularios emergentes para que coincida con tu marca y maximice la interacción con el sitio web. Tu formulario tiene diferentes elementos o componentes, como texto, imágenes, botones y campos de entrada, que se pueden cambiar por separado.

Los formularios emergentes que ya has creado aparecen en tu página de resumen. Para actualizar, haz clic en el formulario con el que deseas trabajar y, a continuación, haz clic en Editar contenido en la sección ¿Cómo es?.

Añadir un logotipo

Para añadir tu logotipo a tu formulario emergente, sigue estos pasos.

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Logotipo.
3. En la sección Imagen, haz clic en Reemplazar imagen.
   
4. Elige el archivo que deseas subir. Se admiten archivos SVG, PNG, WebP o AVIF.
5. Cambia el estilo del logotipo y ajusta la posición, el ancho, la altura y el margen. Puedes añadir esquinas redondeadas y otros elementos para adaptarlos a tus necesidades de diseño.

Actualizar fuentes

Actualiza las fuentes del formulario emergente con la herramienta de edición masiva o individualmente.

Edición masiva

Para actualizar tus fuentes con una edición masiva, sigue estos pasos.

1. En la sección Tipografía, selecciona la fuente que deseas actualizar.
2. En la ventana emergente Editar en bloque todas las instancias de esta fuente, selecciona una fuente en el menú desplegable Fuente.
3. Para obtener una vista previa de los cambios, haz clic en Vista previa y, a continuación, en Vista previa localmente.
4. Cuando estés listo para guardar tus cambios, haz clic en Guardar y revisar.
   
5. Elige un peso de fuente en el menú desplegable Peso y, a continuación, haz clic en Actualizar todos los usos de esta fuente.

Edición individual

Para actualizar tus fuentes individualmente, sigue estos pasos.

1. En el diseño del formulario emergente, haz clic en el bloque de texto que deseas actualizar.
2. En la sección Tipografía, haz clic en el menú desplegable y elige tu tipografía.
3. Cambia el color, el borde, el espaciado, la opacidad, la rotación, la animación y mucho más.
4. Para obtener una vista previa de los cambios, haz clic en Vista previa y, a continuación, en Vista previa localmente.
5. Cuando estés listo para guardar tus cambios, haz clic en Guardar y revisar.
   

Cambiar colores

Modifica los colores del formulario emergente para texto, fondos, botones y bordes.

Para cambiar los colores, sigue estos pasos.

1. En la sección Colores, haz clic en el color que deseas actualizar. Si estás en el diseño de tu formulario emergente, haz clic en Volver a todos los pasos.
2. Utiliza el selector de color para elegir un valor predefinido o introducir un código HEX personalizado.
3. Para obtener una vista previa de los cambios, haz clic en Vista previa y, a continuación, en Vista previa localmente.
4. Cuando estés listo para guardar tus cambios, haz clic en Guardar y revisar.
   

Repite este proceso para todos los colores que deseas cambiar.

Añadir imágenes

Las imágenes son una forma potente de hacer que tus formularios emergentes de Mailchimp sean visualmente más atractivos. Sustituye o añade nuevas imágenes para que coincidan con tu estilo y marca. Para obtener los mejores resultados, recomendamos un tamaño de imagen de 300KB.

Para añadir o actualizar imágenes, sigue estos pasos.

Imagen

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Añadir un elemento.
3. Arrastra y suelta el elemento Imagen en tu diseño.
4. En la sección Imagen, haz clic en Cargar.
   
5. Personaliza la imagen para que coincida con la marca de tu sitio web.
6. Si ya no deseas la imagen, haz clic en eliminar en el teclado.

Fondo de imagen

1. En tu diseño, haz clic en el fondo de la imagen con el que deseas trabajar.
2. En la sección Fondo de la imagen, haz clic en Reemplazar imagen. También puedes eliminar el fondo + recortar automáticamente o eliminar solo el fondo.
   
3. Ajusta el tamaño, establece un patrón de repetición o elige la alineación según sea necesario.
4. Si ya no deseas la imagen, haz clic en eliminar en el teclado.

Actualizar texto

Se recomienda actualizar el texto utilizando la vista móvil. El texto se actualizará automáticamente en el escritorio.

Para actualizar el texto del formulario emergente, sigue estos pasos.

1. En el diseño del formulario emergente, haz doble clic en el texto que deseas actualizar.
2. Introduce tu nuevo texto en el bloque de texto.
3. Asegúrate de actualizar el texto en todos los pasos del diseño del formulario emergente.

Botones de actualización

Puedes actualizar la apariencia y las acciones de los botones en tu diseño.

Para actualizar los botones, sigue estos pasos.

1. En tu diseño, haz clic en el botón con el que deseas trabajar.
2. En el panel Propiedades, haz clic en Apariencia para actualizar el aspecto de tu botón.
   
3. Haz clic en el botón Acciones para ver o añadir acciones. Por ejemplo, podrías tener acciones de botón para recopilar datos de correo electrónico y SMS de los visitantes del sitio web.
   
4. En la sección Ir al paso, haz clic en el menú desplegable Paso para ver otras acciones de botón o haz clic en Añadir acción para añadir acciones que se ajusten a tus necesidades.
   

Actualizar estilos

Los estilos se aplican a las plantillas de formularios emergentes de Mailchimp para ayudarte a diseñar tu formulario. Añade o elimina estilos en tu diseño para que coincidan con tu marca personal.

Editar estilos

Para editar estilos, sigue estos pasos.

1. En el panel Capas, haz clic en el elemento con el estilo que deseas cambiar. El icono de la lágrima indica que se ha aplicado un estilo.
2. En el panel Propiedades, haz clic en el menú desplegable ESTILO para ver todos los elementos con ese estilo.
3. Elige la propiedad (fuente, color, tamaño, opacidad, etc.) que deseas actualizar. Se actualizarán todos los elementos de tu diseño con ese estilo.

Crear estilos

Para crear un nuevo estilo, sigue estos pasos.

1. Selecciona el elemento sin un estilo adjunto.
2. En el panel Propiedades, haz clic en el icono Nuevo estilo.
   
3. Asigne un nombre a su estilo y, a continuación, haga clic en Crear estilo de elemento.
4. En el menú desplegable STYLE, haz clic en Detach style para eliminar un estilo.

Actualizar código de descuento

Si tu plantilla de formulario emergente tiene un código de descuento, actualiza el texto del código de descuento del marcador de posición con tu propio código.

Para actualizar el código de descuento, sigue estos pasos.

1. En el diseño del formulario emergente, haz doble clic en el código de descuento del marcador de posición.
2. Introduce tu código de descuento.
3. También tendrás que sustituir este texto en la barra de recordatorio antes de poder publicarlo.

Actualizar enlaces legales SMS

Si eliges una plantilla de formulario emergente que incluya SMS, añade enlaces a tus términos y condiciones de marketing por SMS y a tu política de privacidad.

Para actualizar tus enlaces legales SMS, sigue estos pasos.

1. En tu diseño, en el paso Finalizar suscripción, haz clic en los enlaces Términos y privacidad.
2. Haz clic en el botón Acciones(1).
3. Introduce la(s) URL de tus enlaces legales SMS.

Minicuestionario

Los minicuestionarios son una forma interactiva de atraer a los visitantes del sitio web y recopilar datos valiosos. Diseña un minicuestionario con casillas de verificación, menús desplegables o botones de opción. Para preguntas con una sola respuesta, utiliza los botones de opción o los menús desplegables. Para preguntas con más de una respuesta, utiliza las casillas de verificación.

Estos son los tipos de minicuestionarios que puedes crear.

Botones de opción

Los botones de opción, o un conjunto de opciones, ofrecen un diseño visible de opción múltiple para tu mini-cuestionario. Los visitantes de tu sitio web eligen una única respuesta entre las opciones que creas.

Para configurar los botones de opción, sigue estos pasos.

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Añadir un elemento.
3. Arrastra y suelta el elemento Conjunto de radios en tu diseño.
4. Introduce tu texto en los campos de texto. Asegúrate de que cada botón de opción tenga un valor único asignado.
5. Añade un botón de envío.

Menú desplegable

Los menús desplegables ofrecen un diseño de opción múltiple oculto para tu mini test. Los visitantes de tu sitio web eligen una única respuesta entre las opciones que creas.

Para configurar un menú desplegable, sigue estos pasos.

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Añadir un elemento.
3. Arrastra y suelta el elemento desplegable en tu diseño.
4. Introduce tus opciones desplegables en los campos. Asegúrate de que cada opción del menú desplegable tenga un valor único asignado.

Casillas de verificación

Las casillas de verificación ofrecen una respuesta múltiple y una opción de respuesta individual para tu minicuestionario. Los visitantes de tu sitio web eligen tantas respuestas como deseen entre las opciones que creas o pueden marcar una casilla de verificación obligatoria. Utiliza las casillas de verificación para recopilar el permiso o las preferencias de marketing, así como el consentimiento legal.

Para configurar una casilla de verificación, sigue estos pasos.

Conjunto de casillas de verificación

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Añadir un elemento.
3. Arrastra y suelta el elemento de conjunto de casillas de verificación en tu diseño.
4. Introduce el texto que se mostrará junto a cada casilla de verificación. Asegúrate de que cada opción de casilla de verificación tenga un valor único asignado.
5. Añade un botón para enviar.

Casilla de verificación Individual

1. En el panel Pasos, haz clic en Oferta.
2. Haz clic en Añadir un elemento.
3. Arrastra y suelta el elemento de casilla de verificación individual en tu diseño.
4. Introduce el texto de la casilla de verificación en el campo.
5. Elige un campo de público para almacenar datos de casillas de verificación en tu público.
6. Elige las opciones obligatorias y predeterminadas.

Añadir pasos de seguimiento

Añade pasos de seguimiento a tu formulario emergente para ayudar a los visitantes a volver a interactuar con tu formulario. Recuérdales una oferta de descuento o utiliza los botones para pasarlos por el formulario emergente.

Aquí tienes algunos pasos de seguimiento que puedes añadir a tu formulario emergente.

Elementos de segunda oportunidad

Los elementos de segunda oportunidad, también conocidos como “tesers”, ayudan a volver a atraer a los visitantes que anteriormente descartó tu formulario emergente. Estas burbujas de té suelen aparecer en la esquina de la pantalla y siguen a los visitantes a lo largo de su tiempo en tu sitio web.

Para añadir un elemento de segunda oportunidad, sigue estos pasos.

1. En el panel Pasos, haz clic en Seguimiento.
2. Haz clic en el segundo contenedor de oportunidades.
3. Elige las opciones de estilo para el paso de seguimiento, el texto y los botones.
4. Para eliminar un elemento de segunda oportunidad, aleja el zoom y haz clic en Finalizar campaña.

Barra de recordatorios

La barra de recordatorios actúa como una indicación para animar a los contactos suscritos a utilizar su código de descuento después de que se cierre el formulario emergente y se hayan suscrito a tu marketing. Esta barra no es interactiva y aparece como una notificación permanente mientras los visitantes navegan por tu sitio web.

Revisar las opciones

Después de diseñar tu formulario emergente, revisa tus opciones y previsualiza. Haz clic en Guardar y revisar para revisar la lista de verificación del formulario emergente. Haz clic en Vista previa para probar tu formulario emergente.

Cuando estés listo, haz clic en Publicar o programar para publicar tu formulario emergente en tu sitio web. Para obtener más información, consulta Crear un formulario emergente.

Siguientes pasos

Después de publicar tu formulario emergente, mantén tu contenido y gestiona tus métricas para cumplir con tus objetivos de marketing. Para aprender a gestionar tus formularios, consulta Gestionar tu formulario emergente.