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 configurar un formulario integrado 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 registro desde tu túnel de venta.
Para hacerlo, ve a tu túnel de ventas, haz clic en Agregar etapa (1) para crear una nueva página y luego elige Formulario en línea (2).
Elige la plantilla que prefieras haciendo clic en el ícono de selección ✅ (3).
Ve al editor de la página del formulario haciendo clic en Editar Página (4) para personalizar tu formulario.
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 campo de formulario para configurar 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é sucede después de que el usuario envía 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 un nuevo paso y luego elige Formulario emergente (6).
Elige la plantilla que prefieras haciendo clic en el ícono de elegir ✅(7).
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 elegir un tiempo para que el formulario de contacto aparezca en tu página del blog; este tiempo puede ajustarse usando el Editor (el tiempo debe indicarse 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: El formulario emergente aparece después de un tiempo de espera específico.
- De un Clic: El formulario emergente 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, por lo 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á clicable.
- 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 la visualización del formulario emergente cuando hacemos clic en el texto Clic aquí para abrir el formulario, como se muestra a continuación:
