No se encontraron resultados...

Cómo crear un formulario pop-up

¿Qué es un formulario pop-up?

Un formulario pop-up o formulario emergente suele ser una pequeña ventana con un mensaje que aparece mientras un visitante navega por tu sitio web. Son una excelente manera de promocionar tu newsletter y recoger suscriptores.

Cómo crear un formulario emergente

Para crear un formulario popup:

  1. Ve a la página Formularios.

  2. Haz clic en la pestaña Pop-ups.

  3. Haz clic en Crear formulario.

  1. Nombra tu ventana pop-up y asegúrate de que el tipo de formulario: El Pop-up se selecciona.

  2. Haz clic en Guardar y continuar.

  3. Selecciona al menos un grupo para tu formulario pop-up. Cuando los suscriptores completen tu formulario emergente, se agregarán al grupo que selecciones aquí.

  1. Haz clic en Continuar.

  2. Selecciona una plantilla de formulario pop-up. Una vez seleccionado, se abrirá el editor de formularios pop-up.

9. Edita el encabezado y el texto de tu formulario emergente haciendo clic en el bloque que deseas editar y escribiendo directamente en el bloque de tu formulario emergente.

10. Cambia la imagen en tu formulario pop-up haciendo clic en el bloque de imagen y luego haciendo clic en la imagen en la barra lateral.

11. Haz clic en el bloque de formulario de suscripción para editarlo en la barra lateral. Para editar el campo de entrada, haz clic en el icono del lápiz junto al campo que deseas editar.

12. Edita la página de éxito de tu formulario emergente haciendo clic en el botón Éxito a lo largo de la barra de navegación superior.

13. Una vez que hayas terminado de editar tu formulario, haz clic en Siguiente para salir del editor de formularios y aplicar algunos ajustes a tu formulario pop-up.

Cómo aplicar ajustes a un formulario pop-up

Estas configuraciones son las reglas que aplicas a tu formulario emergente y que determinan cuándo y dónde aparece.

Hay cuatro factores en el comportamiento de tu formulario a los que debes aplicar ajustes:

  • Disparador - Elige cuándo aparecerá tu formulario emergente. Por ejemplo, cinco segundos después de abrir la página, cuando el visitante se desplaza al 50% de la página web, o cuando el visitante tiene la intención de salir de la página.

  • Frecuencia - Elige la frecuencia con la que aparece tu pop-up para el mismo visitante si no se suscribe la primera vez que ve el pop-up.

  • Programar - Haz que tu ventana emergente entre en funcionamiento inmediatamente o establezca una fecha de inicio y una fecha de finalización para tu formulario pop-up.

  • Visibilidad - Elige si quieres ocultar tu pop-up en dispositivos específicos, u ocultar/mostrar tu pop-up en páginas web específicas.

Una vez que estés satisfecho con la configuración de comportamiento de tu ventana emergente, haz clic en Guardar y continúa con el siguiente paso: instalar tu formulario pop-up.

Cómo instalar un formulario pop-up en tu sitio web

Para instalar el formulario emergente en tu sitio web, tendrás que copiar y pegar el fragmento de JavaScript en cada página de tu sitio web, justo antes de la etiqueta de cierre </head>.

Para instalar el fragmento de seguimiento de JavaScript en tu sitio web:

  1. Ve a la página Formularios y haz clic en Configuración.

  2. Desplázate hacia abajo hasta que veas el fragmento de JavaScript (o cópialo desde la página de configuración al crear un pop-up).

3.Copia y pega el fragmento de seguimiento universal en el HTML de tu sitio web justo antes de la etiqueta de cierre </head>. (Solo necesitas hacerlo una vez, incluso si planeas instalar varios formularios en tu sitio web).

Tu sitio web se compone de secciones de HTML llamadas elementos. El primer elemento es el <head>, comienza con la etiqueta de apertura <head> y termina con la etiqueta de cierre </head>. Si no sabes cómo editar el HTML de tu sitio web, te recomendamos que te pongas en contacto con el equipo de soporte de la plataforma en la que creaste tu sitio web.

Nota: ¿Usas WordPress o Shopify? Instala el plugin MailerLite para WordPress o el plugin MailerLite para Shopify para instalar tus formularios en tu sitio web sin utilizar ningún código.

Cómo ocultar/mostrar formularios pop-up en páginas específicas

Cuando creas un formulario emergente se mostrará en cada página de tu sitio web por defecto. Sin embargo, en tu configuración de visibilidad puedes decidir si deseas que ese formulario pop-up se muestre en cada página de tu sitio web, algunas páginas de tu sitio web; o puedes optar por ocultarlo en páginas específicas de tu sitio web.

Para ocultar tu formulario emergente en páginas específicas:

  1. Selecciona Ocultar en páginas específicas.

  2. Copia y pega la URL de la página web de las páginas en las que no quieres que aparezca tu ventana emergente. Pega cada URL en su propia línea.

  3. Marca la casilla etiquetada Aplicar igualdad estricta para ocultar tu ventana emergente solo en páginas que coincidan exactamente con las URL ingresadas.

Para mostrar tu formulario emergente solo en páginas específicas:

  1. Selecciona Solo mostrar en páginas específicas.

  2. Copia y pega la URL de la página web de las páginas en las que quieres que aparezca tu ventana emergente. Pega cada URL en su propia línea.

  3. Marca la casilla etiquetada Aplicar igualdad estricta para que tu ventana emergente se muestre solo en páginas que coincidan exactamente con las URL ingresadas.

Nota: Si no marcas la casilla Aplicar igualdad estricta, todas las URL que contengan la URL que has introducido se incluirán en la configuración de visibilidad.

Por ejemplo, si configuras tu formulario emergente para ocultarse en www.mailerlite.com y no marcas Aplicar igualdad estricta, tu ventana emergente se ocultará en todas las páginas web que contengan www.mailerlite.com, incluidas www.mailerlite.com/blog y www.mailerlite.com/about, etc.

Ventana pop-up al hacer clic

¿Quieres convertir tus textos, imágenes y botones en ventanas pop-up en las que se pueda hacer clic?

Para utilizar la función Ventana pop-up al hacer clic:

  1. Ve a la pestaña Formularios.

  2. Puedes utilizar la pestaña Pop-ups o la pestaña Formularios integrados.

  3. Localiza un formulario que hayas creado y haz clic en Resumen.

  4. Desplázate hacia abajo hasta la sección de Fragmentos de seguimiento de JavaScript. Aquí encontrarás los scripts que necesitas, que deberás insertar en cada página de tu sitio a la que desees añadir la ventana pop-up. Normalmente, el CMS tiene un lugar especial para implementar este código y mostrarlo en cada página.

  5. Haz clic en Mostrar en el evento de clic. Aquí tendrás acceso a todos los códigos Javascript de eventos de clic. Si deseas que la ventana pop-up se muestre en un evento de clic, entonces el código Javascript debe ser añadido.

Para crear un botón pop-up, copia el código de la segunda tabla gris. Esto creará un botón en tu entrada. El código que hay debajo es para cuando quieras mostrar tu ventana pop-up siempre que se haga clic en un enlace. Puedes utilizar este código para mostrar tu formulario cuando alguien haga clic en un texto o en una imagen.

Para el botón, copia y pega el código y reemplaza la frase Haz clic aquí para mostrar la ventana pop-up con tu propio botón CTA. El estilo del botón es el mismo que has establecido en tu blog. Si deseas cambiar el botón, tienes que cambiar la configuración de diseño en tu blog.

Para el enlace haz clic en pop-up, copia y pega el código y reemplaza la frase Haz clic aquí para mostrar pop-up con el texto o el código de la imagen.

Haz clic en Publicar y visualiza tu nueva publicación emergente.

Nota: Si utilizas WordPress, a veces cuando cambias entre las pestañas del editor visual y de texto, la información pop-up del editor fuente se pierde. Simplemente actualiza la página y tu información estará de vuelta. Evita pulsar el botón Actualizar, pues entonces tendrás que volver a añadir la información.

Cómo usar el editor de formularios pop-up

El editor de formularios pop-up está dividido en dos secciones por dos pestañas que se encuentran en la barra lateral: la pestaña Bloques y la pestaña Diseño.

Pestaña Bloques

En la pestaña Bloques, puedes arrastrar y soltar bloques de contenido adicionales en tu formulario emergente.

Hay seis bloques para elegir:

  • Texto - Utiliza este bloque para agregar más texto a tu formulario emergente

  • Imagen - Utiliza este bloque para agregar una imagen o GIF a tu formulario emergente

  • Imagen y contenido - Utiliza este bloque para agregar una imagen, GIF o video a tu formulario emergente con texto adjunto al mismo

  • Cuenta atrás - Utiliza este bloque para crear urgencia añadiendo un temporizador de cuenta regresiva a tu formulario emergente

  • Enlaces sociales - Utiliza este bloque para agregar enlaces a tus páginas de redes sociales a tu formulario emergente

  • Divisor - Utiliza este bloque para dividir el contenido en tu formulario emergente añadiendo un divisor

Pestaña de Diseño

La pestaña Diseño te permite editar el diseño visual de tu formulario emergente. Dentro de la pestaña de diseño encontrarás cuatro secciones: Tipo de formulario, Configuración de diseño, Configuración de formulario de suscripción y Configuración adicional.

Tipo de formulario

Aquí es donde seleccionas cómo quieres que sea el cuadro emergente. Por ejemplo, es posible que desees que tu ventana pop-up aparezca como un cuadro en el centro de la página web, o que desees que la ventana emergente ocupe toda la pantalla.

Configuración de diseño

Aquí es donde decides el diseño general de tu formulario emergente. Cada elemento de diseño tiene una burbuja de diseño asociada en la que puedes hacer clic para modificar la configuración de diseño, como fuentes, formato y colores. Por ejemplo, si deseas cambiar la fuente de todos los textos del encabezado uno:

  1. Ve a la pestaña Diseño.

  2. Haz clic en Ajustes de diseño.

  3. En Elementos de contenido, busca la burbuja de diseño etiquetada Encabezado 1 y haz clic en ella.

  4. Aparecerá una ventana en la que podrás editar la fuente de todo el texto del epígrafe 1.

Configuración del formulario

Aquí puedes aplicar diferentes configuraciones a tu formulario. Estos ajustes incluyen:

  • Política de privacidad: añade una declaración de privacidad a tu formulario emergente.

  • Casilla de verificación de confirmación: agrega una casilla de verificación de consentimiento del usuario a tu formulario emergente.

  • Campo de segmentación oculto: añade un campo oculto para segmentar tu lista de suscriptores. Puedes seleccionar un campo y un valor para que todos los suscriptores de este formulario tengan ese valor agregado a ese campo.

  • Campos de permisos de marketing (compatibles con RGPD): incluya casillas de verificación de permisos de marketing compatibles con RGPD en tu formulario emergente.

  • Grupos de interés - Dar a los suscriptores la opción de elegir su propio grupo de suscriptores.

  • reCAPTCHA - Añade una casilla de verificación “No soy un robot” a tu formulario emergente. Esto ayuda a evitar que robots de spam potencialmente dañinos se unan a tu lista de suscriptores.

What is a pop-up form?

A pop-up form is usually a small window with a message that appears while a visitor is browsing your website. They’re an excellent way to promote your newsletter and collect subscribers.

How to create a pop-up form

To create a pop-up form:

  1. Navigate to Forms.

  2. Click on the Pop-ups tab.

  3. Click Create pop-up.

4. Name your pop-up form.

5. Select at least one group for your pop-up form. When subscribers complete your pop-up form they will be added to the group(s) you select here.

6. Select a template pop-up form template. Once selected, the pop-up form editor will open.

7. Edit the heading and text of your pop-up form by clicking the block you wish to edit and typing directly into the block on your pop-up form.

8. Change the image on your pop-up form by clicking on the image block, then clicking on the image in the sidebar.

9. Click on the form block to edit it in the sidebar. To edit the input field, click the pencil icon next to the field you wish to edit.

10. Edit your pop-up form’s success page by clicking the Success button along the top navigation bar.

11. Once you’re finished editing your form, click Next to exit the form editor and apply some behavior settings to your pop-up form.

How to apply behavior settings to a pop-up form

Behavior settings are the rules you apply to your pop-up form that determine when and where the pop-up appears.

There are four factors in the behavior of your form to which you must apply settings:

  • Mode - Choose when your pop-up form will appear. For example, five seconds after the page is opened, when the visitor scrolls to 50% of the web page, or when the visitor intends to exit the page

  • Frequency - Choose how often your pop-up appears for the same visitor if they don’t subscribe the first time they see the pop-up

  • Schedule - Have your pop-up go live immediately or set a start date and finish date for your pop-up form

  • Visibility - Choose whether you want to hide your pop-up on specific devices, or hide/show your pop-up on specific webpages

Once you’re satisfied with your pop-up’s behavior settings, click Save and continue to carry on to the next step: installing your pop-up form.

How to install a pop-up form on your website

You will need to install the JavaScript tracking snippet to install the pop-up form on your website,

To install the JavaScript tracking snippet to your website:

  1. Navigate to Forms.

  2. Click the Pop-ups tab.

  3. Click on the title of your pop-up form.

  4. Scroll all the way down until you see the JavaScript tracking snippet.

5. Copy and paste the universal tracking snippet into your website’s HTML just before the closing </head> tag. (You only need to do this once, even if you plan on installing multiple forms on your website).

Your website is made up of sections of HTML called elements. The very first element is the <head>, it starts with the opening <head> tag and ends with the closing </head> tag. If you’re unsure how to edit your website HTML, we recommend contacting the support team of the platform on which you created your website.

Note: Using WordPress or Shopify? Install the MailerLite plugin for WordPress or the MailerLite plugin for Shopify to install your forms on your website without using any code.

Pop-up on click event

Want to turn your text, images and buttons into clickable pop-ups?

To use the Pop-up on click event feature:

  1. Go to the Forms tab.

  2. You can use either the Pop-ups tab or the Embedded forms tab.

  3. Locate a form you’ve created and click Get embed code. Here are all the scripts you need, these should be inserted on each page you want to add the pop-up too. Usually, the CMS has a special spot to implement this code and showcase it on every page.

  4. Click Show pop-up on click event . Here you'll have access to all the click event Javascript codes. If you want the pop-up to show on a click event, then the Javascript code must be added.

To create a button pop-up, copy the code in the second grey table. This will create a button in your post. The code under it is for when you want to show your pop-up whenever a link is clicked. You can use this code to display your form when someone clicks on text or an image.

After copying the code, go to your CMS and add a new blog post. We use WordPress for this example. When creating a new blog, make sure you’re using the source code editor (this is the Text tab next to Visual in WordPress).

For the button, copy and paste the code and replace the sentence Click here to show pop-up with your own button CTA. The button style is the same as you have set on your blog. If you want to change your button, you need to change this setting on your blog.

For the link click pop-up, copy and paste the code and replace the sentence Click here to show pop-up with text or the image code.

Click Publish and view your new pop-up post.

Note: If you’re using WordPress, sometimes when you change between the visual and text editor tabs, the pop-up information in the source editor gets lost. Just refresh the page and your information will be back. Avoid pressing the Update button, then you’ll need to add the information again.

Ready to try MailerLite?

How to hide/show pop-up forms on specific pages

When you create a pop-up form it will show on every page of your website by default. However, in your Visibility settings you can decide whether to have that pop-up form show on every page of your website, some pages of your website; or you can choose to hide it on specific pages of your website.

To hide your pop-up form on specific pages:

  1. Select Hide on specific pages.

  2. Copy and paste the webpage URL(s) of the pages you do not want your pop-up to appear on. Paste each URL onto its own line.

  3. Checkmark the box labeled Apply strict equality to have your pop-up hidden only on pages that match the entered URLs exactly.

To show your pop-up form only specific pages:

  1. Select Only show on specific pages.

  2. Copy and paste the webpage URL(s) of the pages you want your pop-up to appear on. Paste each URL onto its own line.

  3. Checkmark the box labeled Apply strict equality to have your pop-up show only on pages that match the entered URLs exactly.

Note: If you do not check the box labeled Apply strict equality, then all URLs that contain the URL you entered will be included in your visibility settings.

For example, if you set your pop-up form to hide on www.mailerlite.com and you don’t check Apply strict equality, then your pop-up will be hidden on all web pages containing www.mailerlite.com, including www.mailerlite.com/blog and www.mailerlite.com/about, etc.

How to use the pop-up form editor

The pop-up form editor is divided into two sections by two tabs found in the sidebar: the Blocks tab and the Design tab.

Blocks tab

Under the Blocks tab, you can drag and drop additional content blocks in your pop-up form.

There are six blocks to choose from:

  • Text - Use this block to add more text to your pop-up form

  • Image - Use this block to add an image or GIF to your pop-up form

  • Image and content - Use this block to add an image, GIF or video to your pop-up form with accompanying text next to it

  • Countdown - Use this block to create urgency by adding a countdown timer to your pop-up form

  • Social links - Use this block to add links to your social media pages to your pop-up form

  • Divider - Use this block to break up the content in your pop-up form by adding a divider

Design tab

The Design tab allows you to edit the visual design of your pop-up form. Within the design tab you’ll find four sections; Form type, Design settings, Sign up form settings, and Additional settings.

Form type

This is where you select what you want the pop-up box to look like. For example you may want your pop-up to appear as a box in the centre of the webpage, or you may want the pop-up to take up the entire screen.

Design settings

This is where you decide the overall design of your pop-up form. Each design element has an associated design bubble that you can click in order to alter the design settings such as fonts, formatting, and colors. For example, if you want to change the font of all heading one text:

  1. Navigate to the Design tab.

  2. Click Design settings.

  3. Under Content elements, find the design bubble labeled Heading 1 and click it.

  4. A window will appear in which you can edit the font of all Heading 1 text.

Sign up form settings

Here you can apply different settings to your form. These settings include:

  • Privacy policy - Add a privacy statement to your pop-up form.

  • Confirmation checkbox - Add a user-consent checkbox to your pop-up form.

  • Hidden segmentation field - Add a hidden field to segment your subscriber list. You can select a field and a value so that all subscribers of this form have that value added to that field.

  • Marketing permissions fields (GDPR-compliant) - Include GDPR compliant marketing permissions checkboxes to your pop-up form.

  • Interest groups - Give subscribers the option to choose their own subscriber group.

  • reCAPTCHA - Add an “I am not a robot” checkbox to your pop-up form. This helps prevent potentially harmful spam bots from joining your subscriber list.

Additional settings

Under Additional settings, you can opt to add an additional sidebar to your form by checking the box labeled Show sidebar.

You can add text to your sidebar by clicking in the center of the sidebar and typing in your content. You can also edit the color or choose an image for your sidebar in Design settings under Background.

Editado por última vez: 30 de nov. de 2023
Artículos relacionados
Cómo crear un formulario integrado Cómo añadir un formulario a un newsletter