Menutup halaman secara tidak sengaja tanpa mengirimkan formulir setengah terisi adalah hal yang mengganggu. Baru-baru ini, salah satu pengguna kami bertanya kepada kami apakah mungkin untuk menampilkan jendela pop-up yang mengonfirmasi tindakan pengguna pada formulir? Ini sedikit mengingatkan pengguna dan mencegah mereka secara tidak sengaja menutup halaman dengan formulir setengah terisi.

Dalam tutorial ini, kami akan menunjukkan cara menampilkan jendela konfirmasi tindakan tutup untuk formulir Anda. blog WordPress.

Apa itu popup konfirmasi penjelajahan

Misalkan pengguna sedang menulis komentar di blog Anda. dia sudah menulis banyak baris, tapi mereka terganggu dan lupa untuk mengirimkan komentar. Sekarang, dengan mengklik link misalnya, semua konten yang dia tulis akan hilang.

Konfirmasi penelusuran memberi mereka kesempatan untuk menyelesaikan komentar mereka.

Anda dapat melihat fitur ini dari antarmuka editor artikel / halaman. Jika Anda memiliki perubahan yang belum disimpan, dan Anda mencoba untuk keluar dari halaman atau menutup browser, maka Anda akan melihat peringatan pop-up.

Mari kita lihat bagaimana kami dapat menambahkan fitur peringatan ini pada komentar WordPress dan formulir lain di blog Anda.

Cara menampilkan popup konfirmasi pada formulir yang tidak dikirim di WordPress

Untuk tutorial ini, kita akan buat plugin khusus. Kami telah menunjukkan kepada Anda cara membuat WordPress Plugin cepat.

Mari kita mulai.

Pertama, Anda perlu membuat folder baru di komputer Anda dan menamainya "konfirmasi-tindakan". Di folder ini Anda perlu membuat folder lain dan beri nama js.

Sekarang buka editor teks seperti Notepad dan buat file baru. Di dalam, cukup tempel kode berikut:

<?php
/**
 * Konfirmasikan Tindakan
 * Nama Plugin: Konfirmasi Tindakan
 * URI Plugin: https://blogpascher.com
 * Deskripsi: Plugin ini menampilkan peringatan kepada pengguna ketika mencoba, mereka lupa menekan tombol kirim pada formulir komentar.
 * Versi: 1.0.0
 * Penulis: NAMA Anda
 * URI Penulis: https://blogpascher.com
 * Lisensi: GPL-2.0+
 * URI Lisensi: http://www.gnu.org/licenses/gpl-2.0.txt
 */
 
fungsi bpc_confirm_leaving_js() {

     wp_enqueue_script( 'Konfirmasi Keluar', plugins_url( 'js/confirm-leaving.js', __FILE__ ), array('jquery'), '1.0.0', true );
}
add_action('wp_enqueue_scripts', 'bpc_confirm_leaving_js');

Fungsi php ini hanya menambahkan file JavaScript ke bagian depan situs web Anda.

Lanjutkan dan simpan file ini sebagai "konfirmasi-tindakan.php" dalam folder mengkonfirmasi tindakan "(Root dari plugin Anda).

Sekarang kita perlu membuat file JavaScript yang akan dimuat oleh plugin ini. Buat file baru dan tempel kode ini di dalam:

jQuery (document) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm;}); fungsi askConfirm () {if (needToConfirm) {// Masukan Anda Pesan kustom di sini kembali "data yang belum disimpan Anda akan hilang.";}} $ ( "# CommentForm") exchange (function () {needToConfirm = true;}).})

Ganti nama file ini mengkonfirmasi-leaving.js", Pindahkan ke" subfolder " js »Dari« mengkonfirmasi tindakan".

Kode JavaScript ini mendeteksi jika pengguna memiliki perubahan yang belum disimpan di formulir komentar. Jika pengguna mencoba untuk keluar dari halaman, mereka akan menampilkan peringatan pop-up.

Yang harus Anda lakukan sekarang adalah mengunggah file Anda ke server Anda menggunakan klien Anda favorit FTP. Setelah itu, yang harus Anda lakukan adalah mengaktifkan plugin dari dashboard Anda.

Itu saja. Anda sekarang dapat mengunjungi artikel di situs web Anda, coba tulis komentar lalu klik tautan, Anda akan melihat munculan yang mirip dengan ini.

Penambahan peringatan pada formulir WordPress lainnya

Anda dapat menggunakan kode yang sama untuk menargetkan semua formulir di situs WordPress Anda. Di sini kami akan menunjukkan contoh tentang a formulir kontak.

Dalam contoh ini, kami menggunakan plugin WPForms untuk membuat sebuah formulir kontak. Instruksi akan sama jika Anda menggunakan yang lain kontak bentuk Plugin di situs Anda.

Buka halaman tempat Anda menambahkan formulir kontak. Gerakkan mouse ke bidang pertama di formulir kontak Anda, klik kanan, lalu pilih “ memeriksa“, Untuk mengakses kode sumber.

Cari baris yang dimulai dengan tag <form>. Di tag formulir Anda akan menemukan atribut ID. Dalam contoh ini, ID formulir kami adalah formulaire . Anda harus menyalin atribut ID.

Sekarang, edit confirmer-leaving.js file dan tambahkan atribut ID setelah " #commentform Dipisahkan oleh koma.

Kode Anda akan terlihat seperti ini:

JQuery (dokumen) .ready (function ($) {$ (document) .ready (function () {needToConfirm = false; window.onbeforeunload = askConfirm; Custom () function () (needToConfirm = true;});})

Simpan perubahan dan Pasang plugin Anda di blog WordPress Anda.

Itu saja untuk tutorial ini. Semoga membantu Anda menambahkan jendela konfirmasi pop up ke blog Anda. Jangan ragu untuk bertanya jika Anda tidak mengerti suatu hal.