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?

Popup z formularzem kontaktowym ułatwia odwiedzającym kontakt z Tobą, nie przerywając ich przeglądania ani szukania 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ż zatrzymać ludzi na Twojej stronie internetowej, zamiast wysyłać ich gdzie indziej. A jako bonus, możesz używać tych popupów do zbierania adresów e-mail i rozbudowy swojej 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 ekspertów dotyczącymi tworzenia popupu, który 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ę do formularzy kontaktowych WordPress.

Istnieje wiele darmowych i płatnych opcji, ale zalecamy używanie 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 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 o naszym doświadczeniu z wtyczką znajdziesz w naszej kompletnej recenzji WPForms.

Aby zacząć, przejdź na stronę internetową WPForms i kliknij przycisk „Get WPForms Now”. Następnie po prostu postępuj zgodnie z krokami, 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, 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, w jaki sposób zbudujesz swój formularz – za pomocą WPForms AI, gotowego szablonu lub pustego obszaru roboczego.

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ć opis formularza, zmienić tekst przycisku wysyłania, włączyć ochronę antyspamową i inne.

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 z 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 popupów 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 popupem.

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 następnie kod krótki formularza kontaktowego, gdy tylko klikniesz link. Sugerujemy pozostawienie tej karty lub okna otwartego, ponieważ będziesz potrzebować kodu krótkiego 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 formularza kontaktowego, będziesz potrzebować wtyczki do wyskakujących okienek WordPress.

Polecamy użycie 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, suwakach 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 Pro OptinMonster, 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łatną wtyczkę OptinMonster na swojej stronie internetowej. Ta wtyczka działa jako łącznik między Twoją stroną internetową 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 formularz kontaktowy, który utworzyłeś wcześniej, z listy. Jeśli nie widzisz swojego formularza na liście, możesz wybrać opcję „Dodaj kod krótki ręcznie” i wkleić kod krótki, który skopiowałeś w Kroku 1.

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

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.

Polecamy użycie opcji MonsterLink (po kliknięciu). Wyzwala ona wyskakujące okienko tylko wtedy, gdy użytkownik kliknie określony link lub przycisk. Daje to kontrolę odwiedzającemu i jest znacznie mniej inwazyjne niż wyskakujące okienko, które otwiera 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 przewodniku dla początkujących, jak dodać link w WordPress.

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 tym przypadku możesz zacząć od edycji dowolnej strony lub wpisu i przejść do edytora WordPress. Następnie kliknij znak (+) plus u góry 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” u góry. Następnie kliknij przycisk „Podgląd”, aby zobaczyć, jak wygląda Twoje wyskakujące okienko przed jego publikacją.

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ące okienko formularza kontaktowego, następnym krokiem jest upewnienie się, że poprawia ono doświadczenie użytkownika, zamiast powodować, że odwiedzający opuścili 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?

Wszystko sprowadza się do czasu i kontekstu. 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ą dopracować 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 dostosują 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żywać 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 prawidłowo. Lekkiej wagi 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.