Cómo insertar un formulario en línea o un formulario emergente en tu blog de systeme.io

En este artículo aprenderás cómo crear un formulario en línea o un formulario emergente e insertarlo en tu blog de systeme.io.

Necesitarás:

Una cuenta en systeme.io
Un túnel de ventas
Un formulario en línea y/o un formulario emergente
Un blog en systeme.io systeme.io
Escenario 1: Formulario en línea

Paso 1: Crear un formulario en línea

Primero tendrás que crear un formulario de contacto desde tu túnel de ventas.

Para hacerlo, dirígete a la pestaña Túneles de venta, crea un túnel o ingresa a uno ya creado, haz clic en el botón "Crear una etapa" (número 1) y en la sección "Opt-in" selecciona la opción "Formulario en línea" (número 2).

Selecciona la plantilla de tu elección haciendo clic en el botón "Seleccionar" (número 3).

Luego de haber seleccionado la plantilla, debes hacer clic en el botón "Editar página" para ingresar al editor del formulario en línea y personalizarlo (número 4).

Un formulario en línea debe contener al menos un (1) "campo de formulario", así que puedes añadir todos los campos de formulario que necesites.

Selecciona el elemento "Campo de formulario", luego haz clic en ícono del engranaje, configura el campo seleccionando el "tipo de campo" que deseas utilizar (número 5).

Será necesario configurar el botón que registrará la acción que será realizada con la información recopilada (número 6).

Para conocer más acerca de la configuración de un botón, haz clic aquí.

No olvides hacer clic en el botón "Guardar cambios" antes de salir del editor de tu "formulario en línea" (número 7) para conservar los cambios efectuados.

Paso 2: Insertar el formulario en línea en tu blog

Para insertar el formulario en tu blog debes copiar el "Script" del formulario en línea y pegarlo en la página de tu blog.

2.1. Debes regresar a la sección de "Configuración" (número 8) de tu "formulario en línea" y hacer clic en el botón "Script" (número 9).

2.2. Se visualizará una ventana emergente con el código de tu "Script" vinculado a la página de tu "Formulario en línea", haz clic en el botón "Copiar script en el portapapeles" (número 10).

2.3. Dirígete al blog en donde deseas insertar el formulario y haz clic en la pestaña "Páginas" (número 11). Frente a la página deseada, haz clic en el icono de los tres puntos y luego selecciona la opción "Editar" (número 12) para ingresar el editor de la página del blog.

2.4. Una vez en el editor de la página, selecciona el elemento "Código HTML" (número 13) e insértalo en la página de tu blog.

2.5. Haz clic en el icono del engranaje para abrir la configuración del elemento "Código HTML" y haz clic en el botón "Editar código" (número 14).

2.6. Aparecerá una ventana emergente en donde tienes que pegar el código "Script" generado en la página del "Formulario en línea" (número 15).

Haz clic en el botón "Guardar" (número 16) al final de la ventana emergente.

También asegúrate de hacer clic en "Guardar cambios" (número 17) en el editor de página antes de salir de la página de tu blog, para conservar los cambios efectuados.

Nota: antes de salir haz clic en "Vista previa" para previsualizar la página (número 18).

Así se puede ver el resultado final:

Escenario 2: Formulario emergente

Paso 1: crear un formulario emergente

Lo primero que tendrás que hacer es crear un formulario emergente desde tu túnel de ventas.

Para hacerlo, dirígete a la pestaña Túneles de venta, crea un túnel o ingresa a uno ya creado, haz clic en el botón "Crear una etapa" (número 1) y en la sección "Opt-in" seleccionar la opción "Formulario emergente" (número 2).

Seleccionar la plantilla de tu elección haciendo clic en el botón "Seleccionar" (número 3).

Luego de haber seleccionado la plantilla, debes hacer clic en el botón "Editar página" para ingresar al editor del formulario emergente y personalizarlo (número 4).

Un formulario emergente debe contener al menos un (1) "campo de formulario", así que puedes añadir todos los campos de formulario que necesites.

Selecciona el elemento "Campo de formulario", luego haz clic en ícono del engranaje, configura el campo seleccionando el "tipo de campo" que deseas utilizar (número 5).

Será necesario configurar el botón que registrará la acción que será realizada con la información recopilada (número 6).

Para conocer más acerca de la configuración de un botón, haz clic aquí.

También puedes seleccionar el plazo en el que el formulario emergente será visualizado en la página de tu blog, este plazo puede ser ajustado utilizando el editor.

Para establecer este plazo debes hacer clic en "Configuración" (número 7) y luego seleccionar el plazo en la sección "Abrir automáticamente la ventana emergente en X segundos después de cargar la página" (número 8).

No olvides hacer clic en el botón "Guardar cambios" antes de salir del editor de tu "formulario emergente" (número 9) para conservar los cambios efectuados.

Paso 2: Insertar el formulario emergente en tu blog

Al insertar un formulario emergente en tu blog es posible visualizarlo de dos maneras:

Opción 1: Como una ventana emergente que se visualiza según el plazo definido para su aparición
Opción 2: Como una ventana emergente que se visualiza al hacer clic un texto seleccionable

Nota: Para la primera opción el método es el mismo que se describe para insertar un formulario de línea en un blog, así que explicaremos el segundo método en detalle.

2.1. Para visualizar el "Formulario emergente" luego de hacer clic en un texto, primero necesitas regresar a la configuración de tu "Formulario emergente" y hacer clic en el botón "Crear un enlace" (número 10).

2.2. Aparecerá una ventana emergente que te permitirá crear el texto de un enlace que abrirá la ventana emergente al hacer clic.

Tienes que crear el texto que deseas sea asignado al texto seleccionable.
Hacer clic en "Copiar script en el portapapeles" (número 11)

2.3. Dirígete al blog en donde deseas insertar el formulario y haz clic en la pestaña "Páginas" (número 12). Frente a la página deseada, haz clic en el icono de los tres puntos y luego selecciona la opción "Editar" (número 13) para ingresar al editor de la página del blog.

2.4. Una vez en el editor de la página, selecciona el elemento "Código HTML" (número 14) e insértalo en la página de tu blog.

2.5. Haz clic en el icono del engranaje para abrir la configuración del elemento "Código HTML" y haz clic en el botón "Editar código" (número 15).

2.6. Aparecerá una ventana emergente en donde tienes que pegar el código "Script" del enlace que abre el "Formulario emergente" al hacer clic en él (número 16).

Haz clic en el botón "Guardar" (número 17) al final de la ventana emergente.

También asegúrate de hacer clic en "Guardar cambios" (número 18) en el editor de página antes de salir de la página de tu blog para conservar los cambios efectuados.

Nota: antes de salir haz clic en "Vista previa" (número 19) para previsualizar la página y te darás cuenta cómo se visualiza el formulario emergente al hacer clic en el texto "Haz clic aquí para abrir un formulario emergente",