Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak wyświetlić pływający formularz kontaktowy w WordPress (3 metody)

Wielu właścicieli witryn internetowych ma trudności z zapewnieniem łatwego dostępu do opcji kontaktowych bez zaśmiecania projektu witryny. Pływające formularze kontaktowe oferują rozwiązanie, umożliwiając użytkownikom łatwy kontakt, niezależnie od tego, gdzie znajdują się na twojej witrynie.

Wykorzystaliśmy tę strategię na naszych własnych witrynach internetowych, aby zbierać uwagi użytkowników i umożliwić im łatwy kontakt z nami. Na szczęście istnieje wiele wtyczek WordPress, które mogą pomóc ci zrobić to samo na twojej witrynie.

W tym artykule pokażemy, jak wyświetlić pływający formularz kontaktowy w WordPress.

Show a floating contact form in WordPress in post image

Co to jest pływający formularz kontaktowy i dlaczego warto go używać?

Pływający formularz kontaktowy pozostaje na ekranie, na przykład w dolnym rogu lub panelu bocznym, gdy odwiedzający przeglądają witrynę internetową. Zazwyczaj pojawia się jako mały przycisk lub ikonka, która po kliknięciu lub najechaniu na nią rozwija się w pełny formularz.

Oto kilka korzyści płynących z korzystania z pływającego formularza kontaktowego:

  • Dostępność. Ponieważ formularz unosi się i pozostaje poprawiony, odwiedzający witrynę mogą uzyskać do niego dostęp z dowolnej strony internetowej w dowolnym momencie.
  • Minimalna ingerencja. W przeciwieństwie do wyskakujących okienek, które mogą zakłócać doświadczenie użytkownika, pływające formularze są zazwyczaj mniej uciążliwe, a jednocześnie pozostają powiadomieniem.
  • Wezwanie do działania. Stała obecność pływającego formularza delikatnie przypomina użytkownikom o zaangażowaniu, co pomaga zwiększyć liczbę konwersji.

Jako właściciel witryny internetowej możesz użyć pływającego formularza kontaktowego do obsługi klientów, zapytań sprzedażowych i zbierania uwag.

Umożliwiając odwiedzającym natychmiastowe uzyskanie pomocy podczas przeglądania witryny, zadawanie pytań bez opuszczania strony lub dzielenie się sugestiami w dowolnym momencie, pływający formularz kontaktowy może poprawić komfort korzystania z Twojej witryny internetowej.

WordPress umożliwia wyświetlanie pływającego formularza kontaktowego na wiele sposobów.

W poniższych sekcjach podzielimy się trzema prostymi metodami wyświetlania pływającego formularza kontaktowego na witrynie internetowej WordPress. Po prostu skorzystaj z poniższych odnośników, aby wybrać metodę, której chcesz użyć:

Zaczynajmy!

Metoda 1: Tworzenie pływającego formularza kontaktowego w WordPress przy użyciu UserFeedback

Jeśli chcesz stworzyć prosty pływający formularz kontaktowy z prostymi opcjami konfiguratora, ta metoda jest dla Ciebie.

UserFeedback to wtyczka WordPress, która pomaga tworzyć konfigurowalne formularze uwag, pływające formularze kontaktowe i wyskakujące ankiety. Wtyczka ta zawiera wbudowane szablony i pytania, w tym dla witryn internetowych i formularzy ankiet e-handlu.

Używamy UserFeedback na naszych własnych witrynach internetowych, a więcej informacji można znaleźć w naszej pełnej recenzji UserFeedback.

Korzystając z UserFeedback, możesz ulepszyć swoją witrynę internetową w oparciu o rzeczywiste opinie użytkowników, zwiększyć zadowolenie klientów i szybko rozwiązywać wszelkie problemy.

userfeedback-homepage

Najpierw należy zainstalować i włączyć wtyczkę UserFeedback. Jeśli nie wiesz, jak zainstalować wtyczkę, możesz skorzystać z naszego przewodnika na temat instalacji wtyczek WordPress.

Po włączaniu UserFeedback na twojej witrynie internetowej, możesz rozpocząć tworzenie pierwszego formularza ankiety. W twoim kokpicie WordPress przejdź do UserFeedback ” Ankiety ” Utwórz nową.

UserFeedback's Add New button

Gdy to zrobisz, przejdziesz do sekcji „Konfiguracja”.

W UserFeedback możesz zacząć od pustej strony z opcją „Start from Scratch” lub użyć gotowego szablonu. W tym przewodniku użyjemy szablonu „Website Feedback”.

Aby wybrać szablon, wystarczy go kliknąć.

UserFeedback's Website Feedback template

Uwagi: Chociaż dostępna jest darmowa wersja UserFeedback, możesz uaktualnić ją do wersji premium, aby odblokować więcej szablonów, uzyskać dostęp do większej liczby rodzajów pytań, włączyć ustawienia targetowania i zachowania i nie tylko. W tym poradniku będziemy używać UserFeedback Pro.

Następnie edytujmy kopię. W tym przykładzie zmieniamy etykietę „Uwagi dotyczące witryny internetowej” na „Czy masz jakieś uwagi?”.

Następnie warto kliknąć menu rozwijane „Rodzaj pytania”, aby wybrać sposób, w jaki odwiedzający mogą odpowiedzieć na to pytanie. W tym przykładzie wybierzemy „Pojedyncze pole tekstowe”.

Następnie można zmienić pytanie na „Nazwa”.

Configuring UserFeedback's questions

Teraz potrzebne będzie kolejne pole na adres e-mail użytkownika.

Możesz przewinąć nieco w dół i kliknąć przycisk „Dodaj pytanie”. Gdy to zrobisz, skonfiguruj twój rodzaj pytania i tytuł, tak jak w poprzednim kroku.

The new question on UserFeedback's contact form

Kolejnym krokiem jest konfiguracja ustawień formularza.

W karcie „Ustawienia” możesz włączać śledzenie twoich zobacz i odpowiedzi na formularze za pomocą Google Analytics i MonsterInsights. Wystarczy włączyć śledzenie Google Analytics, aby korzystać z tej funkcji.

Enable Google Analytics tracking on UserFeedback

Jeśli chcesz dowiedzieć się więcej na temat korzystania z Google Analytics do śledzenia, możesz przeczytać nasz przewodnik na temat konfigurowania celów Google Analytics dla Twojej witryny WordPress.

Następnie warto przewinąć kartę w dół, aby skonfigurować kierowanie i zachowanie.

W sekcji „Targetowanie” możesz wybrać rodzaj urządzenia i stronę internetową, na której będzie wyświetlany twój formularz ankiety.

Opcje rodzaju urządzenia obejmują komputer stacjonarny, tablet i telefon komórkowy. Jeśli chcesz, aby formularz był wyświetlany na wszystkich tych urządzeniach, możesz wybrać wszystkie trzy.

Następnie możesz wybrać wszystkie strony, na których chcesz wyświetlać pływający formularz. Zalecamy wybranie opcji „Wszystkie strony”, aby odwiedzający mogli uzyskać dostęp do twojego formularza w dowolnym miejscu witryny internetowej.

The Targeting section in UserFeedback's Settings tab

Po zakończeniu przewińmy w dół i skonfigurujmy zachowanie formularza. Tutaj ustawisz:

  • Czas wyświetlania. Wybierz, kiedy twój formularz pojawi się na twoich stronach.
  • Długość wyświetlania. Określ, jak często Twój formularz będzie wyświetlany odwiedzającym.
  • Czas działania ankiety. Określ, jak długo twój formularz będzie wyświetlany na wyznaczonych stronach.
The Behavior settings for a UserFeedback form

Teraz możesz przejść do następnego kroku.

W karcie „Powiadomienia” wpisz adres e-mail, na który będą przychodzić powiadomienia o wypełnieniu formularza. Możesz dodać wielu odbiorców, ale musisz upewnić się, że używasz przecinka, aby oddzielić każdego z nich.

The email recipient field in UserFeedback's Notifications tab

Na koniec warto poświęcić trochę czasu na sprawdzenie twojego formularza po raz ostatni przed jego sfinalizowaniem.

W górnej części karty „Opublikuj” zobaczysz „Podsumowanie uwag dotyczących witryny internetowej”. Możesz przejrzeć wypunktowane punkty jeden po drugim, aby sprawdzić, czy konfiguracje twojego formularza są prawidłowe.

UserFeedback's form summary

Jeśli wszystko wygląda dobrze, możesz przewinąć w dół do sekcji „Opublikuj”.

Tam można zmienić status z „Wersja robocza” na „Opublikuj”. Alternatywnie można zaplanować uruchomienie, przełączając opcję „Zaplanuj na później” i definiując datę i godzinę.

The Draft and Publish button on UserFeedback

Po zakończeniu kliknij „Zapisz i opublikuj”, aby wyświetlić twój formularz.

I to wszystko! Udało ci się wyświetlić pływający formularz kontaktowy na twojej witrynie internetowej WordPress za pomocą UserFeedback.

UserFeedback's floating contact form on a live website

Metoda 2: Tworzenie pływającego formularza kontaktowego w WordPress przy użyciu WPForms i OptinMonster

Jeśli chcesz mieć większą kontrolę nad twoim pływającym formularzem kontaktowym, to jest to metoda dla ciebie. Użyjemy WPForms do stworzenia formularza i OptinMonster, aby sprawić, by unosił się na twojej witrynie WordPress.

WPForms to łatwa w użyciu wtyczka typu „przeciągnij i upuść” do tworzenia formularzy WordPress. Dzięki ponad 1800 dostępnym szablonom można szybko skonfigurować formularz za pomocą zaledwie kilku kliknięć. Aby dowiedzieć się więcej, zapoznaj się z naszą pełną recenzją WPForms.

WPForms website

Aby tworzyć formularze za pomocą WPForms, pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki na twojej witrynie internetowej. Jeśli potrzebujesz dalszej pomocy, możesz przeczytać nasz przewodnik na temat instalacji wtyczki WordPress.

Po włączaniu możesz przejść do WPForms ” Add New z twojego kokpitu WordPress.

The Add New button under WPForms in the WordPress admin area

Spowoduje to przekierowanie do interfejsu kreatora formularzy.

Tam wystarczy wpisać nazwę twojego formularza i wybrać szablon. W tym przykładzie utwórzmy formularz kontaktowy i nazwijmy go „Formularz kontaktowy”.

The Contact Form copy in the Name Your Form field in WPForms' Setup panel

Po nadaniu nazwy twojemu formularzowi możesz przewinąć panel w dół, aby wybrać szablon.

W tym przykładzie użyjemy opcji „Prosty formularz kontaktowy”. Aby rozpocząć tworzenie, po prostu najedź na niego kursorem i kliknij „Użyj szablonu”.

The Use Template button for Simple Contact Form in WPForm's Setup panel

Spowoduje to przekierowanie do panelu „Pola” kreatora formularzy.

W tym miejscu możesz przejrzeć swój formularz kontaktowy i dostosować wstępnie przygotowaną treść. Jeśli wszystko wygląda już dobrze, możesz kliknąć przycisk „Zapisz”.

The Save button on WPForms' form builder interface

Aby uzyskać szczegółowe instrukcje, zapraszamy do zapoznania się z naszym przewodnikiem krok po kroku na temat tworzenia formularza kontaktowego.

Po zakończeniu tworzenia twojego formularza nadszedł czas, aby dostosować jego ustawienia, tak aby był wyświetlany jako formularz pływający.

W tym celu musisz zainstalować OptinMonster i połączyć twoją witrynę internetową WordPress z wtyczką.

OptinMonster to potężna wtyczka do generowania leadów i popupów. Może pomóc w tworzeniu i zarządzaniu kampaniami w celu przekształcenia odwiedzających w subskrybentów i płacących klientów.

Możesz sprawdzić nasz szczegółowy przewodnik na temat budowania listy mailingowej za pomocą OptinMonster.

OptinMonster's homepage

Po włączaniu możesz kliknąć pozycję menu „OptinMonster” z twojego kokpitu WordPress.

Następnie zobaczysz ekran powitalny, na którym możesz kliknąć „Połącz twoje istniejące konto”, aby rozpocząć korzystanie z wtyczki.

Connect your existing account

Otworzy się nowe okno, w którym możesz kliknąć „Połącz z WordPress”.

OptinMonster poprosi następnie o podanie danych twojego konta, aby zakończyć proces.

Connect OptinMonster to WordPress

Po weryfikacji możesz utworzyć swoją pierwszą kampanię.

Aby rozpocząć, po prostu przejdź do OptinMonster ” Kampanie z twojego kokpitu WordPress.

OptinMonster's Campaigns menu item

Po przejściu do sekcji „Kampanie” możesz utworzyć i skonfigurować twój pływający formularz.

Aby rozpocząć, wystarczy kliknąć przycisk „Utwórz twoją pierwszą kampanię”.

OptinMonster's Create Your First Campaign button

Teraz czas wybrać rodzaj kampanii.

OptinMonster oferuje różne rodzaje kampanii, w tym pływający pasek. Choć może się to wydawać idealnym rodzajem kampanii, pływający pasek ma ograniczoną przestrzeń. Warto więc użyć go w innych przypadkach, takich jak ogłaszanie promocji sprzedaży lub udostępnianie kodów kuponów.

Jeśli chcesz dowiedzieć się więcej na temat korzystania z pływającego paska, zalecamy zapoznanie się z naszym przewodnikiem na temat tworzenia przypiętego pływającego paska stopki w WordPress.

Aby zachować schludny wygląd, możesz wybrać „Slide-in” jako rodzaj kampanii do dodania twojego formularza kontaktowego WPForms.

Pływający slider pozostanie w prawym dolnym rogu ekranu użytkownika. Dzięki temu twoja treść będzie czytelna, projekt strony uporządkowany, a wrażenia użytkownika świetne.

Wystarczy kliknąć rodzaj kampanii, aby z niej skorzystać.

OptinMonster's slide-in campaign type

Następnie przewińmy panel w dół i wybierzmy szablon.

Aby użyć szablonu, wystarczy najechać kursorem na blok szablonu i kliknąć „Użyj szablonu”. Tutaj wybieramy „Subskrybuj biuletyn (Light)”.

Subscribe to Newsletter template with Use Template highlighted

Po wybraniu twojego rodzaju kampanii i szablonu pojawi się wyskakujące okienko.

Musisz tylko nadać swojej kampanii nazwę. W tym przykładzie nazwiemy naszą kampanię „Floating Contact Form”.

Po wybraniu nazwy możesz kliknąć „Rozpocznij tworzenie”.

The pop-up window to name your OptinMonster campaign

Następnie OptinMonster przekieruje Cię do kreatora kampanii.

Interfejs tworzenia kampanii składa się z dwóch sekcji. Lewa strona zawiera wszystkie funkcje, które możesz dodać do swojej kampanii, a prawa to podgląd na żywo.

Więcej informacji można znaleźć w naszym poradniku na temat dodawania wysuwanego formularza kontaktowego w WordPress.

Aby dodać twój formularz kontaktowy WPForms, możesz przewinąć lewy panel w dół, aby zlokalizować blok WPForms.

WPForms' block for OptinMonster's Slide in campaign type

Gdy już go znajdziesz, po prostu przeciągnij i upuść blok WPForms do podglądu na żywo w prawym panelu.

Następnie zobaczysz listę rozwijaną „Wybór formularza”. Możesz go kliknąć, a następnie wybrać „Formularz kontaktowy”. Blok w podglądzie na żywo będzie wczytywał krótki kod formularza.

WPForms' dropdown on OptinMonster

Porada eksperta: Nie martw się, jeśli nie możesz wyświetlić podglądu twojego formularza w kreatorze kampanii. Formularz pojawi się po opublikowaniu kampanii.

Następnie warto przejść do karty „Reguły wyświetlania”. Na tej karcie można ustawić czas i strony wyświetlania pływającego formularza kontaktowego.

Aby upewnić się, że twój formularz unosi się i pozostaje poprawiony od pierwszej sekundy, zalecamy ustawienie dwóch pierwszych rozwijanych pól jako „czas na stronie” i „jest natychmiastowy”.

Następnie, aby wyświetlić formularz na wszystkich stronach, można ustawić następujące listy rozwijane jako „obecna, aktualna ścieżka adresu URL” i „dowolna strona”.

Design rules configurations for showing a floating form

Po zakończeniu możesz przejść do karty „Opublikuj”.

Na tej karcie pierwszą rzeczą, którą musisz zrobić, jest zmiana statusu publikacji twojej kampanii na „Opublikuj” lub „Zaplanuj”.

Następnym krokiem jest skorzystanie z funkcji „Live Site Inspector”, aby sprawdzić, jak twoja kampania wygląda na twojej stronie internetowej. Aby to zrobić, wystarczy wpisać adres URL twojej witryny w polu tekstowym i kliknąć „Test”.

OptinMonster's Publish tab

Spowoduje to przekierowanie do nowej karty.

Jeśli wszystko wygląda tak, jak chcesz, możesz wrócić do kreatora kampanii OptinMonster i zapisać twoją kampanię.

I gotowe! Z powodzeniem utworzyłeś pływający formularz kontaktowy za pomocą WPForms i OptinMonster.

WPForms and OptinMonster's floating form on a live website

Metoda 3: Tworzenie pływającego formularza kontaktowego w WordPress przy użyciu darmowej wtyczki Floating Form

Nasza ostatnia metoda pozwoli ci wyświetlić pływającą ikonkę, która przekieruje na twoją stronę z formularzem kontaktowym. To podejście jest nieco inne, ale może być skuteczne.

Kilka darmowych wtyczek pozwala na dodanie pływających ikonek kontaktów do twojej witryny WordPress. Niektóre popularne opcje obejmują Simple Floating Menu i Float Menu. Wtyczki te zazwyczaj wymagają osadzania adresu URL w ich ustawieniach.

W tym poradniku pokażemy, jak to zrobić za pomocą Simple Floating Menu. Jeśli potrzebujesz pomocy w instalacji wtyczki, możesz przeczytać nasz przewodnik na temat instalacji wtyczek WordPress.

Przed uzyskaniem dostępu do obszaru ustawień wtyczki Simple Floating Menu, skopiujmy adres URL strony, na której wyświetlasz swój formularz kontaktowy.

Aby to zrobić, przejdź do danej strony i skopiuj adres URL z paska adresu URL.

A contact page's URL on a live website

Teraz możesz otworzyć Simple Floating Menu z twojego kokpitu WordPress.

Gdy znajdziesz się w obszarze ustawień wtyczki, będziesz chciał włączyć pływającą ikonkę formularza. Możesz to zrobić, włączając pokaz slajdów „Enable Floating Menu”. Zmieni się on z szarego na zielony lub z wyłączonego na włączony.

Następnie znajdź pole „Adres URL przycisku”, aby wkleić adres URL.

Gdy wpiszesz adres URL przycisku, powinieneś zobaczyć powiadomienie o pomyślnym zapisaniu twoich ustawień.

The Simple Floating Menu plugin's settings area with the Enable Floating Menu slider

W tym momencie twoja pływająca ikonka powinna już działać na twojej witrynie internetowej WordPress. Możesz jednak dodatkowo dostosować pozycję i wygląd przycisku.

Nad polem „Adres URL przycisku” można zmienić domyślną ikonkę na coś bardziej odpowiedniego. Wtyczka oferuje dziesiątki opcji ikonek, więc jeśli kiedykolwiek poczujesz się zagubiony, warto skorzystać z funkcji filtrowania.

„Tekst podpowiedzi” pojawi się, gdy odwiedzający witrynę najadą kursorem na pływającą ikonkę. Zalecamy wypełnienie tego pola, aby dać odwiedzającym kontekst na temat tego, dokąd zaprowadzi ich ikonka.

Następnie, jeśli chcesz przekierować odwiedzających na nową stronę po kliknięciu ikonki, po prostu zaznacz pole wyboru w polu „Otwórz w nowej karcie”.

Kolory pływającej ikonki można edytować, przewijając ekran w dół. Możesz być kreatywny z kolorami tła, ikonki i efektu najechania kursorem, o ile pasują one do twojej marki lub osobowości witryny internetowej.

Po zakończeniu kliknij przycisk „Zapisz ustawienia”.

The color settings for a Simple Floating Icon's icon display

Następnie możesz przejść do karty „Ustawienia”, aby uzyskać więcej funkcji konfiguratora.

Na tej karcie możesz wybrać miejsce wyświetlania formularza na twojej witrynie, takie jak lewy górny róg, prawy środkowy róg lub prawy dolny róg.

Dostępne są również ustawienia orientacji przycisków. Możesz wybrać pionową lub poziomą. Możesz także zmienić styl przycisku. Domyślnym kształtem jest prostokąt, ale można wybrać okrągły, trójkątny lub nawet gwiazdę.

Simple Floating Icon's Settings tab

Więcej ustawień konfiguratora można znaleźć w dolnej części panelu.

Wystarczy dostosować rozmiar twojej pływającej ikonki, style cieni, typografię i inne elementy, aby uczynić ją bardziej unikatową.

Po zakończeniu wystarczy zapisać grę, aby nie utracić twoich postępów.

Simple Floating Menu's customizations for the button, icon, and tip

Teraz możesz przejść dalej i zobaczyć, jak pływająca ikonka wygląda na twojej witrynie internetowej.

Oto jak wygląda nasza pływająca ikonka dla twojego odniesienia:

Simple Floating Menu on a live website

Alternatywa: Użyj Chatbota na Twojej witrynie internetowej

Pływający formularz kontaktowy to świetny sposób na umożliwienie odwiedzającym skontaktowania się z Tobą. Jeśli jednak chcesz zapewnić swoim użytkownikom natychmiastową odpowiedź, warto zamiast tego zainstalować chatbota.

Chatbot może być obsługiwany przez sztuczną inteligencję lub bezpośrednio przez twój zespół pomocy technicznej. Na przykład narzędzie takie jak Chatbot może pozyskiwać informacje z twojej witryny internetowej i centrum pomocy, aby natychmiast udzielać odpowiedzi odwiedzającym za pomocą sztucznej inteligencji.

ChatBot Review: Is is the right chatbot plugin for your WordPress website?

Szczegółowe informacje na temat tego, jak to skonfigurować, można znaleźć w naszym poradniku na temat dodawania chatbota w WordPress.

Mamy nadzieję, że ten przewodnik pomógł ci stworzyć i wyświetlić pływający formularz kontaktowy WordPress. Następnie warto zapoznać się z naszym przewodnikiem na temat tworzenia bardziej interaktywnych formularzy w WordPressie i naszą ekspercką listą najlepszych wtyczek do formularzy kontaktowych WordPress.

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.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

Jeden komentarzZostaw odpowiedź

  1. Syed Balkhi

    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!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.