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 jest irytują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 niewysłanych formularzy. To dobry sposób na poprawę doświadczenia użytkownika i zapobieganie konieczności rozpoczynania czegoś od zera.

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

Co to jest wyskakujące okienko potwierdzenia nawigacji?

Załóżmy, że użytkownik pisze komentarz na twoim blogu. 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.

Możesz zobaczyć tę funkcję w działaniu na ekranie edytora wpisów WordPress. Jeśli masz niezapisane zmiany i próbujesz opuścić stronę lub zamknąć przeglądarkę, zobaczysz wyskakujące okienko z ostrzeżeniem.

Zobaczmy, jak możemy dodać tę funkcję ostrzegania do komentarzy WordPress i innych formularzy na twojej witrynie:

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

W tym poradniku będziemy tworzyć własny konfigurator wtyczki, 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 na lokalnej instalacji lub witrynie testowej.

Zaczynajmy.

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órz zwykły edytor tekstu, taki jak Notatnik i utwórz nowy plik. Wewnątrz 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ę.

Utwórz nowy plik i wklej do niego 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.

Plik ten należy zapisać 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. Zobacz nasz przewodnik na temat korzystania z FTP do przesyłania plików WordPress.

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

Następnie należy logować się do obszaru administracyjnego WordPress i przejść na stronę wtyczki.

Zlokalizuj wtyczkę „Confirm Leaving” na liście zainstalowanych wtyczek i kliknij znajdujący się pod nią odnośnik „włącz”.

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.

Dodawanie ostrzeżenia do innych formularzy w 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.

Przejdź do strony, na której dodałeś swój formularz kontaktowy. Najedź kursorem myszy na pierwsze pole twojego formularza kontaktowego, kliknij prawym przyciskiem myszy, a następnie wybierz „Sprawdź” z menu przeglądarki.

Zlokalizuj linię, która zaczyna się od tagu <form>. W tagu formularza znajduje się atrybut identyfikatora.

W tym przykładzie identyfikator naszego formularza to wpForms-form-170. Należy skopiować atrybut identyfikatora.

Teraz edytuj plik confirm-leaving.js i dodaj atrybut identyfikatora po #commentform.

Upewnij się, że oddzielasz #commentform identyfikator twojego formularza przecinkiem. Musisz również dodać znak # jako przedrostek 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]

Zapisz wprowadzone zmiany i prześlij plik z powrotem na swoją 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.

Wtyczkę confirm-leaving można pobrać tutaj. Jest ona przeznaczona tylko dla formularzy komentarzy, ale możesz edytować wtyczkę tak, aby była przeznaczona dla innych formularzy.

To wszystko; mamy nadzieję, że ten artykuł pomógł ci pokazać wyskakujące okienko nawigacji dla formularzy WordPress. Możesz również sprawdzić nasze obowiązkowe wtyczki i narzędzia WordPress dla witryn biznesowych lub przeczytać nasz ostateczny przewodnik na temat tego, jak zwiększyć ruch na Twoim blogu.

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.