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.

Utwórz nowy przycisk

This content requires Functional cookies to be enabled.

Update Cookie Settings

Najpierw utwórz na swojej stronie nowy przycisk, który po kliknięciu spowoduje wyświetlenie formularza rejestracyjnego. Zanim dodasz przycisk do swojej witryny, upewnij się, że formularz rejestracyjny jest poprawnie skonfigurowany w Klaviyo. Aby to zrobić:

1. Utwórz nowy formularz rejestracyjny, aby pojawiał się po kliknięciu przycisku, lub wybierz formularz, który został już utworzony.
2. Na karcie Style w polu Typ formularza należy ustawić jedną z opcji: Popup, rozwijane poziomo lub Pełna strona. Formularze osadzone nie mogą być wyzwalane po kliknięciu przycisku.
3. Na karcie Targeting & Behaviors wybierz Only show on custom trigger w sekcji Timing.
   

4. Gdy projekt i treść formularza będą gotowe, kliknij Opublikuj.
5. Następnie otwórz edytor formularza i wybierz następujące ustawienia
6. 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.

Pamiętaj, że jeśli dodasz do witryny wiele przycisków, z których każdy wyzwala inne formularze rejestracyjne, musisz użyć unikatowej nazwy do sklasyfikowania każdego przycisku (np. klaviyo_form_trigger1, klaviyo_form_trigger2).

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 formularza dla swojego formularza rejestracyjnego. Skopiuj 6-cyfrowy kod na końcu adresu URL, aby dodać go do wycinka kodu źródłowego; jest to identyfikator formularza.
     

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.