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');[/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; }); })[/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; }); })[/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.
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!
Igor says
Tried to use your code in bbpress forum. Unfortunately no popup message appears after user dose not post his comment. Tried all variations of changing id in JS file but still nothing appears.
Bob Garrett says
Further to my previous query I have now tried using the form’s parent div id and modified the code. This almost works but…
The text shown by the pop-up is not the text entered in the code.
Even if the form is completed and submit hit, then going to another page still results in the warning.
How can I resolve this?
Tom Kelley says
Have tried this vvvvv to no avail. Working with Gravity Forms. All else works well, but the warning still comes up when hitting the submit button on a completed form. Any advice?
WPBeginner Support
Nov 27, 2016 at 6:52 am
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
Bonnie Ramthun says
I’m still trying to figure out how to make sure the popup DOESN’T appear when the user presses the „Submit” button. The confirm leaving popup shouldn’t appear if the user has entered all the information required, but this code makes it pop up every time.
I would so appreciate the help, if there is a solution available.
Swayam Dhawan says
I Need the same function when someone navigate from particular page in website and while click on stay , they must navigate to home page of the website.
waiting for the response.
Bonnie Ramthun says
I am so happy for your wonderful confirm navigation code! I need it desperately because many of my clients users can’t get it through their head that they need to press the „Submit” button on the form.
The code works perfectly, except for one problem. When I press the „Submit” button on my WPForms form, the confirm navigation code pops up. I would like the „confirm navigation” to happen only when the user doesn’t press the „Submit” button. I can’t figure out how to do this. Can you help?
WPBeginner Support says
Hi Bonnie,
We tested the plugin with WPForms and it worked. You will need to edit the confirm-leaving.js file and replace #commentform with the wpforms container div id. Typically it is wpforms-12 where 12 is the ID of your form. You can also see it using the inspect element tool in your browser.
Administrator
Will C says
I have two separate multi-page gravity forms on my site. When this plugin is active, I get a confirmation popup when clicking „Next Step” on one of the forms (undesired), but not the other. Are you aware of any issues with gravity forms and „window.onbeforeunload”? Thanks
Nipa Sarker says
Having same issues with buddy press create group steps.
Nipa Sarker says
I ma using the code for buddy-press multi step create group from.It is working fine except while clicking on the next step button or save button it is showing the same alert.
I ma using the form id „#create-group-form” instead of the #commentform
Luis Zarza says
Hi, nice post!
It helped a lot. But your solution won’t work while logged in. It only works for users that fill in the form and are logged out. I need it also to work for logged in users, please!
Could you provide a solution for that?
Thanks.
Luis Zarza says
Sorry, it does actually works when you create the plugin. At first I did it only throwing the JS to the page I wanted without creating the plugin, because I didn’t want the script to be loaded on all the pages of my site.
Alain Aubry says
Hi
Contact Form 7 does not use an ID in their form, how can I make this work?
WPBeginner Support says
Contact Form 7 uses an ID with all the forms. The line that contains form ID will look something like this:
1-click Use in WordPress
In this example, the form’s ID attribute is
wpcf7-f85-p11-o1
. Hope this helps.Administrator
Betty L Van Fossen says
I have two problems. One I get these pop up in my mail all the time,q it’s aggravating. I’m 89 in yrs.therefore a little short on patience and I start using my pointer to fast hitting other things, so I get myself in lots of problems. Two –guess(I know) I have to many cookies they say. What are the cookies –how do I eleminate them? What do you mean subscribe without commenting. I prefer the e-mail. O.K..to personal and meaningful conversation.
Betty L Van Fossen says
Does Pop Ups work the same for e-mail as WordPress for removing?
WPBeginner Support says
We are not sure what you mean. Can you please explain?
Administrator
Betty L Van Fossen says
Safari said I could not get in cause I had to many cookies. In the meantime I was on my e-mail and the pop ups came on, while on my e-mail they are always popping up. I got on google and asked for help on cookies and pop ups and gave me lots to choose from. Now word press got in here, what is word press. I’m not going to write a book,just NEED HELP. Answer by e-mail. I’m turning you off now I’m really tired now.
Betty L Van Fossen says
I will wait for your reply in my e-mail as I’m tired so will turn off now.