WordPress'te Formlar İçin Onay Navigasyon Pop-up'ı Nasıl Gösterilir

WordPress formu doldurduktan sonra yanlışlıkla geri düğmesine basıp her şeyi kaybetmekten daha sinir bozucu bir şey yoktur. Hepimiz bu durumu yaşadık ve genellikle bu, birinin hemen pes etmesine neden olmak için yeterlidir.

Site sahipleri için bu küçük aksaklık, satış kaybı ve daha az kayıt anlamına gelebilir. Ziyaretçiler sinirlenerek ayrılacak ve geri dönüp tekrar deneme olasılıkları çok daha düşük olacaktır.

İyi haber mi? Kolay bir çözümü var: bir onay gezinme açılır penceresi. Bu basit uyarı, kullanıcıların gönderilmemiş bir formla bir sayfadan ayrılmadan önce ikinci bir şans vermesini sağlar.

Bu kılavuzda, bu özelliği WordPress formlarınıza nasıl ekleyeceğinizi göstereceğiz, böylece daha sorunsuz bir deneyim yaratabilir ve form tamamlama oranlarınızı artırabilirsiniz.

Onay Navigasyon Açılır Penceresi Nedir ve Neden İhtiyacınız Var?

Onay navigasyon açılır penceresi, bir formda kaydedilmemiş değişiklikleri olan bir kullanıcı bir web sayfasından ayrılmaya çalıştığında görünen bir tarayıcı uyarısıdır.

Bu özelliği WordPress içerik düzenleyicisi ekranında çalışırken muhtemelen görmüşsünüzdür. Kaydedilmemiş değişiklikleriniz varsa ve sayfadan ayrılmaya çalışırsanız, çalışmanızı kaybetmenizi önlemek için bir uyarı açılır penceresi görünür.

Bunu kendi formlarınıza eklemek, büyük faydalar sağlayan küçük bir değişikliktir:

• Kullanıcı Deneyimini İyileştirir: Ziyaretçileri ilerlemelerini yanlışlıkla kaybetme hayal kırıklığından kurtarır ve zamanlarına değer verdiğinizi gösterir.
• Dönüşüm Oranlarını Artırır: Kasıtsız terk etmeleri önleyerek, kullanıcılara formu tamamlama şansı verirsiniz, bu da potansiyel müşteri sayısını artırabilir.
• Kullanıcı Güveni Oluşturur: Bunun gibi düşünceli bir özellik, profesyonelliği ve özeni gösterir, bu da sadakat oluşturmaya ve tekrar ziyaretleri teşvik etmeye yardımcı olabilir.

Bunu akılda tutarak, bu uyarıyı WordPress yorumlarınıza ve sitenizdeki diğer formlara ekleyelim.

Bu kılavuzda ele alacağımız her şey burada:

• Yöntem 1: WordPress'te Gönderilmemiş Formlar İçin Onay Gezinme Açılır Penceresini Göster
• Yöntem 2: Uyarı Açılır Penceresini WordPress Sitenizdeki Diğer Formlara Ekleme
• Bonus: WordPress Form Performansınızı İyileştirin
• Onay Navigasyon Açılır Pencereleri Hakkında Sıkça Sorulan Sorular
• WordPress Formları Kullanmak İçin Ek Kılavuzlar

Hazır mısınız? Başlayalım.

Yöntem 1: WordPress'te Gönderilmemiş Formlar İçin Onay Gezinme Açılır Penceresini Göster

Bu yöntem, basit, özel bir eklenti oluşturmayı içerir.

Daha önce hiç kodlama yapmamış olsanız bile endişelenmeyin! Sürecin her adımında size rehberlik edeceğiz ve bu, WordPress eklentilerinin nasıl çalıştığını görmek için harika bir yoldur.

Ayrıca, bu eklentiyi bu öğreticinin sonunda web sitenize yüklemek için indirebilirsiniz.

Ancak, kodun nasıl çalıştığını daha iyi anlamak için eklentiyi kendiniz oluşturmanızı şiddetle tavsiye ederiz. Öncelikle yerel bir kurulumda veya hazırlık sitesinde takip edebilirsiniz.

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

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

<?php
/**
 * Confirm Leaving
 * Plugin Name: Confirm Leaving
 * Plugin URI:  https://014.leahstevensyj.workers.dev
 * 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://014.leahstevensyj.workers.dev
 * 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
		
		

Bu PHP fonksiyonu, JavaScript eklemek için resmi WordPress yöntemi olan wp_enqueue_script'i kullanır. Bu, diğer eklentilerle olan betik çakışmalarını önlemeye yardımcı olduğu için en iyi uygulamadır.

Şimdi, bu dosyayı ana confirm-leaving klasörünün içine confirm-leaving.php olarak kaydedin.

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

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
		
		

Bu JavaScript, bir kullanıcının yorum formunu doldurmaya başlayıp başlamadığını algılar. Göndermeden önce sayfadan ayrılmaya çalışırlarsa, uyarı açılır penceresini tetikler.

Bu dosyayı daha önce oluşturduğunuz js klasörünün içine confirm-leaving.js olarak kaydedin.

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

Şimdi, WordPress sitenize bir FTP istemcisi kullanarak bağlanmanız gerekiyor. Adım adım talimatlar için, WordPress dosyalarını FTP kullanarak nasıl yükleyeceğiniz hakkındaki rehberimize bakabilirsiniz.

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

Bundan sonra, WordPress yönetici alanına giriş yapmak ve 'Eklentiler' bölümüne gitmek isteyeceksiniz.

Buradan, yüklü eklentiler listesinde 'Confirm Leaving' eklentisini görmelisiniz. Ardından altındaki 'activate' bağlantısına tıklayabilirsiniz.

İşte bu kadar. Artık web sitenizdeki herhangi bir gönderiyi ziyaret edebilir, yorum formuna bir şeyler yazabilir ve ardından sayfayı terk etmeyi deneyebilirsiniz.

Ardından, kaydedilmemiş değişiklikleriniz olduğuna dair sizi uyaran bir açılır pencere görünecektir.

Güvenlik nedenleriyle, modern web tarayıcıları, koddan gelen özel metin yerine kendi genel uyarı mesajlarını (örneğin, “Siteyi terk et? Yaptığınız değişiklikler kaydedilmeyebilir.”) gösterecektir. Kodun amacı yalnızca bu standart tarayıcı istemini tetiklemektir.

Yöntem 2: Uyarı Açılır Penceresini WordPress Sitenizdeki Diğer Formlara Ekleme

İletişim formu gibi WordPress sitenizdeki diğer herhangi bir formu hedeflemek için aynı kodu kullanabilirsiniz.

Bu örnekte, WPForms eklentisiyle oluşturulmuş bir formu hedefliyoruz, ancak bu adımlar web sitenizde farklı bir iletişim formu eklentisi kullanıyorsanız da işe yarayacaktır.

Bir iletişim formunuz yok ve bir tane oluşturmak mı istiyorsunuz? O zaman iletişim formu oluşturma rehberimize göz atabilirsiniz.

WPBeginner olarak, iletişim formumuz, yıllık okuyucu anketimiz ve geçiş isteklerimiz dahil olmak üzere birçok farklı formu yerleştirmek için WPForms kullanıyoruz. Araç ve neler yapabileceği hakkında merak ediyorsanız, WPForms incelememize göz atabilirsiniz.

Yapılacak ilk şey, iletişim formunuzu yerleştirdiğiniz sayfaya gitmektir.

Ardından, fareyi iletişim formunuzdaki ilk alanın üzerine getirin, sağ tıklayın ve tarayıcı menüsünden 'İncele'yi seçin.

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

Etiketi bulduktan sonra, ID özniteliğini kopyalayın.

Şimdi, jQuery seçicisini düzenlemek için confirm-leaving.js dosyanızı açın. Formunuzun Kimliğini, virgülle ayrılmış olarak #commentform'un hemen sonrasına eklemeniz gerekecek. Tıpkı yorum formu gibi yeni Kimliğinize de bir # öneki eklediğinizden emin olun.

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

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
		
		

Her şey yolunda görünüyorsa, confirm-leaving.js dosyasındaki değişikliklerinizi kaydedebilir ve eski dosyanın üzerine yazarak sunucunuza 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ğunu belirten bir uyarı ile bir açılır pencere görünecektir.

📥 Eklenti İndirme: confirm-leaving eklentisini buradan indirebilir, ardından eklentiyi her zamanki gibi kurup etkinleştirebilirsiniz. Yardıma ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair kılavuzumuza göz atabilirsiniz.

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

Bonus: WordPress Form Performansınızı İyileştirin

Onay navigasyon açılır penceresini ekledikten sonra, kullanıcıların formlarını ne sıklıkla terk ettiğini izlemek iyi bir fikirdir. Bu verileri bilmek, insanların ayrılmasına neden olan sorunları bulmanıza ve düzeltmenize yardımcı olabilir.

Form terkini izlemek için en iyi araçlardan biri MonsterInsights'tir. WordPress için en iyi Google Analytics eklentisidir. Form eklentisi (Pro sürümünde mevcuttur), form görüntülemelerini ve gönderimlerini otomatik olarak izlemeyi kolaylaştırır.

Bu sayede, kullanıcıların formlarınızla nasıl etkileşim kurduğunu doğrudan kontrol panelinizden görebilirsiniz.

WPBeginner'da, formlar, düğmeler ve bağlı kuruluş bağlantıları dahil olmak üzere tüm önemli dönüşümlerimizi izlemek için MonsterInsights kullanıyoruz. Tüm özelliklerini öğrenmek için MonsterInsights incelememize göz atın.

Daha fazla ayrıntı için, form terkini izleme ve azaltma kılavuzumuza bakın.

Hangi form sürümünün daha iyi performans gösterdiğini görmek için A/B testleri de yapabilirsiniz. Örneğin, daha fazla tamamlama oranını neyin teşvik ettiğini görmek için farklı form stillerini veya düğme metinlerini test edebilirsiniz.

Örneğin, onay navigasyon açılır pencerenizin metnini değiştirebilir veya formunuzu özelleştirebilirsiniz. Sonuçları analiz ederek, kullanıcıları neyin meşgul ettiğini ve terk etme oranlarını azaltmaya yardımcı olduğunu belirleyebilirsiniz.

Thrive Optimize bu görev için en iyi eklentidir. Herhangi bir kodlama yapmadan kolayca A/B bölünmüş testler yapmanızı sağlar.

Daha fazla bilgi edinmek için WordPress'te A/B bölünmüş testinin nasıl yapılacağına dair kılavuzumuza bakın.

Onay Navigasyon Açılır Pencereleri Hakkında Sıkça Sorulan Sorular

Bu kodu eklemek web sitemi yavaşlatır mı?

Hayır, hiç de değil. JavaScript kodu çok hafiftir ve yalnızca bir kullanıcı değiştirilmiş bir formla bir sayfadan ayrılmaya çalıştığında çalışır. Sitenizin performansını fark edilir şekilde etkilemez.

Onay açılır penceresindeki mesajı değiştirebilir miyim?

Ne yazık ki hayır. Güvenlik nedenleriyle, modern tarayıcılar artık web sitelerinin onay açılır penceresinde özel bir mesaj göstermesine izin vermiyor. Kullanıcıya her zaman genel, standart bir uyarı göstereceklerdir.

Bu onay açılır penceresi mobil tarayıcılarda çalışıyor mu?

Evet, onbeforeunload olayı, hem Android hem de iOS'ta Chrome ve Safari dahil olmak üzere çoğu modern mobil tarayıcı tarafından desteklenir. Davranış masaüstündekiyle aynı olacaktır.

WordPress Formları Kullanmak İçin Ek Kılavuzlar

Bu makalenin WordPress formlarınız için gezinme onay iletişim kutusunu göstermenize yardımcı olduğunu umuyoruz.

Ayrıca bu diğer kılavuzlara ve uzman seçimlerine göz atmak isteyebilirsiniz:

• Birden Fazla Alıcıyla İletişim Formu Oluşturma
• WordPress Form Gönderimlerinden Sonra Onay E-postaları Nasıl Gönderilir
• WordPress Formlarınızda Koşullu Mantık Kullanma Yöntemleri
• En İyi Çevrimiçi Form Oluşturucular (Uzman Seçimleri)
• WordPress Formlarını Kullanmaya İlişkin Nihai Kılavuz

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.