Jak skonfigurować wyświetlanie formularza rejestracyjnego po kliknięciu przycisku

Czego się dowiesz?

Dowiedz się, jak wywołać wyświetlenie formularza rejestracyjnego na stronie internetowej, gdy odwiedzający kliknie określony przycisk. Ten przewodnik przeprowadzi Cię przez dostosowanie formularza tak, aby wyświetlał się po niestandardowym wyzwalaczu, tworzenie i dodawanie nowego przycisku do witryny oraz wklejenie krótkiego wycinka kodu źródłowego do kodu HTML witryny, aby kliknięcie przycisku wywoływało formularz rejestracyjny.

Jeśli jesteś deweloperem i chcesz niestandardowo zakodować wyzwalacz dla swojego formularza rejestracyjnego, przejdź do naszego zasobu dla deweloperów, w którym opisujemy, jak niestandardowo wyzwolić formularz typu popup lub rozwijane poziomo.

Zanim zaczniesz, upewnij się, że onsite JavaScript Klaviyo (Klaviyo.js) jest zainstalowany na każdej stronie, na której dodajesz przycisk. Sprawdź, czy formularze rejestracyjne są na Twojej stronie włączone.

Utwórz nowy przycisk

This content requires Functional cookies to be enabled.

Update Cookie Settings

Zanim dodasz nowy przycisk na swojej stronie internetowej, skonfiguruj formularz rejestracyjny w Klaviyo:

1. Utwórz nowy formularz rejestracyjny, aby pojawiał się po kliknięciu przycisku, lub wybierz formularz, który został już utworzony.
2. W edytorze formularza wybierz Edytuj style. Ustaw Typ formularza na wyskakujące okienko, rozwijane poziomo, pełna strona lub baner. Nie można wywołać osadzonych formularzy po kliknięciu przycisku.
3. Wybierz Targetowanie i sposób działania > Wyświetlanie. W sekcji Timing ustaw Show form na Tylko przy niestandardowym wyzwalaczu.

Wyzwalacze niestandardowe omijają reguły kierowania, urządzeń i częstotliwości formularza. Jeśli chcesz ograniczyć, kto może otworzyć formularz, zastosuj te warunki do przycisku na swojej stronie lub w kodzie niestandardowym.

1. Gdy uznasz, że projekt i treść formularza są gotowe, kliknij Opublikuj lub zaplanuj, wybierz opcję Opublikuj teraz, a następnie kliknij Opublikuj teraz, aby opublikować formularz.
2. Skopiuj poniższy kod:

<button class="klaviyo_form_trigger">Click here</button>

1. Wklej kod do HTML dowolnej strony w swojej witrynie, na której ma się pojawić przycisk. Ten przycisk będzie używać domyślnych stylów z szablonu Twojej witryny. Jeśli chcesz dodatkowo dostosować wygląd przycisku, skonsultuj się z deweloperem lub partnerem Klaviyo.

Jeśli dodajesz kilka przycisków do tej samej strony, nadaj każdemu przyciskowi unikalną nazwę klasy (np. klaviyo_form_trigger1, klaviyo_form_trigger2), nawet jeśli otwierają ten sam formularz rejestracyjny. Poniższy fragment kodu JavaScript jest dołączany tylko do pierwszego przycisku z pasującą klasą. Dodaj pasujący fragment kodu dla każdego przycisku.

Ustaw przycisk tak, aby wyzwalał formularz rejestracyjny

This content requires Functional cookies to be enabled.

Update Cookie Settings

Po dodaniu nowego przycisku do witryny w kolejnym kroku musisz skonfigurować wyzwalacz, aby formularz rejestracyjny pojawiał się po kliknięciu. Skonfiguruj wyzwalacz, dodając do witryny niewielki, niestandardowy fragment kodu JavaScript:

1. Skopiuj poniższy wycinek kodu źródłowego:

<script type="text/javascript">
	document.querySelector('.klaviyo_form_trigger').addEventListener('click', function (){
		window._klOnsite = window._klOnsite || []; 
		window._klOnsite.push(['openForm', 'FORM_ID']);
	});
</script>

1. Wklej wycinek kodu źródłowego bezpośrednio pod kodem przycisku, który został dodany do witryny w ostatniej sekcji.
2. W wycinku kodu, który właśnie wklejono, zastąp FORM_ID identyfikatorem swojego formularza rejestracyjnego.
   • Aby znaleźć identyfikator formularza, wróć do Klaviyo i otwórz edytor formularzy dla swojego formularza rejestracyjnego. Skopiuj identyfikator bezpośrednio po /forms/ w adresie URL. Identyfikator może zawierać litery i cyfry; zachowaj dokładnie taką wielkość liter, jak pokazano, gdy zastępujesz FORM_ID w swoim fragmencie kodu.
     

3. Ukończony kod powinien zawierać nowy kod przycisku oraz wyzwalacz formularza rejestracyjnego z unikatowym identyfikatorem formularza. Pamiętaj, aby wkleić to na każdej stronie, na której dodano kod przycisku.
   • Oto przykład ukończonego kodu w edytorze stron Shopify:
     

1. Następnie zapisz zmiany.

Przetestuj przycisk

Gdy zapiszesz wszystkie zmiany w kodzie swojej witryny, odwiedź witrynę i kliknij nowy przycisk. Gdy to zrobisz, pojawi się formularz rejestracyjny.

Masz problemy? Przejdź do Forum Społeczności Klaviyo, aby uzyskać wskazówki od innych użytkowników Klaviyo.

Dodatkowe źródła