Jak sprawić, by po kliknięciu przycisku pojawił się formularz zgody Bloom?

W dzisiejszych czasach trudno wyobrazić sobie internet bez formularzy opt-in. Używamy ich na naszej stronie internetowej w szczególności z dwóch głównych powodów; pozyskiwanie subskrybentów lub generowanie leadów.

Znalezienie odpowiedniego sposobu na skontaktowanie się z odbiorcami za pomocą formularzy zgody może być prawdziwym wyzwaniem. Niektórzy ludzie chcą grać bezpiecznie i nie chcą, aby ich odwiedzający poczuli się, jakby „wdzierali się” do swojej bańki internetowej za pomocą niechcianych formularzy do wyrażania zgody. To zwykle moment, w którym ludzie wybierają formularz zgody, który pojawia się po kliknięciu w konkretne miejsce na stronie lub jak to nazywamy; „Spust po kliknięciu”.

W dzisiejszym samouczku pokażemy Ci, jak dokładnie możesz wykorzystać te wyzwalacze kliknięć w najważniejszych częściach swojej witryny. Po włączeniu opcji kliknięcia wyzwalacza nie zapomnij zmierzyć wyników, które przynosi, aby sprawdzić, czy pomaga ona robić postępy.

Kiedy używać formularza zgody po kliknięciu?

Zasadniczo możesz sprawić, by wszystko na swojej stronie wywołało formularz zgody. Ale używanie go w niewłaściwych miejscach może szybko obrócić się przeciwko tobie. Ludzie są przyzwyczajeni do losowego klikania na stronie przez cały czas; na przykład kiedy coś czytają. Lub nawet kiedy się rozglądają, często klikają gdzieś w witrynie bez celu.

Teraz wyobraź sobie, że jesteś gościem; z każdym losowym kliknięciem możesz napotkać nieoczekiwany formularz zgody ze względu na działanie podjęte bez celu. To bez wątpienia przyniesie zły efekt, ponieważ we właściwym momencie poczujesz, że nie masz żadnej kontroli podczas odwiedzania tej witryny.

Umieszczanie formularza zgody na kliknięcie wyzwalacza kliknięcia w miejscach, w których ludzie dobrowolnie klikają lub nie klikają (takich jak przyciski lub ogólnie wezwania do działania), to jednak inna historia. Jesteśmy zaznajomieni z klikaniem CTA (wezwania do działania), więc nas to nie przeraża. Celowo decydujemy się zobaczyć, jaki jest następny krok. Jeśli nie jesteśmy ciekawi, co kryje się za CTA, po prostu nie klikniemy. Ale jeśli chcemy, możemy. Ten „wybór” użytkowników sprawia, że ​​czują się swobodniej, gdy w końcu pojawia się formularz zgody i zwiększa szanse, że faktycznie zarejestrują się w celu otrzymywania biuletynu.

Jak sprawić, by po kliknięciu przycisku pojawił się formularz zgody Bloom?

Subskrybuj nasz kanał YouTube

Utwórz formularz zgody

Zachęcanie ludzi do klikania Twojego CTA jest formą sztuki. Zachęcanie ludzi do zasubskrybowania lub stania się potencjalnym klientem za pomocą formularza zgody po kliknięciu Twojego CTA jest uznaniem dla sztuki. Musisz poeksperymentować i znaleźć właściwy sposób na dotarcie do grupy docelowej, aby obie strony były w końcu zadowolone.

Pokażemy Ci, jak utworzyć wyzwalacz kliknięcia dla dwóch różnych przycisków w Twojej witrynie, w których możesz skorzystać z tego rodzaju formularza zgody; moduł przycisku i przycisk nagłówka o pełnej szerokości. Sposób pracy jest taki sam, ale zobaczenie go w różnych scenariuszach może pomóc w zrozumieniu logiki. Następnie możesz go używać również do innych modułów.

Teraz, zanim pokażemy, jak połączyć formularze zgody z wezwaniem do działania, omówimy ustawienia formularza zgody. W tym poście nie przedstawimy Ci żadnych konkretnych projektów, a jedynie logikę. Istnieje kilka ustawień, które są wymagane, aby upewnić się, że wyzwalacz kliknięcia działa.

Wybierz rodzaj formularza zgody

Podczas dodawania nowego formularza zgody pierwszym wyborem, z jakim będziesz musiał się zmierzyć, jest rodzaj formularza zgody, którego chcesz użyć. Aby utworzyć wyzwalacz po kliknięciu, możesz użyć dwóch typów: wyskakującego okienka i wlatującego. Ten, który najprawdopodobniej wybierzesz, to wyskakujące okienko. Ale jeśli chcesz być nieco bardziej subtelny, możesz również użyć muchy.

Konfiguracja karty

Zacznij od nazwania formularza zgody na karcie Konfiguracja w tworzonym formularzu zgody. Następnie połącz formularz z dostawcą poczty e-mail. Bez dostawcy poczty e-mail, konta i listy e-mailowej formularz będzie nieaktywny.

Karta projektu

Na karcie Projekt możesz stylizować formularz, którego będziesz używać. W tym poście nie zamierzamy tego robić. Wybierzemy standardowy formularz zgody bez modyfikacji tylko po to, by sprawdzić, czy działa. Później możesz zawsze wrócić do utworzonego formularza zgody, aby wprowadzić zmiany.

Karta Ustawienia wyświetlania

To jest karta, na której połączymy formularz zgody z jednym z przycisków. Aby upewnić się, że wyniki działają, musisz upewnić się, że formularz zgody może być wyświetlany na stronie, na której chcesz, aby działał. Jeśli zamierzasz używać tego samego formularza w całej witrynie, możesz łatwo włączyć formularz dla wszystkiego, jak pokazano na poniższym obrazku.

Ponadto chcemy korzystać z formularza zgody tylko w przypadku wyzwalaczy po kliknięciu. Dlatego zamierzamy wyłączyć wszystkie inne opcje i włączyć tylko opcję „Wyzwalanie po kliknięciu”. Zobaczysz, że pole selektora CSS pojawi się natychmiast. W dalszej części tego posta użyjemy tego pola, aby połączyć nasze przyciski z formularzem zgody, który tworzymy. Pozostaw tę stronę otwartą na swojej karcie, aby móc od razu do niej przejść później.

Zacznijmy

Chociaż logika stojąca za dodaniem formularza zgody na kliknięcie wyzwalacza kliknięcia w różnych modułach jest taka sama, wyjaśnimy to na dwóch przykładach; Moduł przycisku i przycisk nagłówka o pełnej szerokości. Bez zrozumienia logiki możesz po prostu wykonać kroki opisane w tym poście, aby tak się stało.

Jeśli jednak chcesz, aby wyzwalacz kliknięcia działał w innych miejscach niż wyjaśniono poniżej, będziesz musiał wprowadzić niewielką modyfikację. Jedyną rzeczą, która się zmieni, jest klasa, której używamy, ponieważ ta zawsze się różni. Jeśli chcesz, aby ten wyzwalacz kliknięcia działał w dowolnej innej części witryny, po prostu wykonaj te same czynności, które pokażemy poniżej, i zmień klasę CSS w zależności od tego, czego używasz.

Podłącz moduł przycisku do wyskakującego formularza zgody

Pierwszym przykładem, który przeprowadzimy, jest moduł przycisku. Zaletą tworzenia wyzwalacza kliknięcia dla modułu przycisku jest to, że możliwości są nieograniczone. Możesz utworzyć dowolny rodzaj sekcji lub wiersza, który zawiera moduł przycisku i uzyskać tak kreatywność, jak tylko chcesz.

Bez dalszych opłat zacznijmy tworzyć wyzwalacz kliknięcia dla przycisku. Mamy na to dwa sposoby; za pomocą klasy CSS lub tworząc identyfikator CSS przypisany do modułu.

Używając klasy CSS

Otwórz stronę lub utwórz stronę, na której ma działać reguła kliknięcia. Następnie dodaj moduł przycisku lub otwórz ustawienia modułu przycisku przycisku, na którym chcesz, aby działał.

Przejdź do zakładki Zaawansowane i przewiń w dół. Kliknij pole Main Element i obserwuj, jak pojawia się klasa CSS przypisana do przycisku. Skopiuj klasę CSS, będziemy jej potrzebować od razu.

Następnie przejdź do karty Ustawienia wyświetlania w tworzonym formularzu zgody. W poprzedniej części pokazaliśmy już, gdzie wydarzy się magia. Włączyliśmy „Trigger On Click” i wyłączyliśmy wszystkie inne wymienione możliwości. Tuż pod „Trick On Click” musisz wkleić następujący wiersz:

*.et_pb_button_0.et_pb_button.et_pb_module

Jak widać, jest to po prostu symbol „*”, po którym następuje klasa, którą skopiowałeś tuż przed tym krokiem.

Korzystając z tej metody, musisz pamiętać o jednej rzeczy; Klasa CSS przycisku różni się dla każdego przycisku na tej samej stronie, ale gdy tylko dodasz przycisk do innej strony, od razu zacznie się od „0”. Oznacza to, że każdy pierwszy moduł przycisku na każdej stronie wywoła formularz zgody, jeśli formularz zgody jest dostępny dla wszystkich stron i postów.

Jeśli chcesz tego uniknąć, możesz użyć wyzwalacza kliknięcia za pomocą identyfikatora CSS. Ale w przypadkach, gdy przypisujesz konkretny identyfikator CSS do całego modułu, najłatwiej to zrobić za pomocą klasy CSS.

Możesz określić, na których stronach określony formularz zgody może być wyświetlany w Ustawieniach wyświetlania formularza zgody. Dzięki temu będziesz mieć kontrolę i dokładnie wiedzieć, na których stronach formularz zgody pojawi się po kliknięciu przycisku, który jest do niego przypisany.

Używając identyfikatora CSS

Drugą metodą jest użycie identyfikatora CSS. Otwórz moduł przycisku, przejdź do zakładki Zaawansowane i nadaj mu identyfikator CSS. W tym przypadku użyjemy „wyskakującego okienka”.

Kontynuuj, przechodząc do zakładki Treść modułu przycisku i wpisując symbol „#”, a następnie cokolwiek chcesz. W ten sposób upewnisz się, że odwiedzający pozostanie w tym samym miejscu na stronie, gdy kliknie przycisk.

Idąc dalej, wróć do ustawień formularza zgody i dodaj „a#popup” w polu Trigger On Click. Zawsze należy pisać „a#”, a następnie identyfikator CSS przypisany do modułu przycisku.

a#popup

Połącz przyciski nagłówka o pełnej szerokości z formularzem zgody

Innym przykładem, w którym pokażemy, jak wykonać formularz zgody na kliknięcie, jest przycisk nagłówka o pełnej szerokości. Jedyną możliwością, jaką mamy tutaj, jest użycie klasy CSS przycisku. W szczególności nie możemy przypisać identyfikatora CSS za pomocą kreatora Divi do przycisku.

Używając klasy CSS

Utwórz nagłówek o pełnej szerokości lub otwórz nagłówek o pełnej szerokości, do którego chcesz dodać formularz zgody na kliknięcie wyzwalacza. Przejdź do zakładki Zaawansowane nagłówka Fullwidth i przewiń w dół, aż natkniesz się na „Przycisk pierwszy”. Kliknij pole i skopiuj klasę CSS przypisaną do przycisku.

Następnie przejdź do zakładki Treść i wpisz symbol „#”, a następnie cokolwiek innego w polu adresu URL przycisku #1.

Na koniec przejdź do zakładki Ustawienia wyświetlania swojej zgody i wpisz symbol „*”, a następnie skopiowaną klasę przypisaną do przycisku.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Końcowe przemyślenia

Ten samouczek powinien pomóc Ci w rozpoczęciu pracy z wyzwalaczami po kliknięciu i formularzem zgody Bloom. Może nawet skłonić Cię do ponownego rozważenia sposobu, w jaki obecnie starasz się pozyskać subskrybentów lub potencjalnych klientów. Jeśli masz jakieś pytania lub sugestie; możesz zostawić komentarz w sekcji komentarzy poniżej. A kiedy tam jesteś; powiedz nam, w jakich przypadkach możesz użyć formularza zgody na kliknięcie.

Pamiętaj, aby zapisać się do naszego biuletynu e-mail i kanału YouTube, aby nigdy nie przegapić ważnego ogłoszenia, przydatnej wskazówki lub gratisów Divi!

Polecane zdjęcie autorstwa BarsRsind / shutterstock.com