Jak dodać wysuwany formularz kontaktowy w WordPressie (łatwy samouczek)

Może być frustrujące, gdy ludzie odwiedzają Twoją witrynę WordPress, ale nigdy się nie kontaktują. Być może przeglądają Twoje strony, nawet spędzają kilka minut na czytaniu, ale Twój formularz kontaktowy nie otrzymuje żadnych zgłoszeń.

Często nie chodzi o to, że odwiedzający nie chcą się skontaktować. Po prostu nie widzą łatwego lub zachęcającego sposobu, aby to zrobić.

Właśnie dlatego wysuwany formularz kontaktowy może zrobić dużą różnicę. Pojawia się delikatnie z boku, oferując pomoc dokładnie wtedy, gdy odwiedzający jej potrzebują, nie przerywając ich doświadczenia.

W tym przewodniku pokażemy Ci, jak krok po kroku dodać wysuwany formularz kontaktowy do Twojej witryny WordPress, korzystając z niezawodnej i przetestowanej metody. 🧑‍💻

Dlaczego warto dodać wysuwany formularz kontaktowy w WordPress? 💭

Wysuwany formularz kontaktowy ułatwia odwiedzającym kontakt bez opuszczania strony, na której się znajdują. Delikatnie wysuwa się z boku, przyciąga uwagę i pozwala użytkownikom wysłać szybką wiadomość, gdy tylko potrzebują pomocy.

Wielu właścicieli małych firm dodaje stronę kontaktową, mając nadzieję, że odwiedzający z niej skorzystają i że pomoże to rozwinąć ich biznes.

Jednak w rzeczywistości większość ludzi odchodzi, nigdy się nie kontaktując. Dlatego popularne strony internetowe używają popupów kontaktowych, suwaków lub pływających przycisków, aby ułatwić komunikację.

Te animowane i interaktywne opcje przyciągają uwagę do formularza kontaktowego, sprawiając, że Twoja witryna wydaje się bardziej interaktywna i przystępna. Dzięki temu możesz łatwiej zamienić przypadkowych odwiedzających w prawdziwych potencjalnych klientów lub klientów.

Mając to na uwadze, podzielimy się tym, jak utworzyć wysuwany formularz kontaktowy w WordPress. Oto szybki przegląd wszystkich rzeczy, które omówimy w tym przewodniku:

Zacznijmy.

Dodawanie wysuwanego formularza kontaktowego w WordPressie

Do tego samouczka będziesz potrzebować WPForms. Jest to najlepsza wtyczka formularza kontaktowego WordPress na rynku, ponieważ jest zarówno łatwa, jak i potężna.

ℹ️ Uwaga: WPForms obsługuje wszystkie nasze formularze na WPBeginner, w tym nasz formularz kontaktowy. Jest łatwy w użyciu, wysoce konfigurowalny, a nowe narzędzia AI sprawiają, że tworzenie formularzy jest szybsze niż kiedykolwiek.

Ciekawi Cię, jak to działa? Sprawdź naszą pełną recenzję WPForms, aby dowiedzieć się wszystkiego, co potrafi.

Aby przejść przez ten samouczek, możesz użyć darmowej wersji wtyczki formularza kontaktowego WPForms, jeśli nie potrzebujesz żadnych z jej funkcji premium (logika warunkowa, zaawansowane integracje i inne).

Następnie połączysz swój formularz z OptinMonster. Jest to najpotężniejsze oprogramowanie do optymalizacji konwersji, które pomaga przekształcić porzuconych odwiedzających stronę internetową w klientów.

Krok 1: Tworzenie formularza kontaktowego w WordPress

Najpierw musisz zainstalować i aktywować wtyczkę WPForms. Z obszaru administracyjnego WordPress przejdź do Wtyczki » Dodaj nową wtyczkę , aby rozpocząć.

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

W wynikach wyszukiwania po prostu kliknij „Zainstaluj teraz”, a następnie „Aktywuj”, aby zakończyć proces.

Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress

Po aktywacji musisz przejść na stronę WPForms » Dodaj nowy, aby utworzyć nowy formularz kontaktowy. Spowoduje to uruchomienie interfejsu konstruktora WPForms.

Wpisz nazwę swojego formularza kontaktowego na górze strony.

Następnie musisz najechać kursorem myszy na szablon „Prosty formularz kontaktowy” i kliknąć przycisk „Użyj szablonu”.

WPForms utworzy nowy formularz na podstawie szablonu prostego formularza kontaktowego.

Podgląd formularza zobaczysz w prawym panelu kreatora formularzy. Możesz kliknąć dowolne pole, aby je edytować, lub dodać nowe pola formularza z lewej kolumny.

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

Po zakończeniu edycji formularza kliknij przycisk „Zapisz”, aby zachować zmiany.

Następnie musisz kliknąć przycisk „Osadź” na górze, aby uzyskać kod osadzania formularza.

Spowoduje to wyświetlenie okna podręcznego pokazującego różne sposoby osadzania formularza. Po prostu kliknij link „użyj krótkiego kodu”, a następnie skopiuj krótki kod. Będzie on potrzebny w następnym kroku.

Krok 2: Tworzenie kampanii wysuwanej w OptinMonster

Teraz stworzymy kampanię wysuwaną, która wyświetli formularz kontaktowy utworzony w pierwszym kroku.

Musisz zainstalować i aktywować darmową wtyczkę OptinMonster. Ta wtyczka działa jako łącznik między Twoją stroną internetową a kontem OptinMonster.

ℹ️ Uwaga: W WPBeginner używamy OptinMonster do promowania ekskluzywnych ofert za pomocą wyskakujących okienek, okienek wsuwanych i banerów. Jest to wszechstronne narzędzie, które zwiększa zaangażowanie i bez wysiłku powiększa naszą listę e-mailową.

Chcesz wiedzieć więcej? Sprawdź naszą kompletną recenzję OptinMonster, aby poznać jej funkcje.

Na początek załóżmy konto OptinMonster. Na ich stronie kliknij przycisk „Get OptinMonster Now”, wybierz plan i zakończ proces rejestracji.

Po wykonaniu tej czynności zostaniesz przekierowany do swojego panelu OptinMonster.

Teraz przejdź do Wtyczki » Dodaj nową wtyczkę w swoim panelu WordPress, aby zainstalować wtyczkę OptinMonster.

Następnie po prostu użyj funkcji wyszukiwania, aby szybko znaleźć wtyczkę OptinMonster.

Gdy ją znajdziesz, kliknij przycisk „Zainstaluj teraz”, a następnie „Aktywuj”.

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

Po aktywacji kreator konfiguracji OptinMonster uruchomi się automatycznie. Pozwoli Ci to utworzyć nowe konto lub połączyć istniejące.

Po utworzeniu lub podłączeniu konta OptinMonster możesz utworzyć nową kampanię opt-in.

Po prostu przejdź do strony OptinMonster » Kampanie i kliknij przycisk „Dodaj nową”. Jeśli nie masz jeszcze żadnych kampanii, możesz również kliknąć przycisk „Utwórz pierwszą kampanię”.

OptinMonster oferuje różne rodzaje dynamicznych kampanii.

W tym samouczku będziemy używać kampanii „Slide-in”.

Kliknij, aby wybrać „Slide-in” jako typ kampanii.

Następnie musisz wybrać szablon. OptinMonster oferuje kilka gotowych szablonów.

W tym samouczku musisz wybrać opcję „Canvas”.

Możesz łatwo znaleźć to za pomocą funkcji wyszukiwania, a następnie kliknąć przycisk „Użyj szablonu”, który pojawia się po najechaniu na niego myszą.

Po wybraniu szablonu zostaniesz poproszony o podanie nazwy swojej kampanii. Pomoże Ci to łatwo zlokalizować kampanię w Twoim panelu OptinMonster.

Następnie kliknij przycisk „Rozpocznij budowanie”.

Teraz OptinMonster załaduje interfejs kreatora kampanii.

Po prawej stronie zobaczysz podgląd swojej kampanii na żywo, a po lewej menu z różnymi blokami.

Po prostu znajdź blok WPForms, a następnie przeciągnij i upuść go na obszar podglądu.

Teraz blok WPForms pojawi się w szablonie, a jego ustawienia zobaczysz po lewej stronie.

Będziesz musiał kliknąć menu rozwijane „Wybór formularza” z ustawień bloku w lewym menu i wybrać opcję „Dodaj krótki kod ręcznie”.

Pozwoli to na wklejenie krótkiego kodu formularza kontaktowego WPForms shortcode. Skopiowałeś go wcześniej w samouczku.

Teraz możesz usunąć lub dostosować inne bloki w formularzu.

Na przykład, możesz zmienić obraz, klikając na niego i używając ustawień po lewej stronie.

Możesz też po prostu usunąć go, najeżdżając kursorem myszy na blok i klikając ikonę „Kosz”.

W tym samouczku usuniemy inne bloki z formularza zapisu, pozostawiając tylko blok WPForms.

Jeśli chcesz, możesz również kliknąć tło i wybrać kolor, gradient lub obraz dla tej opcji z panelu ustawień po lewej stronie.

Następnie musisz kliknąć zakładkę „Zasady wyświetlania” na górze strony, aby skonfigurować, kiedy i jak optin będzie wyświetlany.

Powinieneś spojrzeć na zakładkę „Warunki” na dole ekranu. Tutaj domyślne ustawienia wyświetlą formularz zapisu na każdej stronie po 5 sekundach. Powinno to działać dla większości stron internetowych.

Następnie powinieneś kliknąć zakładkę „Akcje” na dole strony.

Domyślnie nie ma animacji ani dźwięku podczas wyświetlania formularza opt-in. Jeśli chcesz, możesz wybrać opcję z listy rozwijanej „Animuj za pomocą MonsterEffects”, na przykład „Przesuń (od lewej)”.

Po zakończeniu konfigurowania Zasad wyświetlania, musisz kliknąć przycisk „Zapisz” u góry, aby zapisać swoje ustawienia, a następnie kliknąć przycisk „Opublikuj”.

Na następnym ekranie musisz zmienić Status publikacji na „Opublikuj”. Sprawi to, że opt-in będzie dostępny w Twoim blogu WordPress lub witrynie internetowej.

Krok 3: Wyświetlanie formularza kontaktowego typu slide-out w WordPress

Teraz, gdy utworzyłeś zarówno formularz kontaktowy, jak i kampanię wysuwaną, jesteś gotowy, aby wyświetlić je na swojej stronie internetowej.

Stronę Status publikacji możesz zamknąć, klikając ikonę „X” w prawym górnym rogu. Powinieneś teraz zobaczyć stronę, która pozwala skonfigurować „Ustawienia wyjściowe WordPressa” oraz „Widoczność i Status” formularza.

Po przewinięciu w dół sekcji „Widoczność i status” zazwyczaj chcesz, aby kampanię widzieli „Wszyscy odwiedzający i zalogowani użytkownicy”. Istnieją jednak opcje „Tylko odwiedzający” i „Tylko zalogowani użytkownicy“.

Po wykonaniu tej czynności kliknij przycisk „Zapisz zmiany”, aby zachować ustawienia.

Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć formularz kontaktowy wysuwany w akcji:

FAQ: Dodaj wysuwany formularz kontaktowy w WordPress

Teraz, gdy wiesz, jak dodać wysuwany formularz kontaktowy w WordPress, przejdźmy przez kilka częstych pytań, które użytkownicy często zadają.

Jaki jest idealny rozmiar dla wysuwanego okna?

Szerokość około 400–600 px i wysokość 300–400 px zazwyczaj działa dobrze. Powinno się wyróżniać, nie zasłaniając zbyt dużej części strony.

Jaka jest różnica między wysuwanym oknem, wyskakującym okienkiem i nakładką?

Formularz wysuwany pojawia się z boku, popup pojawia się na środku, a nakładka zakrywa cały ekran. Formularze wysuwane są zazwyczaj mniej inwazyjne, ale każda opcja może pomóc zwiększyć zaangażowanie – po prostu wybierz to, co najlepiej pasuje do stylu Twojej witryny.

Jakie są najlepsze alternatywy dla formularzy wyskakujących?

Możesz używać formularzy wbudowanych, pływających pasków lub formularzy wysuwanych, aby zapewnić płynniejsze i mniej zakłócające wrażenia użytkownika.

Dodatkowe zasoby dotyczące korzystania z formularzy WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać wysuwany formularz kontaktowy w WordPress.

Możesz również zapoznać się z innymi naszymi poradnikami dotyczącymi formularzy WordPress:

• Jak wyświetlić pływający formularz kontaktowy w WordPress
• Jak dodać wyskakujący formularz kontaktowy w WordPress
• Najlepsze praktyki projektowania strony z formularzem kontaktowym (z przykładami)
• Jak używać formularza kontaktowego do rozbudowy listy e-mailowej w WordPressie
• Jak blokować spam w formularzach kontaktowych w 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.