Cómo crear un widget de recopilación de contactos

Un formulario de contacto es una herramienta clave para crear 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 eficaz. En este artículo te mostraremos cómo crear fácilmente un widget en la plataforma.

Creación de un widget

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

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

Ingresa 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 — configuraciones de 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 los campos y los pasos del 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 o el elemento adicional que desees. 
En 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 internas o externas
● Temporizador – para limitar el tiempo o crear urgencia
● Redes sociales – botones con iconos de Facebook, Instagram, Telegram, etc.
● HTML – para insertar tu propio código
● Título y Descripción – para instrucciones o explicaciones de texto
● YouTube y Vimeo – para incrustar video
● 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 los campos estándar (nombre, email) como crear campos personalizados.

Si necesitas recopilar datos adicionales que no están en el conjunto estándar, puedes crear campos personalizados en la configuración del CRM — más detalles en un  artículo separado.

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

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

Si el participante no necesita ser redirigido a un pago u 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 quieres mostrar 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 de «Cerrar» o un enlace a material adicional —por ejemplo, un canal de Telegram o un checklist.

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

Para configurar cómo se usará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 lo que ocurre después de que un usuario hace clic en el botón del formulario:

● Contacto creado en el 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 (Deal) – Además de crear un contacto, se genera inmediatamente un acuerdo en el pipeline y etapa especificados.
● Envío a un servicio externo – Usando 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 posterior en el CRM.

Por ejemplo, puedes etiquetar automáticamente contactos por fuente, interés en un producto determinado o cualquier otro criterio importante 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 una página — Redireccionar a una URL específica

Nota: No necesitas insertar manualmente un enlace de pago: eso 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, necesitas instalar el Facebook Pixel en el sitio donde está colocado el widget. No se requiere configuración adicional.

• En los ajustes del formulario, puedes desactivar el envío del evento o reemplazarlo por uno personalizado seleccionando TrackCustom.

• Cómo instalar el Facebook Pixel:
  ● Si se trata de una mini-landing en Kwiga, necesitas añadir el Pixel de FB tal como se describe en el artículo  Conectar el FB Pixel a un proyecto en Kwiga.;

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

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

Configuración de bloques y elementos del formulario

Además de los ajustes de lógica, el panel derecho ofrece bloques adicionales para estilizar el formulario según tus necesidades.

Configuración de márgenes:

● Color del texto para etiquetas, marcadores de posición y texto dentro de los campos
● Colores de fondo y bordes
● Color al enfocar (focus)

Parámetros generales

● Ancho y alto (en píxeles)
● Color del cargador (loader) y del fondo
● Configuración del borde
● Redondeo de las esquinas
● Uso y configuración de la sombra

Configuración para escritorio

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

● Diseño en línea (Inline layout) – Alineación horizontal para formularios compactos
● Diseño en cuadrícula (Grid layout) – Uso de un sistema de cuadrícula flexible.

Ejemplo: 2fr 1fr significa que la primera columna es el doble de ancha que la segunda.

Puedes definir tamaños en fr (fracciones), px o %.

Las filas se ajustan automáticamente, manteniendo el diseño ordenado sin importar la cantidad de elementos.

Espaciado entre elementos:
Ajusta el espacio interno entre los componentes del formulario para garantizar una buena legibilidad y evitar el desorden visual.

Alineación:
Configuraciones adicionales permiten alinear el formulario en la versión móvil de la página — a la izquierda, al centro o a la derecha — según tu diseño.

Relleno del bloque (Block Padding):

Controla el relleno interno y externo del bloque del formulario.

Puedes definir los valores de arriba, abajo, izquierda y derecha por separado para una mejor integración en tu diseño.

Ajustes generales 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 Ajustes para encontrar las opciones clave que te permitirán finalizar tu widget.

Idioma del CTA – Esta opción localiza los elementos de texto de tu formulario.

Cuando está configurada en Automático, el sistema determina el idioma del usuario según la configuración de su navegador o su geolocalización, ofreciendo así una mejor experiencia para una audiencia global.

Habilitar fondo para pruebas – Permite previsualizar la apariencia del widget sobre un fondo que no sea blanco.

Es útil para pruebas, pero ten en cuenta que este fondo solo es visible en el constructor, no en el sitio publicado.

Usar en ventana modal – Activa esta opción si planeas mostrar el widget en un pop-up (por ejemplo, al 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 en el lugar donde quieres que aparezca el formulario.

También encontrarás instrucciones para añadir el widget a los constructores de sitios web más populares, como  Weblium,  SendPulse, o  Wix. 

Gracias a la flexibilidad 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 al CRM y creación automática de acuerdos.