Jak zrobić formularz zapisu wyskakujący po kliknięciu na przycisk?

W Internecie możemy znaleźć wiele sposobów na tworzenie formularzy zapisu. Mogą to być darmowe wtyczki do WordPressa lub gotowy kod, który trzeba przystosować pod siebie. Jednak takie rozwiązania nie do końca rozwiązywały mój problem z jakim się spotkałem.

Mianowicie, chciałem posiadać taką metodę, takie narządzie, które z automatu będzie mi tworzyć formularz w krótkim czasie, bez pisania styli CSS, uzyskując  profesjonalny wygląd i skuteczne zapisy.

Darmowe wtyczki posiadają podstawowe funkcje, które pozwolą na zbieranie subskrybentów do newsletteru. Jednak bardzo szybko przekonałem się, że aby przystosować ich wygląd już trzeba znać się na języku CSS, aby przystosować wygląd taki jaki oczekujemy co zajmuje czas oraz potrzebna jest wiedza na ten temat.

Podobnie jest gdy mamy gotowy kod. Najczęściej jest to ogólny szablon z domyślnym wyglądem, a jak chcemy go ulepszyć to wtedy sami musimy dostosować go za pomocą niestandardowych styli CSS.

Rozwiązaniem mojego problemu jest wtyczka Bloom, którą otrzymałem w pakiecie przy zakupie motywy Divi na licencji deweloper.

Bloom to świetna wtyczka do tworzenia różnego rodzaju formularzy zapisu na stronie od grupy Elegant Themes. Z pewnością jeśli posiadasz motyw Divi lub interesowałeś się nim to słyszałeś o niej.

Co możesz zrobić dzięki wtyczce Bloom?

Za pomocą wtyczki dodasz z łatwością różne rodzaje formularze zapisu na swojej stronie internetowej lub blogu. Pozwala tworzyć listę mailingową przy użyciu kilku metod.

• Automatycznie wyskakujące okienko z formularzem zapisu po wejściu na stronę, z możliwością ustawienia po jakim czasie ma się wyświetlić (automatyczne Opt-In Pop-up).
• Automatycznie wysuwany formularz zapisu w prawym dolnym rogu strony. W zależności od preferencji możemy ostawić aby pojawił się po określonym czasie lub gdy czytelnik przejdzie na sam dół strony. (automatyczny Opt-In Fly-Ins).
• Proste i szybkie umieszczanie formularza zapisu w treści wpisu lub artykułu. (formularz Inline Opt-In)
• Automatyczne dodawanie formularza zapisu na końcu blogowego postu (Below Content Opt-In Forms)
• Widżet formularza zapisu, który możesz umieścić w pasu bocznym lub stopce ( Widget Area Opt-In Forms)
• Formularz wymagający wpisania adresu email, aby odblokować dostęp do zawartości na stronie (Require Opt-In To Unlock Content)

Dodatkowo wtyczka pokazuje statystyki danego formularza. Pozwala to na ocenę skuteczności zapisów. Jeśli widzisz, że zapisy są niewielkie to masz informacje aby coś zmienić w tym formularzu.

Jak zrobić formularz, który wyskakuje po kliknięciu w przycisk?

W tym wpisie pokażę Ci jak zrobić formularz pop-up, który pojawia się po kliknięciu w przycisk. Swoją drogą polecam Ci, abyś tworzył takie formularze, ponieważ marketerzy robili testy, który rodzaj formularza najlepiej konwertuje (daje największa liczbę zapisów) i wygrał właśnie formularz pop-up po kliknięciu w przycisk. Dlatego też chce pokazać Ci jak zrobić na własnej stronie lub  tzw. stronie przechwytującej (landing page) taki formularz, który pozwoli Ci na zwiększenie zapisów oraz zbuduje większą listę mailingową.

 

Krok 1. Stwórz stronę i przycisk, który uaktywni formularz pop-up

W celu demonstracji pokażę Ci bardzo prosty przykład. Pierwsze co robisz to tworzysz nową stronę na platformie WordPress, a następnie uruchamiasz Divi Builder i dodajesz standardową sekcje z dwoma modułami na całą szerokość sekcji. Pierwszy moduł to moduł tekst, gdzie wpisujesz nagłówek, który ma zachęcić do wpisania adresu email. Drugim modułem jest moduł Przycisk, gdzie po kliknięciu w niego zostanie wyświetlone okienko z formularzem.

Aby zrobić to:

Tworzysz w builderze taki układ:

Do modułu Tekst wpisujesz nagłówek. Następnie przechodzisz do ustawień moduły „Przycisk”. W ustawieniach ogólnych w polu URL wpisujesz „#1”. Poniżej w polu Tekst przycisku wpisujesz: „Zobacz Wideo”, dajesz wyrównanie do środka. Dalej przechodzisz do zaawansowanych ustawień projektu i zmieniasz tło przycisku na pomarańczowy, a kolor tekstu na biały.

Teraz bardzo ważne. W ustawieniach Niestandardowe CSS i w polu Klasa CSS wpisujesz nazwę klasy: „popup”. Może to być dowolna nazwa, do której odniesiesz się przy konfigurowaniu formularza pop-up.

Zapisujesz i zamykasz okno ustawień modułu przycisk. Ustawiasz szablon strony na: „Blank page” i publikujesz stronę.

 

Krok 2. Tworzenie formularza za pomocą wtyczki Bloom

Teraz tworzysz formularz. Do tego celu wykorzystujesz wtyczkę Bloom, w której tworzysz nowy formularz. Tutaj po wyborze rodzaju formularza „pop-up” integrujesz wtyczkę z Twoim autoresponderem po przez wpisanie nazwy konta oraz API Key. W kolejnym kroku wybierasz szablon wyglądu. Potem decydujesz jaki tekst ma się pojawić na formularzu oraz o kolorystyce poszczególnych elementów.

W końcowych ustawieniach zaznaczasz Trigger on-click i w pole CSS Selector (string) wpisujesz „*.” (gwiazdkę, kropkę) oraz nazwę klasy przycisku, w tym przypadku jest to: „popup”. Czyli w pole wpisujesz: „*.popup„.

Czas na prezentacje działania formularza

Jeśli wszystko udało Ci się ustawić poprawnie. Przejdź do strony, którą wcześniej stworzyłeś, następnie kliknij w przycisk, a zboczysz formularz zapisu. Gotowe 🙂