Nie ma nic bardziej frustrującego niż wypełnianie formularza WordPress, tylko po to, by przypadkowo nacisnąć przycisk wstecz i stracić wszystko. Wszyscy przez to przechodziliśmy – i zazwyczaj wystarczy to, by ktoś od razu się poddał.
Dla właścicieli stron, ten mały problem może oznaczać utratę sprzedaży i mniejszą liczbę rejestracji. Odwiedzający odejdą zirytowani i znacznie mniej prawdopodobne jest, że wrócą i spróbują ponownie.
Dobra wiadomość? Istnieje proste rozwiązanie: wyskakujące okienko potwierdzające nawigację. To proste ostrzeżenie daje użytkownikom drugą szansę, zanim opuszczą stronę z niezłożonym formularzem.
W tym przewodniku pokażemy Ci, jak dodać tę funkcję do Twoich formularzy WordPress, aby stworzyć płynniejsze doświadczenie i zwiększyć wskaźniki ukończenia formularzy.
🧑🏫 Podsumowanie: Najprostszym sposobem na dodanie okna potwierdzającego nawigację do formularzy jest utworzenie prostego niestandardowego wtyczki. Wymaga to dodania jednego fragmentu kodu PHP i jednego fragmentu kodu JavaScript, z których oba są przedstawione krok po kroku w tym przewodniku.
Czym jest wyskakujące okienko potwierdzające nawigację i dlaczego go potrzebujesz?
Popup potwierdzający nawigację to ostrzeżenie przeglądarki, które pojawia się, gdy użytkownik z niezapisanymi zmianami w formularzu próbuje opuścić stronę internetową.
Prawdopodobnie widziałeś tę funkcję w akcji na ekranie edytora treści WordPress. Jeśli masz niezapisane zmiany i spróbujesz opuścić stronę, pojawi się ostrzegawcze wyskakujące okienko, aby zapobiec utracie pracy.
Dodanie tego do własnych formularzy to mała zmiana z wielkimi korzyściami:
- Poprawia doświadczenie użytkownika: Oszczędza odwiedzającym frustracji związanej z przypadkową utratą postępów, pokazując, że cenisz ich czas.
- Zwiększa współczynniki konwersji: Zapobiegając przypadkowemu porzuceniu, dajesz użytkownikom drugą szansę na ukończenie formularza, co może zwiększyć liczbę potencjalnych klientów.
- Buduje zaufanie użytkowników: Przemyślana funkcja, taka jak ta, demonstruje profesjonalizm i troskę, co może pomóc budować lojalność i zachęcać do powrotnych wizyt.
Mając to na uwadze, dodajmy to ostrzeżenie do komentarzy WordPress i innych formularzy na Twojej stronie.
Oto wszystko, co omówimy w tym przewodniku:
- Metoda 1: Wyświetlanie wyskakującego okienka potwierdzającego nawigację dla niezłożonych formularzy w WordPress
- Metoda 2: Dodanie wyskakującego okienka ostrzegawczego do innych formularzy na Twojej stronie WordPress
- Bonus: Popraw wydajność formularzy WordPress
- Najczęściej zadawane pytania dotyczące pop-upów potwierdzających nawigację
- Dodatkowe przewodniki dotyczące korzystania z formularzy WordPress
Gotowi? Zacznijmy.
Metoda 1: Wyświetlanie wyskakującego okienka potwierdzającego nawigację dla niezłożonych formularzy w WordPress
Metoda ta polega na stworzeniu prostej, niestandardowej wtyczki.
Nie martw się, jeśli nigdy wcześniej nie kodowałeś! Przeprowadzimy Cię przez każdy krok procesu, a to świetny sposób, aby zobaczyć, jak działają wtyczki WordPress.
Dodatkowo, możesz również pobrać wtyczkę na końcu tego samouczka, aby zainstalować ją na swojej stronie internetowej.
Jednakże, zdecydowanie zalecamy samodzielne stworzenie wtyczki, aby lepiej zrozumieć, jak działa kod. Możesz śledzić na lokalnej instalacji lub stronie stagingowej.
Najpierw musisz utworzyć nowy folder na swoim komputerze i nazwać go confirm-leaving. Wewnątrz folderu confirm-leaving utworzysz kolejny folder i nazwiesz go js.
Teraz otwórz edytor zwykłego tekstu, taki jak Notatnik, i utwórz nowy plik. Wklej w nim poniższy kod:
<?php /** * Confirm Leaving * Plugin Name: Confirm Leaving * Plugin URI: https://www.wpbeginner.com * Description: This plugin shows a warning to users when try they forget to hit submit button on a comment form. * Version: 1.0.0 * Author: WPBeginner * Author URI: https://www.wpbeginner.com * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ function wpb_confirm_leaving_js() { wp_enqueue_script( 'Confirm Leaving', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true ); } add_action('wp_enqueue_scripts', 'wpb_confirm_leaving_js'); Ta funkcja PHP używa wp_enqueue_script, co jest oficjalną metodą WordPressa do dodawania JavaScript. Jest to najlepsza praktyka, ponieważ pomaga zapobiegać konfliktom skryptów z innymi wtyczkami.
Teraz zapisz ten plik jako confirm-leaving.php w głównym folderze confirm-leaving.
Teraz musimy utworzyć plik JavaScript, który ta wtyczka będzie ładować. Możesz to zrobić, tworząc nowy plik w edytorze tekstu i wklejając do niego ten kod:
jQuery(document).ready(function($) { $(document).ready(function() { needToConfirm = false; window.onbeforeunload = askConfirm; }); function askConfirm() { if (needToConfirm) { // Put your custom message here return "Your unsaved data will be lost."; } } $("#commentform").change(function() { needToConfirm = true; }); }) Ten JavaScript wykrywa, czy użytkownik zaczął wypełniać formularz komentarza. Jeśli spróbuje opuścić stronę przed wysłaniem, uruchamia ostrzegawcze wyskakujące okienko.
Zapisz ten plik jako confirm-leaving.js w folderze js, który utworzyłeś wcześniej.
Po zapisaniu obu plików, tak powinna wyglądać struktura Twojego folderu:
Teraz musisz połączyć się ze swoją witryną WordPress za pomocą klienta FTP. Instrukcje krok po kroku znajdziesz w naszym przewodniku jak używać FTP do przesyłania plików WordPress.
Po połączeniu będziesz musiał przesłać folder confirm-leaving do folderu /wp-contents/plugins/ na swojej stronie internetowej.
Następnie będziesz chciał zalogować się do obszaru administracyjnego WordPress i przejść do „Wtyczek”.
Stąd powinieneś zobaczyć wtyczkę „Confirm Leaving” na liście zainstalowanych wtyczek. Następnie możesz kliknąć link „aktywuj” poniżej.
To wszystko. Możesz teraz odwiedzić dowolny wpis na swojej stronie, wpisać coś w formularzu komentarza, a następnie spróbować opuścić stronę.
Następnie pojawi się wyskakujące okienko z ostrzeżeniem o niezapisanych zmianach.
Ze względów bezpieczeństwa nowoczesne przeglądarki internetowe wyświetlą własny, ogólny komunikat ostrzegawczy (np. „Opuścić witrynę? Wprowadzone zmiany mogą nie zostać zapisane.”) zamiast niestandardowego tekstu z kodu. Celem kodu jest po prostu wywołanie tego standardowego monitu przeglądarki.
Metoda 2: Dodanie wyskakującego okienka ostrzegawczego do innych formularzy na Twojej stronie WordPress
Możesz użyć tego samego kodu, aby skierować dowolny inny formularz na Twojej stronie WordPress, na przykład formularz kontaktowy.
W tym przykładzie celujemy w formularz utworzony za pomocą wtyczki WPForms, ale te kroki zadziałają, jeśli używasz innej wtyczki formularza kontaktowego na swojej stronie internetowej.
Nie masz formularza kontaktowego i chcesz go stworzyć? W takim razie możesz zapoznać się z naszym przewodnikiem jak utworzyć formularz kontaktowy.
W WPBeginner używamy WPForms do osadzania wielu różnych formularzy, w tym naszego formularza kontaktowego, corocznej ankiety czytelników i próśb o migrację. Jeśli jesteś ciekawy tego narzędzia i tego, co potrafi, możesz przejść do naszej pełnej recenzji WPForms.
Pierwszą rzeczą do zrobienia jest przejście do strony, na której osadziłeś swój formularz kontaktowy.
Następnie najedź kursorem myszy na pierwsze pole w formularzu kontaktowym, kliknij prawym przyciskiem myszy, a następnie wybierz „Zbadaj” z menu przeglądarki.
Stąd będziesz chciał zlokalizować linię zaczynającą się od znacznika <form>, aby znaleźć atrybut ID. W tym przykładzie ID naszego formularza to wpforms-form-170.
Po znalezieniu znacznika, skopiuj atrybut ID.
Teraz otwórz swój plik confirm-leaving.js aby edytować selektor jQuery. Będziesz musiał dodać identyfikator swojego formularza bezpośrednio po #commentform, oddzielając go przecinkiem. Pamiętaj, aby dodać prefiks # do swojego nowego identyfikatora, tak jak ma go formularz komentarza.
Twój kod będzie teraz wyglądał tak:
jQuery(document).ready(function($) { $(document).ready(function() { needToConfirm = false; window.onbeforeunload = askConfirm; }); function askConfirm() { if (needToConfirm) { // Put your custom message here return "Your unsaved data will be lost."; } } $("#commentform,#wpforms-form-170").change(function() { needToConfirm = true; }); }) Jeśli wszystko wygląda dobrze, możesz zapisać zmiany w pliku confirm-leaving.js i przesłać go z powrotem na swój serwer, nadpisując stary plik.
Teraz możesz wprowadzić dowolny tekst w dowolne pole formularza kontaktowego, a następnie spróbować opuścić stronę bez wysyłania formularza. Pojawi się wyskakujące okienko z ostrzeżeniem o niezapisanych zmianach.
📥 Pobieranie wtyczki: Możesz pobrać wtyczkę confirm-leaving tutaj, a następnie zainstalować i aktywować wtyczkę jak zwykle. Jeśli potrzebujesz pomocy, możesz przejrzeć nasz przewodnik jak zainstalować wtyczkę WordPress.
Należy pamiętać, że dotyczy to formularza komentarzy, ale można edytować wtyczkę, aby dotyczyła Twojego formularza rejestracji użytkowników, ankiet, formularza opinii, formularza zgłoszeniowego lub innych formularzy.
Przestań tracić potencjalnych klientów z porzuconych formularzy
WPForms ułatwia tworzenie potężnych formularzy dla Twojej strony. Ponadto, posiada wbudowane śledzenie porzuconych formularzy, dzięki czemu możesz dokładnie zobaczyć, gdzie użytkownicy rezygnują i nawiązać kontakt, aby odzyskać utraconych potencjalnych klientów.
Bonus: Popraw wydajność formularzy WordPress
Po dodaniu wyskakującego okienka potwierdzającego nawigację, warto śledzić, jak często użytkownicy porzucają swoje formularze. Znajomość tych danych może pomóc Ci znaleźć i naprawić problemy, które powodują, że ludzie odchodzą.
Jednym z najlepszych narzędzi do śledzenia porzuconych formularzy jest MonsterInsights. Jest to najlepsza wtyczka Google Analytics dla WordPress. Jej dodatek Forms (dostępny w wersji Pro) ułatwia automatyczne śledzenie wyświetleń i przesłanych formularzy.
W ten sposób możesz zobaczyć, jak użytkownicy wchodzą w interakcję z Twoimi formularzami bezpośrednio z panelu administracyjnego.
W WPBeginner używamy MonsterInsights do śledzenia wszystkich naszych ważnych konwersji, w tym formularzy, przycisków i linków partnerskich. Zapoznaj się z naszą pełną recenzją MonsterInsights, aby dowiedzieć się o wszystkich jego funkcjach.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem jak śledzić i zmniejszać porzucanie formularzy.
Możesz również przeprowadzić testy A/B, aby zobaczyć, która wersja Twojego formularza działa lepiej. Na przykład, możesz przetestować różne style formularzy lub tekst przycisków, aby zobaczyć, co zachęca do większej liczby ukończeń.
Na przykład, możesz zmienić treść wyskakującego okienka potwierdzającego nawigację lub dostosować swój formularz. Analizując wyniki, możesz określić, co angażuje użytkowników i pomaga zmniejszyć wskaźnik porzuceń.
Thrive Optimize to najlepsza wtyczka do tego zadania. Pozwala łatwo przeprowadzać testy A/B bez żadnego kodowania.
Aby dowiedzieć się więcej, zapoznaj się z naszym przewodnikiem na temat jak przeprowadzić testy A/B w WordPress.
Najczęściej zadawane pytania dotyczące pop-upów potwierdzających nawigację
Czy dodanie tego kodu spowolni moją stronę internetową?
Nie, wcale. Kod JavaScript jest bardzo lekki i uruchamia się tylko wtedy, gdy użytkownik próbuje opuścić stronę ze zmodyfikowanym formularzem. Nie będzie miał zauważalnego wpływu na wydajność Twojej witryny.
Czy mogę zmienić komunikat w wyskakującym okienku potwierdzającym?
Niestety, nie. Ze względów bezpieczeństwa nowoczesne przeglądarki nie pozwalają już witrynom wyświetlać niestandardowych komunikatów w oknie potwierdzenia. Zawsze będą one wyświetlać użytkownikowi ogólne, standardowe ostrzeżenie.
Czy to wyskakujące okienko potwierdzające działa w przeglądarkach mobilnych?
Tak, zdarzenie onbeforeunload jest obsługiwane przez większość nowoczesnych przeglądarek mobilnych, w tym Chrome i Safari zarówno na Androidzie, jak i iOS. Zachowanie będzie takie samo jak na komputerze stacjonarnym.
Dodatkowe przewodniki dotyczące korzystania z formularzy WordPress
Mamy nadzieję, że ten artykuł pomógł Ci wyświetlić okno potwierdzające nawigację dla Twoich formularzy WordPress.
Możesz również zapoznać się z innymi przewodnikami i polecanymi przez ekspertów:
- Jak utworzyć formularz kontaktowy z wieloma odbiorcami
- Jak wysyłać e-maile z potwierdzeniem po przesłaniu formularza w WordPress
- Sposoby wykorzystania logiki warunkowej w formularzach WordPress
- Najlepsze kreatory formularzy online (wybór ekspertów)
- Kompleksowy przewodnik po korzystaniu z formularzy 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.
Igor
Próbowałem użyć twojego kodu na forum bbpress. Niestety, po tym, jak użytkownik nie opublikuje swojego komentarza, nie pojawia się żadne wyskakujące okienko. Próbowałem wszystkich wariantów zmiany identyfikatora w pliku JS, ale nadal nic się nie pojawia.
Bob Garrett
W nawiązaniu do mojego poprzedniego zapytania, wypróbowałem teraz użycie ID nadrzędnego div formularza i zmodyfikowałem kod. Działa to prawie, ale...
Tekst wyświetlany przez wyskakujące okienko nie jest tekstem wprowadzonym w kodzie.
Nawet jeśli formularz jest wypełniony i kliknięto przycisk wysyłania, przejście na inną stronę nadal spowoduje wyświetlenie ostrzeżenia.
Jak mogę to rozwiązać?
Tom Kelley
Próbowałem tego vvvvv bezskutecznie. Pracuję z Gravity Forms. Wszystko inne działa dobrze, ale ostrzeżenie nadal pojawia się po kliknięciu przycisku wysyłania wypełnionego formularza. Jakieś rady?
Wsparcie WPBeginner
27 listopada 2016 o 6:52
Cześć Bonnie,
Przetestowaliśmy wtyczkę z WPForms i działała. Będziesz musiał edytować plik confirm-leaving.js i zastąpić #commentform identyfikatorem diva kontenera wpforms. Zazwyczaj jest to wpforms-12, gdzie 12 to ID Twojego formularza. Możesz to również zobaczyć za pomocą narzędzia inspekcji elementów w przeglądarce.
Bonnie Ramthun
Nadal próbuję dowiedzieć się, jak upewnić się, że wyskakujące okienko NIE pojawi się, gdy użytkownik naciśnie przycisk „Wyślij”. Komunikat o potwierdzeniu opuszczenia strony nie powinien się pojawiać, jeśli użytkownik wprowadził wszystkie wymagane informacje, ale ten kod sprawia, że pojawia się za każdym razem.
Byłbym bardzo wdzięczny za pomoc, jeśli istnieje dostępne rozwiązanie.
Swayam Dhawan
Potrzebuję tej samej funkcji, gdy ktoś opuszcza określoną stronę w witrynie, a po kliknięciu „pozostań” musi zostać przekierowany na stronę główną witryny.
czekam na odpowiedź.
Bonnie Ramthun
Jestem tak szczęśliwy z Twojego wspaniałego kodu potwierdzającego nawigację! Potrzebuję go desperacko, ponieważ wielu moich klientów nie może zrozumieć, że muszą nacisnąć przycisk „Wyślij” w formularzu.
Kod działa idealnie, z wyjątkiem jednego problemu. Kiedy naciskam przycisk „Wyślij” w moim formularzu WPForms, pojawia się kod potwierdzający nawigację. Chciałbym, aby „potwierdzenie nawigacji” następowało tylko wtedy, gdy użytkownik nie naciśnie przycisku „Wyślij”. Nie mogę wymyślić, jak to zrobić. Czy możesz pomóc?
Wsparcie WPBeginner
Cześć Bonnie,
Przetestowaliśmy wtyczkę z WPForms i działała. Będziesz musiał edytować plik confirm-leaving.js i zastąpić #commentform identyfikatorem diva kontenera wpforms. Zazwyczaj jest to wpforms-12, gdzie 12 to ID Twojego formularza. Możesz to również zobaczyć za pomocą narzędzia inspekcji elementów w przeglądarce.
Admin
Will C
Mam dwa oddzielne, wielostronicowe formularze Gravity na mojej stronie. Gdy ta wtyczka jest aktywna, otrzymuję wyskakujące okienko potwierdzające po kliknięciu „Następny krok” w jednym z formularzy (niepożądane), ale nie w drugim. Czy wiesz o jakichkolwiek problemach z Gravity Forms i „window.onbeforeunload”? Dzięki
Nipa Sarker
Mam te same problemy z krokami tworzenia grupy BuddyPress.
Nipa Sarker
Używam kodu do tworzenia grup wieloetapowych BuddyPress. Działa dobrze, z wyjątkiem sytuacji, gdy klikam przycisk "następny krok" lub "zapisz", pojawia się ten sam alert.
Używam identyfikatora formularza "#create-group-form" zamiast #commentform
Luis Zarza
Cześć, fajny post!
Bardzo pomogło. Ale twoje rozwiązanie nie zadziała, gdy jestem zalogowany. Działa tylko dla użytkowników, którzy wypełniają formularz i są wylogowani. Potrzebuję, aby działało również dla zalogowanych użytkowników, proszę!
Czy możesz podać rozwiązanie tego problemu?
Dzięki.
Luis Zarza
Przepraszam, faktycznie działa, gdy tworzysz wtyczkę. Na początku zrobiłem to tylko wrzucając JS na stronę, którą chciałem, bez tworzenia wtyczki, ponieważ nie chciałem, aby skrypt był ładowany na wszystkich stronach mojej witryny.
Alain Aubry
Cześć
Contact Form 7 nie używa identyfikatora w swoim formularzu, jak mogę to sprawić, aby działało?
Wsparcie WPBeginner
Contact Form 7 używa identyfikatora dla wszystkich formularzy. Linia zawierająca identyfikator formularza będzie wyglądać mniej więcej tak:
1-click Use in WordPress
W tym przykładzie identyfikator formularza to
wpcf7-f85-p11-o1. Mam nadzieję, że to pomoże.Admin
Betty L Van Fossen
Mam dwa problemy. Po pierwsze, te wyskakujące okienka pojawiają się u mnie cały czas, co jest irytujące. Mam 89 lat, więc mam trochę cierpliwości i zaczynam używać wskaźnika, aby szybko klikać inne rzeczy, przez co mam mnóstwo problemów. Po drugie – zgaduję (wiem) – mam za dużo ciasteczek, jak mówią. Czym są ciasteczka – jak je usunąć? Co masz na myśli, subskrybuj bez komentowania. Wolę e-mail. OK.. do osobistej i znaczącej rozmowy.
Betty L Van Fossen
Czy wyskakujące okienka działają tak samo dla e-maili jak dla WordPressa w celu usunięcia?
Wsparcie WPBeginner
Nie jesteśmy pewni, co masz na myśli. Czy możesz to wyjaśnić?
Admin
Betty L Van Fossen
Safari powiedział, że nie mogę wejść, bo miałem za dużo ciasteczek. W międzyczasie byłem na swoim e-mailu i wyskoczyły okienka, podczas gdy na moim e-mailu zawsze wyskakują. Wszedłem na Google i poprosiłem o pomoc w sprawie ciasteczek i wyskakujących okienek, a dało mi to wiele do wyboru. Teraz WordPress się tu dostał, co to jest WordPress. Nie zamierzam pisać książki, po prostu POTRZEBUJĘ POMOCY. Odpowiedz e-mailem. Wyłączam cię teraz, jestem naprawdę zmęczony.
Betty L Van Fossen
Czekam na Twoją odpowiedź na mój e-mail, ponieważ jestem zmęczony, więc teraz się wyłączam.