Jak stworzyć widżet do zbierania kontaktów

Formularz kontaktowy to jeden z kluczowych elementów budowania długoterminowych relacji z klientami. Za jego pomocą możesz zbierać adresy e-mail, numery telefonów, linki do mediów społecznościowych lub inne dane potrzebne do skutecznej komunikacji. W tym artykule pokażemy, jak łatwo utworzyć widżet na platformie.

Tworzenie widżetu

Przejdź do menu Strona → Widżet, minilanding.

Kliknij przycisk +, aby utworzyć nowy widżet.

Nadaj widżetowi nazwę i kliknij Zapisz.

Zostanie automatycznie utworzony podstawowy formularz z polem na adres e-mail — jest ono obowiązkowe, ponieważ służy jako login użytkownika na platformie.

Jak wygląda edytor:

• Centralna część — wyświetla formularz i jego wygląd

• Lewa strona — dostępne elementy do dodania (przyciski, pola, obrazy itd.)

• Prawa strona — ustawienia każdego wybranego elementu

Ten interfejs umożliwia szybkie zmiany struktury formularza, dodawanie nowych pól i komponentów, dostosowując go do twoich potrzeb.

Jak skonfigurować pola i kroki formularza

Aby skonfigurować formularz, kliknij go, aby go zaznaczyć.

Następnie kliknij + Element w lewym panelu bocznym. Wybierz odpowiedni typ pola lub dodatkowy element.

Na liście można dodać nie tylko pola kontaktowe, ale również inne przydatne elementy:

• Przycisk – do uruchamiania dodatkowych akcji, np. przekierowania na inną stronę

• Obraz – do celów estetycznych lub akcentów wizualnych

• Link – do dodania przekierowań zewnętrznych lub wewnętrznych

• Timer – do ograniczenia czasu lub stworzenia poczucia pilności

• Media społecznościowe – przyciski z ikonami Facebooka, Instagrama, Telegrama itd.

• HTML – możliwość wstawienia własnego kodu

• Nagłówek i Opis – do tekstowych wyjaśnień lub instrukcji

• YouTube i Vimeo – do osadzania wideo

• Pola kontaktowe (imię, telefon, miasto itd.)

Uwaga: Pola, które dodajesz do formularza, są automatycznie zapisywane w karcie użytkownika w CRM. Możesz używać zarówno pól standardowych (np. imię, e-mail), jak i tworzyć własne.

Jeśli potrzebujesz zebrać dodatkowe dane, które nie są częścią standardowego zestawu, możesz utworzyć własne pola w ustawieniach CRM — więcej na ten temat w osobnym artykule.

To pozwala dostosować formularz do konkretnych zadań: zbierania numerów telefonów, linków do mediów społecznościowych, dat spotkań, stanowisk, źródła zgłoszeń czy jakichkolwiek innych informacji istotnych w relacji z klientem.

Wiele kroków w formularzu: po co i jak?

W sytuacjach, gdy po wypełnieniu formularza nie trzeba od razu przekierowywać użytkownika na płatność lub inną stronę (np. gdy chodzi tylko o zbieranie kontaktów), można skonfigurować drugi krok formularza.

Formularz może mieć maksymalnie dwa kroki. Przełączaj się między nimi, aby osobno konfigurować zawartość każdego z nich.

To przydatne, gdy chcesz wyświetlić potwierdzenie lub dodatkowe informacje po pierwszym kroku. Najczęściej drugi krok zawiera krótką wiadomość typu „Twoje zgłoszenie zostało przyjęte”, przycisk „Zamknij” lub link do dodatkowego materiału — np. kanału Telegram lub checklisty.

Logika: wykorzystanie danych z formularza

Aby skonfigurować sposób wykorzystania danych z formularza kontaktowego, zaznacz formularz w centralnej części edytora i przejdź do sekcji Logika w lewym panelu.

Ta sekcja określa, co stanie się po kliknięciu przycisku w formularzu:

• Utworzenie kontaktu w CRM – dane z formularza automatycznie tworzą nowy kontakt w CRM Kwiga.

• Dostęp do produktu – kontakt jest tworzony w CRM, a jeśli udzielany jest dostęp do kursu lub produktu, użytkownik zostaje automatycznie zalogowany i przekierowany na stronę płatności lub kursu.

• Transakcja – razem z utworzeniem kontaktu automatycznie tworzy się transakcja w określonym lejku sprzedażowym i na wybranym etapie.

• Przekazanie do zewnętrznego systemu – za pomocą webhooka dane można wysłać do zewnętrznych systemów, np. innych CRM, chatbotów lub usług.

Dodatkową możliwością personalizacji jest automatyczne dodawanie tagów do nowych kontaktów. Po wypełnieniu formularza system może przypisać kontaktowi określone oznaczenia, co znacząco ułatwia późniejszą segmentację i filtrowanie w CRM.

Na przykład możesz automatycznie oznaczać kontakty według źródła zgłoszenia, zainteresowania konkretnym produktem lub innych kryteriów istotnych dla twojej strategii marketingowej.

Po wysłaniu formularza użytkownik może być:

• pozostawiony w bieżącym bloku — wyświetli się drugi krok formularza z potwierdzeniem,

• zalogowany do profilu na Kwiga — automatyczne logowanie i przejście do profilu,

• przekierowany na stronę — redirekcja na podany adres URL.

Uwaga: nie trzeba ręcznie podawać linku do systemu płatności — jest on konfigurowany automatycznie przez opcję Dostęp do produktu.

Konfiguracja bloków i elementów formularza

Poza ustawieniami logiki, w prawym panelu dostępne są dodatkowe bloki umożliwiające dostosowanie wyglądu formularza do Twoich potrzeb.

Ustawienia marginesu

• kolor tekstu nazwy, podpowiedzi i tekstu wewnętrznego

• kolor tła i obramowania

• kolor po zaznaczeniu (focus)

Ustawienia ogólne

• szerokość i wysokość (w pikselach)

• kolor ładowania i tła

• ustawienia obramowania (border)

• zaokrąglenie rogów

• użycie i konfiguracja cienia

Ustawienia desktop

Ten blok pozwala dostosować wygląd formularza do większych ekranów, aby zapewnić wygodny odbiór i naturalne wkomponowanie w stronę.

Dostępne opcje:

• W jednym wierszu – poziome wyrównanie dla kompaktowych formularzy,

• Siatka (Grid) – użycie układu grid z elastycznym podziałem kolumn. Przykład: 2fr 1fr oznacza, że pierwsza kolumna będzie dwa razy szersza niż druga. Wartości mogą być określane w fr, px lub %.

Wiersze są przenoszone automatycznie, co zapewnia schludny wygląd niezależnie od liczby elementów.

Odstępy wewnętrzne – możesz ustawić odległości między elementami formularza, aby zapewnić czytelność i uniknąć zbyt dużego zagęszczenia treści.

Pozycjonowanie – dodatkowe ustawienia pozwalają wyrównać formularz w wersji mobilnej do lewej, środka lub prawej – zależnie od decyzji projektowej.

Odstępy bloku – ta opcja odpowiada za marginesy wewnętrzne i zewnętrzne całego bloku formularza. Można osobno ustawić wartości górne, dolne, lewe i prawe – co pozwala na lepszą integrację formularza ze stroną lub innymi komponentami.

Ogólne ustawienia widżetu i publikacja

Po utworzeniu i skonfigurowaniu formularza należy przygotować go do publikacji. W prawym górnym rogu kliknij Ustawienia, gdzie znajdziesz ważne opcje końcowe.

Język CTA – służy do lokalizacji elementów tekstowych w formularzu. Gdy wybierzesz opcję Automatycznie, system wykryje język użytkownika na podstawie jego przeglądarki lub geolokalizacji, co zapewnia lepsze UX dla odbiorców z różnych krajów.

Opcja "Włącz tło dla testu" pozwala wizualnie ocenić, jak widżet będzie wyglądać na tle innym niż białe. Uwaga: to tło widoczne jest tylko w edytorze, nie na stronie produkcyjnej.

Użycie w oknie modalnym – jeśli chcesz, aby formularz był wyświetlany w oknie pop-up (np. po kliknięciu przycisku), włącz tę opcję.

Na karcie Publikacja możesz skopiować kod widżetu, aby osadzić go bezpośrednio na swojej stronie.

Wystarczy wkleić kod w miejscu, gdzie formularz ma się pojawić.

Opisaliśmy też osobno, jak dodać widżet do popularnych kreatorów stron, takich jak Weblium, SendPulse czy Wix.

Dzięki elastycznym ustawieniom platformy możesz stworzyć formularz idealnie dopasowany do potrzeb twojego biznesu — od prostego zbierania adresów e-mail po rozbudowane scenariusze wieloetapowe z integracją z CRM i automatycznym tworzeniem transakcji.