Jak wyświetlić formularz rejestracyjny po kliknięciu przycisku?

Czego się dowiesz

Dowiedz się, jak uruchomić formularz rejestracyjny, który pojawi się w Twojej witrynie, gdy użytkownik kliknie określony przycisk. Ten przewodnik przeprowadzi Cię przez proces dostosowywania formularza do wyświetlania na niestandardowym wyzwalaczu, tworzenia i dodawania nowego przycisku do witryny oraz wklejania krótkiego wycinka kodu źródłowego do kodu HTML witryny, tak aby kliknięcie przycisku uruchamiało formularz rejestracyjny. 

Jeśli jesteś programistą i chcesz niestandardowo zakodować wyzwalacz dla swojego formularza rejestracyjnego, przejdź do naszego zasobu dla programistów na temat niestandardowego wyzwalania wyskakującego okienka lub menu rozwijanego poziomo formularza. 

Utwórz nowy przycisk 

Najpierw utwórz nowy przycisk na swojej stronie internetowej, który spowoduje wyświetlenie formularza rejestracyjnego po jego kliknięciu. Przed dodaniem przycisku do witryny musisz upewnić się, że formularz rejestracyjny jest poprawnie skonfigurowany w witrynie Klaviyo. Aby to zrobić:

1. Utwórz nowy formularz rejestracyjny, który pojawi się po kliknięciu przycisku lub wybierz już utworzony formularz.
2. W zakładce Style, Twój typ formularza powinien być ustawiony na Popup, menu rozwijane poziomo lub Full Page. Osadzone formularze nie mogą być uruchamiane po kliknięciu przycisku.
3. W zakładce Targeting & Behaviors wybierz opcję Only show on custom trigger w sekcji Timing.
   
4. Gdy będziesz zadowolony z wyglądu i zawartości formularza, kliknij przycisk Opublikuj. 
5. Następnie otwórz edytor formularza i wybierz następujące ustawienia
6. Skopiuj poniższy kod:

   <button class="klaviyo_form_trigger"> Kliknij tutaj</button>

7. Wklej kod do kodu HTML dowolnej strony w witrynie, na której chcesz wyświetlić przycisk. Ten przycisk użyje domyślnych stylów z szablonu Twojej witryny. Jeśli chcesz bardziej dostosować wygląd przycisku, skonsultuj się ze swoim programistą lub partneremKlaviyo .

Pamiętaj, że jeśli dodasz wiele przycisków do swojej witryny, z których każdy uruchamia inny formularz rejestracyjny, musisz użyć unikalnej nazwy, aby sklasyfikować każdy przycisk (np. klaviyo_form_trigger1, klaviyo_form_trigger2). 

Ustaw przycisk uruchamiający Twój formularz rejestracyjny

Teraz, gdy dodałeś nowy przycisk do swojej witryny, musisz skonfigurować wyzwalacz, aby Twój formularz rejestracyjny pojawiał się po jego kliknięciu. Skonfiguruj wyzwalacz, dodając mały, niestandardowy fragment JavaScript do swojej witryny:

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

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

2. Wklej wycinek kodu źródłowego bezpośrednio pod kodem przycisku, który dodałeś do swojej witryny w ostatniej sekcji.
3. We wklejonym fragmencie zastąp FORM_ID identyfikatorem swojego formularza rejestracyjnego.
   • Aby znaleźć identyfikator formularza, przejdź powrót do Klaviyo i otwórz edytor formularza rejestracyjnego. Skopiuj 6-cyfrowy kod na końcu adresu URL, aby dodać go do wycinka kodu źródłowego; jest to identyfikator formularza.
     
4. Uzupełniony kod powinien zawierać nowy kod przycisku i wyzwalacz rejestracyjny formularza z unikalnym identyfikatorem formularza. Upewnij się, że wkleiłeś go na każdej stronie, na której dodałeś kod przycisku.
   • Oto przykład ukończonego kodu w edytorze stron Shopify: 
     
     

     Jeśli dostosowałeś klasę przycisku w ostatnim kroku (tj. zastąpiłeś klaviyo_form_trigger innym tekstem lub dodałeś liczbę), upewnij się, że zaktualizowałeś ten kod z tekstem, którego użyłeś. 

5. Następnie zapisz zmiany.

Przetestuj swój przycisk 

Po zapisaniu wszystkich zmian w kodzie witryny odwiedź ją i kliknij nowy przycisk. Gdy to zrobisz, pojawi się formularz rejestracyjny. 

Masz kłopoty? Klaviyo Wejdź na forum społecznościowe, aby uzyskać wskazówki od innych Klaviyo użytkowników. 

Dodatkowe źródła

• Pierwsze kroki z formularzami rejestracyjnymi
• Jak uruchomić wyskakujące okienko lub menu rozwijane poziomo formularza?
• Jak wybrać ustawienia kierowania formularzy i zachowania
• szkolenie: Klaviyo certyfikacja produktów