Szukasz łatwego sposobu na wyświetlenie wyskakującego formularza kontaktowego na twojej witrynie internetowej WordPress?
Formularze kontaktowe świetnie nadają się do komunikacji z Twoimi odwiedzającymi. Umieszczenie ich w wyskakującym okienku jeszcze bardziej ułatwia twoim klientom kontakt w sprawie twoich produktów i usług.
W tym artykule pokażemy, jak dodać wyskakujące okienko formularza kontaktowego w WordPress.
Dlaczego warto używać wyskakującego formularza kontaktowego?
Każda witryna internetowa lub blog WordPress potrzebuje formularza kontaktowego, aby użytkownicy mogli zadawać pytania, przekazywać uwagi lub rozwiązywać problemy.
Jeśli jednak twój formularz kontaktowy znajduje się tylko na jednej stronie, to ludziom trudno będzie go znaleźć.
W rezultacie użytkownicy mogą opuścić twoją witrynę przed skontaktowaniem się z tobą, a ty możesz stracić potencjalnych potencjalnych klientów i konwersje.
Wyskakujący formularz kontaktowy pomaga rozwiązać ten problem, umożliwiając odwiedzającym twoje strony szybkie zobaczenie formularza poprzez kliknięcie przycisku, dzięki czemu mogą skontaktować się z tobą z dowolnej strony, na której się znajdują.
Pomaga to zatrzymać ludzi na twojej witrynie internetowej, ponieważ nie muszą oni opuszczać strony, którą zobaczyli. Możesz również rozwinąć swoją listę mailing ową za pomocą wyskakującego formularza kontaktowego.
To powiedziawszy, najpierw będziesz musiał utworzyć formularz kontaktowy, a następnie umieścić go w wyskakującym okienku, które będzie wyświetlane na twoich stronach internetowych. Nie martw się, przeprowadzimy Cię przez proces tworzenia formularza kontaktowego i dodawania go do wyskakującego okienka w WordPress.
Film instruktażowy
Jeśli wolisz pisemne instrukcje, czytaj dalej.
Jak utworzyć formularz kontaktowy WordPress
Najpierw należy wybrać wtyczkę formularza kontaktowego WordPress.
Istnieje wiele darmowych i płatnych opcji do wyboru, ale zalecamy korzystanie z WPForms, ponieważ jest to najlepsza opcja.
WPForms to przyjazna dla początkujących wtyczka do tworzenia formularzy, oferująca kreator typu „przeciągnij i upuść”, który umożliwia utworzenie formularza kontaktowego w WordPressie za pomocą zaledwie kilku kliknięć. Oferuje również gotowe szablony formularzy i wiele własnych opcji konfiguratora.
Na potrzeby tego poradnika użyjemy wersji WPForms Lite, ponieważ jest ona darmowa i oferuje szablon formularza kontaktowego.
Można jednak również skorzystać z wersji premium, aby odblokować więcej funkcji. Na przykład WPForms Pro oferuje ponad 1800 szablonów formularzy, więcej opcji konfiguratora, potężne dodatki i pozwala zbierać płatności online bez dodatkowych opłat transakcyjnych.
Aby rozpocząć, należy najpierw zainstalować i włączyć wtyczkę WPForms Lite. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączeniu wtyczki jesteś gotowy do utworzenia twojego formularza kontaktowego. Wszystko, co musisz zrobić, to przejść do WPForms ” Utwórz nowy z twojego kokpitu WordPress.
Następnie WPForms poprosi o wpisz nazwy twojego formularza i wybierz szablon.
Wybierz szablon „Prosty formularz kontaktowy”.
Następnie możesz dodać pola do formularza za pomocą kreatora przeciągnij i upuść.
Po prostu przeciągnij pola, które chcesz dodać do formularza z opcji podanych w menu po twojej lewej stronie. Możesz także zmienić kolejność poszczególnych pól w formularzu.
WPForms pozwala również dostosować każde pole 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 formularzy.
W ustawieniach ogólnych można zmienić nazwę formularza, zmienić tekst przycisku przesyłania, włączyć ochronę antyspamową i nie tylko.
Następnie możesz przejść do opcji ustawień powiadomień. Domyślnie powiadomienia są wysyłane na e-mail administratora, który jest skonfigurowany na twojej witrynie internetowej WordPress.
Możesz jednak wysłać powiadomienie z formularza kontaktowego na dowolny adres e-mail. Jeśli chcesz otrzymywać powiadomienia na wiele e-maili, oddziel każdy z nich przecinkiem.
W temacie e-maila WPForms używa nazwy formularza, którą wpiszesz wcześniej. Możesz jednak edytować tekst tematu w dowolny sposób.
Następnie kliknij opcję Potwierdzenia.
WPForms użyje „Message” jako domyślnego rodzaju potwierdzenia, w którym Twoi odwiedzający zobaczą wiadomość z podziękowaniem po przesłaniu formularza.
Możesz jednak zmienić rodzaj wiadomości i przekierować użytkowników do określonej strony w twojej witrynie internetowej, gdy wypełnią formularz.
Po zakończeniu tworzenia formularza kontaktowego kliknij przycisk „Zapisz” w prawym górnym rogu, aby zapisać twoje zmiany.
Następnie kliknij opcję „Osadzanie” w górnym rogu obok przycisku Zapisz.
Gdy pojawi się nowe okno, wybierz opcję „użyj krótkiego kodu”.
WPForms wyświetli krótki kod dla twojego formularza kontaktowego zaraz po kliknięciu odnośnika. Zalecamy pozostawienie tej karty/okna otwartego, ponieważ będzie ona potrzebna w następnym kroku, w którym pokażemy, jak dodać twój formularz kontaktowy w wyskakującym okienku.
Dodaj wyskakujące okienko formularza kontaktowego do twojej witryny WordPress
Aby utworzyć wyskakujący formularz kontaktowy, potrzebna będzie wtyczka WordPress popup.
Zalecamy korzystanie z OptinMonster, ponieważ jest to najlepsza wtyczka do generowania leadów i optymalizacji konwersji dla WordPress. Ponad 1,2 miliona witryn internetowych korzysta z tego potężnego narzędzia.
W tym poradniku użyjemy wersji OptinMonster Pro, która zawiera szablon bez bałaganu i zaawansowane reguły wyświetlania wyskakującego okienka.
Najpierw musisz założyć konto, przechodząc do witryny internetowej OptinMonster. Wystarczy przejść na witrynę internetową i kliknąć przycisk „Pobierz OptinMonster teraz”.
Następnie należy zainstalować i włączyć darmową wtyczkę OptinMonster na twojej witrynie internetowej. Aby uzyskać więcej informacji, postępuj zgodnie z naszym przewodnikiem na temat instalacji wtyczki WordPress.
Po włączeniu wtyczki pojawi się kreator konfiguracji. Kliknij przycisk „Połącz Twoje istniejące konto”.
Pojawi się teraz wyskakujące okienko, a OptinMonster poprosi o połączenie z twoim kontem.
Wystarczy kliknąć przycisk „Połącz z WordPress”.
Teraz, gdy twoje konto jest połączone, następną rzeczą jest utworzenie nowej kampanii dla wyskakującego formularza kontaktowego.
Możesz zacząć od przejścia do zakładki OptinMonster ” Campaigns, a następnie kliknięcia przycisku „Create Your First Campaign”.
Na następnym ekranie należy wybrać rodzaj kampanii.
Ponieważ utworzymy wyskakujący formularz kontaktowy, wybierz „Popup” jako twój rodzaj kampanii.
Następnie przewiń w dół, aby wybrać szablon dla twojego wyskakującego okienka. OptinMonster oferuje ponad 75 atrakcyjnych i wysoce konwertujących szablonów dla twojego popupu.
Możesz wybrać dowolny szablon. Następnie wpisz nazwę twojej kampanii i kliknij przycisk „Rozpocznij tworzenie”.
Teraz, korzystając z kreatora „przeciągnij i upuść” w OptinMonster, możesz edytować swój szablon popup.
W menu po twojej lewej stronie pojawią się teraz różne bloki. Po prostu przejdź do bloku „WPForms” i przeciągnij go na twój szablon.
Następnie należy kliknąć menu rozwijane „Wybór formularza” w ustawieniach bloku w lewym menu i wybrać opcję „Dodaj krótki kod ręcznie”.
Stąd wpisz twój krótki kod formularza kontaktowego WPForms w bloku. Aby znaleźć kod, wróć do ustawień osadzania WPForms i skopiuj krótki kod.
Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że po dodaniu krótkiego kodu nie zobaczysz podglądu formularza kontaktowego w szablonie.
Jest to normalne, ponieważ Twój formularz kontaktowy pojawi się po opublikowaniu kampanii.
Następnie możesz przejść do karty Reguły wyświetlania u góry, aby wybrać, kiedy wyskakujące okienko ma pojawiać się na twojej witrynie internetowej.
Domyślnie OptinMonster ustawi go na czas 5 sekund, a popup pojawi się na każdej stronie.
Można jednak zmienić ustawienia reguł wyświetlania i wybrać różne wyzwalacze i opcje kierowania.
Sugerujemy użycie targetowania MonsterLink (On Click). W ten sposób twój popup pojawi się, gdy odwiedzający kliknie odnośnik lub przycisk.
Następnie możesz kliknąć przycisk „Kopiuj kod MonsterLink” i dodać go do dowolnego tekstu, obrazka lub przycisku na twojej witrynie internetowej.
Aby uzyskać więcej szczegółów, możesz skorzystać z naszego przewodnika dla początkujących, jak dodać odnośnik 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>
Jednakże, aby osadzać odnośnik na twoim wpisie lub stronie na blogu WordPress, potrzebujesz tylko adresu URL z kodu.
https://app.monstercampaigns.com/c/ep6f5qtakxauowbj8097/
Załóżmy na przykład, że chcesz dodać przycisk „Skontaktuj się z nami” na twojej witrynie. Możesz zacząć od edycji dowolnej strony lub wpisu i przejść do twojego edytora WordPress. Następnie kliknij znak (+) plus u góry i dodaj blok „Przyciski”.
Następnie wpisz tekst dla twojego przycisku i kliknij ikonkę odnośnika.
Teraz dodaj adres URL MonsterLink do twojego przycisku.
Gdy już to zrobisz, opublikuj swój wpis lub stronę WordPress. MonsterLink zostanie teraz dodany do twojego przycisku Skontaktuj się z nami.
Następnie wróć do twojej kampanii OptinMonster, aby dokończyć konfigurację.
Po wybraniu MonsterLink jako twojego celu i wyświetleniu go na dowolnej stronie, możesz kliknąć przycisk „Dalej” na dole.
Na następnym ekranie zobaczysz opcje zmiany rodzaju widoku kampanii, dodania animacji MonsterEffect i odtwarzania dźwięku, gdy pojawi się wyskakujące okienko.
Przejdź dalej i kliknij przycisk „Dalej”, gdy będziesz zadowolony z ustawień.
Następnie OptinMonster wyświetli podsumowanie twoich ustawień reguł wyświetlania.
Pomaga to upewnić się, że prawidłowo skonfigurowałeś, kiedy Twoje kampanie będą pojawiać się w witrynie internetowej.
Teraz jesteś gotowy, aby uruchomić twoją kampanię i opublikować wyskakujący formularz kontaktowy. Aby to zrobić, przejdź do karty „Opublikuj” u góry.
Następnie możesz kliknąć przycisk „Podgląd” przed opublikowaniem twojej kampanii. Spowoduje to wyświetlenie podglądu na żywo tego, jak twój popup będzie wyglądał na witrynie internetowej.
Kiedy będziesz zadowolony z wyglądu twojej kampanii, zmień „Status publikacji” z wersji roboczej na publikację.
Możesz wyjść z kreatora kampanii OptinMonster i sprawdzić status twojej kampanii również z kokpitu WordPress.
Wystarczy kliknąć menu rozwijane „Status” po twojej prawej stronie i zmienić status z Oczekujący na Opublikowany.
Nie zapomnij zapisać zmian.
Następnie przejdź do przycisku Skontaktuj się z nami, który utworzyłeś wcześniej za pomocą MonsterLink i zobacz wyskakujący formularz kontaktowy w działaniu.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać wyskakujący formularz kontaktowy w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyboru najlepszego kreatora witryn internetowych lub naszym porównaniem najlepszego oprogramowania płacowego dla małych firm.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ankit says
A well written article. Must read for non-tech beginners like me.
WPBeginner Support says
Glad you found our content helpful
Administrator
Deepak says
Hi i want to popup form whn i clk button… How i can do this
WPBeginner Support says
For what it sounds like you are wanting, you would want to take a look at OptinMonster: https://www.wpbeginner.com/wordpress-plugins/optinmonster-wordpress-popup-plugin/
Administrator
Isaac says
This is nice, but can you explain/show how to do this without OptinMonster? I don’t want to have to buy a second plugin just to show a form in a popup. This should be do-able with WP Forms and a free lightbox plugin.
Editorial Staff says
Hi Isaac, there are likely other plugins that can do this, but we recommend the solution that we’re using ourselves. We have a good tutorial on how to pick the best plugin while you look through the WordPress.org plugin directory.
Administrator
Kulwant Singh says
can i create differents popup for different post ? it is possible or not
WPBeginner Support says
Hi Kulwant,
Yes, you can create different popups for different posts.
Administrator
Lela Donelson says
My WP menu does not have a WP forms option. I have a GoDaddy managed WP.
WPBeginner Support says
Hi Lela,
WPForms is a WordPress Plugin. You will first need to install and activate it. For more details, see our step by step guide on how to install a WordPress plugin.
If you have already installed and activated the plugin, and you still can’t see it in your WordPress admin menu, then please contact WPForms Support or your hosting company.
Administrator
Michael Wahhab says
Where’s the demo?
Nick Vail says
Are pop up windows only available with the paid „business plan”?
Ruben says
Before buying I want to ask, can I have two call-to-action buttons in a popup? I want two buttons one for downloading my app from App Store and second from Play Store.
WPBeginner Support says
Yes you can.
Administrator
shagufta says
how to have tabs in the popup that will link to div’s which will open in the same popup
Jhorene says
Hello,
Before I buy Optinmonster, can you tell me if it is fully mobile responsive to have a form inside the canvas popup?
Thank you.
Regards,
Jhorene
WPBeginner Support says
OptinMonster comes with a feature called mobile friendly popups. You can create different popups for your desktop and mobile users, providing a much better user experience to your mobile audiences.
Administrator
Ian Perera says
can i pass data to gravity form
Dave E says
Hi, I’m looking for the same. Did you ever find a solution? Thanks
Alicia Beale says
How can I use this pop-up contact form to notify different email addresses?
Mike Whaling says
Is there a way to do this in the new version of Optin Monster? This worked great when I was using the local WP plugin, but it doesn’t seem to recognize the Gravity shortcode now that I’ve switched over to the new OM.
Any tips or suggestions?
WPBeginner Support says
Please open a support ticket on OptinMonster website.
Administrator
Silvan says
could this work as well in a WordPress navigation? I’m having some trouble adding the data-optin-slug bit via the WP menu system.
sharul says
Can you please show us some demo.
Thank you
WPBeginner Staff says
Please submit a support ticket on OptinMonster’s support website.
Alvin Ng says
heya man, need some help here. No matter what i do, i can’t get optinmonster to pop up. do i need to replace the # with a link?
Don DeMaio says
This would be great if they offered a demo to check it out.