Wie man ein Widget zur Kontaktdatenerfassung erstellt

Ein Kontaktformular ist ein zentrales Werkzeug zum Aufbau langfristiger Kundenbeziehungen. Damit kannst du E-Mail-Adressen, Telefonnummern, Social-Media-Links oder andere Daten sammeln, die für eine effektive Kommunikation notwendig sind. In diesem Artikel zeigen wir dir, wie du ganz einfach ein Widget auf der Plattform erstellst.

Erstellung eines Widgets

Gehe zum Menü Website → Widget, Mini-Landing.

Klicke auf die Schaltfläche +, um ein neues Widget zu erstellen.

Gib den Namen des Widgets ein und klicke auf „Speichern“.

Dadurch wird automatisch ein Basisformular mit einem Eingabefeld für die E-Mail-Adresse erstellt. Dieses Feld ist obligatorisch, da es für den Zugriff auf die Plattform als Nutzer*in verwendet wird. 

Wie der Editor aussieht:
● Zentraler Bereich — zeigt das Formular und sein Erscheinungsbild
● Linkes Panel — verfügbare Elemente zum Hinzufügen (Buttons, Felder, Bilder usw.)
● Rechtes Panel — Einstellungen für jedes ausgewählte Element

Diese Oberfläche ermöglicht es dir, die Struktur des Formulars schnell zu bearbeiten, neue Felder und Komponenten hinzuzufügen und es an deine Ziele anzupassen.

Wie man die Felder und Schritte des Formulars konfiguriert

Um das Formular zu konfigurieren, klicke darauf, um es auszuwählen.  

Klicke dann in der linken Seitenleiste auf „+ Element“.

Wähle den Feldtyp oder das zusätzliche Element aus, das du hinzufügen möchtest. 
In der Liste kannst du nicht nur Kontaktfelder hinzufügen, sondern auch andere funktionale Elemente:
● Button – um zusätzliche Aktionen auszulösen, z. B. Weiterleitung auf eine andere Seite
● Bild – für das Design oder um visuelle Akzente zu setzen
● Link – für interne oder externe Weiterleitungen
● Timer – um die Zeit zu begrenzen oder Dringlichkeit zu erzeugen
● Soziale Netzwerke – Buttons mit Icons von Facebook, Instagram, Telegram usw.
● HTML – um eigenen benutzerdefinierten Code einzufügen
● Titel und Beschreibung – für Anleitungen oder erklärende Texte
● YouTube und Vimeo – um ein Video einzubetten
● Kontaktfelder (Name, Telefon, Stadt usw.)

Hinweis:
Die dem Formular hinzugefügten Felder werden automatisch in der Nutzerkarte im CRM gespeichert. Du kannst sowohl Standardfelder (Name, E-Mail) verwenden als auch eigene benutzerdefinierte Felder erstellen.

Wenn du zusätzliche Daten erfassen musst, die im Standardsatz nicht vorhanden sind, kannst du benutzerdefinierte Felder in den CRM-Einstellungen anlegen — mehr dazu in einem  separaten Artikel.

Dies ermöglicht es dir, das Formular an spezifische Aufgaben anzupassen: Telefonnummern sammeln, Social-Media-Links, Daten für Termine, berufliche Rollen, Lead-Quellen und alle weiteren Informationen, die für deine Interaktion mit dem Kunden relevant sind.

Mehrstufige Formulare: warum und wie?

Wenn der Teilnehmer nach dem Ausfüllen des Formulars nicht zu einer Zahlung oder einer anderen Seite weitergeleitet werden soll — zum Beispiel, wenn es sich lediglich um ein Formular zur Kontaktdatenerfassung handelt — kannst du im Formular einen zweiten Step einrichten.

Du kannst bis zu 2 Steps hinzufügen. Wechsle zwischen ihnen, um den Inhalt jedes Steps separat zu konfigurieren.

Das ist nützlich, wenn du nach dem ersten Step eine Bestätigung oder zusätzliche Informationen anzeigen möchtest.

Der zweite Step enthält normalerweise eine kurze Nachricht wie „Deine Anfrage wurde erhalten“, einen „Schließen“-Button oder einen Link zu weiterem Material — zum Beispiel zu einem Telegram-Kanal oder einer Checkliste.

Logik: Anwendung der Formulardaten

Um zu konfigurieren, wie die Formulardaten für die Kontaktdatenerfassung genutzt werden, wähle das Formular im zentralen Bereich des Editors aus und gehe im linken Panel zum Abschnitt Logik.

Dieser Abschnitt legt fest, was passiert, nachdem ein Nutzer auf den Formularbutton klickt:
● Kontakt im CRM erstellt – Die Formulardaten erzeugen automatisch einen neuen Kontakt im Kwiga-CRM.
● Zugang zum Produkt – Ein Kontakt wird im CRM erstellt und, falls einem Kurs oder Produkt Zugang gewährt wird, wird der Nutzer autorisiert und zum Zahlungsvorgang oder zur Kursseite weitergeleitet.
● Deal (Vereinbarung) – Zusätzlich zur Kontakterstellung wird sofort ein Deal in der angegebenen Pipeline und Stufe generiert.
● Versand an einen externen Dienst – Über einen Webhook können die Daten an externe Systeme gesendet werden, z. B. an ein CRM eines Drittanbieters, einen Chatbot oder einen anderen Dienst.

Eine zusätzliche Funktion zur Personalisierung ist das automatische Anwenden von Tags auf neue Kontakte.

Nach dem Absenden des Formulars kann das System dem Kontakt bestimmte Tags zuweisen, was die spätere Segmentierung und Filterung im CRM erleichtert.

Beispielsweise kannst du Kontakte automatisch anhand ihrer Quelle, ihres Interesses an einem bestimmten Produkt oder nach jedem anderen für deine Marketingstrategie relevanten Kriterium taggen.

Nach dem Absenden des Formulars kannst du auswählen:
● Im aktuellen Block bleiben — Den zweiten Step des Formulars mit einer Bestätigungsnachricht anzeigen
● Zum Profil auf Kwiga weiterleiten — Automatischer Login und Weiterleitung zum Nutzerprofil
● Auf eine Seite weiterleiten — Weiterleitung zu einer bestimmten URL

Hinweis:
Es ist nicht erforderlich, einen Zahlungslink manuell einzufügen: Dieser wird automatisch über die Option Zugang zum Produkt konfiguriert.

Analyse und Event-Tracking in Facebook

● Beim Ausfüllen und Absenden des Formulars wird das Event Lead standardmäßig automatisch gesendet.
Damit dieses Event in deinem Facebook-Konto erfasst wird, musst du den Facebook Pixel auf der Seite installieren, auf der sich das Widget befindet. Weitere Konfiguration ist nicht erforderlich.

● In den Formulareinstellungen kannst du das Senden des Events deaktivieren oder es durch ein benutzerdefiniertes Event ersetzen, indem du TrackCustom auswählst.

● So installierst du den Facebook Pixel:
– Wenn es sich um eine Mini-Landing auf Kwiga handelt, musst du den Facebook-Pixel hinzufügen, wie im Artikel  „Connettere il Facebook Pixel a un progetto su Kwiga“ beschrieben.;

Wenn du einen anderen Dienst verwendest, installiere den Facebook-Pixel gemäß den Empfehlungen dieses Dienstes.

Außerdem, wenn in Kwiga die Integration mit der Facebook Conversion API aktiviert ist, wird beim Absenden eines Formulars durch Kwiga das Event ebenfalls an die Conversion API übertragen.

Konfiguration der Formularblöcke und -elemente

Zusätzlich zu den Logikeinstellungen bietet das rechte Panel weitere Blöcke, um das Formular nach deinen Bedürfnissen zu gestalten.

Einstellungen der Außenabstände:

● Textfarbe für Labels, Platzhalter und den Text innerhalb der Felder
● Hintergrund- und Rahmenfarben
● Fokusfarbe (wenn das Feld ausgewählt ist)

Allgemeine Parameter

● Breite und Höhe (in Pixel)
● Farbe des Loaders und Hintergrundfarbe
● Rahmeneinstellungen
● Abrundung der Ecken
● Verwendung und Einstellung des Schattens 

Konfiguration für Desktop
 

Dieser Block ermöglicht es dir, das Erscheinungsbild des Formulars für große Bildschirme anzupassen und ein korrektes Alignment sowie eine nahtlose Integration in deine Seite sicherzustellen.

Die verfügbaren Optionen umfassen:

● Inline-Layout – Horizontale Ausrichtung für kompakte Formulare
● Grid-Layout – Verwendung eines flexiblen Rastersystems.

Beispiel: 2fr 1fr bedeutet, dass die erste Spalte doppelt so breit ist wie die zweite.

Du kannst die Größen in fr (Bruchteilen), px oder % festlegen.

Die Zeilen passen sich automatisch an und halten das Design sauber, unabhängig von der Anzahl der Elemente.

Abstand zwischen den Elementen

Passe den Innenabstand zwischen den Formularbestandteilen an, um gute Lesbarkeit sicherzustellen und visuelles Chaos zu vermeiden.

Ausrichtung

Zusätzliche Einstellungen erlauben es dir, das Formular in der mobilen Version der Seite linksbündig, zentriert oder rechtsbündig auszurichten — je nach deinem Design.

Block-Padding

Steuert die inneren und äußeren Abstände des Formularblocks.
Du kannst die Werte für oben, unten, links und rechts individuell festlegen, um ihn optimal in dein Layout einzubetten.

Allgemeine Widget-Einstellungen und Veröffentlichung

Sobald das Formular erstellt und konfiguriert wurde, muss es für die Veröffentlichung vorbereitet werden.
Klicke oben rechts auf Einstellungen, um die wichtigsten Optionen zu öffnen, mit denen du dein Widget finalisieren kannst.

CTA-Sprache – Diese Option lokalisiert die Textelemente deines Formulars.

Wenn sie auf Automatisch eingestellt ist, erkennt das System die Sprache des Nutzers anhand der Browsereinstellungen oder seiner Geolokalisierung und bietet so eine bessere Erfahrung für ein globales Publikum.

Hintergrund für Tests aktivieren – Ermöglicht es dir, eine Vorschau des Widgets mit einem anderen Hintergrund als Weiß anzuzeigen.

Das ist nützlich für Tests, aber beachte: Dieser Hintergrund ist nur im Builder sichtbar, nicht auf der veröffentlichten Seite.

In einem modalen Fenster verwenden – Aktiviere diese Option, wenn du planst, das Widget in einem Pop-up anzuzeigen (z. B. beim Klicken auf einen Button).

In der Registerkarte Veröffentlichung kannst du den Widget-Code kopieren, um ihn direkt in deine Seite einzubetten.

Du musst den Code einfach an der Stelle einfügen, an der das Formular erscheinen soll.

Außerdem findest du dort Anleitungen, wie du das Widget in die gängigsten Website-Builder integrierst, wie  Weblium,  SendPulse, oder  Wix. 

Dank der Flexibilität der Plattform kannst du ein Formular erstellen, das perfekt auf die Bedürfnisse deines Unternehmens abgestimmt ist – von einer einfachen E-Mail-Sammlung bis hin zu komplexen mehrstufigen Szenarien mit CRM-Integration und automatischer Erstellung von Deals.