İ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?
Asenkron JavaScript ve XML'in kısaltması olan AJAX, 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 bir çevrimiçi mağaza işletiyorsanız ve alışveriş deneyimini kesintiye uğratmadan kullanıcı geri bildirimlerini toplamak istiyorsanız faydalıdır.
Web sitenizdeki diğer özel formlar için de aynı AJAX işlevselliğini kullanabilirsiniz. Örneğin, bir özel kullanıcı giriş formu, kullanıcıların ek bir sayfa yüklemesi olmadan giriş yapmalarını sağlayabilir.
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şturucu 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 koşullu mantık, dosya yüklemeleri veya Google araç entegrasyonları gibi daha gelişmiş özelliklere ihtiyacınız varsa, WPForms Pro'ya ihtiyacınız olacaktır.
Bu işlem tamamlandığında, WPForms Pro zip dosyanızı indirebileceğiniz ve lisans anahtarınızı kopyalayabileceğiniz kendi WPForms hesap kontrol panelinize sahip olacaksınız.
Şimdi, WPForms eklentisini kuralım ve etkinleştirelim.
WordPress yönetici alanınızda, Eklentiler » Yeni 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, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
Etkinleştirdikten sonra, lisans anahtarınızı girmek için WPForms » Ayarlar sayfasına gidin.
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, Yapay Zeka form oluşturucusunu kullanabilir veya 2.000'den fazla hazır şablon arasından seçim yapabilirsiniz.
Örneğin, WPForms AI'yı kullanmak istiyorsanız, basit bir komut girmeniz yeterlidir ve önizleme alanında sizin için formu oluşturacaktır.
Ancak bu eğitimde, önceden hazırlanmış 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 Form Gönderme Özelliğini Açın
Ayarlarınıza bağlı olarak, WPForms varsayılan olarak AJAX form gönderimini etkinleştirmemiş olabilir, bu yüzden şimdi bunu doğrulayalım.
Bunu yapmak için, form oluşturucudaki ‘Ayarlar’ sekmesine geçmeniz yeterlidir.
'Genel' ayarlar sekmesinde, 'AJAX form gönderimini etkinleştir' seçeneğinin yanındaki geçiş düğmesine tıklayın.
Ş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 sayfaya yönlendirebilseniz de, bu bir sayfa yüklemesi gerektirir. AJAX'tan en iyi şekilde yararlanmak için, kullanıcının aynı sayfada kalması için basitçe bir 'Mesaj' göstermenizi öneririz.
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, bir gönderi, sayfa veya kenar çubuğu widget'ında olsun, formları WordPress sitenize eklemeyi kolaylaştırır.
Formu eklemek istediğiniz yazıyı veya sayfayı düzenleyin ve WPForms bloğunu içerik alanınıza ekleyin.
Ardından, 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.
Bonus İpucu: Form Girişlerini CSV veya Excel'e Dışa Aktarın 📄
AJAX formunuz çalışır duruma geldikten sonra, tüm gönderimlerin bir kaydını tutmak isteyebilirsiniz. Özellikle potansiyel müşteri, müşteri sorguları veya kayıt bilgileri topluyorsanız.
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 kullanıyorsanız, form girdilerini dışa aktarmak basittir: WPForms » Girdiler'e gidin, formunuzu seçin, dışa aktarma seçeneklerinizi belirleyin ve verileri CSV veya Excel dosyası olarak indirin.
Bunu ayarlamak ister misiniz? WordPress form girişlerini CSV ve Excel'e nasıl aktaracağınız hakkındaki tam kılavuzumuzu 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.
Form gönderme işlemi için AJAX'ı nasıl kullanırım?
En kolay yolu, WPForms gibi zaten AJAX destekleyen bir form eklentisi kullanmaktır. Form ayarlarında AJAX seçeneğini etkinleştirmeniz yeterlidir, gerisini eklenti 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ının içindedir. 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.
AJAX'ın dezavantajları nelerdir?
AJAX JavaScript'e dayanır, bu nedenle betikleri küçülten veya erteleyen agresif önbellekleme eklentileriyle çakışabilir. Formunuz ‘dönüyorsa’ ancak gönderilmiyorsa, önbelleğinizi temizlemeyi veya optimizasyon eklentisi ayarlarınızı kontrol etmeyi deneyin.
Ayrıca, doğru şekilde ayarlanmamışsa sayfa oluşturucularla veya eski temalarla sorunlara neden olabilir. Bu nedenle AJAX'ı etkinleştirdikten sonra formlarınızı test etmeniz önemlidir.
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
- E-posta Listenizi Büyütmek İçin İletişim Formları Nasıl Kullanılır
- Birden Fazla Alıcıyla İletişim Formu Nasıl Oluşturulur
- WordPress'te Güvenli Bir İletişim Formu Nasıl Oluşturulur
- WordPress'te İletişim Formu Spam'ini Engelleme
- 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.