Jak wyświetlić wyskakujące okienko nawigacji dla formularzy w WordPress

Przypadkowe zamknięcie strony bez przesłania twojego komentarza lub z formularzem wypełnionym do połowy może być bardzo frustrujące. Niedawno jeden z naszych użytkowników zapytał nas, czy możliwe jest pokazanie swoim czytelnikom wyskakującego okienka potwierdzającego nawigację.

To małe wyskakujące okienko ostrzega użytkowników i zapobiega przypadkowemu opuszczeniu przez nich w połowie wypełnionych i niezłożonych formularzy. To dobry sposób na poprawę doświadczenia użytkownika i zapobieganie konieczności rozpoczynania czegoś od zera.

Jeśli jednak funkcja ta nie jest skonfigurowana prawidłowo, może być irytująca i zakłócać działanie twojej witryny, frustrując użytkowników. Będziesz potrzebował niezawodnego sposobu, aby dodać ją płynnie i uniknąć tych problemów.

Dlatego chcemy pokazać, jak to zrobić za pomocą własnej wtyczki. Nie martw się, to łatwiejsze niż myślisz!

W tym artykule pokażemy, jak wyświetlić wyskakujące okienko nawigacji dla formularzy WordPress.

Co to jest wyskakujące okienko nawigacji? Dlaczego go potrzebujesz?

Załóżmy, że użytkownik pisze komentarz na twoim blogu WordPress. Napisał już kilka linijek, ale rozproszył się i zapomniał przesłać komentarz. Teraz, jeśli zamknie przeglądarkę, komentarz zostanie utracony.

Wyskakujące okienko nawigacji z potwierdzeniem daje im szansę na dokończenie komentarza.

Ta funkcja jest pokazana w działaniu na ekranie edytora wpisów WordPress. Jeśli masz niezapisane zmiany i próbujesz opuścić stronę lub zamknąć przeglądarkę, pojawi się wyskakujące okienko z ostrzeżeniem.

Ustawienie wyskakującego okienka potwierdzającego nawigację może poprawić wrażenia użytkownika, współczynniki konwersji i zaufanie użytkowników.

Oto jak to zrobić: Dając użytkownikom funkcję ostrzegania, pokazujesz, że dbasz o doświadczenia twoich użytkowników, co może pomóc w budowaniu lojalności i ponownych przejściach na stronę. Użytkownicy są bardziej skłonni do wypełniania formularzy lub komentarzy, jeśli wiedzą, że nie stracą swoich postępów.

Mając to na uwadze, pokażemy ci, jak dodać tę funkcję ostrzegawczą do komentarzy WordPress i innych formularzy na twojej witrynie. Oto krótki przegląd wszystkich rzeczy, o których będziemy mówić w tym przewodniku:

Gotowy? Zaczynajmy.

Wyświetl wyskakujące okienko Potwierdź nawigację dla nieprzesłanych formularzy w WordPress

W tym poradniku będziemy tworzyć własną wtyczkę, ale nie martw się. Możesz również pobrać wtyczkę na końcu tego poradnika, aby zainstalować ją na twojej witrynie internetowej.

Aby jednak lepiej zrozumieć kod, poprosimy Cię o próbę stworzenia Twojej własnej wtyczki. Możesz to zrobić najpierw w lokalnej instalacji lub witrynie pomostowej.

Najpierw musisz utworzyć nowy katalog na twoim komputerze i nazwać go confirm-leaving. Wewnątrz katalogu confirm-leaving należy utworzyć kolejny katalog i nadać mu nazwę js.

Teraz otwórzmy zwykły edytor tekstu, taki jak Notatnik i utwórzmy nowy plik. Wewnątrz po prostu wklej następujący kod:

[php]
<?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');

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/php]

Ta funkcja PHP po prostu dodaje plik JavaScript do front-endu twojej witryny internetowej.

Zapisz ten plik confirm-leaving.php w głównym katalogu confirm-leaving.

Teraz musimy utworzyć plik JavaScript, który będzie wczytywany przez tę wtyczkę. Możesz to zrobić, tworząc nowy plik w twoim edytorze tekstu i wklejając w nim ten kod:

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Ten kod JavaScript wykrywa, czy użytkownik ma niezapisane zmiany w formularzu komentarza. Jeśli użytkownik spróbuje opuścić stronę lub zamknąć okno, wyświetli wyskakujące okienko z ostrzeżeniem.

Następnie zapisz ten plik jako confirm-leaving.js w katalogu js.

Po zapisaniu obu plików, tak powinna wyglądać struktura twojego katalogu:

Teraz musisz połączyć się z twoją witryną WordPress za pomocą klienta FTP. Aby uzyskać instrukcje krok po kroku, możesz zapoznać się z naszym przewodnikiem na temat korzystania z FTP do przesyłania plików WordPress.

Po podłączeniu należy przesłać folder confirm-leaving do katalogu/wp-contents/plugins/ na twojej witrynie internetowej.

Następnie należy zalogować się do obszaru administracyjnego WordPress i przejść do sekcji „Wtyczki”.

Z tego miejsca powinieneś zobaczyć wtyczkę „Confirm Leaving” na liście zainstalowanych wtyczek. Następnie możesz kliknąć odnośnik „włącz” znajdujący się pod nią.

To wszystko. Możesz teraz przejść na dowolny wpis na twojej witrynie internetowej, napisać jakiś tekst w dowolnym polu formularza komentarza, a następnie spróbować opuścić stronę bez wysyłania.

Pojawi się wyskakujące okienko z ostrzeżeniem, że Zamierzasz opuścić stronę z niezapisanymi zmianami.

Dodaj wyskakujące okienko z ostrzeżeniem do innych formularzy na twojej witrynie WordPress

Możesz użyć tej samej bazy kodu do kierowania na dowolne formularze na twojej witrynie WordPress. Tutaj pokażemy przykład użycia go do kierowania na formularz kontaktowy.

W tym przykładzie używamy wtyczki WPForms do utworzenia formularza kontaktowego. Instrukcje będą takie same, jeśli używasz innej wtyczki formularza kontaktowego na twojej witrynie internetowej.

Pierwszą rzeczą do zrobienia jest przejście do strony, na której dodałeś swój formularz kontaktowy. Następnie najedź myszką na pierwsze pole twojego formularza kontaktowego, kliknij prawym przyciskiem myszy, a następnie wybierz „Sprawdź” z menu przeglądarki.

Z tego miejsca będziesz chciał zlokalizować linię, która zaczyna się od tagu <form>, aby znaleźć atrybut identyfikatora. W tym przykładzie identyfikator naszego formularza to wpForms-form-170.

Po znalezieniu tagu, skopiuj atrybut identyfikatora.

Teraz edytujmy plik confirm-leaving.js i dodajmy atrybut identyfikatora po #commentform. Upewnij się tylko, że oddzielasz #commentform identyfikator twojego formularza przecinkiem. Będziesz musiał również dodać znak # jako prefiks do atrybutu identyfikatora twojego formularza.

Twój kod będzie teraz wyglądał następująco:

[javascript]
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;
});

 })

		
Hosted with ❤️ by WPCode
		

			
			1-click Use in WordPress
		
		
[/javascript]

Jeśli wszystko wygląda dobrze, możesz zapisać zmiany i przesłać plik z powrotem na twoją witrynę internetową.

Teraz możesz wpisz dowolny tekst w dowolnym polu twojego formularza kontaktowego, a następnie spróbuj opuścić stronę bez wysyłania formularza. Pojawi się wyskakujące okienko z ostrzeżeniem o niezapisanych zmianach.

Możesz pobrać wtyczkę confirm-leaving tutaj, a następnie zainstalować i włączać wtyczkę w zwykły sposób. Jeśli potrzebujesz pomocy, możesz zapoznać się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Zwróć uwagę, że jest on skierowany do formularza komentarzy, ale możesz edytować wtyczkę, aby kierowała twój formularz rejestracji użytkownika, ankiety, formularz uwagi, formularz podania o pracę lub inne formularze.

Dodatkowa wskazówka: Popraw wydajność twoich formularzy WordPress

Po dodaniu wyskakującego okienka nawigacji z potwierdzeniem warto śledzić, jak często użytkownicy porzucają swoje formularze.

Wiedza o tym, ile osób opuszcza witrynę bez jej ukończenia, może pomóc w sprawdzeniu, jak dobrze działa twoja witryna. W ten sposób możesz dowiedzieć się, co może powodować ich opuszczenie i wprowadzić ulepszenia.

Jednym z najlepszych narzędzi do śledzenia porzucania formularzy jest MonsterInsights.

Jest to najlepsza wtyczka Google Analytics, która ułatwia sprawdzenie, w jaki sposób użytkownicy wchodzą w interakcję z Twoimi formularzami i gdzie mają tendencję do porzucania, a wszystko to z kokpitu WordPress.

Więcej szczegółów można znaleźć w naszym przewodniku na temat śledzenia i ograniczania liczby porzuceń formularzy.

W razie potrzeby można również przeprowadzić test podziału A/B. Oznacza to wypróbowanie różnych wersji twoich formularzy, aby zobaczyć, która z nich działa lepiej.

Możesz na przykład zmienić treść wyskakującego okienka nawigacji potwierdzającej lub dostosować swój formularz. Analizując wyniki, można określić, co utrzymuje zaangażowanie użytkowników i pomaga zmniejszyć współczynnik porzuceń.

Thrive Optimize jest najlepszą wtyczką do tego zadania. Umożliwia ona przeprowadzanie testów A/B bez konieczności kodowania i zapewnia bezpieczeństwo twoich danych.

Aby dowiedzieć się więcej, możesz zapoznać się z naszym przewodnikiem na temat przeprowadzania testów podziału A/B w WordPress.

Mamy nadzieję, że ten artykuł pomógł ci pokazać wyskakujące okienko nawigacji dla formularzy WordPress. Możesz również zapoznać się z naszymi eksperckimi typami najlepszych kreatorów formularzy online i naszym przewodnikiem na temat dodawania lepszych własnych powiadomień.

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.