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 dodać wysuwany formularz kontaktowy w WordPress (prosty poradnik)

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Czy chcesz dodać wysuwany formularz kontaktowy w WordPress?

Jeśli twoja firma polega na pozyskiwaniu nowych potencjalnych klientów z formularza kontaktowego na twojej witrynie internetowej, to jednym z najlepszych sposobów na zwiększenie źródła potencjalnych klientów jest powiadomienie o formularzu kontaktowym.

W tym artykule pokażemy, jak dodać wysuwany formularz kontaktowy w WordPress bez irytowania twoich użytkowników.

How to Add a Slide Out Contact Form in WordPress

Dlaczego warto dodać wysuwany formularz kontaktowy w WordPress?

Wielu właścicieli małych firm uruchamia swoją witrynę internetową z nadzieją, że pomoże ona rozwinąć ich biznes.

Dlatego dodajesz stronę z formularzem kontaktowym, aby użytkownicy mogli się z Tobą skontaktować.

Problem polega jednak na tym, że większość użytkowników, którzy mają pytania, opuści twoją witrynę internetową WordPress, nie kontaktując się z tobą ani nawet nie przechodząc na twoją stronę kontaktową.

Dlatego możesz powiadomić, że wiele popularnych witryn internetowych dodaje wyskakujące okienka formularza kontaktowego, pokaz slajdów kontaktowych lub przyciski wezwania do działania, które otwierają formularze kontaktowe.

Te animowane i interaktywne opcje przyciągają uwagę do formularza kontaktowego i pozwalają użytkownikom szybko go wypełnić bez konieczności przechodzenia na inną stronę. Takie formularze znacznie zwiększają twoją konwersję.

Mając to na uwadze, przyjrzyjmy się, jak utworzyć wysuwany formularz kontaktowy w WordPress.

Dodawanie wysuwanego formularza kontaktowego w WordPress

Do tego poradnika będziesz potrzebował WPForms. Jest to najlepsza wtyczka do formularzy kontaktowych WordPress na rynku, ponieważ jest zarówno łatwa, jak i potężna.

Możesz skorzystać z darmowej wersji wtyczki formularza kontaktowego WPForms, jeśli nie potrzebujesz wszystkich funkcji premium.

Będziesz także potrzebował OptinMonster. Jest to najpotężniejsze oprogramowanie do optymalizacji konwersji. Pomaga przekształcić porzucających witrynę odwiedzających w klientów. W tym poradniku użyjemy darmowej wersji OptinMonster.

Krok 1: Tworzenie formularza kontaktowego w WordPress

Najpierw należy zainstalować i włączyć wtyczkę WPForms. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę WPForms ” Add New, aby utworzyć nowy formularz kontaktowy. Spowoduje to uruchomienie interfejsu kreatora WPForms.

W górnej części strony wpisz nazwę twojego formularza kontaktowego. Następnie musisz najechać kursorem myszy na szablon „Prosty formularz kontaktowy” i kliknąć przycisk „Użyj szablonu”.

Create a new contact form

WPForms utworzy nowy formularz na podstawie szablonu Simple Contact Form.

Podgląd formularza będzie widoczny w prawym panelu kreatora formularzy. Możesz kliknąć dowolne pole, aby je edytować lub utwórz nowe pola formularza z lewej kolumny.

WPForms Form Builder

Więcej szczegółów można znaleźć w naszym przewodniku na temat tworzenia formularza kontaktowego WordPress.

Po zakończeniu edycji formularza wystarczy kliknąć przycisk „Zapisz”, aby zapisać twoje zmiany.

Następnie należy kliknąć przycisk „Osadzaj” u góry, aby uzyskać kod osadzania twojego formularza.

Spowoduje to wyświetlenie wyskakującego okienka pokazującego kilka sposobów osadzania twojego formularza. Wystarczy kliknąć odnośnik „użyj krótkiego kodu”, a następnie skopiować krótki kod. Będzie on potrzebny w następnym kroku.

Click the use a shortcode link

Krok 2: Tworzenie Slide Out Optin w OptinMonster

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

Musisz zainstalować i włączyć darmową wtyczkę OptinMonster. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Ta wtyczka działa jako łącznik między twoją witryną internetową a kontem OptinMonster.

Po włączaniu kreator konfiguracji OptinMonster uruchomi się automatycznie. Umożliwi to utworzenie nowego konta lub połączenie istniejącego konta.

Alternatywnie można przejść do strony OptinMonster ” Ustawienia, gdzie można utworzyć lub połączyć konto.

OptinMonster Sign Up or Log In

Po utworzeniu lub podłączeniu twojego konta OptinMonster, możesz utworzyć nowy optin.

Wystarczy przejść do strony OptinMonster ” Kampanie i kliknąć przycisk „Utwórz nową”. Jeśli nie masz jeszcze żadnych kampanii, możesz również kliknąć przycisk „Utwórz twoją pierwszą kampanię”.

Adding a New Campaign in OptinMonster

OptinMonster oferuje różne rodzaje kampanii dynamicznych.

W tym poradniku będziemy używać kampanii typu „Slide-in”. Kliknij i wybierz „Slide-in” jako twój rodzaj kampanii.

Select a Campaign Type and Template in OptinMonster

Następnie należy wybrać szablon. OptinMonster oferuje kilka gotowych szablonów.

Na potrzeby tego poradnika należy wybrać szablon „Canvas”. Możesz go łatwo znaleźć za pomocą funkcji wyszukiwania, a następnie kliknąć przycisk „Użyj szablonu”, który pojawia się po najechaniu na niego kursorem myszy.

Po wybraniu szablonu zostaniesz poproszony o podanie nazwy twojej kampanii. Pomoże to łatwo zlokalizować kampanię w twoim kokpicie OptinMonster.

Name Your OptinMonster Campaign

Następnie kliknij przycisk „Rozpocznij tworzenie”. Teraz OptinMonster będzie wczytywał interfejs kreatora kampanii. Po prawej stronie zobaczysz podgląd twojej kampanii na żywo.

Zobaczysz różne bloki w menu po twojej lewej stronie. Musisz znaleźć blok WPForms i przeciągnąć go na twój szablon.

Dragging the WPForms Block in OptinMonster

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

Musisz kliknąć menu rozwijane „Wybór formularza” w ustawieniach bloku w lewym menu i wybrać opcję „Dodaj krótki kod ręcznie”.

To pozwoli ci wkleić twój krótki kod formularza kontaktowego WPForms w bloku. Skopiowałeś go wcześniej w poradniku.

Paste the Shortcode for Your WPCode Form Into OptinMonster

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

Można na przykład zmienić obrazek, klikając na niego i korzystając z ustawień po lewej stronie. Możesz go też usunąć, najeżdżając kursorem myszy na blok i klikając ikonkę kosza.

Deleting Blocks in OptinMonster

W tym poradniku usuniemy pozostałe bloki z optin, pozostawiając tylko blok WPForms.

Jeśli chcesz, możesz także kliknąć tło i wybrać kolor, gradient lub obrazek dla opcji z panelu ustawień po lewej stronie.

Changing the Background Color in OptinMonster

Następnie należy kliknąć kartę „Reguły wyświetlania” u góry strony, aby skonfigurować, kiedy i w jaki sposób optin będzie wyświetlany.

Powinieneś spojrzeć na kartę „Warunki” u dołu ekranu. Tutaj domyślne ustawienia spowodują wyświetlenie optin na dowolnej stronie po 5 sekundach. Powinno to działać w przypadku większości witryn internetowych.

OptinMonster Display Settings Conditions

Następnie należy kliknąć kartę „Działania” u dołu strony.

Domyślnie podczas wyświetlania opcji nie jest wyświetlana żadna animacja ani dźwięk. Jeśli chcesz, możesz wybrać opcję z listy rozwijanej „Animuj za pomocą MonsterEffects”, na przykład „Wsuń (z lewej)”.

OptinMonster Display Rules Actions

Po zakończeniu konfigurowania reguł wyświetlania należy kliknąć przycisk „Zapisz” u góry, aby zapisać twoje ustawienia, a następnie kliknąć przycisk „Opublikuj”.

Na następnym ekranie należy zmienić status publikacji na „Opublikuj”. Dzięki temu optin będzie dostępny na twoim blogu lub witrynie internetowej WordPress.

Changing the Publish Status in OptinMonster

Krok 3: Wyświetlanie wysuwanego formularza kontaktowego w WordPress

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

Możesz zamknąć stronę stanu publikacji, klikając ikonkę „X” w prawym górnym rogu. Powinieneś teraz zobaczyć stronę, która pozwala skonfigurować „Ustawienia wyjściowe WordPress” oraz „Widoczność i status” opcji.

Po przewinięciu sekcji „Widoczność i status” w dół, zwykle chcesz, aby kampania była widoczna dla wszystkich odwiedzających i zalogowanych użytkowników. Dostępne są jednak opcje „Tylko odwiedzający” i„Tylko zalogowani użytkownicy”.

Visibility and Status Settings in OptinMonster

Następnie z rozwijanego menu Status należy wybrać opcję „Published”. Gdy to zrobisz, powinieneś kliknąć przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Użytkownik może teraz przejść na twoją witrynę internetową, aby zobaczyć wysuwany formularz kontaktowy w działaniu.

Slide Out Contact Form Preview

Przewodniki ekspertów dotyczące korzystania z formularzy WordPress

Teraz, gdy już wiesz, jak utworzyć wysuwany formularz kontaktowy, możesz zapoznać się z innymi naszymi przewodnikami po formularzach 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 naszym przewodnikiem na temat tego, jak zwiększyć ruch na twojej witry nie WordPress i naszą ekspercką listą najlepszych wtyczek do ankiet 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

3 komentarzeZostaw odpowiedź

  1. 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!

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ę.