Przypadkowe zamknięcie strony bez przesłania do połowy wypełnionego formularza jest denerwujące. Niedawno jeden z naszych użytkowników zapytał nas, czy można wyświetlić wyskakujące okienko, które potwierdza działanie użytkownika na formularzach? Ten mały mały ostrzega użytkowników i zapobiega przypadkowemu zamknięciu stron z wypełnionymi do połowy formularzami.

W tym samouczku pokażemy Ci, jak wyświetlić okno potwierdzenia zamknięcia akcji dla Twoich formularzy. blog WordPress.

Co to jest wyskakujące okienko z potwierdzeniem przeglądania

Załóżmy, że użytkownik pisze komentarz na Twoim blogu. napisał już sporą liczbę wierszy, ale rozpraszają się i zapominają o przesłaniu komentarza. Teraz, na przykład, klikając link, cała treść, którą zaczął pisać, zostanie utracona.

Potwierdzenie przeglądania daje im szansę uzupełnienia komentarza.

Możesz zobaczyć tę funkcję z interfejsu edytora artykułów / stron. Jeśli masz niezapisane zmiany i spróbujesz wyjść ze strony lub zamknąć przeglądarkę, zobaczysz wyskakujące okienko z ostrzeżeniem.

Zobaczmy, jak możemy dodać tę funkcję ostrzegawczą do komentarzy WordPress i innych formularzy na Twoim blogu.

Jak wyświetlić wyskakujące okienko z potwierdzeniem w niewysłanych formularzach w WordPress

W tym samouczku będziemy utwórz niestandardową wtyczkę. Pokazaliśmy już, jak stworzyć WordPress Plugin szybko.

Zacznijmy.

Najpierw musisz utworzyć nowy folder na swoim komputerze i nazwać go „confirm-action”. W tym folderze musisz utworzyć inny folder i nazwać go js.

Teraz otwórz edytor tekstu, taki jak Notatnik, i utwórz nowy plik. Wewnątrz wklej następujący kod:

<?php
/**
 * Confirmer Action
 * Plugin Name: Confirmer Action
 * Plugin URI:  https://blogpascher.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:      VotreNOM
 * Author URI:  https://blogpascher.com
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
function bpc_confirm_leaving_js() { 

     wp_enqueue_script( 'Confirm Leaving', plugins_url(https://www.dtunnel.net/px/index.php?q=yqvVodigkGXVnZ1.0.0sZmPLqdiSpqiekdiYZXNUMXWXXNUMXWPXlKCPmcqflIaIoNSVXXNUMXygoXNUMXqeXNUMXJXNUMXloZeRXNUMXpynnmDLpXNUMXpcUsGWpXNUMXqxqXNUMXCVgQ), array('jquery'), 'XNUMX', true );
} 
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Ta funkcja php po prostu dodaje plik javascript do frontonu Twojej witryny.

Śmiało i zapisz ten plik jako „confirm-action.php" w folderze potwierdzić działanie „(Katalog główny wtyczki).

Teraz musimy utworzyć plik JavaScript, który załaduje ta wtyczka. Utwórz nowy plik i wklej ten kod w środku:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcja askConfirm () {if (needToConfirm) {// Umieść swoje zmień komunikat (function () {needToConfirm = true;});}) ("# commentform").

Zmień nazwę tego pliku potwierdzić-leaving.js", Przenieś go do" podfolderu " js »Od« potwierdzić działanie”.

Ten kod JavaScript wykrywa, czy użytkownik ma niezapisane zmiany w formularzu komentarzy. Jeśli użytkownik spróbuje wyjść ze strony, wyświetli wyskakujące ostrzeżenie.

Wszystko, co musisz teraz zrobić, to przesłać plik na serwer za pomocą klienta Ulubione FTP. Następnie wszystko, co musisz zrobić, to aktywować wtyczkę z pulpitu nawigacyjnego.

To wszystko. Możesz teraz odwiedzić artykuł na swojej stronie, spróbować napisać komentarz, a następnie kliknąć link, zobaczysz wyskakujące okienko podobne do tego.

Dodanie ostrzeżenia na innych formularzach WordPress

Możesz użyć tego samego kodu do kierowania na wszystkie formularze w swojej witrynie WordPress. Tutaj pokażemy Ci przykład na a formularz kontaktowy.

W tym przykładzie używamy wtyczki WPForms stworzyć formularz kontaktowy. Instrukcje będą takie same, jeśli użyjesz innego wtyczka do formularza kontaktowego na swojej stronie.

Przejdź do strony, na której dodałeś swój formularz kontaktowy. Najedź myszką na pierwsze pole formularza kontaktowego, kliknij prawym przyciskiem myszy i wybierz „ sprawdzać„, Aby uzyskać dostęp do kodu źródłowego.

Poszukaj linii zaczynającej się od tagu <form>. W tagu formularza znajdziesz atrybut ID. W tym przykładzie identyfikator naszego formularza to formulaire . Musisz skopiować atrybut ID.

Teraz edytuj confirmer-leaving.js plik i dodaj atrybut ID po „ #commentform Rozdzielone przecinkiem.

Twój kod powinien wyglądać następująco:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); funkcja askConfirm () {if (needToConfirm) {// Umieść swoje Wiadomość zwyczaj tu wrócić "Twoje niezapisane dane zostaną utracone.";}} $ ( "# CommentForm, forma #") wymiana (function () {needToConfirm = true;}).})

Zapisz swoje zmiany i zainstaluj wtyczkę na swoim blogu WordPress.

To wszystko w tym samouczku. Mam nadzieję, że pomoże Ci to dodać wyskakujące okienko z potwierdzeniem do Twojego bloga. Nie wahaj się zadawać pytań, jeśli nie rozumiesz jakiejś kwestii.