WordPress form hazırlama işlemini hemen alttaki örnekte bir WordPress rezervasyon formu oluşturma işlemi üzerinden anlatacağım.
Adım adım gidelim:
1- Admin panelimizden Formlar >> Yeni ekle yolunu izliyoruz. Karşımıza Bir Form Oluştur adlı bir pencere geliyor. Bu pencerede formumuz için bir isim belirliyoruz. Örnek olarak Rezervasyon Formu diyelim. Alttaki Form Ekle butonuna tıklayalım.
WordPress Rezervasyon Formu Oluşturma – Form Ekle
2- İkinci adımda formumuzu oluşturacağımız bir alan önümüze geliyor. Bu alanda gerekli form elemanlarımızı ekleyip çıkarabiliyor, stil ve diğer işlevler üzerinde işlem yapabiliyoruz.
Form elemanlarını eklemekle işe başlayalım. Rezervasyon formumuz isim, giriş ve çıkış tarihi için takvim, oda ve kişi sayısı seçimi, telefon, e-posta ve acil durumda ulaşılacak telefon gibi form alanlarından oluşacak.
3- Önce isim alanımızı formumuza ekleyelim.
WordPress Rezervasyon Formu Oluşturma – İsim Alanı Ekleme
4- Sağ taraftaki ön izleme alanında isim alanının ne şekilde görüneceğini görebiliyoruz. Burada isim alanı eklediğimizde ilk ve son adlarında iki adet kutucuk çıktığını göreceksiniz.
Tabi bizim bunu Ad Soyad olarak değiştirmemiz gerekiyor. İsim alanının yanındaki çark simgesini görüyoruz. Bu simgeye tıklayarak alanımızı özelleştirelim.
Açılan penceredeki Temel sekmesinde Parçalar kısmına geliyoruz. Buradaki İlk sekmesine tıklıyoruz. Alt Etiket isimli kutucuğa İsim ya da Ad yazıyoruz.
Sonrasında ise Son sekmesine tıklıyoruz. Yine Alt Etiket isimli kutucuğa Soyisim ya da Soyad yazıyoruz.
Son olarak pencerenin yanındaki yeşil renkli içerisinde tik işareti bulunan butona tıklayıp kaydediyoruz.
WordPress Rezervasyon Formu Oluşturma – Alan Özelleştirme
Dilerseniz parçalar kısmından Yer Tutucu kutusuna;
İsminizi Buraya Yazın – Soyisminizi Buraya Yazın gibi açıklamalar ekleyerek, İsim alnındaki kutucukların içine açıklamalar yerleştirebiliriz.
Bu ayarlamalardan sonra İsim alanımız aşağıdaki gibi görünecektir.
WordPress Rezervasyon Formu Oluşturma – İsim Alanı Önizleme
Sanıyorum buradaki mantığı kavradık. Çark simgesine tıklayarak alanımızın görünümünü ayarlama, alanımıza simge ekleme gibi daha birçok işlevi ayarlamamız mümkün.
5- İsim alanından sonra rezervasyon tarihi için Giriş Tarihi ve Çıkış Tarihi isimli iki alan oluşturacağız. Bunun için form elemanları çubuğundan Tarih elemanını seçiyoruz.
WordPress Rezervasyon Formu Oluşturma – Tarih Alanı Ekleme
Tabi burada giriş ve çıkış tarihleri olacağı için iki adet tarih alanı ekliyoruz. Tarih alanlarını ekledik fakat bu alanlardan birinin ismi Giriş Tarihi diğeri de Çıkış Tarihi isminde olması gerekiyor.
Bunun için yine çark simgesini kullanıyoruz. Açılan penceredeki Genel sekmesindeki Etiket isimli kutuya alanımızın ismini yazıyoruz. Diğer takvim alanı için de aynı işlemi uyguluyoruz.
Bu şekilde form alanlarının isimlerini değiştirebiliriz.
WordPress Rezervasyon Formu Oluşturma – Form Alanı İsmi Değiştirme
6- Şimdi oda sayısı ve kişi sayısı seçimi için seçenekli bir alan oluşturacağız. Bunun için de form elemanları çubuğundan iki adet Menü Seç elemanını seçiyoruz.
WordPress Rezervasyon Formu Oluşturma – Menü Seç
7- Çark simgelerinden alan ayarlarına gidip Etiket kısımlarından birine Kişi Sayısı diğerine Oda Sayısı ismini veriyoruz.
Etiket kısmının alt kısmındaki Seçenekler kısmından da menü seçeneklerimizi ayarlıyoruz. Bu kısımda oda ya da kişi sayıları seçileceği için her seçeneğe rakamlar veriyoruz.
Her ikisi için de 1 – 2 – 3 – 4 rakamlarını ve daha fazla seçeneklerini ekleyebiliriz.
Yeni seçenek alanı açmak için de en alttaki seçenek kısmında artı simgesine tıklayabiliriz.
WordPress Rezervasyon Formu Oluşturma – Seçenek Ekleme
8- Şimdi de bir e-posta alanı oluşturacağız. Form elemanları çubuğundan E-Posta alanına tıklıyoruz.
WordPress Rezervasyon Formu Oluşturma – E-Posta Alanı Ekleme
9- Telefon ve Acil Durumlarda Ulaşılacak Telefon alanları için özel bir form elemanımız mevcut değil. Bunlar için Metin form elemanını kullanacağız. Bunları ekledikten sonra yine çark simgesine tıklyıp Etiket kısımlarından isimlerini belirliyoruz.
WordPress Rezervasyon Formu Oluşturma – Telefon alanı Ekleme
10- Son olarak formun bize ulaşması için gerekli olan Gönder butonunu formumuza ekliyoruz ki zaten ilk etapta bu buton varsayılan olarak eklenmiş halde gelmişti.
Dilerseniz yine çark simgesine tıklayıp Etiket kısmından Gönder butonunun ismini Başvuru Yap gibi isimlerle değiştirebilirsiniz.
Form alanlarının eklenme mantığını anladığımızı varsayıyorum. Şimdi ise oluşturduğumuz formun görüntüsünü, formun gideceği diğer e-posta adreslerini, onay mesajları gibi diğer form seçeneklerini ayarlayacağız.
1- Araç çubuğundaki çark simgesine tıklayarak form ayarlarına gidiyoruz.
WordPress Form Hazırlama – Form Ayarları
2- Form ayarları bölümündeki sekmelere ve işlevlerine tek tek bakalım:
# Genel Sekmesi
> İsim: Formumuzun ismi. İlk başta formu oluştururken belirlemiştik. İsterseniz bu alandan form ismini değiştirebilirsiniz.
> Başlık: Daha sonra formumuzu bir sayfa içerisine yerleştireceğiz. Bu sayfada formu üzerinde görüntülenecek başlığı bu alanda belirleyebiliyoruz. Form ismiyle aynı yapabiliriz.
> Açıklama: Form ile açıklamayı bu alana yazıyoruz. Mesela Otelimizde yer ayırtmak için aşağıdaki formu doldurarak başvuru yapabilirsiniz. Form elimize ulaştığında size dönüş sağlayacağız. gibi bir açıklama yazılabilir.
> Aktif: Formu geçici süre yayından kaldırmak için buradaki düğmeyi kapatabilirsiniz. Formunuzun bulunduğu sayfa görünür olacak fakat içerisindeki form görünmeyecektir.
> Ajax’ı kullan: Formun düzgün çalışması için bu düğmenin aktif olması gerekiyor.
> Gönderilen form verilerini kaydet: Açık olduğunda gönderilen formlara admin panelinizden ulaşabilirsiniz. Kapatıldığında form verileri sadece belirlenen e-posta adreslerine gönderilir, admin panelden ulaşamazsınız.
> Honeypot CAPTCHA’yı etkinleştir: Fiziki bir onay kullanmasanız dahi spam koruması sağlayan bir özelliktir. Biz örnek formumuza reCaptcha eklemedik. Bu nedenle bu özelliği aktif bırakıyoruz. Siz eğer formunuza reCaptcha eklediyseniz bu özelliği kapatabilirsiniz.
> Koşullu mantık animasyonu: Eklentinin koşullu mantık adı altında daha gelişmiş bir özelliği mevcut. Kullanıcı formda şunu seçerse bu alan aktif – pasif olsun gibi işlevsel bir kullanım. İşte bu aktiflik – pasiflik durumlarında animasyonlu gösterim isteyip istemediğinizi bu butondan ayarlayabilirsiniz.
# Stil Sekmesi
Bu alanda ise formunuzun görünümü tasarlayabilmeniz için size birçok seçenek sunuluyor. Buradaki tüm seçenekleri tek tek anlatmak mümkün değil. Zaten seçenekler oldukça açık. Deneme yanılma yolu ile formunuzu rahatlıkla tasarlayabilirsiniz.
Eklenti form görünümü için 11 adet hazır tema sunuyor. Form tasarımına vakit harcamak istemezseniz Tema bölümündeki hazır temalardan birini seçebilirsiniz.
WordPress Form Hazırlama – Tema Seçimi
# Bildirimler Sekmesi
İlk başta ayarlar kısmında formun gideceği varsayılan email adresini belirlemiştik hatırlayın. Bu kısımdan da formun gönderileceği başka e-posta adresleri de belirleyebiliyoruz.
Bunun için Admin Bildirimi alanındaki çark simgesine tıklıyoruz. Açılan pencereden Alıcı kısmına geliyoruz. Alıcı Ekle butonuna tıklıyoruz. Kutulardaki E-posta adresi (Gerekli) alanına diğer e-posta adresini yazıyoruz. Alıcı Ekle butonu ile istediğiniz kadar e-posta adresi yazabilirsiniz.
Adım adım gidelim:
1- Admin panelimizden Formlar >> Yeni ekle yolunu izliyoruz. Karşımıza Bir Form Oluştur adlı bir pencere geliyor. Bu pencerede formumuz için bir isim belirliyoruz. Örnek olarak Rezervasyon Formu diyelim. Alttaki Form Ekle butonuna tıklayalım.
WordPress Rezervasyon Formu Oluşturma – Form Ekle
2- İkinci adımda formumuzu oluşturacağımız bir alan önümüze geliyor. Bu alanda gerekli form elemanlarımızı ekleyip çıkarabiliyor, stil ve diğer işlevler üzerinde işlem yapabiliyoruz.
Form elemanlarını eklemekle işe başlayalım. Rezervasyon formumuz isim, giriş ve çıkış tarihi için takvim, oda ve kişi sayısı seçimi, telefon, e-posta ve acil durumda ulaşılacak telefon gibi form alanlarından oluşacak.
3- Önce isim alanımızı formumuza ekleyelim.
WordPress Rezervasyon Formu Oluşturma – İsim Alanı Ekleme
4- Sağ taraftaki ön izleme alanında isim alanının ne şekilde görüneceğini görebiliyoruz. Burada isim alanı eklediğimizde ilk ve son adlarında iki adet kutucuk çıktığını göreceksiniz.
Tabi bizim bunu Ad Soyad olarak değiştirmemiz gerekiyor. İsim alanının yanındaki çark simgesini görüyoruz. Bu simgeye tıklayarak alanımızı özelleştirelim.
Açılan penceredeki Temel sekmesinde Parçalar kısmına geliyoruz. Buradaki İlk sekmesine tıklıyoruz. Alt Etiket isimli kutucuğa İsim ya da Ad yazıyoruz.
Sonrasında ise Son sekmesine tıklıyoruz. Yine Alt Etiket isimli kutucuğa Soyisim ya da Soyad yazıyoruz.
Son olarak pencerenin yanındaki yeşil renkli içerisinde tik işareti bulunan butona tıklayıp kaydediyoruz.
WordPress Rezervasyon Formu Oluşturma – Alan Özelleştirme
Dilerseniz parçalar kısmından Yer Tutucu kutusuna;
İsminizi Buraya Yazın – Soyisminizi Buraya Yazın gibi açıklamalar ekleyerek, İsim alnındaki kutucukların içine açıklamalar yerleştirebiliriz.
Bu ayarlamalardan sonra İsim alanımız aşağıdaki gibi görünecektir.
WordPress Rezervasyon Formu Oluşturma – İsim Alanı Önizleme
Sanıyorum buradaki mantığı kavradık. Çark simgesine tıklayarak alanımızın görünümünü ayarlama, alanımıza simge ekleme gibi daha birçok işlevi ayarlamamız mümkün.
5- İsim alanından sonra rezervasyon tarihi için Giriş Tarihi ve Çıkış Tarihi isimli iki alan oluşturacağız. Bunun için form elemanları çubuğundan Tarih elemanını seçiyoruz.
WordPress Rezervasyon Formu Oluşturma – Tarih Alanı Ekleme
Tabi burada giriş ve çıkış tarihleri olacağı için iki adet tarih alanı ekliyoruz. Tarih alanlarını ekledik fakat bu alanlardan birinin ismi Giriş Tarihi diğeri de Çıkış Tarihi isminde olması gerekiyor.
Bunun için yine çark simgesini kullanıyoruz. Açılan penceredeki Genel sekmesindeki Etiket isimli kutuya alanımızın ismini yazıyoruz. Diğer takvim alanı için de aynı işlemi uyguluyoruz.
Bu şekilde form alanlarının isimlerini değiştirebiliriz.
WordPress Rezervasyon Formu Oluşturma – Form Alanı İsmi Değiştirme
6- Şimdi oda sayısı ve kişi sayısı seçimi için seçenekli bir alan oluşturacağız. Bunun için de form elemanları çubuğundan iki adet Menü Seç elemanını seçiyoruz.
WordPress Rezervasyon Formu Oluşturma – Menü Seç
7- Çark simgelerinden alan ayarlarına gidip Etiket kısımlarından birine Kişi Sayısı diğerine Oda Sayısı ismini veriyoruz.
Etiket kısmının alt kısmındaki Seçenekler kısmından da menü seçeneklerimizi ayarlıyoruz. Bu kısımda oda ya da kişi sayıları seçileceği için her seçeneğe rakamlar veriyoruz.
Her ikisi için de 1 – 2 – 3 – 4 rakamlarını ve daha fazla seçeneklerini ekleyebiliriz.
Yeni seçenek alanı açmak için de en alttaki seçenek kısmında artı simgesine tıklayabiliriz.
WordPress Rezervasyon Formu Oluşturma – Seçenek Ekleme
8- Şimdi de bir e-posta alanı oluşturacağız. Form elemanları çubuğundan E-Posta alanına tıklıyoruz.
WordPress Rezervasyon Formu Oluşturma – E-Posta Alanı Ekleme
9- Telefon ve Acil Durumlarda Ulaşılacak Telefon alanları için özel bir form elemanımız mevcut değil. Bunlar için Metin form elemanını kullanacağız. Bunları ekledikten sonra yine çark simgesine tıklyıp Etiket kısımlarından isimlerini belirliyoruz.
WordPress Rezervasyon Formu Oluşturma – Telefon alanı Ekleme
10- Son olarak formun bize ulaşması için gerekli olan Gönder butonunu formumuza ekliyoruz ki zaten ilk etapta bu buton varsayılan olarak eklenmiş halde gelmişti.
Dilerseniz yine çark simgesine tıklayıp Etiket kısmından Gönder butonunun ismini Başvuru Yap gibi isimlerle değiştirebilirsiniz.
Form alanlarının eklenme mantığını anladığımızı varsayıyorum. Şimdi ise oluşturduğumuz formun görüntüsünü, formun gideceği diğer e-posta adreslerini, onay mesajları gibi diğer form seçeneklerini ayarlayacağız.
1- Araç çubuğundaki çark simgesine tıklayarak form ayarlarına gidiyoruz.
WordPress Form Hazırlama – Form Ayarları
2- Form ayarları bölümündeki sekmelere ve işlevlerine tek tek bakalım:
# Genel Sekmesi
> İsim: Formumuzun ismi. İlk başta formu oluştururken belirlemiştik. İsterseniz bu alandan form ismini değiştirebilirsiniz.
> Başlık: Daha sonra formumuzu bir sayfa içerisine yerleştireceğiz. Bu sayfada formu üzerinde görüntülenecek başlığı bu alanda belirleyebiliyoruz. Form ismiyle aynı yapabiliriz.
> Açıklama: Form ile açıklamayı bu alana yazıyoruz. Mesela Otelimizde yer ayırtmak için aşağıdaki formu doldurarak başvuru yapabilirsiniz. Form elimize ulaştığında size dönüş sağlayacağız. gibi bir açıklama yazılabilir.
> Aktif: Formu geçici süre yayından kaldırmak için buradaki düğmeyi kapatabilirsiniz. Formunuzun bulunduğu sayfa görünür olacak fakat içerisindeki form görünmeyecektir.
> Ajax’ı kullan: Formun düzgün çalışması için bu düğmenin aktif olması gerekiyor.
> Gönderilen form verilerini kaydet: Açık olduğunda gönderilen formlara admin panelinizden ulaşabilirsiniz. Kapatıldığında form verileri sadece belirlenen e-posta adreslerine gönderilir, admin panelden ulaşamazsınız.
> Honeypot CAPTCHA’yı etkinleştir: Fiziki bir onay kullanmasanız dahi spam koruması sağlayan bir özelliktir. Biz örnek formumuza reCaptcha eklemedik. Bu nedenle bu özelliği aktif bırakıyoruz. Siz eğer formunuza reCaptcha eklediyseniz bu özelliği kapatabilirsiniz.
> Koşullu mantık animasyonu: Eklentinin koşullu mantık adı altında daha gelişmiş bir özelliği mevcut. Kullanıcı formda şunu seçerse bu alan aktif – pasif olsun gibi işlevsel bir kullanım. İşte bu aktiflik – pasiflik durumlarında animasyonlu gösterim isteyip istemediğinizi bu butondan ayarlayabilirsiniz.
# Stil Sekmesi
Bu alanda ise formunuzun görünümü tasarlayabilmeniz için size birçok seçenek sunuluyor. Buradaki tüm seçenekleri tek tek anlatmak mümkün değil. Zaten seçenekler oldukça açık. Deneme yanılma yolu ile formunuzu rahatlıkla tasarlayabilirsiniz.
Eklenti form görünümü için 11 adet hazır tema sunuyor. Form tasarımına vakit harcamak istemezseniz Tema bölümündeki hazır temalardan birini seçebilirsiniz.
WordPress Form Hazırlama – Tema Seçimi
# Bildirimler Sekmesi
İlk başta ayarlar kısmında formun gideceği varsayılan email adresini belirlemiştik hatırlayın. Bu kısımdan da formun gönderileceği başka e-posta adresleri de belirleyebiliyoruz.
Bunun için Admin Bildirimi alanındaki çark simgesine tıklıyoruz. Açılan pencereden Alıcı kısmına geliyoruz. Alıcı Ekle butonuna tıklıyoruz. Kutulardaki E-posta adresi (Gerekli) alanına diğer e-posta adresini yazıyoruz. Alıcı Ekle butonu ile istediğiniz kadar e-posta adresi yazabilirsiniz.
