Jak dodać wyskakujący formularz kontaktowy w WordPress

Czy kiedykolwiek obserwowałeś, jak odwiedzający przeglądają Twoją witrynę, tylko po to, by odejść bez kontaktu? To frustrujące, zwłaszcza gdy wiesz, że są zainteresowani, ale nie możesz się z nimi skontaktować.

Proste, dobrze umieszczone okienko pop-up może zrobić ogromną różnicę. 💡

Umieszczony w przemyślany sposób, umieszcza formularz kontaktowy dokładnie tam, gdzie go potrzebują odwiedzający. Może to prowadzić do większej liczby zapytań, opinii i konwersji.

W WPBeginner jesteśmy wielkimi fanami WPForms, ponieważ jest przyjazny dla początkujących, potężny i idealny do tworzenia wszelkiego rodzaju formularzy. Co więcej, możesz połączyć go z OptinMonster, aby stworzyć wyskakujące okienko formularza kontaktowego, które wydaje się pomocne, a nie nachalne.

W tym przewodniku pokażemy Ci, jak dodać wyskakujące okienko formularza kontaktowego w WordPress. Takie, które zamienia odwiedzających w potencjalnych klientów, nie irytując ich.

Dlaczego warto używać wyskakującego okienka formularza kontaktowego?

Wyskakujące okienko z formularzem kontaktowym ułatwia odwiedzającym kontakt z Tobą, nie przerywając przeglądania ani wyszukiwania Twojej strony kontaktowej.

Ma to znaczenie, ponieważ każda witryna WordPress potrzebuje prostego sposobu, aby użytkownicy mogli wysyłać pytania, opinie lub prośby o wsparcie. Ale kiedy Twój formularz kontaktowy znajduje się tylko na jednej stronie, wielu odwiedzających może go nigdy nie znaleźć. A to często prowadzi do utraty potencjalnych klientów.

Wyskakujące okienko z formularzem kontaktowym rozwiązuje ten problem, pozwalając odwiedzającym otworzyć formularz jednym kliknięciem, z dowolnej strony w Twojej witrynie. Mogą skontaktować się od razu, nie opuszczając strony, którą aktualnie przeglądają.

Pomaga również utrzymać ludzi na Twojej stronie internetowej, zamiast wysyłać ich gdzie indziej. A jako bonus, możesz używać tych wyskakujących okienek do zbierania adresów e-mail i powiększania listy e-mailowej.

W tym przewodniku pokażemy Ci, jak utworzyć formularz kontaktowy i dodać go do wyskakującego okienka w WordPress.

Podzielimy się również naszymi wskazówkami eksperckimi dotyczącymi tworzenia wyskakującego okienka, które przyciąga uwagę, nie będąc nachalnym. Takie podejście zapewnia, że Twoja strona WordPress pozostaje przyjazna dla użytkownika, jednocześnie maksymalizując możliwości interakcji.

A oto szybki przegląd wszystkich kroków, które wykonasz:

Gotowi? Zacznijmy.

Krok 1: Utwórz formularz kontaktowy w WordPress

Najpierw musisz wybrać wtyczkę formularza kontaktowego WordPress.

Istnieje wiele darmowych i płatnych opcji, ale zalecamy korzystanie z WPForms, ponieważ jest to najlepszy kreator formularzy WordPress na rynku. Jest również najbardziej przyjazny dla początkujących, dzięki narzędziom AI, kreatorowi typu „przeciągnij i upuść” oraz gotowym szablonom formularzy.

W WPBeginner sami używamy go na naszej stronie internetowej do wyświetlania formularzy kontaktowych, corocznych ankiet użytkowników i formularzy migracji witryn.

Szczegółowe informacje na temat naszego doświadczenia z wtyczką znajdziesz w naszej kompletnej recenzji WPForms.

Aby rozpocząć, przejdź do strony internetowej WPForms i kliknij przycisk „Get WPForms Now”. Następnie po prostu postępuj zgodnie z instrukcjami, aby utworzyć konto i dokończyć zakup.

Po zakończeniu zakupu znajdziesz się na pulpicie konta WPForms, gdzie możesz znaleźć klucz licencyjny wtyczki.

Stąd przejdź do WPForms » Add New z panelu administracyjnego WordPress.

Na następnym ekranie użyj paska wyszukiwania, aby szybko znaleźć wtyczkę WPForms.

Gdy pojawi się w wynikach wyszukiwania, kliknij „Install Now”, a następnie „Activate”.

Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Jeśli kupisz WPForms Pro, będziesz musiał aktywować swój klucz licencyjny. Przejdź do WPForms » Ustawienia, wprowadź swój klucz w odpowiednim polu i kliknij „Zweryfikuj klucz”.

Stąd jesteś gotowy do utworzenia formularza kontaktowego.

Przejdź do WPForms » Dodaj nowy z panelu administratora WordPress.

Na następnym ekranie możesz wprowadzić nazwę formularza.

Następnie wybierzesz sposób budowania formularza – za pomocą WPForms AI, gotowego szablonu lub pustego obszaru.

Jeśli chcesz skorzystać z kreatora formularzy AI, po prostu wprowadź polecenie. W ciągu kilku sekund Twój formularz zostanie wygenerowany.

Niemniej jednak, w tym samouczku użyjemy szablonu „Prosty formularz kontaktowy”, ponieważ zawiera on wszystko, czego potrzebujemy.

Następnie możesz dodawać pola do formularza za pomocą kreatora metodą przeciągnij i upuść.

Po prostu przeciągnij pola, które chcesz dodać do formularza, z opcji dostępnych w menu po lewej stronie. Możesz również zmienić kolejność pól w formularzu.

WPForms pozwala również na dostosowanie każdego pola w formularzu kontaktowym.

Na przykład, jeśli klikniesz pole „Nazwa”, zobaczysz opcje zmiany jego etykiety i formatu. Możesz nawet dodać opis lub oznaczyć dowolne pole jako wymagane.

Instrukcje krok po kroku znajdziesz w naszym przewodniku jak utworzyć formularz kontaktowy.

Po zakończeniu kliknij opcję „Ustawienia”, aby skonfigurować powiadomienia i potwierdzenia formularza.

W sekcji „Ogólne” możesz zmienić nazwę formularza, dodać jego opis, zmienić tekst przycisku wysyłania, włączyć ochronę antyspamową i nie tylko.

Następnie możesz przejść do opcji ustawień „Powiadomienia”. Domyślnie powiadomienia są wysyłane na adres e-mail administratora skonfigurowany na Twojej stronie WordPress.

Możesz jednak wysłać powiadomienie z formularza kontaktowego na dowolny adres e-mail. Jeśli chcesz otrzymywać powiadomienia o wysłaniu formularza na wiele adresów e-mail, oddziel każdy adres przecinkiem.

W przypadku tematu wiadomości e-mail, WPForms używa nazwy formularza, którą podałeś wcześniej. Możesz jednak edytować tekst linii tematu według własnych potrzeb.

Teraz przejdźmy do opcji „Potwierdzenia”.

WPForms używa „Wiadomości” jako domyślnego typu potwierdzenia. Wyświetla ona komunikat z podziękowaniem natychmiast po przesłaniu formularza. Oprócz tego zobaczysz opcje „Pokaż stronę” i „Przejdź do adresu URL (Przekierowanie)”.

W przypadku wyskakujących okienek zalecamy jednak zachowanie tego ustawienia „Wiadomość”. Przekierowanie użytkowników na inną stronę może czasami wydawać się nagłe, gdy wchodzą w interakcję z wyskakującym okienkiem.

Po utworzeniu formularza kontaktowego upewnij się, że kliknąłeś przycisk „Zapisz” w prawym górnym rogu, aby zapisać zmiany.

Następnie możesz kliknąć opcję „Osadź” w górnym rogu obok przycisku „Zapisz”, aby uzyskać krótki kod formularza. Będziesz potrzebować tych informacji, aby wyświetlić formularz w wyskakującym okienku.

Gdy pojawi się nowe wyskakujące okienko, możesz wybrać opcję „Użyj krótkiego kodu”.

WPForms wyświetli krótki kod dla Twojego formularza kontaktowego natychmiast po kliknięciu linku. Sugerujemy pozostawienie tej karty lub okna otwartego, ponieważ będziesz potrzebować krótkiego kodu w następnym kroku, gdzie pokażemy Ci, jak dodać formularz kontaktowy w wyskakującym okienku.

Krok 2: Dodaj wyskakujące okienko formularza kontaktowego do swojej strony WordPress

Aby utworzyć wyskakujące okienko z formularzem kontaktowym, będziesz potrzebować wtyczki do wyskakujących okienek WordPress.

Polecamy używanie OptinMonster, ponieważ jest to najlepsza wtyczka do generowania leadów i optymalizacji konwersji dla WordPress. Jest to również jedna z najpopularniejszych, z ponad 1,2 miliona stron internetowych korzystających z tego potężnego narzędzia.

W WPBeginner używamy OptinMonster do różnych zadań, w tym do promowania specjalnych ofert i okazji w wyskakujących okienkach, wysuwanych paskach i banerach nagłówka. Jeśli chcesz uzyskać więcej informacji, zapoznaj się z naszą pełną recenzją OptinMonster.

W tym samouczku użyjemy wersji OptinMonster Pro, która zawiera przejrzysty szablon i zaawansowane reguły wyświetlania, aby pokazać wyskakujące okienko.

Zarejestrujmy się zatem, przechodząc na stronę OptinMonster. Po prostu odwiedź stronę i kliknij przycisk „Pobierz OptinMonster teraz”.

Po rejestracji trafisz do pulpitu swojego konta OptinMonster. Pozostaw tę kartę otwartą, ponieważ za chwilę połączymy Twoje konto z WordPress.

Następnie musisz zainstalować i aktywować bezpłatny plugin OptinMonster na swojej stronie internetowej. Ten plugin działa jako łącznik między Twoją stroną a kontem OptinMonster.

W swoim panelu WordPress przejdź do Wtyczki » Dodaj nową.

Na następnym ekranie użyj paska wyszukiwania, aby znaleźć „OptinMonster”.

Następnie kliknij „Zainstaluj teraz” i „Aktywuj”, aby prawidłowo je włączyć.

Szczegółowe informacje znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki pojawi się kreator konfiguracji.

Kliknij przycisk „Połącz istniejące konto”.

Teraz pojawi się okno wyskakujące, a OptinMonster poprosi o połączenie z Twoim kontem.

Po prostu kliknij przycisk „Connect To WordPress”.

Teraz, gdy Twoje konto jest połączone, następnym krokiem jest utworzenie nowej kampanii dla wyskakującego okienka formularza kontaktowego.

Możesz zacząć od przejścia do OptinMonster » Campaigns, a następnie kliknięcia przycisku „Create Your First Campaign”.

Na następnym ekranie będziesz musiał wybrać typ kampanii.

Ponieważ utworzymy wyskakujące okienko formularza kontaktowego, wybierz „Popup” jako typ kampanii.

Następnie przewiń stronę w dół, aby wybrać szablon.

OptinMonster oferuje ponad 75 atrakcyjnych i wysoce konwertujących projektów dla Twoich wyskakujących okienek. Możesz wybrać dowolny szablon, który Ci się podoba.

Po wybraniu szablonu po prostu wprowadź nazwę swojej kampanii i kliknij przycisk „Rozpocznij tworzenie”.

Teraz, korzystając z kreatora typu „przeciągnij i upuść” w OptinMonster, możesz edytować swój szablon wyskakującego okienka.

Zobaczysz różne bloki pojawiające się w menu po lewej stronie. Zlokalizuj blok „WPForms”, a następnie przeciągnij i upuść go na swój szablon.

Następnie kliknij menu rozwijane „Wybór formularza” w ustawieniach bloku po lewej stronie.

Po prostu wybierz utworzony wcześniej formularz kontaktowy z listy. Jeśli nie widzisz swojego formularza na liście, możesz wybrać „Dodaj skrót ręcznie” i wkleić skrót, który skopiowałeś w Kroku 1.

Wpisz skrót do formularza kontaktowego WPForms w bloku. Jeśli zgubiłeś swój skrót, możesz wrócić do strony ustawień osadzania WPForms i skopiować skrót.

Ważne jest, aby pamiętać, że nie zobaczysz podglądu formularza kontaktowego w szablonie po dodaniu skrótu. Jest to normalne, ponieważ formularz kontaktowy pojawi się po opublikowaniu kampanii.

Następnie możesz przejść do zakładki „Zasady wyświetlania” na górze, aby wybrać, kiedy wyskakujące okienko powinno się pojawić na Twojej stronie internetowej.

Domyślnie OptinMonster ustawi je tak, aby wyskakujące okienko pojawiało się po 5 sekundach od czasu spędzonego na stronie i na każdej stronie. Możesz jednak zmienić ustawienia zasad wyświetlania i wybrać różne wyzwalacze oraz opcje targetowania.

Zalecamy używanie opcji MonsterLink (On Click). Wyświetla ona okienko tylko wtedy, gdy użytkownik kliknie określony link lub przycisk. Daje to odwiedzającemu kontrolę i jest znacznie mniej inwazyjne niż okienko otwierające się automatycznie.

Następnie możesz kliknąć przycisk „Kopiuj kod MonsterLink” i dodać go do dowolnego tekstu, obrazu lub przycisku na swojej stronie internetowej.

Więcej szczegółów znajdziesz w naszym poradniku dla początkujących, jak dodać link w WordPressie.

Twój kod MonsterLink będzie wyglądał tak w HTML:

<a href="https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/" target="_blank" rel="noopener noreferrer">Subscribe Now!</a>

Nie potrzebujesz pełnego kodu HTML – potrzebujesz tylko adresu URL. Możesz więc skopiować tekst linku zaczynający się od https://.

Oto jak powinien wyglądać adres URL:

https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/

Na przykład, załóżmy, że chcesz dodać przycisk „Skontaktuj się z nami” na swojej stronie.

W takim przypadku możesz zacząć od edycji dowolnej strony lub wpisu i przejść do swojego edytora WordPress. Następnie kliknij znak (+) na górze i dodaj blok „Przyciski”.

Następnie możesz wprowadzić tekst dla swojego przycisku i kliknąć ikonę linku. Na przykład, używamy „Skontaktuj się z nami” jako tekstu przycisku.

Teraz dodajmy adres URL MonsterLink. Kliknij blok przycisku, aby go zaznaczyć, a następnie kliknij ikonę Link na pasku narzędzi. Po prostu wklej wcześniej skopiowany adres URL i naciśnij „Enter”.

Gdy to zrobisz, opublikuj swój wpis lub stronę WordPress. MonsterLink zostanie teraz dodany do Twojego przycisku „Skontaktuj się z nami”.

Teraz wróćmy do Twojej kampanii OptinMonster, aby zakończyć konfigurację.

Po wybraniu MonsterLink jako celu i wyświetleniu go na dowolnej stronie, możesz kliknąć przycisk „Dalej” na dole.

Na następnym ekranie zobaczysz opcje zmiany typu widoku kampanii, dodania animacji MonsterEffect i odtworzenia dźwięku po pojawieniu się okna podręcznego.

Zachęcamy do eksperymentowania z różnymi ustawieniami animacji i dźwięku. Po zakończeniu kliknij przycisk „Następny krok”.

Następnie OptinMonster wyświetli podsumowanie ustawień „Zasady wyświetlania”.

Pomaga to upewnić się, że poprawnie skonfigurowałeś, kiedy Twoje kampanie będą pojawiać się na Twojej stronie internetowej.

Teraz jesteś gotowy, aby uruchomić swoją kampanię i opublikować okienko formularza kontaktowego.

Aby to zrobić, przejdź do zakładki „Publikuj” na górze. Następnie kliknij przycisk „Podgląd”, aby zobaczyć, jak wygląda Twój popup przed uruchomieniem.

Kiedy będziesz zadowolony z wyglądu swojej kampanii, zmień „Status publikacji” z „Szkic” na „Opublikuj”.

Po zakończeniu możesz zamknąć kreator kampanii OptinMonster i sprawdzić status swojej kampanii z poziomu panelu WordPress.

Przejdź do OptinMonster » Kampanie i kliknij menu rozwijane „Status”. Następnie możesz zmienić je z „Oczekujące” na „Opublikuj”.

OptinMonster automatycznie zaktualizuje zmiany.

Następnie przejdź do miejsca, w którym wyświetlasz przycisk „Skontaktuj się z nami” z integracją MonsterLink i zobacz formularz kontaktowy wyskakujący w akcji.

I oto jest!

Pomyślnie utworzyłeś popup z formularzem kontaktowym w WordPress. Co więcej, zrobiłeś to w sposób, który zapewnia łatwy dostęp do formularza kontaktowego, nie będąc nachalnym.

Dodatkowe wskazówki, jak zwiększyć liczbę zapisów w wyskakujących okienkach

Teraz, gdy wiesz, jak utworzyć wyskakujący formularz kontaktowy, następnym krokiem jest upewnienie się, że poprawia on doświadczenie użytkownika, zamiast powodować, że odwiedzający opuszczają Twoją witrynę.

Aby zmaksymalizować liczbę zapisów, skup się na tworzeniu pomocnych i trafnych popupów, a nie nachalnych:

Łącząc te strategie, możesz tworzyć wyskakujące okienka, które przyciągają uwagę, nawiązują kontakt z odbiorcami i skłaniają do działania, nie sprawiając wrażenia nachalnych.

Więcej szczegółów i przykładów znajdziesz w naszym przewodniku na temat wykorzystania psychologii wyskakujących okienek do zwiększenia liczby zapisów o 250%.

FAQ: Jak dodać wyskakujące okienko formularza kontaktowego w WordPress

Masz pytania dotyczące wyskakujących okienek formularzy kontaktowych? Oto szybkie odpowiedzi, które pomogą Ci je poprawnie skonfigurować.

Jak mogę upewnić się, że moje wyskakujące okienko formularza kontaktowego nie jest irytujące?

Chodzi o czas i kontekst. Aby uniknąć frustracji odwiedzających, wyświetlaj wyskakujące okienka w oparciu o zachowanie, na przykład po kilku sekundach na stronie lub gdy ktoś przewinie w dół. Narzędzia takie jak OptinMonster pozwalają precyzyjnie dostosować te ustawienia, dzięki czemu Twoje wyskakujące okienko wydaje się pomocne, a nie nachalne.

Czy mogę używać wyskakującego okienka z formularzem kontaktowym dla odwiedzających mobilnych?

Tak, ale pamiętaj o przestrzeni ekranowej. WPForms i OptinMonster są responsywne mobilnie, co oznacza, że Twoje wyskakujące okienka będą dostosowywać się do mniejszych ekranów. Po prostu upewnij się, że projekt jest przejrzysty i łatwy do zamknięcia na urządzeniach mobilnych.

Jak mogę śledzić wydajność moich wyskakujących okienek z formularzem kontaktowym?

Możesz użyć MonsterInsights do śledzenia ważnych metryk formularzy, takich jak wyświetlenia, kliknięcia i konwersje, wszystko z poziomu Twojego panelu WordPress. Pomaga to zrozumieć, co działa, a co można poprawić.

Czy wyskakujące okienko z formularzem kontaktowym spowolni moją witrynę?

Nie, jeśli jest zbudowane i skonfigurowane poprawnie. Lekkie narzędzia, takie jak WPForms i OptinMonster, są zoptymalizowane pod kątem wydajności, więc nie spowolnią zauważalnie Twojej witryny, gdy będą używane poprawnie.

Samouczek wideo

Zanim przejdziesz dalej, przygotowaliśmy samouczek wideo na temat dodawania wyskakującego okienka z formularzem kontaktowym do Twojej witryny WordPress. Koniecznie go sprawdź!

Przeglądaj nasze przewodniki po formularzach WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać wyskakujące okienko z formularzem kontaktowym w WordPress.

Następnie możesz również zapoznać się z naszymi przewodnikami na temat:

• Jak używać formularza kontaktowego do rozbudowy listy e-mailowej w WordPressie
• Jak wysyłać e-maile z potwierdzeniem po przesłaniu formularza w WordPress
• Jak śledzić i zmniejszać porzucenia formularzy
• Formularz WordPress nie działa: wskazówki dotyczące rozwiązywania problemów
• Kompleksowy przewodnik po korzystaniu z formularzy WordPress

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.