Cómo agregar un formulario o una ventana emergente en tu blog de systeme.io
En este artículo aprenderás a configurar un formulario en línea o un formulario emergente en tu blog de systeme.io.
Paso 1: crear un formulario en línea
Primero, necesitarás crear un formulario de contacto desde tu túnel de ventas.
Para hacerlo, ve a tu túnel de ventas, haz clic en Agregar etapa (1) para crear una nueva etapa y luego elige Formulario en línea (2).
Elige la plantilla que prefieras haciendo clic en la marca de verificación para seleccionarla (3).
Ve al editor de la página del formulario haciendo clic en Editar Página para personalizar tu formulario (4).
Un formulario de contacto debe tener al menos un campo de formulario, pero puedes añadir tantos campos como desees.
Selecciona el elemento campo de formulario. Luego, haz clic en el ícono de configuración (engranaje) para ajustar el campo. Selecciona el tipo de campo que deseas recopilar desde la lista desplegable.
También debes configurar la acción del botón. Selecciona el botón y elige qué sucederá después de que el usuario envíe el formulario.
No olvides hacer clic en Guardar antes de salir del editor de tu formulario integrado.
Paso 2: crear un formulario emergente
Ve a tu túnel de venta, haz clic en Agregar etapa (5) para crear una nueva etapa y luego elige Formulario emergente (6).
Elige la plantilla que prefieras haciendo clic en la marca de verificación (4).
Ve al editor de la página del formulario haciendo clic en Editar Página (8) para personalizar tu formulario emergente.
Un formulario de contacto debe tener al menos un campo de formulario, y puedes añadir tantos campos como desees.
Selecciona el elemento campo de formulario. Luego, haz clic en el campo de formulario para configurar el campo. Selecciona el Tipo de campo que deseas recopilar desde la lista desplegable.
También será necesario configurar el botón que registrará la acción que se debe realizar con el elemento recopilado.
Puedes configurar un retraso para que el formulario de contacto aparezca en tu página de blog. Esto se puede ajustar en el editor (en segundos).
No olvides hacer clic en Guardar antes de salir del editor de tu formulario emergente.
Paso 3: configurar el formulario integrado en tu blog
Para añadir el formulario de contacto a tu blog, debes copiar su script y pegarlo en la página de tu blog.
El primer paso es volver a la configuración de la etapa de tu formulario integrado y luego hacer clic en Script.
Se mostrará una ventana emergente que contiene un enlace a la página de tu formulario integrado. Haz clic en Copiar enlace al portapapeles.
Luego deberás ir al editor de la página del blog haciendo clic en Editar desde el menú o directamente haciendo clic en el nombre de la página en la que deseas añadir el formulario integrado.
Luego, debes configurar un elemento Código HTML en tu página del blog.
Finalmente, deberás ir a la configuración de tu elemento Código HTML.
Haz clic en Editar el código y pega el script del enlace que abre la página del formulario emergente.
Asegúrate de hacer clic en Guardar para guardar el código HTML, luego haz clic en Guardar cambios en el editor y guarda antes de salir de la página de tu blog.
Si previsualizamos la página del blog después, notaremos que el formulario se muestra como se indica a continuación:
Paso 4: Configurar el formulario emergente en tu blog:
Al configurar un formulario de contacto como ventana emergente, existen dos formas posibles de mostrarlo en tu página del blog:
- Automáticamente: aparece después de un tiempo de espera específico.
- A un clic: aparece cuando un usuario hace clic en un enlace o texto específico.
Nota: para la primera opción, el método es el mismo que cuando se añade un formulario integrado en un blog, así que explicaremos en detalle el segundo método.
Para mostrar el formulario emergente después de hacer clic en un texto, primero debes volver a la Configuración de la etapa de tu formulario emergente y luego hacer clic en Crear un enlace.
Aparecerá una ventana emergente que te permitirá crear un enlace que abre el formulario emergente desde un texto:
- Debes elegir el contenido del texto que será seleccionable.
- Debes hacer clic en Copiar enlace al portapapeles.
Abre el editor de la página del blog donde deseas añadir el enlace.
Luego, debes configurar un elemento Código HTML en tu página del blog.
Finalmente, deberás ir a la configuración de tu elemento Código HTML.
Haz clic en Editar el código y pega el script del enlace que abre la página del formulario emergente, luego haz clic en Guardar.
Asegúrate de hacer clic en Guardar en el editor para guardar tu página antes de salir de la página del blog.
Si previsualizamos la página del blog después, notaremos que aparece el formulario emergente cuando hacemos clic en el texto Clic aquí para abrir el formulario, como se muestra a continuación:
