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 bu genellikle 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 muhtemelen WordPress içerik düzenleyici ekranında çalışırken 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 etmeyi önleyerek kullanıcılara formu tamamlama şansı verirsiniz. Ortalama çevrimiçi form terk etme oranı %68 civarında olduğundan, bu basit kontrol önemli ölçüde 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:

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

Deneyimlerimize göre, bunun en güvenilir yöntemi basit, özel bir eklenti oluşturmaktır.

Daha önce hiç kodlama yapmadıysanız endişelenmeyin! Kodun çalıştığından emin olmak için bu kodu bizzat uyguladık ve doğruladık 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 anlamanız için eklentiyi kendiniz oluşturmanızı şiddetle tavsiye ederiz. İlk olarak 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, Windows için Not Defteri veya Mac için TextEdit gibi düz metin bir düzenleyici açalım. TextEdit kullanıyorsanız, biçimlendirme hatalarını önlemek için herhangi bir şey yapıştırmadan önce Biçim » Düz Metin Yap aracılığıyla hemen düz metin moduna ayarlayın.

İç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');

		
WPCode ❤️ ile barındırılır
		

			
			WordPress'te 1 tıklamayla Kullanım
		
		

Bu PHP fonksiyonu, JavaScript eklemek için resmi WordPress yöntemi olan wp_enqueue_script'i kullanır. Bu, diğer eklentilerle 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 içine bu kodu yapıştırarak yapabilirsiniz:

<br>jQuery(document).ready(function($) {<br>    var needToConfirm = false;<br>    window.onbeforeunload = askConfirm;<br> <br>function askConfirm() {<br>    if (needToConfirm) {<br>        // Put your custom message here<br>        return "Your unsaved data will be lost.";<br>    }<br>}<br> <br>$("#commentform").change(function() {<br>    needToConfirm = true;<br>});<br> <br> })<br>

		
WPCode ❤️ ile barındırılır
		

			
			WordPress'te 1 tıklamayla Kullanım
		
		

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 ile yükleme rehberimize bakabilirsiniz.

Bağlandıktan sonra, confirm-leaving klasörünü web sitenizdeki /wp-content/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 sayfadan ayrılmayı 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, güçlü bir sürükle ve bırak WordPress form oluşturucu olan WPForms eklentisiyle yapılmış bir formu hedefliyoruz, ancak web sitenizde farklı bir iletişim formu eklentisi kullanıyorsanız bu adımlar 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'da, iletişim formumuz, yıllık okuyucu anketimiz ve geçiş taleplerimiz dahil olmak üzere birçok farklı formu yerleştirmek için WPForms kullanıyoruz. Araç ve neler yapabileceği konusunda meraklıysanız, WPForms hakkındaki tam incelememize gidebilirsiniz.

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

Ardından, masaüstü tarayıcınızda iletişim formunuzdaki ilk alana gelin, sağ tıklayın ve menüden 'İncele'yi seçin. Açılan panelde,

Bu örnekte, formumuzun kimliği wpforms-form-170'tir. Form kimliği numaranızın oluşturulduğu zamana bağlı olarak farklı olacağını unutmayın; '170' yerine kendi benzersiz numaranızı koymalısınız.

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 gerekecektir. Virgül, jQuery'de 'VEYA' işleci görevi görür, bu da betiğin yorum formunu veya belirli iletişim formunuzu izleyeceği anlamına gelir.

Ayrıca, yorum formunun sahip olduğu gibi, yeni kimliğinize bir # öneki eklediğinizden emin olun.

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

<br>jQuery(document).ready(function($) {<br>    var needToConfirm = false;<br>    window.onbeforeunload = askConfirm;<br><br>function askConfirm() {<br>    if (needToConfirm) {<br>        // Put your custom message here<br>        return "Your unsaved data will be lost.";<br>    }<br>}<br> <br>$("#commentform,#wpforms-form-170").change(function() {<br>    needToConfirm = true;<br>});<br> <br> })<br>

		
WPCode ❤️ ile barındırılır
		

			
			WordPress'te 1 tıklamayla Kullanım
		
		

Her şey yolunda görünüyorsa, confirm-leaving.js dosyasındaki değişikliklerinizi kaydedebilirsiniz. Ardından, FTP istemcinizde /wp-content/plugins/confirm-leaving/js/ konumuna gidin ve güncellenmiş dosyayı mevcut confirm-leaving.js dosyasının üzerine yazmak için sürükleyin.

Ş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: Ayrılmayı Onayla eklentisini buradan indirebilir, ardından eklentiyi her zamanki gibi kurup etkinleştirebilirsiniz. Yardıma ihtiyacınız olursa, WordPress eklentisi nasıl kurulur rehberimize bakabilirsiniz.

Bunun yorum formunu hedeflediğini unutmayın, ancak eklentiyi kullanıcı kayıt formunuzu, anketleri, geri bildirim formunu, iş başvuru formunu veya diğer herhangi bir formu hedeflemek için 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.

WPForms gerçek kısmi girişleri yakalarken, MonsterInsights Google Analytics'te görüntülemeleri gönderimlere karşı izlemek için üst düzey analizler sağlar. Form terkini izlemek için en iyi Google Analytics eklentilerinden biridir.

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

WPBeginner olarak, 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 eksiksiz MonsterInsights incelememize göz atın.

Daha fazla ayrıntı için lütfen form terk etmeyi 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 gezinme açılır pencerenizin metnini değiştirebilir veya formunuzu özelleştirebilirsiniz. Sonuçları analiz ederek, kullanıcıları neyin meşgul tuttuğunu ve terk etme oranlarını azaltmaya yardımcı olduğunu belirleyebilirsiniz.

Thrive Optimize bu görev için en iyi eklentidir. Kodlama yapmadan A/B bölünmüş testleri kolayca çalıştırmanıza olanak tanır. 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

Bunun pratikte nasıl çalıştığına dair hala birkaç sorunuz olabilir, bu yüzden bazı hızlı cevapları gözden geçirelim.

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.

Ancak, mobil tarayıcılarda (özellikle iOS Safari'de), açılır pencere tetikleyicisinin güvenilir bir şekilde etkinleşmesi için kullanıcının sayfa ile etkileşimde bulunmuş olması, örneğin bir form alanına dokunmuş olması gerekir.

WordPress Formları Kullanmak İçin Ek Kılavuzlar

Umarız bu makale, WordPress formlarınız için onay gezinme açılır penceresini göstermenize yardımcı olmuştur. Ayrıca bu diğer kılavuzlara ve uzman seçimlerine de 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.