WordPress’te Formlar için Gezinmeyi Onayla Açılır Penceresi Nasıl Gösterilir

Bir sayfayı yorumunuzu göndermeden veya yarım doldurulmuş bir formla yanlışlıkla kapatmak çok sinir bozucu olabilir. Yakın zamanda, kullanıcılarımızdan biri bize okuyucularına gezinmeyi onayla açılır penceresi göstermenin mümkün olup olmadığını sordu.

Bu küçük açılır pencere kullanıcıları uyarır ve yanlışlıkla yarım doldurulmuş ve gönderilmemiş formları bırakmalarını önler. Kullanıcı deneyimini iyileştirmek ve ziyaretçilerin bir şeye sıfırdan başlamak zorunda kalmasını önlemek için iyi bir yoldur.

Ancak bu özellik doğru şekilde ayarlanmazsa can sıkıcı olabilir ve sitenizi bozarak kullanıcıları hayal kırıklığına uğratabilir. Bu özelliği sorunsuz bir şekilde eklemek ve bu sorunlardan kaçınmak için güvenilir bir yola ihtiyacınız olacak.

Bu yüzden size özel yapım bir eklenti kullanarak bunu nasıl yapacağınızı göstermek istiyoruz. Merak etmeyin, düşündüğünüzden daha kolay!

Bu makalede, WordPress formları için gezinme açılır penceresini nasıl onaylayacağınızı göstereceğiz.

Gezinmeyi Onayla Açılır Penceresi Nedir? Neden İhtiyacınız Var?

Bir kullanıcının WordPress blogunuza yorum yazdığını varsayalım. Zaten birkaç satır yazdılar, ancak dikkatleri dağıldı ve yorum göndermeyi unuttular. Şimdi, eğer tarayıcılarını kapatırlarsa, yorum kaybolacaktır.

Gezinmeyi onayla açılır penceresi onlara yorumlarını tamamlama şansı verir.

Bu özellik WordPress yazı editörü ekranında çalışırken gösterilir. Kaydedilmemiş değişiklikleriniz varsa ve sayfadan ayrılmaya veya tarayıcıyı kapatmaya çalışırsanız, bir uyarı açılır penceresi görünecektir.

Gezinmeyi onayla açılır penceresi oluşturmak kullanıcı deneyimini, dönüşüm oranlarını ve kullanıcı güvenini artırabilir.

İşte böyle: Kullanıcılara bir uyarı özelliği sunmak, kullanıcılarınızın deneyimini önemsediğinizi gösterir ve bu da sadakati ve tekrar ziyaretleri teşvik etmeye yardımcı olabilir. Kullanıcılar, ilerlemelerini kaybetmeyeceklerini bilirlerse formları veya yorumları tamamlama olasılıkları daha yüksektir.

Bunu göz önünde bulundurarak, bu uyarı özelliğini WordPress yorumlarına ve sitenizdeki diğer formlara nasıl ekleyeceğinizi göstereceğiz. İşte bu kılavuzda bahsedeceğimiz her şeye hızlı bir genel bakış:

Hazır mısınız? Hadi başlayalım.

WordPress’te Gönderilmemiş Formlar için Gezinmeyi Onayla açılır penceresini göster

Bu eğitim için özel bir eklenti oluşturacağız, ancak endişelenmeyin. Eklentiyi web sitenize yüklemek için bu eğitimin sonunda da indirebilirsiniz.

Ancak, kodu daha iyi anlamak için kendi eklentinizi oluşturmayı denemenizi isteyeceğiz. Bunu önce yerel bir kurulumda veya hazırlık sitesinde yapabilirsiniz.

İlk olarak, bilgisayarınızda yeni bir klasör oluşturmanız ve adını confirm-leaving koymanız gerekir. confirm-leaving klasörünün içinde başka bir klasör oluşturacak ve adını js koyacaksınız.

Şimdi Not Defteri gibi bir düz metin editörü açalım ve yeni bir dosya oluşturalım. İçine aşağıdaki kodu yapıştırın:

[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]

Bu PHP işlevi, web sitenizin ön ucuna basitçe bir JavaScript dosyası ekler.

Devam edin ve bu confirm-leaving.php dosyasını ana confirm-leaving klasörünün içine kaydedin.

Şimdi, bu eklentinin yüklediği JavaScript dosyasını oluşturmamız gerekiyor. Bunu metin düzenleyicinizde yeni bir dosya oluşturarak ve bu kodu içine yapıştırarak yapabilirsiniz:

[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]

Bu JavaScript kodu, kullanıcının yorum formunda kaydedilmemiş değişiklikleri olup olmadığını algılar. Kullanıcı sayfadan uzaklaşmaya veya pencereyi kapatmaya çalışırsa, bir uyarı açılır penceresi gösterecektir.

Daha sonra bu dosyayı js klasörünün içine confirm-leaving.js olarak kaydetmek isteyeceksiniz.

Her iki dosyayı da kaydettikten sonra, klasör yapınız bu şekilde görünmelidir:

Şimdi, bir FTP istemcisi kullanarak WordPress sitenize bağlanmanız gerekir. Adım adım talimatlar için WordPress dosyalarını yüklemek için FTP’nin nasıl kullanılacağına ilişkin kılavuzumuza bakabilirsiniz.

Bağlandıktan sonra, confirm-leaving klasörünü web sitenizdeki/wp-contents/plugins/ klasörüne yüklemeniz gerekir.

Bundan sonra, WordPress yönetici alanına giriş yapmak ve ‘Eklentiler’e gitmek isteyeceksiniz.

Buradan, yüklü eklentiler listesinde ‘Confirm Leaving’ eklentisini görmelisiniz. Daha sonra altındaki ‘etkinleştir’ bağlantısına tıklayabilirsiniz.

Hepsi bu kadar. Artık web sitenizdeki herhangi bir gönderiyi ziyaret edebilir, yorum formunun herhangi bir alanına bir metin yazabilir ve ardından göndermeden sayfadan ayrılmayı deneyebilirsiniz.

Kaydedilmemiş değişikliklerin bulunduğu bir sayfadan ayrılmak üzere olduğunuzu bildiren bir açılır pencere görüntülenir.

Uyarı Açılır Penceresini WordPress Sitenizdeki Diğer Formlara Ekleme

WordPress sitenizdeki herhangi bir formu hedeflemek için aynı kod tabanını kullanabilirsiniz. Burada, size bir iletişim formunu hedeflemek için kullanmanın bir örneğini göstereceğiz.

Bu örnekte, bir iletişim formu oluşturmak için WPForms eklentisini kullanıyoruz. Web sitenizde farklı bir iletişim formu eklentisi kullanıyorsanız talimatlar aynı olacaktır.

Yapmanız gereken ilk şey, iletişim formunuzu eklediğiniz sayfaya gitmektir. Ardından, fareyi iletişim formunuzdaki ilk alanın üzerine getirin, sağ tıklayın ve ardından tarayıcı menüsünden ‘İncele’yi seçin.

Buradan, ID niteliğini bulmak için <form> etiketi ile başlayan satırı bulmak isteyeceksiniz. Bu örnekte, formumuzun kimliği wpforms-form-170‘tir.

Etiketi bulduktan sonra, devam edin ve ID özelliğini kopyalayın.

Şimdi, confirm-leaving.js dosyasını düzenleyelim ve #commentform‘dan sonra ID niteliğini ekleyelim. Sadece #commentform formunuzun ID’sini virgülle ayırdığınızdan emin olun. Ayrıca formunuzun ID niteliğine önek olarak bir # işareti eklemeniz gerekecektir.

Kodunuz şimdi şöyle görünecektir:

[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]

Her şey iyi görünüyorsa, değişikliklerinizi kaydedebilir ve dosyayı web sitenize geri yükleyebilirsiniz.

Şimdi, iletişim formunuzun herhangi bir alanına herhangi bir metin girebilir ve ardından formu göndermeden sayfadan ayrılmayı deneyebilirsiniz. Kaydedilmemiş değişiklikleriniz olduğuna dair bir uyarı içeren bir açılır pencere görünecektir.

confirm-leaving eklentisini buradan indirebilir, ardından eklentiyi her zamanki gibi kurabilir ve etkinleştirebilirsiniz. Yardıma ihtiyacınız varsa, WordPress eklentisi yükleme kılavuzumuzu inceleyebilirsiniz.

Yorum formunu hedeflediğini unutmayın, ancak eklentiyi kullanıcı kayıt formunuzu, anketlerinizi, geri bildirim formunuzu, iş başvuru formunuzu veya diğer formlarınızı hedefleyecek şekilde düzenleyebilirsiniz.

Bonus İpucu: WordPress Formlarınızın Performansını İyileştirin

Gezinmeyi onayla açılır penceresini ekledikten sonra, kullanıcıların formlarını ne sıklıkla terk ettiklerini izlemek iyi bir fikirdir.

Kaç kişinin bitirmeden ayrıldığını bilmek, sitenizin onlar için ne kadar iyi çalıştığını görmenize yardımcı olabilir. Bu şekilde, ayrılmalarına neyin sebep olduğunu bulabilir ve iyileştirmeler yapabilirsiniz.

Form terkini izlemek için en iyi araçlardan biri MonsterInsights‘tır.

Kullanıcıların formlarınızla nasıl etkileşime girdiğini ve nerede bırakma eğiliminde olduklarını WordPress panonuzdan görmenizi kolaylaştıran en iyi Google Analytics eklentisidir.

Daha fazla ayrıntı için lütfen form terkini takip etme ve azaltma hakkındaki kılavuzumuza bakın.

Bir şey varsa, bir A/B bölünmüş testi de yapabilirsiniz. Bu, hangisinin daha iyi performans gösterdiğini görmek için formlarınızın farklı sürümlerini denemek anlamına gelir.

Örneğin, navigasyonu onayla açılır pencerenizin ifadesini değiştirebilir veya formunuzu özelleştirebilirsiniz. Sonuçları analiz ederek, kullanıcıları neyin meşgul edeceğini ve terk oranlarını azaltmaya yardımcı olacağını belirleyebilirsiniz.

Thrive Optimize bu görev için en iyi eklentidir. Herhangi bir kodlama yapmadan A/B split testleri yapmanızı sağlar ve verilerinizi güvende tutar.

Daha fazla bilgi edinmek için WordPress’te A/B split testinin nasıl yapılacağına ilişkin kılavuzumuza başvurabilirsiniz.

Umarız bu makale WordPress formları için gezinmeyi onayla açılır penceresini göstermenize yardımcı olmuştur. Ayrıca, en iyi çevrimiçi form oluşturuculara ilişkin uzman seçimlerimize ve daha iyi özel bildirimlerin nasıl ekleneceğine ilişkin kılavuzumuza da göz atmak isteyebilirsiniz.

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.