Pop-up’lar bazılarına can sıkıcı görünse de, daha fazla müşteri dönüşümü elde etmeye veya sadece daha fazla abone kazanmaya yardımcı oldukları inkar edilemez. Elbette müdahaleciliği en aza indiren ve pratik, kullanıcı dostu formlar içeren bir açılır pencere uygulamak en iyi sonuçları verecektir. Bununla birlikte web sitenizle sorunsuz bir şekilde entegre olabilmesi için açılır pencerenin tasarımı, web sitesindeki yerleşimi ve onu hangi eylemlerin tetiklediği konusunda da endişelenmeniz gerekir. Yine de, ezici gibi görünse de, tüm bu sorunlar uygun bir WordPress açılır eklentisi ile çözülebilir. Daha önceki makalelerimizden birinde en iyi premium pop-up eklentilerini ele almış olsak da, bunun için, bir iletişim formu açılır penceresi oluşturmayı çok kolaylaştıran daha uygun maliyetli bir eklenti kombinasyonunu bilerek seçtik.
Bu makale, eklentileri kullanarak bir iletişim formu açılır penceresi eklemeye odaklandığından, teknik bilgi düzeyleri ne olursa olsun, çok çeşitli WordPress kullanıcıları için okumaya değer. Daha doğrusu, bu makalede, bir iletişim formu açılır penceresi oluşturmak için birlikte iyi çalışan iki eklenti kullanacağız. İlki, iletişim formu oluşturmak için kullanılacak, ikincisi ise bu iletişim formunu açılır pencere işleviyle entegre etmek için gerekli işlevselliği sağlayacaktır.
İşte hakkında konuşacağımız şey:
-
WordPress İletişim Formu Oluşturma
-
WordPress İletişim Formu Açılır Penceresi Ekleme
-
Popup Maker eklentisinin Seçeneklerini Keşfetme
-
Ek İpuçları
WordPress İletişim Formu Oluşturma
Contact Form 7 eklentisi, iletişim formunu ve posta içeriğini basit HTML biçimlendirmesiyle özelleştirmenize izin veren, iyi bilinen bir ücretsiz iletişim formu eklentisidir. Hatta reCAPTCHA’yı, spam filtrelemeyi, Ajax destekli form gönderimini destekler ve ayrıntılı belgelere sahiptir. Hatta daha sonra ele alacağımız açılır pencere oluşturma eklentisiyle kolayca bütünleşir. O halde, Contact Form 7 eklentisini kullanarak form oluşturmanın bazı önemli noktalarını gözden geçirelim.
İletişim > Yeni Ekle bölümüne gittikten sonra, Form adlı ilk sekmede bir demo iletişim formu içeriği göreceksiniz.
Bu sekmede, iletişim formunuz için içeriği, mevcut form şablonunu düzenleyerek veya kodunuzu tamamen ekleyerek oluşturmanız gerekir. Bunu takiben, Mail sekmesinde, iletişim formunda bilgilerini gönderen birine gönderilecek e-postanın içeriğini belirlemeniz gerekecektir. Eklemenizi öneren önceden tanımlanmış bir şablon da vardır. Yine de, daha fazla bilgi için İletişim Formu 7’nin ilgili dokümantasyon sayfasına bakmanızı öneririz.
Mesajlar sekmesinde, iletişim formuna bilgilerinizi girdikten sonra gelen cevap mesajlarını düzenleyebileceksiniz. Bir kez daha, hepsi ihtiyaçlarınıza göre ayarlamanız gereken önceden tanımlanmış değerlerine ayarlanacaktır.
Son olarak İletişim Formu 7 eklentisi, özelleştirme kodunuzu ekleyebileceğiniz Ek Ayarlar sekmesini sunar. Makalede bu bölümü kullanmamış olsak da, ekleyebilecekleriniz hakkında daha fazla bilgi için eklentinin belgelerine bakmanızı öneririz.
Ek olarak sonunda Popup Ayarları sekmesini göreceksiniz. Bu sekme, sonraki bölümde göstereceğimiz Popup Maker eklentisi tarafından eklendiğinden varsayılan olarak mevcut değildir. Bu bölümde, bu iletişim formu başarıyla gönderildikten sonra açılır pencerenin kapatılmasını veya seçtiğiniz yeni bir pencerenin açılmasını ayarlayabilirsiniz. Bir açılır pencereyi kapatmayı seçmeniz durumunda, formu başarıyla gönderdikten sonra kapanmasının gecikme süresini ayarlayabilirsiniz.
Örneğimizde bu seçenekleri kullanmamış olsak da, açılır pencereyi oluşturduktan sonra ihtiyaçlarınıza göre yeniden ziyaret etmeyi ve ayarlamayı düşünebileceğiniz bir şey olarak bunlardan bahsedeceğiz.
Bununla birlikte özel iletişim formunuzu oluştururken başlamanın en kolay yolu, mevcut demo form şablonunu düzenlemektir. Örneğin mevcut etiketler listesinden üzerine tıklayarak yeni bir şablon etiketi (örn. telefon) ekleyebilirsiniz.
Bunu yaptıktan sonra, etiketle ilgili bazı bilgileri belirtmenizi isteyen bir açılır pencere göreceksiniz. Adını, varsayılan değerini ve yer tutucusunu, gerekli olup olmadığını ve etikete eklemek istediğiniz CSS kimliğini ve sınıf niteliğini belirtebilirsiniz. Siz seçenekleri doldururken, pencerenin alt kısmında yer alan etiketin önizlemesi de değişecektir. Tüm seçenekleri seçip yapılandırdıktan sonra, yeni etiketi iletişim formunuza eklemek için “Etiket Ekle” düğmesine tıklayın.
Yeni oluşturulan etiket, metin imlecinizi daha önce yerleştirdiğiniz konuma forma eklenecektir.
Yeni eklenen etiketin, etiketi eksik olduğundan, kalan etiketlerden biraz farklı olduğunu fark edebilirsiniz. Etiket eklemek isteğe bağlıdır ve ön uçta etiket kodu kullanılarak eklenen alanın yukarısında gösterileni temsil eder. Bunu değiştirmek için, demo form şablonunda yapıldığı gibi, eklenen etiketin etrafına açılış ve kapanış etiketi etiketleri ekleyebilirsiniz. Hatta yapabileceğiniz iki ek şey var.
Daha önce de belirtildiği gibi, bir form alanını onu oluşturan kodu silerek kaldırabilirsiniz. Fakat en önemlisi, alan etiketlerinin etrafına ek HTML kodu ekleyebilir veya hatta tüm iletişim formunu sarabilirsiniz. Hatta HTML kodunu eklerken, daha sonra stil için kullanılacak bir kimlik veya özel CSS sınıfı bile belirleyebilirsiniz. Yeni eklenen alanın çevresine sarılmış özel bir CSS sınıfına sahip basit bir
Bununla birlikte ipuçlarımızı ve ilgili eklenti belgelerini takip ederek, web sitenize uygun iletişim formu kodunu oluşturabileceğinizden eminiz. Form şablonu kodunu düzenledikten sonra, düzenleme ilerlemenizi kaydetmek için alttaki “Kaydet” düğmesini tıklamayı unutmamalısınız. Kalan sekmeler için, sağlanan dokümantasyon bağlantılarında belirtilenler dışında herhangi bir ek önerimiz yoktur. Bu sebeple bunları daha fazla tartışmayacağız.
Bu yazı için örnek olarak çok basit bir iletişim formu kullanacağız. Yalnızca bir e-posta metin alanı ve eklediğimiz bir miktar ek HTML kodu içeren bir gönder düğmesi içerir.
İletişim formunun oluşturduğu kısa kodu vurguladık. Yeni oluşturulan iletişim formunu, bu makale için kullandığımız diğer eklenti olan Popup Maker eklentisi tarafından oluşturulan açılır pencereye entegre etmemize yardımcı olacak tam olarak bu kısa koddur.
WordPress İletişim Formu Açılır Penceresi Ekleme
Popup Maker eklentisi, en iyi WordPress açılır eklentilerinden biridir: her türlü açılır pencere, kalıcı, içeri kaydırılmış, afiş veya içerik yerleşimi oluşturmak için kullanılabilir. Açılır pencereyi tetiklemenin birçok yolu olan ücretsiz bir eklentidir. Bunlardan yalnızca üçü ücretsiz – otomatik açma, düğme tıklaması veya form gönderme – diğerleri ise premium uzantıların parçasıdır. Hatta benzersiz bir abonelik formu sağlarken, tüm popüler iletişim formu eklentileriyle entegre olur.
Bunun dışında eklenti, makalede birçok kez atıfta bulunacağımız çok kapsamlı belgelere sahiptir. Hatta bu eklentiyi kullanmanın kilit noktaları, çeşitli bilgi ve teknik becerilere sahip WordPress kullanıcılarına hitap eden birkaç bölüme ayrılmıştır. Bu bölümlere erişmek için, yalnızca Popup Maker > Yardım ve Destek bölümüne gitmeniz yeterlidir.
Daha sonra tüm belgeleri kendi başınıza incelemeye veya önce sunulan içeriği kontrol etmeye karar verebilirsiniz. Makaleyi oluştururken ikisinden de biraz yaptık. Sonuç olarak Contact Form 7 eklentisi ile yapılan bir iletişim formu kısa kodunu entegre eden Popup Maker eklentisi ile açılır pencereler oluşturmak için kapsamlı bir rehber oluşturduk. Bunu söyledikten sonra başlayalım.
Yapmanız gereken ilk şey, Popup Maker > Create Popup bölümüne gitmek, ardından aşağıda gösterilene benzer bir ekran göreceksiniz.
Benzer dememizin nedeni, eklentinin açılır pencerelerin içeriğini oluşturmak ve düzenlemek için TinyMCE editörünü kullanması. Fakat bunun yerine Gutenberg editörünü kullanmanıza izin veren bir seçeneğe de sahip olmasıdır. Fakat seçenek hala deneysel olduğu için bu makale için kullanmamaya karar verdik. Bu yüzden kullanmaya karar verirseniz, düzenleme ekranı yalnızca biraz farklı olacaktır.
Açılır pencere oluşturmak için, bir açılır pencere adı eklemeniz ve içeriği düzenleyiciye eklemeniz gerekir. Hatta ön uçta açılır içeriğin yanında gösterilecek bir açılır pencere başlığı ekleyebilirsiniz. İçeriğe gelince, normal metin ve kısa kodlar ekleyebilirsiniz. Hatta aşağıdaki ekran görüntüsünde gösterilen simgeye tıklayarak bulunan Popup Maker kısa kodlarını da kullanabilirsiniz.
Yazının ana kısmı için Popup Maker kısa kodlarını ek olarak kullanmadan sadece basit bir metin ve içerik olarak iletişim formu kısa kodunu kullanmaya karar verdik. Fakat bunları daha sonra bu makalenin Ek ipuçları bölümünde ele alacağız.
Bununla birlikte bu eklentiyi kullanarak bir açılır pencere oluşturmanın en zor kısmı, içerik oluşturmada değil, bu eklentinin sağladığı geniş seçenek yelpazesini doğru şekilde ayarlamakta yatmaktadır. Bu yüzden bu makale için oluşturduğumuz açılır pencere örneğine geçmeden önce açılır pencere seçeneklerine genel bir bakış yapmaya karar verdik.
İlk olarak Popup Maker eklentisi tarafından sağlanan seçenekler çeşitli konumlara yerleştirilmiştir, bu nedenle bu makalenin çeşitli bölümlerinde bunları birden çok durumda ele alacağız. Başlayacağımız ilk bölüm popup oluşturma işlemi ile doğrudan alakalıdır ve Popup Ayarları olarak adlandırılır. Açılır bir öğe oluştururken veya düzenlerken düzenleyici ekranının altında yer alır. Açılır Pencere Ayarları beş sekme içerir: Tetikleyiciler, Hedefleme, Görüntüleme, Kapatma ve Gelişmiş. Bunlardan bazıları, aşağıda göreceğimiz sekmelere bölünmüş seçeneklere de sahiptir.
İlk sekmede “Yeni Tetikleyici Ekle” butonuna tıkladıktan sonra, yeni açılır pencerenize eklemek istediğiniz tetikleyicinin seçeneklerini belirtebileceğiniz bir açılır pencere göreceksiniz. Bu seçenekler, ne tür bir tetikleyici eklemek istediğinizi, bir açılır pencerenin tekrar gösterilmesini önlemek için bir tanımlama bilgisi ayarlayıp ayarlamayacağınızı veya açılır pencerenin hangi ziyaretçi eyleminden sonra kapanacağını içerir. Tabii ki, tüm bu seçenekler web sitenizde görüntülemek istediğiniz açılır pencere türüne özeldir.
Bu seçeneklerin amacını tam olarak anlamadıysanız, eklentide çerezler hakkında daha fazla bilgi verecek belgelere bir bağlantı da vardır. Genel olarak eklenti, sahip olabileceğiniz herhangi bir şüphe için başvurmanızı önerdiğimiz çok kapsamlı belgelere sahiptir. Hatta ilgili dokümantasyon makaleleri genellikle anahtar seçeneklerin yanında bağlantılıdır ve bu da açılır pencereleri oluşturma ve yönetme sürecini çok daha kolay hale getirir. Bununla birlikte daha önce bahsedilen üç seçeneği ayarladıktan sonra, devam etmek için “Ekle” düğmesini tıklayın.
Eklenen tanımlama bilgisini gösteren ek bir açılır pencere açılacaktır (eklemeye karar vermiş olmanız durumunda). Ek seçenekler, Genel ve Gelişmiş olmak üzere iki sekmede sağlanır ve açılır pencereyi tetiklemek için kullanılabilecek öğeler için özel CSS seçicileri eklemeyi ve bu öğelerin varsayılan tıklama işlevinin engellenip engellenmeyeceğini seçmeyi içerir. Bu işlevi daha da açıklığa kavuşturmak için eklenti, hem bir dosyayı indirmek hem de ona eklenmiş ilgili açılır pencereyi açmak için basılabilen bir indirme bağlantısı örneği sunar. Tabii ki, bu ek seçenekleri kullanmak isteğe bağlıdır. Bunları kullanmayı seçerseniz, “Ekle” düğmesini tıkladığınızdan emin olun.
Daha sonra açılır pencerenin nerede etkinleştirilip devre dışı bırakılacağına ilişkin bir kural veya bir dizi kural eklemenizi sağlayan Hedefleme sekmesine geçelim. “Bir koşul seçin” açılır menüsüne tıklayarak açılır pencerenin görüntülenme koşulunu belirleyebilir ve aynı işlemin küçük ekranlarda yapılıp yapılmayacağını seçebilirsiniz.
Bir koşul ekledikten sonra, “+VEYA” ve “+VE” bağlantıları şeklinde yeni koşullar eklemek için ek seçenekler göreceksiniz. Son olarak seçilen koşulun yanındaki ünlem işareti işaretlenerek herhangi bir koşul tam tersi haline getirilebilir.
Aşağıdaki sekmede, açılır pencerenizin görüntülenmesiyle ilgili seçeneklerin çoğunu ayarlayabileceksiniz. Bunlar pop-up konumunun, hangi tasarım deseninin, yani temanın kullanılacağının yanı sıra pop-up boyutunun ve onunla birlikte gelen animasyonun ve seslerin ayarlanmasını içerir. Bu seçeneklerin tümü ayrı olarak saklanır…