Jak utworzyć formularz pop-up?

Formularz typu pop-up to zazwyczaj małe okienko z komunikatem, które pojawia się podczas przeglądania Twojej strony internetowej przez odwiedzającego. Są one doskonałym sposobem na promocję Twojego newslettera i powiększanie bazy kontaktów.

Aby utworzyć formularz pop-up:

  1. Przejdź do strony Formularze.

  2. Kliknij zakładkę Pop-up.

  3. Kliknij przycisk Utwórz nowy.

4. Nazwij swój formularz, a następnie upewnij się, że został zaznaczony typ formularza: Pop-up.

5. Kliknij Zapisz i kontynuuj.

6. Wybierz co najmniej jedną grupę odbiorców Twojego formularza pop-up. Kiedy subskrybenci wypełnią Twój formularz pop-up, zostaną dodani do grupy (grup), którą tutaj wybierzesz.

7. Kliknij przycisk Kontynuuj.

8. Wybierz Szablon pop-up lub Stwórz, jeśli chcesz rozpocząć projektowanie od zera. Po wybraniu jednej z opcji, otworzy się kreator pop-up.

9. Edytuj nagłówek oraz tekst formularza. Kliknij na blok, który chcesz edytować i wpisz treść bezpośrednio do tego bloku w formularzu.

10. Zmień grafikę. Zrobisz to, klikając Obraz na prawym pasku bocznym.

11. Aby edytować pole formularza zapisu, najedź na nie kursorem i kliknij ikonę Ustawienia. Kliknij Dodaj pole, aby dodać kolejne pole do formularza.

12. Edytuj stronę potwierdzającą zapis dla formularza typu pop-up, wybierając przycisk Gotowe na górnym pasku nawigacyjnym.

13. Po ukończeniu edycji formularza kliknij przycisk Zakończ edycję, aby wyjść z kreatora formularzy i zastosować wybrane ustawienia do Twojego formularza typu pop-up.

Kreator pop-upów jest podzielony na dwie sekcje za pomocą trzech zakładek znajdujących się na pasku bocznym: zakładki Elementy i Styl po lewej stronie oraz zakładka Ustawienia po prawej stronie.

Zakładka Elementy

W zakładce Elementy można przeciągać i upuszczać dodatkowe bloki treści w wyskakującym formularzu.

Do wyboru jest kilka bloków:

  • Nagłówek - użyj tego bloku, aby dodać tytuł.

  • Tekst - użyj tego bloku, aby dodać więcej tekstu.

  • Obraz - użyj tego bloku, aby dodać obraz lub GIF.

  • Obraz i tekst - użyj tego bloku, aby dodać obraz, GIF/wideo z tekstem.

  • Wideo - użyj tego bloku, aby wstawić wideo.

  • Przycisk - użyj tego bloku, aby dodać przycisk wezwania do działania (CTA).

  • Separator - użyj tego bloku, aby podzielić zawartość formularza.

  • Lista - użyj tego bloku, aby utworzyć wstępnie ustrukturyzowaną listę (opcjonalnie z linkami).

  • Licznik czasu - użyj tego bloku, aby stworzyć pilną potrzebę, dodając licznik czasu.

  • Ikony społecznościowe - użyj tego bloku, aby dodać linki do stron mediów społecznościowych.

Zakładka Styl

Spójny branding pomaga pop-upowi płynnie łączyć się z resztą witryny i materiałami marketingowymi. Zamiast ręcznie dostosowywać każdy element projektu, możesz wprowadzić zmiany tutaj i natychmiast zastosować je w całym popupie.

W sekcji Stylu podstawowy możesz dostosować font, kolor tła, kolory podstawowy i dodatkowe, kolor tekstu oraz kolor obramowania Twojego pop-upu.

💡 Wskazówka

Próbujesz dokładnie dopasować kolory swojej marki? Poszukaj oficjalnych kodów szesnastkowych (HEX) lub użyj narzędzia do pobierania kolorów na istniejących już elementach witryny.

Typografia

W zakładkach Nagłówek i Akapity możesz dostosować:

  • Grupę czcionek – dziedziczy z stylu podstawowego, chyba że wybierzesz inną.

  • Grubość – określa „grubość” tekstu.

  • Wysokość wiersza.

  • Odstępy między literami.

  • Kolor i rozmiar H1.

  • Kolor i rozmiar H2.

Zakładka ustawienia

W karcie Ustawienia możesz edytować:

  • Typ pop-upu

    • Wyróżniony, Wysuwany, Połowa ekranu, Pełen ekran, Pływający.

  • Szerokość

    • Suwak szerokości dostępny tylko dla układów: Wyróżniony, Wysuwany, Połowa ekranu, Pływający.

  • Styl tła

    • Dostosowanie zaokrąglenia rogów.

  • Układ pop-upu

    • Bez paska bocznego – zwykłe wyskakujące okno.

    • W ramce – obramowanie będzie widoczne, jego kolor można edytować lub dodać obraz.

    • Pasek boczny na górze – można dostosować tło paska bocznego, wybierając kolor lub obraz.

    • Pasek boczny z lewej strony – można dostosować tło paska bocznego, wybierając kolor lub obraz.

    • Pasek boczny z prawej strony – można dostosować tło paska bocznego, wybierając kolor lub obraz.

Zakładka Opcje

Przejdź do karty Opcje, klikając ikonę ustawień.

Tutaj możesz zastosować różne ustawienia do formularza. Ustawienia te obejmują:

  • Politykę prywatności - Dodaj oświadczenie o ochronie prywatności do formularza pop-up.

  • Pole zgody - Dodaj pole świadomej zgody użytkownika do formularza pop-up.

  • Pola zgód marketingowych (zgodnych z RODO) - Dodaj do formularza pop-up pola wyboru uprawnień marketingowych zgodne z RODO.

  • Grupy zainteresowania - Daj subskrybentom możliwość wyboru własnej grupy zainteresowań.

  • Ukryte pole segmentacji - Dodaj ukryte pole do segmentacji listy subskrybentów. Możesz wybrać pole i wartość, aby wszyscy subskrybenci tego formularza mieli tę wartość dodaną do tego pola.

  • reCAPTCHA - Po dodaniu tego pola do pop-upu, subskrybenci formularza zobaczą plakietkę reCAPTCHA w lewym dolnym rogu, a weryfikacja odbędzie się płynnie w tle. Pomaga to zapobiegać dołączaniu potencjalnie szkodliwych botów spamowych do listy subskrybentów.

💡 Wskazówka

Możesz dodać teaser do pop-upu, aby przyciągnąć więcej rejestracji! Wypróbuj także pop-up typu Zakręć kołem, aby stworzyć grywalizację dla Twoich subskrybentów 🤩

Te ustawienia to zasady, które zastosujesz do swojego formularza pop-up, które ustalają, kiedy i gdzie ma się pojawiać.

Istnieją cztery czynniki wpływające na to, w jaki sposób będzie działał formularz zapisu. Możesz zdecydować, jakie mają zostać zastosowane ustawienia:

  • Wyzwalacz - Wybierz, kiedy twój formularz pop-up będzie się wyświetlał. Na przykład, pięć sekund po otwarciu strony, kiedy odwiedzający przewinie do 50% strony lub kiedy odwiedzający zamierza opuścić stronę.

  • Częstotliwość - Zdecyduj ile razy na pojedynczego użytkownika, ma zostać wyświetlony pop-up, jeśli nie zapisze się za pierwszym razem, gdy zobaczy pop-up.

  • Zaplanuj - spraw, aby pop-up był dostępny natychmiast lub ustaw datę początku i końca dla swojego formularza pop-up.

  • Widoczność - Wybierz czy chcesz ukryć pop-up na konkretnych urządzeniach, lub ukryć/pokazać pop-up na konkretnych stronach internetowych.

Kiedy wybrane ustawienia są dla Ciebie zadowalające, możesz kliknąć przycisk Zapisz zmiany, aby przejść do następnego etapu: implementacji formularza pop-up.

Aby osadzić formularz pop-up na stronie internetowej, musisz skopiować, następnie wkleić fragment kodu JavaScript na każdej stronie witryny, tuż przed znacznikiem </head>.

Aby zaimplementować fragment kodu JavaScript na swojej stronie internetowej:

  1. Przejdź na stronę Formularze i kliknij Podgląd.

  2. Przewiń na sam dół strony, aż zobaczysz kod JavaScript (lub skopiuj go ze strony ustawień podczas tworzenia pop-upu).

  1. Skopiuj i wklej fragment kodu HTML na swojej stronie tuż przed znacznikiem </head>. ( Wystarczy zrobić to tylko raz, nawet jeśli planujesz zainstalować wiele formularzy na swojej stronie).

Twoja strona internetowa jest zbudowana z fragmentów kodu HTML zwanych elementami. Pierwszym elementem jest <head>, który zaczyna się od znacznika otwierającego <head> i kończy znacznikiem zamykającym </head>. Jeśli nie jesteś pewien jak edytować HTML swojej strony, zalecamy skontaktowanie się z zespołem wsparcia technicznego platformy, na której stworzyłeś swoją stronę.

Uwaga: Korzystasz z WordPressa lub Shopify? Zainstaluj wtyczkę MailerLite dla WordPress lub wtyczkę MailerLite dla Shopify, aby móc osadzić formularze na stronie internetowej bez użycia jakiegokolwiek kodu.

Kiedy stworzysz formularz typu pop-up, będzie on domyślnie pokazywany na każdej stronie Twojej witryny. Jednak w ustawieniach widoczności, możesz zdecydować, czy chcesz, aby pokazywał się na każdej ze stron, czy tylko na niektórych. Możesz też ukryć go na określonych stronach witryny.

Aby ukryć swój formularz pop-up na określonych stronach:

  1. Wybierz opcję ukryj na określonych stronach.

  2. Skopiuj i wklej adresy URL stron, na których nie chcesz, aby pojawiało się wyskakujące okienko formularza. Wklej każdy adres URL w osobnym wierszu.

  3. Zaznacz checkbox z napisem Zastosuj dokładnie do tych wpisów, aby Twój pop-up został ukryty tylko na stronach, które dokładnie pasują do wprowadzonych adresów URL.

Aby wyświetlić formularz tylko na określonych stronach:

  1. Wybierz opcję Pokaż tylko na określonych stronach.

  2. Skopiuj i wklej adresy URL stron, na których ma się pojawiać pop-up. Wklej każdy adres URL w osobnym wierszu.

  3. Zaznacz checkbox z napisem Zastosuj ścisłą równość, aby pop-up pokazywał się tylko na stronach, które dokładnie odpowiadają wpisanym URL.

Uwaga: Jeśli nie zostanie zaznaczony checkbox znajdujący się pod oknem z adresami URL stron, to wszystkie strony w adresach których znajduje się wymieniony zapis zostaną uwzględnione w ustawieniach widoczności.

Na przykład, jeśli decydujesz się na ukrycie formularza zapisu na stronie www.mailerlite.com i nie zaznaczysz opcji Zastosuj ścisłą równość, to pop-up będzie ukryty na wszystkich stronach internetowych zawierających www.mailerlite.com, w tym www.mailerlite.com/blog i www.mailerlite.com/about, itd.

Chcesz zamienić swój tekst, obrazy i przyciski w klikalne wyskakujące okienka?

Aby użyć funkcji wyskakującego okienka po kliknięciu:

  1. Przejdź do zakładki Formularze.

  2. Możesz użyć zakładki Pop-up lub Wbudowane formularze.

  3. Znajdź utworzony formularz i kliknij Podsumowanie.

  4. Przewiń w dół do sekcji Fragment kodu JavaScript. Tutaj znajdziesz potrzebne skrypty, które należy wstawić na każdej stronie witryny, do której chcesz dodać pop-up. Zwykle CMS ma specjalne miejsce do zaimplementowania tego kodu i zaprezentowania go na każdej stronie.

  5. Kliknij Pokaż po kliknięciu zdarzenia. Tutaj będziesz mieć dostęp do wszystkich kodów JavaScript zdarzeń kliknięcia. Jeśli chcesz, aby pop-up wyświetlał się po kliknięciu, musisz dodać kod Javascript.

Aby utworzyć przycisk dla pop-upu, skopiuj kod z drugiej szarej tabeli. Spowoduje to utworzenie przycisku w poście. Kod pod nim służy do wyświetlania pop-upu po kliknięciu łącza. Możesz użyć tego kodu, aby wyświetlić formularz, gdy ktoś kliknie tekst lub obraz.

W przypadku przycisku, skopiuj i wklej kod i zastąp zdanie Kliknij tutaj, aby pokazać formularz, aby wyświetlić pop-up z własnym przyciskiem CTA. Styl przycisku jest taki sam, jak ustawiony na blogu. Jeśli chcesz zmienić przycisk, musisz zmienić ustawienia projektu na Twoim blogu.

W przypadku linku kliknij pop-up, skopiuj i wklej kod i zastąp zdanie Kliknij tutaj, aby pokazać formularz, aby wyświetlić pop-up z własnym tekstem lub kodem obrazu.

Kliknij Opublikuj i zobacz swój nowy pop-up.

Uwaga: Jeśli korzystasz z WordPressa, czasami po przełączeniu się między kartami edytora wizualnego i tekstowego, wyskakujące informacje w edytorze źródłowym zostaną utracone. Wystarczy odświeżyć stronę, a informacje powrócą. Unikaj naciskania przycisku Aktualizuj, ponieważ będziesz musiał ponownie dodać informacje.

Ostatnio edytowane: 19 gru 2023