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 formularza kontaktowego ułatwia odwiedzającym kontakt, bez konieczności szukania Twojej strony kontaktowej lub opuszczania strony, na której się znajdują.

Każda witryna WordPress potrzebuje formularza kontaktowego, aby użytkownicy mogli przesyłać pytania, opinie lub zgłaszać problemy.

Jednak jeśli Twój formularz kontaktowy znajduje się tylko na jednej stronie, trudno go znaleźć. W rezultacie Twoi użytkownicy mogą opuścić Twoją witrynę przed skontaktowaniem się z Tobą, a Ty możesz stracić potencjalnych klientów i konwersje.

Wyskakujące okienko formularza kontaktowego pomaga rozwiązać ten problem, umożliwiając odwiedzającym szybkie wyświetlenie formularza po kliknięciu przycisku. W ten sposób mogą skontaktować się z Tobą z dowolnej strony, na której się znajdują.

Ten rodzaj formularza kontaktowego pomaga również utrzymać użytkowników na Twojej stronie internetowej, ponieważ nie muszą oni opuszczać przeglądanej strony. Ponadto, możesz powiększyć swoją listę e-mailową za pomocą wyskakującego okienka formularza kontaktowego.

Powiedziawszy to, najpierw musisz utworzyć formularz kontaktowy i wyświetlić go w wyskakującym okienku na swoich stronach internetowych.

Ale nie martw się. W poniższych sekcjach przeprowadzimy Cię przez proces tworzenia formularza kontaktowego i dodawania 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:

1. Krok 1: Utwórz formularz kontaktowy w WordPress
2. Krok 2: Dodaj wyskakujące okienko formularza kontaktowego do swojej strony WordPress
3. Wskazówka bonusowa: Zwiększ liczbę zapisów w wyskakującym okienku
4. FAQ: Jak dodać wyskakujące okienko formularza kontaktowego w WordPress
5. Samouczek wideo
6. Przeglądaj nasze przewodniki po formularzach WordPress

Gotowi? Zacznijmy.

Krok 1: Utwórz formularz kontaktowy w WordPress

Najpierw musisz wybrać wtyczkę formularza kontaktowego WordPress.

Istnieje wiele darmowych i płatnych opcji do wyboru, ale polecamy użycie WPForms, ponieważ jest to najlepszy kreator formularzy dla początkujących.

Sami używamy go na naszej stronie internetowej do wyświetlania formularzy kontaktowych, corocznych ankiet użytkowników i formularzy migracji stron. Szczegółowe informacje o naszym doświadczeniu z wtyczką znajdziesz w naszej pełnej recenzji WPForms.

WPForms to przyjazny dla początkujących wtyczka do formularzy, która oferuje kreator typu „przeciągnij i upuść” do tworzenia formularzy kontaktowych w WordPress za pomocą zaledwie kilku kliknięć. Oferuje również gotowe szablony formularzy i wiele opcji dostosowywania.

W tym samouczku użyjemy wersji WPForms Lite, która jest bezpłatna i oferuje szablon formularza kontaktowego.

Możesz jednak również użyć jej wersji premium, aby odblokować więcej funkcji. Na przykład WPForms Pro oferuje ponad 2000 szablonów formularzy, więcej opcji dostosowywania, potężne dodatki i możliwość pobierania płatności online bez dodatkowych opłat transakcyjnych.

Aby rozpocząć, musisz najpierw zainstalować i aktywować wtyczkę WPForms Lite. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki możesz przystąpić do tworzenia formularza kontaktowego. Wystarczy przejść do sekcji WPForms » Dodaj nowy z poziomu panelu administracyjnego 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”, otrzymasz różne opcje, takie jak zmiana jego etykiety i formatu. Możesz nawet dodać opis lub oznaczyć dowolne pole jako wymagane.

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

W sekcji „Ogólne” możesz zmienić nazwę formularza, 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 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żyje „Wiadomości” jako domyślnego typu potwierdzenia. Po wysłaniu formularza wyświetli odwiedzającym wiadomość z podziękowaniem.

Możesz jednak zmienić typ wiadomości i przekierować użytkowników na określoną stronę na Twojej stronie po wypełnieniu formularza.

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 okienko, możesz wybrać opcję „użyj krótkiego kodu”.

WPForms wyświetli następnie krótki kod dla Twojego formularza kontaktowego, gdy tylko klikniesz link. Sugerujemy pozostawienie tej karty/okna otwartego, ponieważ będzie Ci potrzebne w następnym kroku, w którym 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.

Najpierw zarejestrujmy konto, przechodząc na stronę OptinMonster. Po prostu odwiedź stronę i kliknij przycisk „Get OptinMonster Now”.

Następnie musisz zainstalować i aktywować darmowy plugin OptinMonster na swojej stronie internetowej. Więcej szczegółów znajdziesz w naszym przewodniku jak zainstalować plugin WordPress.

Po aktywacji pluginu zobaczysz kreatora konfiguracji. Kliknij przycisk „Connect Your Existing Account”.

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. Znajdź blok „WPForms”, a następnie przeciągnij i upuść go na swój szablon.

Następnie musisz kliknąć menu rozwijane „Wybór formularza” w ustawieniach bloku w menu po lewej stronie.

Następnie wybierz opcję „Dodaj krótki kod ręcznie”.

Stąd możesz wprowadzić krótki kod formularza kontaktowego WPForms shortcode w bloku. Aby znaleźć kod, musisz wrócić do ustawień osadzania WPForms i skopiować krótki kod.

Ważne jest, aby pamiętać, że nie zobaczysz podglądu formularza kontaktowego w szablonie po dodaniu krótkiego kodu.

To normalne, ponieważ Twój 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.

Sugerujemy użycie targetowania MonsterLink (po kliknięciu). W ten sposób Twoje wyskakujące okienko pojawi się, gdy odwiedzający kliknie link lub przycisk.

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>

Jednak aby osadzić link w swoim wpisie lub stronie na blogu WordPress, potrzebujesz tylko adresu URL z kodu.

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 nadszedł czas, aby dodać adres URL MonsterLink do swojego przycisku. Kliknij przycisk, a następnie przycisk wstawiania linku i wklej adres URL.

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.

Możesz być kreatywny i eksperymentować z różnymi ustawieniami. Gdy będziesz zadowolony z konfiguracji, kliknij przycisk „Dalej”.

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ć okno podręczne formularza kontaktowego. Aby to zrobić, przejdź do zakładki „Publikuj” na górze.

Następnie możesz kliknąć przycisk „Podgląd” przed opublikowaniem kampanii. Spowoduje to wyświetlenie podglądu na żywo, jak Twoje okno podręczne będzie wyglądać na Twojej stronie internetowej.

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.

Aby to zrobić, przejdź do OptinMonster » Kampanie. Stąd po prostu kliknij menu rozwijane „Status” i zmień je z „Oczekujący” 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ś wtyczkę formularza kontaktowego w WordPress. Co więcej, zrobiłeś to, zapewniając, że formularz jest nieinwazyjny.

Wskazówka bonusowa: Zwiększ liczbę zapisów w wyskakującym okienku

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, powinieneś skupić się na tworzeniu pomocnych i trafnych wyskakujących okienek, a nie inwazyjnych.

Po pierwsze, wyczucie czasu jest kluczowe. Wyskakujące okienka, które pojawiają się zbyt wcześnie, mogą frustrować użytkowników, więc spróbuj wyświetlać je po tym, jak odwiedzający przewinie stronę lub spędzi trochę czasu w Twojej witrynie.

Personalizacja to kolejny przełom. Aby Twoje wyskakujące okienka były bardziej trafne, powinieneś dostosować je do tego, co robią użytkownicy, na przykład oferując zniżkę na produkt, który przeglądają.

Aby zachęcić do szybkiego działania, stwórz poczucie pilności za pomocą zwrotów takich jak „Oferta ograniczona czasowo” lub wykorzystaj strach przed przegapieniem (FOMO), podkreślając, co można zyskać, działając teraz.

Dodanie dowodu społecznościowego, takiego jak recenzje lub statystyki, może również budować zaufanie i sprawić, że Twoje wyskakujące okienka będą bardziej przekonujące. Nie zapomnij o roli koloru: odważne odcienie mogą przyciągnąć uwagę, podczas gdy łagodniejsze budują zaufanie i harmonię.

Łą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 będąc nachalnym. Więcej informacji na ten temat znajdziesz w naszym przewodniku na temat wykorzystania psychologii wyskakujących okienek, aby zwiększyć liczbę 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 utworzyć formularz kontaktowy z wieloma odbiorcami
• 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.