İletişim formunuz yavaş olduğu veya tüm sayfanın yeniden yüklenmesini gerektirdiği için potansiyel müşterileri kaybettiğiniz oldu mu? Bu, çok sık duyduğumuz bir hikaye.
Geleneksel WordPress formlarının hem site sahipleri hem de ziyaretçileri için ne kadar sinir bozucu olabileceğini de ilk elden gördük. AJAX formları bu sorunu çözer ve sizinkiler için de aynısını yapabilir.
Bu modern formlar, sayfayı yenilemeden verileri anında gönderir. Ziyaretçileri meşgul tutmaya yardımcı olan daha sorunsuz bir deneyim yaratırlar.
Bu formları müşteri ve iş ortağı web sitelerinde birçok kez uyguladık ve sonuçlar ortada.
Bu kılavuzda, bir WordPress AJAX formu oluşturmak için basit bir 4 adımlı süreç paylaşacağız. Teknik işleri basitleştiren, böylece kolayca takip edebileceğiniz başlangıç dostu bir eklenti kullanacağız. 🙌
AJAX Nedir ve Formlarınız İçin Neden Kullanmalısınız?
AJAX, Asynchronous JavaScript and XML'in kısaltmasıdır, web sayfalarının yeniden yüklenmeden veri göndermesine ve almasına olanak tanıyan bir programlama tekniğidir.
Web formlarında yaygın olarak kullanılır ve kullanıcıların sayfayı yeniden yüklemeden form verilerini göndermelerine olanak tanır. Bu, form göndermeyi kolay ve hızlı hale getirir, bu da genel kullanıcı deneyimini iyileştirir.
Gmail ve Facebook gibi web uygulamaları da arka plan görevleri sorunsuz bir şekilde çalışırken kullanıcıları meşgul etmek için bu tekniği yaygın olarak kullanır.
Gereksiz sayfa yeniden yüklemelerinden kaçınmak ve kullanıcıları mevcut sayfalarında meşgul tutmak için WordPress sitenizdeki formlar için AJAX kullanabilirsiniz.
Bu, özellikle çevrimiçi bir mağaza işlettiğinizde ve alışveriş deneyimini kesintiye uğratmadan kullanıcı geri bildirimi toplamak istediğinizde faydalıdır.
Aynı AJAX işlevselliğini web sitenizdeki diğer özel formlar için de kullanabilirsiniz. Örneğin, özel bir kullanıcı giriş formu, kullanıcıların ek bir sayfa yüklemesi olmadan giriş yapmalarını sağlayabilir.
AJAX Formları İçin Neden WPForms'u Seçmelisiniz?
WPForms, 6 milyondan fazla web sitesi tarafından güvenilen, AJAX özellikli formlar oluşturmak için en iyi WordPress form oluşturucusudur.
WPForms'u AJAX formları için ideal kılan şey şunlardır:
- Kodlama Bilmeyenler İçin Hızlı Kurulum. Çoğu kullanıcı, kod yazmadan 10 dakikadan kısa sürede ilk AJAX formunu oluşturur. Sürükle ve bırak oluşturucu, daha önce hiç kodla uğraşmamış olsanız bile profesyonel formları anında oluşturmanıza olanak tanır.
- Kurumsal Düzeyde Destek. WPForms, inceleme platformlarında sürekli övgü alan bir ekiple aynı gün destek sunar. Sorunlarla karşılaşırsanız, gerçek kişiler bunları hızla çözer – bu, Contact Form 7 gibi ücretsiz eklentilerin sunamayacağı bir şeydir.
- Güçlü Entegrasyonlar. AJAX formlarınız Constant Contact, HubSpot, Stripe, PayPal, Salesforce ve 2.000'den fazla diğer hizmete bağlanabilir. Manuel dışa aktarmalar olmadan potansiyel müşterileri yakalayın ve otomatik olarak e-posta pazarlama platformunuza veya CRM'inize gönderin.
- Sağlam Güvenilirlik. WPForms formları, bozulmadan WordPress güncellemeleri boyunca çalışmaya devam eder. Kullanıcılar tutarlı bir şekilde "işe yarıyor" olduğunu bildiriyor – her bozuk formun kayıp potansiyel müşteri anlamına geldiği durumlarda bu çok önemlidir.
WPForms ile şablonları, entegrasyonları ve form oluşturmayı zahmetsiz hale getiren desteği artı olarak AJAX işlevselliği elde edersiniz. WordPress AJAX iletişim formunuzu 4 basit adımda nasıl oluşturacağınıza bakalım.
Bunu akılda tutarak, size 4 basit adımda bir WordPress AJAX iletişim formu oluşturmayı göstereceğiz.
Başlayalım.
Adım 1: WPForms Eklentisini Yükleyin
İlk adım bir form oluşturucu eklentisi kurmak ve etkinleştirmektir.
Bu eğitim için WPForms eklentisini kullanacağız. Pazardaki en iyi WordPress iletişim formu oluşturucudur ve Ajax destekli formları kolayca oluşturmanıza olanak tanır.
WPBeginner'da, iletişim formumuzu görüntülemek, yıllık okuyucu anketleri yapmak ve diğerlerinin yanı sıra göç hizmeti isteklerini yönetmek için WPForms kullanıyoruz.
Harika bir deneyim oldu ve daha fazla bilgi için tam WPForms incelememizi görebilirsiniz.
Başlamak için bir WPForms hesabı oluşturmak isteyebilirsiniz. WPForms web sitesinde, ‘Şimdi WPForms Al’ düğmesine tıklayın, bir plan seçin ve ödeme işlemini tamamlayın.
📝 Not: AJAX formu oluşturmak için ücretsiz WPForms sürümünü kullanabilirsiniz. Ancak yapay zeka özellikleri, koşullu mantık, dosya yüklemeleri veya Google araç entegrasyonları gibi daha gelişmiş özelliklere ihtiyacınız varsa, ücretli WPForms planına ihtiyacınız olacaktır.
Bu yapıldıktan sonra, WPForms zip dosyanızı indirebileceğiniz ve lisans anahtarınızı kopyalayabileceğiniz kendi WPForms hesap kontrol panelinize sahip olmalısınız.
Şimdi, WPForms eklentisini kuralım ve etkinleştirelim.
WordPress yönetici alanınızda, Eklentiler » Eklenti Ekle bölümüne gidebilirsiniz.
Ardından, eklentiyi hızlıca bulmak için arama çubuğunu kullanabilirsiniz.
Gördüğünüzde, 'Şimdi Yükle'ye ve ardından tekrar 'Etkinleştir'e tıklayın.
Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.
Etkinleştirdikten sonra, WPForms Pro'yu satın aldıysanız, lisans anahtarınızı girmek için WPForms » Ayarlar sayfasına gidin. Ücretsiz sürüm kullanıcıları bu adımı atlayıp Adım 2'ye devam edebilir.
Doğrulandıktan sonra, otomatik güncellemeler alabilecek ve eklentiler yükleyebileceksiniz. Artık WordPress'te AJAX formları oluşturmaya hazırsınız.
Adım 2: İlk Formunuzu Oluşturun
Şimdi ilk WordPress formunuzu oluşturalım.
WordPress yönetici alanındaki WPForms » Yeni Ekle sayfasını ziyaret etmeniz yeterlidir.
Bir sonraki ekranda, yeni formunuza örneğin 'İletişim Formu' adını verebilirsiniz.
Bundan sonra, formlarınızı nasıl oluşturacağınızı seçeceksiniz.
WPForms ile formlarınızı sıfırdan oluşturabilir veya önceden hazırlanmış şablonları seçebilirsiniz. WPForms Lite'ın standart şablonlar içerdiğini unutmayın; tam 2.000'den fazla kitaplık Temel veya daha üst sürüm gerektirir.
Temel lisans veya daha üst sürüm sahipleri, metin isteminden form oluşturmak için yapay zeka form oluşturucusunu da kullanabilir. WPForms daha sonra formu sizin için önizleme alanında oluşturacaktır.
Ancak bu eğitim için hazır bir şablon kullanarak bir iletişim formu oluşturacağız.
'Basit İletişim Formu' kutusunun üzerine gelip 'Şablonu Kullan'a tıklayalım. İhtiyacınız olan başka herhangi bir türde form oluşturabileceğinizi unutmayın; işlem aynıdır.
WPForms şimdi formunuzu, temel alanlar zaten eklenmiş olarak yükleyecektir.
Buradan, düzenlemek için herhangi bir form alanına tıklamanız yeterlidir.
Sol sütundaki yeni form alanlarını tıklayarak da ekleyebilirsiniz.
Yeni alan, Gönder düğmesinin hemen üzerinde, formunuzun altında görünecektir.
Ardından form alanlarını yeniden sıralamak için sürükleyip bırakabilirsiniz.
Formu özelleştirmeyi bitirdikten sonra bir sonraki adıma geçebilirsiniz.
Adım 3: AJAX Onay Mesajınızı Yapılandırın
İyi haber! WPForms, tüm yeni formlar için varsayılan olarak AJAX form gönderimlerini otomatik olarak etkinleştirir, bu nedenle herhangi bir teknik ayar yapılandırmanıza gerek yoktur.
‘Genel’ ayarlar sekmesine gidebilir ve ‘AJAX form gönderimini etkinleştir’ seçeneğinin etkin olduğundan emin olabilirsiniz.
Şimdi birisi formu gönderdikten sonra ne olacağını ayarlayalım.
İlk olarak, ayarlar altındaki 'Onay' sekmesine geçebilirsiniz. Burası, kullanıcılarınıza form gönderimlerini aldığınızı bildirdiğiniz yerdir.
WPForms bunu farklı yollarla yapmanıza olanak tanır. Örneğin, kullanıcıları bir URL'ye yönlendirebilir, onlara belirli bir sayfa gösterebilir veya ekranda basitçe bir mesaj görüntüleyebilirsiniz.
Kullanıcıları yeni bir URL'ye yönlendirmeyi seçerseniz, tarayıcılarının yine de yeni bir sayfa yüklemesi gerekecektir. AJAX'ın gerçek, kesintisiz “yeniden yükleme yok” büyüsünü elde etmek için, ‘Mesaj’ onay türünü kullanmanızı şiddetle tavsiye ederiz.
Mesaj seçeneğini seçmeniz ve onay mesajını düzenlemeniz gerekir. Biçimlendirme araç çubuğunu kullanabilir veya kullanıcıları bir sonraki adımlarda ne yapacakları konusunda yönlendirmek için bağlantılar ekleyebilirsiniz.
Ardından, yeni form gönderimleri hakkında nasıl bildirim almak istediğinizi ayarlayın.
Form ayarlarındaki 'Bildirimler' sekmesine geçin ve bildirim e-postası ayarlarını yapılandırın.
İşiniz bittiğinde, formunuzu kaydedebilir ve form oluşturucudan çıkabilirsiniz.
Adım 4: AJAX Etkin Formunuzu WordPress'e Ekleyin
WPForms, ister bir gönderide, sayfada veya kenar çubuğu widget'ında olsun, formları WordPress sitenize eklemenizi kolaylaştırır.
Formu eklemek istediğiniz yazıyı veya sayfayı düzenleyin ve WPForms bloğunu içerik alanınıza ekleyin.
Bundan sonra, WPForms bloğu içindeki açılır menüden az önce oluşturduğunuz formu seçmeniz gerekir.
WPForms, içerik düzenleyicide formun canlı önizlemesini hemen yükleyecektir.
Artık içeriğinizi kaydedebilir veya yayınlayabilir, ardından formun AJAX işlevselliğini test etmek için WordPress web sitenizi ziyaret edebilirsiniz.
İşte demo sitemizdeki WordPress AJAX form örneğine hızlı bir bakış:
Formunuzu WordPress'te bir kenar çubuğu widget'ına da ekleyebilirsiniz.
Bunu yapmak için Görünüm » Widget'lar sayfasına gidin ve WPForms widget bloğunu bir kenar çubuğuna ekleyin.
Daha önce oluşturduğunuz formu seçin ve widget ayarlarını kaydetmek için "Güncelle" düğmesine tıklayın. Artık AJAX destekli formunuzu görmek için web sitenizi ziyaret edebilirsiniz.
Ek İpucu: Form Gönderimlerini Yönetin ve Otomatikleştirin
AJAX formunuz yayına alınıp gönderileri toplamaya başladığında, WPForms size bu verileri yönetmek ve otomatikleştirmek için güçlü seçenekler sunar.
Girdileri CSV veya Excel'e Dışa Aktarın
Bunu yapmanın en kolay yolu, girdilerinizi CSV veya Excel dosyası olarak dışa aktarmaktır.
Bu, yanıtları Google E-Tablolar veya Microsoft Excel gibi elektronik tablo araçlarında düzenlemeyi ve analiz etmeyi kolaylaştırır. Ayrıca raporları ekibinizle paylaşmak veya form verilerini WordPress dışında yedeklemek için de kullanışlıdır.
WPForms Basic veya daha üst sürümlerini kullanıyorsanız, form gönderilerini dışa aktarmak basittir.
Yalnızca WPForms » Gönderiler'e gidin, formunuzu seçin, dışa aktarma seçeneklerinizi belirleyin ve verileri CSV veya Excel dosyası olarak indirin.
Bu, üç aylık raporlar, potansiyel müşteri analizi veya harici araçlara kişi aktarma için kullanışlıdır.
Bunu kurmak mı istiyorsunuz? WordPress form gönderilerini CSV ve excel'e nasıl aktaracağınız konusundaki tam kılavuzumuzu izleyin.
Entegrasyonlarla Otomatikleştirin
Daha da iyisi: AJAX formunuzu doğrudan iş araçlarınıza bağlayarak manuel dışa aktarmaları atlayın. WPForms entegrasyonları AJAX formlarıyla sorunsuz çalışır ve şunları içerir:
- E-posta Pazarlaması — Constant Contact, AWeber, ConvertKit, Drip (Plus planı veya daha üstü gerektirir)
- CRM Platformları — Salesforce, HubSpot, Zoho CRM (Elite planı veya daha üstü gerektirir)
- Otomasyon Araçları — Zapier (5.000'den fazla uygulamaya bağlanır), Webhook'lar, Uncanny Automator
- Ödeme İşlemcileri — Stripe, PayPal, Square, Authorize.Net
- Google Workspace — Google E-Tablolar, Google Drive, Google Takvim
Bu entegrasyonlar AJAX formlarıyla sorunsuz çalışır.
Bir kullanıcı formu gönderdiğinde, WPForms gönderiyi arka planda işler VE verileri bağlı platformlarınıza anında gönderir.
Örneğin, potansiyel müşterileri otomatik olarak Constant Contact listenize ekleyen, bir HubSpot iletişim kaydı oluşturan ve tek satır kod yazmadan gönderiyi Google E-Tablolar'a kaydeden bir AJAX iletişim formu oluşturabilirsiniz.
Entegrasyonları ayarlamak için formunuzu düzenleyin, ‘Pazarlama’ veya ‘Ödemeler’ sekmesine tıklayın ve hesaplarınızı bağlamak için ekrandaki talimatları izleyin.
SSS: WordPress AJAX Formları
Kapatmadan önce, insanlar WordPress'te AJAX formları kullanmaya başladığında ortaya çıkan bazı yaygın soruları ele alalım.
Neden diğer eklentiler yerine AJAX formları için WPForms kullanmalıyım?
WPForms, başlangıç dostu tasarımı kurumsal düzeyde özelliklerle birleştirir. Kodlama yapmadan 10 dakikadan kısa sürede AJAX formları oluşturabilirsiniz ve bir şeyler ters giderse, WPForms’ın destek ekibi aynı gün çözüm sunar.
WPForms ücretli planları, Constant Contact, Zapier, Salesforce ve 2.000'den fazla diğer platformla yerleşik entegrasyonlar içerir. Ücretsiz WPForms Lite sürümü bile temel Stripe ödemelerini (işlem ücretleriyle birlikte) içerir.
Bu sayede AJAX formlarınız, manuel kurulum olmadan e-posta pazarlama, CRM ve ödeme sistemlerinizle otomatik olarak senkronize olabilir.
Form gönderme işlemi için AJAX'ı nasıl kullanırım?
En kolay yol, WPForms gibi AJAX'ı zaten destekleyen bir form eklentisi kullanmaktır. Form ayarlarında AJAX seçeneğini etkinleştirmeniz yeterlidir, eklenti sizin için her şeyi halleder.
Özel bir form oluşturuyorsanız, JavaScript ve WordPress'in AJAX kancalarını kullanmanız gerekir. Ancak çoğu site için bir eklenti çok daha basit ve güvenilirdir.
WPForms'ta AJAX ayarını nerede bulabilirim?
WPForms'ta AJAX seçeneği form ayarlarında bulunur. Formunuzu oluşturucuda açtıktan sonra Ayarlar » Genel'e gidin, ardından AJAX form gönderimini etkinleştir onay kutusunu arayın. Etkinleştirildiğinde, form sayfa yeniden yüklenmeden gönderilecektir.
WPForms, bu ayarı varsayılan olarak otomatik olarak etkinleştirir, bu nedenle genellikle hiçbir şeyi değiştirmeniz gerekmez. Ancak, gerekirse hala etkin olduğunu doğrulayabilirsiniz.
AJAX'ın dezavantajları nelerdir?
AJAX, JavaScript'e dayanır, bu nedenle bazen betikleri küçülten veya erteleyen agresif önbelleğe alma eklentileriyle çakışabilir. Formunuz 'dönüyorsa' ancak gönderilmiyorsa, önbelleğinizi temizlemeyi veya optimizasyon eklentisi ayarlarınızı kontrol etmeyi deneyin.
Bazen sayfa oluşturucularla veya eski temalarla sorunlara neden olabilir, bu nedenle yayınladıktan sonra formlarınızı test etmeniz her zaman önemlidir.
Ancak, faydaları dezavantajlarından çok daha ağır basmaktadır. Aslında, WPForms varsayılan olarak AJAX kullanır çünkü modern spam önleme belirteçlerinin arka planda yüklenmesine olanak tanır. Bu, spam botlarının önbelleğe alma eklentilerinizi atlamasını önlemeye yardımcı olur ve gelen kutunuzu güvende tutar.
Ek Kaynaklar: Daha Fazla WordPress Form Rehberi
Umarım bu makale, web siteniz için bir WordPress AJAX iletişim formu oluşturmayı öğrenmenize yardımcı olmuştur. Ardından, aşağıdaki makalelerimize de göz atmak isteyebilirsiniz:
- WordPress'te İletişim Formu Açılır Penceresi Nasıl Oluşturulur
- Birden Fazla Alıcıyla İletişim Formu Nasıl Oluşturulur
- WordPress'te Güvenli Bir İletişim Formu Nasıl Oluşturulur
- Form Terkini İzleme ve Azaltma Yolları
- 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.
Bir sorunuz veya öneriniz mi var? Tartışmayı başlatmak için lütfen bir yorum bırakın.