İletişim formunuz yavaş ve hantal olduğu için hiç potansiyel müşterinizi kaybettiniz mi? Bu, çok sık duyduğumuz bir hikaye. Geleneksel WordPress formlarının hem bizim hem de okuyucularımız için ne kadar sinir bozucu olabileceğini ilk elden deneyimledik.
AJAX formları bu sorunu çözdü ve sizin için de aynısını yapabilirler.
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 sitelerimizde defalarca uyguladık ve sonuçlar kendi kendini gösteriyor.
Bu kılavuzda, bir WordPress AJAX formu oluşturmak için kanıtlanmış 4 adımlı sürecimizi paylaşacağız. Teknik yönleri 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 ve geliştiricilerin bir sayfayı yeniden yüklemeden veri aktarmasına olanak tanıyan bir JavaScript programlama tekniğidir.
En yaygın olarak web formlarında kullanılır ve kullanıcıların bir sayfayı yeniden yüklemeden form verilerini göndermelerine olanak tanır. Bu, form gönderimini kolay ve hızlı hale getirir, bu da genel kullanıcı deneyimini iyileştirir.
Ayrıca, Gmail ve Facebook gibi web uygulamaları, her şeyin arka planda sorunsuz çalışmasını sağlarken kullanıcıları etkileşimde tutmak için bu tekniği yaygın olarak kullanır.
WordPress sitenizdeki formlar için AJAX kullanabilirsiniz. Bu, kullanıcılara gereksiz sayfa yenilemelerinden tasarruf ettirecek ve görüntüledikleri sayfada meşgul kalmalarını sağlayacaktır.
Bu, bir çevrimiçi mağaza işlettiğinizde ve kullanıcı dikkatini dağıtmadan kullanıcı geri bildirimi toplamak istediğinizde kullanışlı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ğlayacaktır.
Bununla birlikte, 4 basit adımda kolayca bir WordPress AJAX iletişim formu oluşturacağınızı göstereceğiz.
- Adım 1: WPForms Eklentisini Yükleyin
- Adım 2: İlk Formunuzu Oluşturun
- Adım 3: AJAX Form Gönderme Özelliğini Açın
- Adım 4: AJAX Etkin Formunuzu WordPress'e Ekleyin
- Bonus İpucu: Form Girişlerini CSV veya Excel'e Dışa Aktarın 📄
- Ek Kaynaklar: Daha Fazla WordPress Form Rehberi
Başlayalım.
Adım 1: WPForms Eklentisini Yükleyin
Yapmanız gereken ilk şey bir form oluşturucu kurmak ve etkinleştirmektir.
Bu eğitim için WPForms eklentisini kullanacağız. Pazardaki en iyi WordPress iletişim formu oluşturucusudur 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 taleplerini yönetmek için WPForms kullanıyoruz.
Harika bir deneyimdi ve bu eklenti hakkında daha fazla bilgi için WPForms incelememizin tamamını görebilirsiniz!
Öyleyse, WPForms'u kuralım ve etkinleştirelim. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.
📝 Not: AJAX formu oluşturmak için eklentinin Pro sürümüne ihtiyacınız olacaktır. Ancak yükseltmeden önce sürükle ve bırak oluşturucusunu ve temel form özelliklerini keşfetmek isterseniz göz atabileceğiniz ücretsiz bir WPForms sürümü bulunmaktadır.
Etkinleştirdikten sonra, lisans anahtarınızı girmek için WPForms » Ayarlar sayfasını ziyaret etmeniz gerekir.
Lisans anahtarını girdikten sonra otomatik güncellemeler alabilecek ve eklentiler yükleyebileceksiniz.
Artık WordPress'te güzel AJAX formları oluşturmak için hazırsınız.
Adım 2: İlk Formunuzu Oluşturun
İlk WordPress formunuzu oluşturalım.
WordPress yönetici alanındaki WPForms » Yeni Ekle sayfasını ziyaret etmeniz yeterlidir.
Sonraki ekranda, yeni formunuza öncelikle bir isim verebilirsiniz. Örneğin, burada formumuza 'İletişim Formu' adını verdik.
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'yi kullanmak istediğinizi varsayalım. O zaman tek yapmanız gereken ona basit bir komut vermek ve form sizin için önizleme alanında oluşturulacaktır.
Ancak bu eğitim için, bir iletişim formu oluşturacağız. 'Basit İletişim Formu' kutusunun üzerine gelin ve 'Şablonu Kullan'ı tıklayın.
İhtiyacınız olan başka herhangi bir form türü oluşturabileceğinizi unutmayın; süreç hemen hemen aynıdır.
WPForms artık temel alanları eklenmiş olarak formunuzu yükleyecektir.
Buradan, düzenlemek için herhangi bir form alanına tıklayıp sürükleyebilirsiniz.
Sol sütundaki herhangi bir yeni form alanını üzerine tıklayarak 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
WPForms varsayılan olarak AJAX form gönderimini etkinleştirmez, bu nedenle formunuz için bunu manuel olarak etkinleştirmeniz gerekir.
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 form gönderiminden 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.
Form için AJAX işlevselliğini etkinleştirdiğimiz için, kullanıcıları başka bir sayfaya yönlendirmek bir AJAX formu oluşturma amacını boşa çıkaracaktır.
Mesaj seçeneğini seçmeniz ve onay mesajını düzenlemeniz gerekir. Düzenleyicideki biçimlendirme araç çubuğunu kullanmaktan veya kullanıcılara bir sonraki adımı bildirmek için bir veya iki bağlantı eklemekten çekinmeyin.
Bundan sonra, bir form gönderimi hakkında nasıl bildirim almak istediğinizi ayarlayabilirsiniz.
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, yazılarınıza, sayfalarınıza veya kenar çubuğu widget'larınıza form eklemeyi çok 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, oluşturduğunuz formu bloğun ayarlarından seçmeniz gerekir.
WPForms, içerik düzenleyicide formun canlı önizlemesini hemen yükleyecektir.
Artık içeriğinizi kaydedebilir veya yayınlayabilir ve 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. AJAX destekli formunuzun çalışırken görülmesi için artık 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, 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.
Eğer WPForms kullanıyorsanız, form girişlerini dışa aktarmak kolaydır. Sadece WPForms » Girişler'e gidin, formunuzu seçin, dışa aktarma seçeneklerini belirleyin ve verilerinizi 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.
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.