Jak utworzyć formularz kontaktowy Popup w WordPress

Szukasz łatwego sposobu na wyświetlenie wyskakującego formularza kontaktowego na swojej stronie WordPress?

Formularze kontaktowe są świetne do komunikacji z odwiedzającymi. Umieszczenie ich w wyskakującym okienku jeszcze ułatwia klientom kontaktowanie się z Tobą w sprawie Twoich produktów i usług.

W tym artykule pokażemy Ci, jak dodać wyskakujące okienko formularza kontaktowego w WordPress.

How to Create a Contact Form Popup in WordPress

Dlaczego warto skorzystać z wyskakującego formularza kontaktowego?

Każda witryna lub blog WordPress potrzebuje formularza kontaktowego, aby użytkownicy mogli skontaktować się ze swoimi pytaniami, opiniami lub problemami.

Jeśli jednak formularz kontaktowy znajduje się tylko na jednej stronie, trudno jest go znaleźć i mogą nie być skłonni opuścić strony, na której się znajdują.

W rezultacie użytkownicy mogą opuścić witrynę i stracić potencjalne potencjalnych klientów i konwersje.

Wyskakujące okienko formularza kontaktowego pomaga rozwiązać ten problem, umożliwiając odwiedzającym szybkie przeglądanie formularza, klikając przycisk, dzięki czemu mogą się z Tobą skontaktować z dowolnej strony, na której się znajdują.

Pomaga utrzymać ludzi w Twojej witrynie, ponieważ nie muszą opuszczać strony, którą przeglądają. Możesz również powiększyć swoją listę e-mailową za pomocą wyskakującego formularza kontaktowego.

Mając to na uwadze, najpierw musisz utworzyć formularz kontaktowy, a następnie umieścić go w wyskakującym okienku, aby wyświetlić go na swoich stronach internetowych. Nie martw się, poprowadzimy Cię na temat tworzenia formularza kontaktowego i dodawania go do wyskakującego okienka w WordPress.

  • Jak stworzyć formularz kontaktowy WordPress
  • Jak dodać wyskakujące okienko formularza kontaktowego na swojej stronie

Jak stworzyć formularz kontaktowy WordPress

Najpierw musisz 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 formularzy i oferuje Kreator przeciągnij i upuść, który pozwala utworzyć formularz kontaktowy w WordPress za pomocą zaledwie kilku kliknięć. Oferuje również gotowe szablony formularzy i wiele opcji dostosowywania.

W tym samouczku będziemy używać wersji WPForms Lite, ponieważ jest bezpłatna i oferuje szablon formularza kontaktowego.

Możesz jednak użyć jego wersji premium, aby odblokować więcej funkcji. Na przykład WPForms Pro oferuje wiele szablonów formularzy, więcej opcji dostosowywania, potężne dodatki i pozwala zbierać płatności online.

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

Gdy wtyczka jest aktywna, jesteś teraz gotowy do utworzenia formularza kontaktowego. Wszystko, co musisz zrobić, to iść do WPForms ” Dodaj Nowy z pulpitu WordPress.

Add new form in WPForms

Następnie WPForms poprosi Cię o wprowadzenie nazwy formularza i wybranie szablonu. Wybierz szablon “prosty formularz kontaktowy”.

Give a name and select contact form template

Następnie możesz dodać pola w formularzu za pomocą Kreatora przeciągnij i upuść.

Po prostu przeciągnij pola, które chcesz dodać do formularza, z opcji podanych w menu po lewej stronie. Możesz również zmienić kolejność pozycji każdego pola w formularzu.

Drag and drop form fields

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 etykiety i formatu. Możesz nawet dodać opis lub oznaczyć dowolne pole jako wymagane.

Edit each fields label and format

Po zakończeniu kliknij opcję “Ustawienia”, aby skonfigurować powiadomienie i potwierdzenie formularza.

W ustawieniach ogólnych możesz zmienić nazwę formularza, zmienić tekst przycisku Prześlij, włączyć ochronę antyspamową i nie tylko.

Change your form settings

Następnie możesz przejść do opcji Ustawienia powiadomień. Domyślnie powiadomienia są wysyłane na adres e-mail administratora skonfigurowany w witrynie WordPress.

Możesz jednak wysłać powiadomienie o formularzu kontaktowym na dowolny adres e-mail. Jeśli chcesz otrzymywać powiadomienia o wielu wiadomościach e-mail, oddziel każdą wiadomość przecinkiem.

W wierszu temat wiadomości e-mail WPForms używa nazwy formularza, którą wpisałeś wcześniej. Możesz jednak edytować tekst tematu w dowolny sposób.

Notification settings in WPForms

Następnie kliknij opcję potwierdzenia.

WPForms użyje “wiadomości” jako domyślnego typu potwierdzenia, w którym odwiedzający zobaczą wiadomość z podziękowaniem po przesłaniu formularza.

Możesz jednak zmienić typ wiadomości i przekierować użytkowników do określonej strony w witrynie po wypełnieniu formularza.

Confirmations settings in WPForms

Po utworzeniu formularza kontaktowego kliknij przycisk “Zapisz” w prawym górnym rogu, aby zapisać zmiany.

Hit the Save button to store your settings

Następnie kliknij opcję “Osadź” w górnym rogu obok przycisku Zapisz. Gdy pojawi się nowe okno, wybierz opcję “Użyj krótkiego kodu”.

Click the use a shortcode link

Po kliknięciu łącza WPForms wyświetli krótki kod formularza kontaktowego. Sugerujemy, aby zachować tę kartę/okno otwarte, ponieważ będzie to potrzebne w następnym kroku, gdzie pokażemy Ci, jak dodać formularz kontaktowy w wyskakującym okienku.

Dodaj wyskakujące okienko formularza kontaktowego do swojej witryny WordPress

Aby utworzyć wyskakujące okienko formularza kontaktowego, potrzebujesz wtyczki popup WordPress.

Zalecamy korzystanie z OptinMonster, ponieważ jest to najlepsza wtyczka do optymalizacji generowania leadów i konwersji dla WordPress. Ponad 1,2 miliona stron internetowych korzysta z tego potężnego narzędzia.

W tym samouczku będziemy używać wersji OptinMonster Pro, ponieważ zawiera szablon bez bałaganu i zaawansowane reguły wyświetlania, aby wyświetlić wyskakujące okienko.

Najpierw musisz zarejestrować konto, przechodząc do strony OptinMonster.

Następnie zainstaluj i aktywuj darmową wtyczkę OptinMonster na swojej stronie internetowej. Aby uzyskać więcej informacji, postępuj zgodnie z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po aktywacji wtyczki musisz połączyć ją ze swoją witryną WordPress.

Aby to zrobić, wystarczy udać się do OptinMonster ” Ustawienia z pulpitu WordPress i kliknij przycisk “Połącz istniejące konto”.

Connect your OptinMonster account

Pojawi się wyskakujące okno i OptinMonster poprosi o połączenie z Twoim kontem. Po prostu kliknij przycisk “Połącz się z WordPress”.

Click the Connect to WordPress button

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 OptinMonster ” Kampanie następnie kliknij przycisk “Stwórz swoją pierwszą kampanię”.

Create a new campaign

Na następnym ekranie musisz wybrać typ kampanii. Ponieważ utworzymy wyskakujące okienko formularza kontaktowego, wybierz “wyskakujące okienko” jako typ kampanii.

Choose popup as campaign type

Następnie przewiń w dół, aby wybrać szablon dla wyskakującego okienka. OptinMonster oferuje ponad 75 atrakcyjnych i bardzo konwertujących projektów dla Twoich pop-upów.

Zalecamy wybranie szablonu Canvas. Jest to pusty szablon i świetnie nadaje się do wyświetlania formularza kontaktowego, ponieważ użytkownicy mogą skupić się na wypełnianiu formularza bez żadnych zakłóceń.

Select Canvas template

Następnie wprowadź nazwę kampanii i kliknij przycisk “Rozpocznij budowanie”.

Enter a name for your campaign

Teraz za pomocą Kreatora przeciągnij i upuść w OptinMonster możesz edytować swój szablon popup. Aby rozpocząć, kliknij przycisk “+ Dodaj bloki ” u góry.

Add a new block

W menu po lewej stronie pojawią się różne bloki. Po prostu przejdź do bloku HTML i przeciągnij go i upuść na swoim szablonie.

Drag the HTML block to the template

Następnie musisz wprowadzić krótki kod formularza kontaktowego WPForms w bloku HTML.

Aby znaleźć kod, wróć do ustawień osadzania WPForms i skopiuj skrócony kod.

Copy the contact form shortcode

Teraz wprowadź skopiowany shortcode w bloku HTML w OptinMonster, gdzie jest napisane ” Dodaj HTML tutaj.’

Add HTML code

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

Jest to normalne, a Formularz kontaktowy pojawi się po opublikowaniu kampanii.

Contact form shortcode in the template

Następnie możesz przejść do zakładki reguły wyświetlania u góry, aby wybrać, kiedy wyskakujące okienko ma się pojawić w Twojej witrynie.

Display Rules tab in OptinMonster

Domyślnie OptinMonster ustawia go, gdy czas na stronie wynosi 5 sekund, a wyskakujące okienko pojawi się na dowolnej stronie.

Możesz jednak zmienić ustawienia reguły wyświetlania i wybrać różne wyzwalacze i opcje kierowania.

Sugerujemy użycie kierowania MonsterLink (na kliknięcie). W ten sposób wyskakujące okienko pojawi się, gdy odwiedzający kliknie łącze lub przycisk.

Select MonsterLink targeting

Następnie możesz kliknąć przycisk “Kopiuj kod MonsterLink” i dodać go do dowolnego tekstu, obrazu lub przycisku na swojej stronie internetowej. Aby uzyskać więcej informacji, możesz śledzić nasz przewodnik dla początkujących, jak dodać link w WordPress.

Copy your MonsterLink code

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

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

Aby jednak osadzić link na swoim blogu lub stronie WordPress, wystarczy adres URL z kodu.

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

Na przykład, załóżmy, że chcesz dodać przycisk Skontaktuj się z nami w swojej witrynie. Możesz zacząć od edycji dowolnej strony lub posta i przejść do edytora WordPress. Następnie kliknij znak ( + ) plus u góry i dodaj Blok “przycisków”.

Add a button block

Następnie wprowadź tekst dla swojego przycisku, a następnie kliknij ikonę łącza. Teraz dodaj adres URL MonsterLink do przycisku.

Embed the MonsterLink to a button

Gdy to zrobisz, Opublikuj swój post lub stronę WordPress. MonsterLink zostanie teraz dodany do przycisku Skontaktuj się z nami.

Następnie wróć do kampanii OptinMonster, aby zakończyć konfigurację.

Po wybraniu MonsterLink jako kierowania i pokazaniu go na dowolnej stronie, możesz kliknąć przycisk “Dalej” u dołu.

Display rule conditions

Na następnym ekranie zobaczysz opcje, aby zmienić typ widoku kampanii, dodać animację MonsterEffect i odtworzyć dźwięk, gdy pojawi się wyskakujące okienko. Śmiało i kliknij przycisk “Dalej”, gdy będziesz zadowolony z ustawień.

Display rule actions

Następnie OptinMonster wyświetli podsumowanie ustawień reguły wyświetlania. Pomaga to upewnić się, że poprawnie skonfigurowałeś, kiedy Twoje kampanie pojawią się w Twojej witrynie.

Display rule summary

Teraz możesz rozpocząć kampanię i opublikować wyskakujące okienko formularza kontaktowego. Aby to zrobić, przejdź do zakładki “Publikuj” u góry.

Następnie możesz kliknąć przycisk “Podgląd” przed opublikowaniem kampanii. Pokaże ci to Podgląd na żywo, jak twoje wyskakujące okienko będzie wyglądać w Twojej witrynie.

Jeśli jesteś zadowolony z wyglądu kampanii, Zmień “status publikacji” z wersji roboczej na publikację.

Publish your contact form popup

Możesz wyjść z narzędzia OptinMonster campaign builder i sprawdzić status swojej kampanii również z pulpitu WordPress.

Po prostu idź do OptinMonster ” Kampanie w kolumnie Status w wyskakującym okienku formularza kontaktowego powinno być wyświetlane “Opublikowane”.

Check status of your campaign

Następnie przejdź do przycisku Skontaktuj się z nami utworzonego wcześniej za pomocą MonsterLink i zobacz wyskakujące okienko formularza kontaktowego w akcji.

Live example of contact form plugin

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać wyskakujące okienko formularza kontaktowego w WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak wybrać najlepszy kreator stron internetowych lub nasze porównanie najlepszego oprogramowania kadrowo-płacowego dla małych firm.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…