Πώς να δημιουργήσετε ένα widget συλλογής επαφών

Un formulario de contacto es una herramienta clave para construir relaciones duraderas con los clientes. Con él, puedes recopilar direcciones de correo electrónico, números de teléfono, enlaces a redes sociales o cualquier otro dato necesario para una comunicación efectiva. En este artículo, te mostraremos cómo crear un widget en la plataforma fácilmente.

Crear un widget

Ve al menú Sitio → Widget, mini-landing.

Haz clic en el botón + para crear un nuevo widget.

Introduce el nombre del widget y haz clic en Guardar.

Esto creará automáticamente un formulario básico con un campo de entrada de correo electrónico. Este campo es obligatorio porque se utiliza para iniciar sesión en la plataforma como usuario.

Cómo se ve el editor:

• Sección central – muestra el formulario y su apariencia

• Panel izquierdo – elementos disponibles para añadir (botones, campos, imágenes, etc.)

• Panel derecho – ajustes para cada elemento seleccionado

Esta interfaz te permite cambiar rápidamente la estructura del formulario, añadir nuevos campos y componentes, y adaptarlo a tus objetivos.

Cómo configurar campos y pasos en el formulario

Para configurar el formulario, haz clic sobre él para seleccionarlo.

Luego haz clic en + Elemento en la barra lateral izquierda. Elige el tipo de campo deseado o un elemento adicional.

De la lista, puedes añadir no solo campos de contacto, sino también otros elementos funcionales:

• Botón – para activar acciones adicionales, como redirigir a otra página

• Imagen – para diseño o énfasis visual

• Enlace – para añadir redirecciones externas o internas

• Temporizador – para limitar el tiempo o crear una sensación de urgencia

• Redes sociales – botones con iconos de Facebook, Instagram, Telegram, etc.

• HTML – inserta tu propio código

• Título y descripción – para instrucciones de texto o explicaciones

• YouTube y Vimeo – para vídeo incrustado

• Campos de contacto (nombre, teléfono, ciudad, etc.)

Nota: Los campos añadidos al formulario se guardan automáticamente en la ficha del usuario en el CRM. Puedes usar tanto campos estándar (nombre, correo electrónico) como crear personalizados.

Si necesitas recopilar datos adicionales que no están incluidos en el conjunto estándar, puedes crear campos personalizados en la configuración del CRM – más información sobre esto en un artículo aparte.

Esto te permite adaptar el formulario a tareas específicas: recopilar números de teléfono, enlaces a redes sociales, fechas de reuniones, cargos, fuentes de leads y cualquier otra información relevante para la interacción con tus clientes.

Formularios de varios pasos: ¿por qué y cómo?

Si no es necesario redirigir al participante a un pago o a otra página después de completar el formulario – por ejemplo, si es solo un formulario de recopilación de contactos – puedes configurar un segundo paso en el formulario.

Puedes añadir hasta 2 pasos. Cambia entre ellos para configurar el contenido de cada paso por separado.

Esto es útil cuando se muestra una confirmación o información adicional después del primer paso. El segundo paso suele incluir un mensaje breve como "Tu solicitud ha sido recibida", un botón "Cerrar" o un enlace a material adicional – por ejemplo, un canal de Telegram o una checklist.

Lógica: aplicación de los datos del formulario

Para configurar cómo se utilizarán los datos del formulario para la recopilación de contactos, selecciona el formulario en la parte central del editor y ve a la sección Lógica en el panel izquierdo.

Esta sección define qué sucede después de que un usuario hace clic en el botón del formulario:

• Contacto creado en CRM – Los datos del formulario crean automáticamente un nuevo contacto en el CRM de Kwiga.

• Acceso al producto – Se crea un contacto en el CRM y, si se concede acceso a un curso o producto, el usuario es autorizado y redirigido al pago o a la página del curso.

• Negocio – Junto con la creación de un contacto, se crea inmediatamente un acuerdo en el embudo y la etapa especificados.

• Enviado a un servicio externo – Mediante un Webhook, los datos pueden enviarse a sistemas externos – como un CRM de terceros, un chatbot u otro servicio.

Una función adicional de personalización es el etiquetado automático de nuevos contactos. Después de enviar el formulario, el sistema puede asignar etiquetas específicas al contacto, lo que simplifica la segmentación y el filtrado posteriores en el CRM. Por ejemplo, puedes etiquetar automáticamente los contactos por fuente, interés en un producto concreto o cualquier otro criterio crítico para tu estrategia de marketing.

Después de enviar el formulario, puedes elegir:

• Permanecer en el bloque actual – Mostrar el segundo paso del formulario con un mensaje de confirmación

• Enviar al perfil en Kwiga – Inicio de sesión automático y redirección al perfil del usuario

• Redirigir a la página – Redirigir a una URL especificada

Nota: No es necesario insertar un enlace de pago manualmente; esto se configura automáticamente mediante la opción "Acceso al producto".

Analítica y seguimiento de eventos en FB

Al completar y enviar el formulario, el evento Lead se envía de forma predeterminada. Para rastrear este evento en tu cuenta de Facebook, debes instalar el Facebook Pixel en el sitio donde está colocado el widget. No se requiere configuración adicional. En la configuración del formulario, puedes desactivar el envío del evento o reemplazarlo por uno personalizado seleccionando TrackCustom.

Cómo instalar el Facebook Pixel:

• Si es una mini landing page en Kwiga, debes agregar el FB Pixel como se describe en el artículo Conectar FB Pixel a un proyecto en Kwiga;

• Si utilizas otro servicio, instala el FB Pixel según las recomendaciones de ese servicio.

Además, si la integración con la API de conversiones de Facebook está habilitada en Kwiga, cuando se envía un formulario desde Kwiga, el evento también se envía a la API de conversiones.

Configuración de bloques y elementos del formulario

Además de la configuración de lógica, el panel derecho ofrece bloques adicionales para personalizar el estilo del formulario según tus necesidades.

Configuración de márgenes:

• Color del texto para etiquetas, placeholders y texto de entrada

• Colores de fondo y borde

• Color de foco

Configuración general

• Ancho y alto (en píxeles)

• Color del loader y del fondo

• Configuración del borde

• Redondeo de esquinas

• Uso y configuración de sombra

Configuración de escritorio

Este bloque te permite adaptar la apariencia del formulario para pantallas más grandes y garantizar una alineación correcta y una integración fluida en tu página. Las opciones disponibles incluyen:

• Diseño en línea – Alineación horizontal para formularios compactos

• Diseño de cuadrícula – Uso de un sistema de cuadrícula flexible. Ejemplo: 2fr 1fr significa que la primera columna es dos veces más ancha que la segunda. Puedes definir tamaños en fr (fracciones), px o %.

Las filas se ajustan automáticamente, manteniendo el diseño ordenado independientemente del número de elementos.

Espaciado entre elementos:

Ajusta el espaciado interno entre los componentes del formulario para garantizar la legibilidad y evitar la saturación visual.

Alineación:

La configuración adicional te permite alinear el formulario en la página móvil –a la izquierda, al centro o a la derecha– según tu elección de diseño.

Relleno del bloque:

Esto controla tanto el relleno interno como el externo del bloque del formulario. Puedes definir por separado los valores superior, inferior, izquierdo y correcto para una mejor integración en tu diseño.

Configuración general del widget y publicación

Una vez que el formulario esté creado y configurado, debe prepararse para su publicación. En la esquina superior derecha, haz clic en Configuración para encontrar las opciones clave y finalizar tu widget.

Idioma del CTA – Esta configuración localiza los elementos de texto de tu formulario. Cuando se establece en Automático, el sistema determina el idioma del usuario según la configuración de su navegador o su geolocalización, proporcionando una mejor experiencia de usuario para una audiencia global.

Habilitar fondo para pruebas – Esto ayuda a previsualizar la apariencia de tu widget sobre un fondo no blanco. Es útil para pruebas, pero ten en cuenta que este fondo solo es visible en el constructor, no en el sitio en vivo.

Usar en ventana modal – Habilita esta opción si planeas mostrar el widget en una ventana emergente (p. ej., después de hacer clic en un botón).

En la pestaña Publicación, puedes copiar el código del widget para incrustarlo directamente en tu página.

Simplemente pega el código donde quieras que aparezca el formulario.

También hay instrucciones disponibles para añadir el widget a creadores de sitios web populares como Weblium, SendPulse o Wix.

Gracias a la configuración flexible de la plataforma, puedes crear un formulario perfectamente adaptado a las necesidades de tu negocio, desde una simple recopilación de correos electrónicos hasta escenarios complejos de varios pasos con integración con CRM y creación automatizada de negocios.