ribbon iwa

Cara Menampilkan Konfirmasi Navigasi Popup untuk Formulir di WordPress

Sengaja menutup halaman tanpa mengirimkan komentar anda atau dengan form setengah terisi menjengkelkan. Baru-baru ini, salah satu pengguna kami bertanya kepada kami apakah mungkin untuk menampilkan pembaca mereka popup konfirmasi konfirmasi? Pengguna munculan popup mungil ini dan mencegahnya secara tidak sengaja meninggalkan formulir setengah terisi dan tidak terkirim. Pada artikel ini, kami akan menunjukkan cara untuk menunjukkan konfirmasi popup navigasi untuk form WordPress.

Apa itu Konfirmasi Navigasi Popup?
Misalkan pengguna menulis komentar di blog Anda. Mereka sudah menulis beberapa baris, tapi mereka terganggu dan lupa memberikan komentar. Sekarang jika mereka menutup browser mereka, maka komentarnya akan hilang.

Popup navigasi konfirmasi memberi mereka kesempatan untuk menyelesaikan komentar mereka. Anda dapat melihat fitur ini beraksi di layar editor posting WordPress. Jika Anda memiliki perubahan yang belum disimpan, dan Anda mencoba untuk meninggalkan halaman atau menutup browser, maka Anda akan melihat popup peringatan.


Mari kita lihat bagaimana kita bisa menambahkan fitur peringatan ini ke komentar WordPress dan bentuk lainnya di situs Anda.

Tampilkan popup Konfirmasi Navigasi untuk Formulir yang Tidak Disetujui di WordPress
Untuk tutorial ini, kita akan membuat custom plugin, tapi jangan khawatir anda juga bisa mendownload plugin di akhir tutorial ini untuk install di website anda.

Namun, untuk pemahaman kode yang lebih baik, kami akan meminta Anda mencoba membuat plugin sendiri. Anda bisa melakukan ini di instalasi lokal atau situs pementasan terlebih dahulu.
Mari kita mulai.

Pertama Anda perlu membuat folder baru di komputer Anda dan beri nama confirm-leave. Di dalam folder confirm-leave, Anda perlu membuat folder lain dan beri nama js. Sekarang buka editor teks biasa seperti Notepad dan buat file baru. Di dalam, cukup tempelkan kode berikut ini:
<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  http://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:  http://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'); 
Fungsi php ini hanya menambahkan file JavaScript ke front-end website anda. Silakan simpan file ini sebagai confirm-leaving.php di dalam folder confirm-leave utama. Sekarang kita perlu membuat file JavaScript yang loading plugin ini. Buat file baru dan tempel kode ini di dalamnya:
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;
});

 })
Kode JavaScript ini mendeteksi jika pengguna memiliki perubahan dalam bentuk komentar yang belum disimpan. Jika pengguna mencoba menavigasi dari halaman atau menutup jendela, maka akan muncul popup peringatan.

Anda perlu menyimpan file ini sebagai confirm-leaving.js di dalam folder js. Setelah menyimpan kedua file, inilah struktur folder Anda:


Sekarang Anda perlu terhubung ke situs WordPress Anda menggunakan klien FTP. Lihat panduan kami tentang cara menggunakan FTP untuk mengupload file WordPress.

Setelah terhubung, Anda perlu mengunggah folder confirm-leave ke / wp-contents / plugins / folder di situs Anda.


Setelah itu anda perlu login ke admin area WordPress dan mengunjungi halaman Plugin. Temukan plugin 'Konfirmasi Meninggalkan' di daftar plugin yang terinstal dan klik link 'aktifkan' di bawahnya.


Itu saja. Anda sekarang dapat mengunjungi posting di situs Anda, menulis beberapa teks dalam bentuk komentar dan kemudian meninggalkan halaman tanpa mengirimkannya. Munculan akan muncul, memperingatkan Anda bahwa Anda akan meninggalkan halaman dengan perubahan yang belum disimpan.


Menambahkan Peringatan ke Bentuk Lain di WordPress
Anda bisa menggunakan basis kode yang sama untuk menargetkan segala bentuk di situs WordPress Anda. Di sini kami akan menunjukkan contoh penggunaannya untuk menargetkan formulir kontak.
Dalam contoh ini, kami menggunakan plugin WPForms untuk membuat formulir kontak. Instruksi akan sama jika Anda menggunakan plugin form kontak yang berbeda di situs Anda.

Pergi ke halaman di mana Anda telah menambahkan formulir kontak Anda. Arahkan mouse ke bidang pertama di formulir kontak Anda, klik kanan, lalu pilih Periksa dari menu browser.


Cari baris yang dimulai dengan tag <form>. Dalam tag formulir, Anda akan menemukan atribut ID.
Dalam contoh ini, ID formulir kami berbentuk wpforms-170.

Anda perlu menyalin atribut ID.
Sekarang edit file confirm-leaving.js dan tambahkan atribut ID setelah #commentform.

Pastikan Anda memisahkan #commentform dan ID formulir Anda dengan koma. Anda juga perlu menambahkan # tanda sebagai awalan ke atribut ID formulir Anda. Kode Anda sekarang akan terlihat seperti ini:
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;
});

 })
Simpan perubahan Anda dan unggah file kembali ke situs web Anda. Sekarang Anda bisa memasukkan teks apapun ke dalam bidang apapun dari formulir kontak Anda dan kemudian mencoba untuk meninggalkan halaman tanpa mengirimkan formulir. Munculan akan muncul dengan peringatan bahwa Anda memiliki perubahan yang belum disimpan.

Anda bisa mendownload plugin confirm-leave disini. Ini hanya menargetkan bentuk komentar, namun merasa bebas untuk mengedit plugin tersebut untuk menargetkan bentuk lainnya. Itu saja, semoga artikel ini membantu anda menunjukkan konfirmasi popup navigasi untuk form WordPress.


SUBSCRIBE TO OUR NEWSLETTER

close