İlginizi Çekebilir
  1. Ana Sayfa
  2. Wordpress Eklentileri
  3. Contact Form 7 ile İletişim Formları Oluşturuyoruz
Trendlerdeki Yazı

Contact Form 7 ile İletişim Formları Oluşturuyoruz

WordPress siteleriniz için en iyi form oluşturma eklentilerinden biri olan Contact Form 7 kullanımını, tüm detaylarıyla sizler için anlattık…

Contact Form 7 ile İletişim Formları Oluşturuyoruz

WordPress için iletişim formu oluşturmak için piayasada bir çok eklenti mevcut. Ama bu piyasada gözümüze gözümüze sokulan bir eklenti var ki 38 milyon üstü kurulum ile neredeyse tam bir efsane. Adı da Contact Form 7.

Peki gerçekten efsane mi? Ücretsiz olması, Türkçe dil desteğine sahip olması, barındırdığı özelliklerle işlevselliği yakalaması, problemsiz olması, esnek biçimlendirme sağlaması artıları. Oluşturulan formu birebir uğraşmadan görememeniz ve etiket sisteminin biraz kafa karıştırması da eksileri. Eksileri konusunda biz yardımcı olacağız. Artılarına bakarak efsane olup olmadığına da siz karar verin.

32Byte Ekibi olarak eklentinin kullanımını örnekler üzerinden adım adım anlatarak sizlere yardımcı olmaya çalıştık. Ayrıca Contact Form 7 çalışmama problemine de çözüm sunduk. Umarız faydamız dokunur.

 

1- Contact Form 7 Kurulumu

Eklentiyi ister admin panelinizden aratarak, ister “https://tr.wordpress.org/plugins/contact-form-7” adresinden kurulum dosyasını indirip yine admin panelinden ya da FTP’den kurabilirsiniz. En kestirme yol, admin panelinden arattırmak.

Admin panelimizden “Eklentiler > Yeni Ekle” yolunu izliyoruz. Sağ üst taraftaki arama kutusuna “Contact Form 7” yazıp enter’a basıyoruz. Geliştiricisi “Takayuki Miyoshi” olan sonucun üstündeki “Şimdi Kur” butonuna basıyoruz. Etkinleştirmeyi unutmuyoruz.

Contact Form 7 Eklenti Kurulumu

Eklentimizin Türkçe dil desteği mevcut. Bu nedenle dil dosyası yüklemeye falan uğraşmayacağız.

2- Contact Form 7 Kontrol Paneli

Eklentimiz ile ilgili ayarları ve form oluşturma işlemlerini admin menümüzde beliren “İletişim”başlığından yapabiliyoruz. “İletişim Formları, Yeni Ekle, Bütünleştirme” adlı 3 adet alt menümüz var. “İletişim Formları” başlığında oluşturduğumuz formların listesini görüyoruz. Formlarımızı bu sayfadan düzenleyebiliriz. “Yeni Ekle” başlığında formlarımızı oluşturabileceğimiz bir sayfa var. “Bütünleştirme” başlığından da bu eklentiyle uyumlu servisleri ayarlayabiliyoruz. Şimdilik burada Google’ın reCAPTCHA servisi mevcut.

Contact Form 7 Ayarları

3- Contact Form 7 Kullanımı

Türkçe desteği olduğundan eklentimizin kullanımı gayet kolay gelecektir. Yeni başlayanlar için kısa kodlar, etiketler falan biraz kafa karıştırabilir ama sıkıntı yok. Yazı bittiğinde ortada problem kalmayacak.

İster iletişim için olsun ister başka bir amaç için olsun eklentimizin bize sunduğu olanaklarla form oluşturmak gayet kolay. Admin panelimizden “İletişim > Yeni Ekle” yolunu izleyerek form oluşturma sayfasına giriyoruz.

A. Form Oluşturma

Öncelikle formumuza bir isim veriyoruz. Formun amacına göre “İletişim formu, sipariş formu, ödeme bildirim formu, davetiye isteme formu…” gibi isimler verebilirsiniz.

Başlığı yazdığınız yerin altında “Form, Posta, İletiler, Ek Ayarlar” adlarında 4 adet sekme görüyorsunuz. Mantığı anlamanız için bu sekmeler üzerinden adım adım giderek gelişmiş bir kayıt formu örneği oluşturacağız.

Önce “Form” sekmesiyle başlayalım. Form alanımızda daha önceden oluşturulmuş bazı kodlar görüyoruz. Yeni bir form oluşturacağımız için bunları siliyoruz. Silmeden önce bu kodlar hakkında kısa bir bilgi verelim:

<p> : Bu bir html kodudur. Önüne gelen metnin paragraf olduğunu belirtir. Metin alanları arasında bir satır boşluk bırakır. Paragraf bitiminde </p> kodu ile kapatılır.

<br>: Bu da html kodudur. Yazılan metnin bir alt satıra geçmesi için konulur. Mesela 5 adet cümle yazdık. Bu cümlelerin her birinin başına bu kodu koyduğunuzda, cümleler alt alta görünür.

[text* your-name]: Bu şekilde köşeli parantez içine alınmış kodlar, Contact Form 7’nin bize sunduğu etiket kodlarıdır. Formu oluştururken “eposta” sekmesinde ne işe yaradıklarını göreceğiz.

Bu kısa bilgiden sonra geçelim formumuzu oluşturmaya.

Form oluşturma alanının üzerinde “metin, eposta, URL” gibi butonlar görüyorsunuz. Bu butonları kullanarak formumuzdaki elemanları form alanına ekleyeceğiz. Bu butonlar, az önce bahsettiğimiz gibi etiket kodları oluşturuyor. Etiketler sayesinde form elemanlarımız oluşuyor ve form bize geldiğinden hangi bilginin hangi elemana ait olduğunu anlayabiliyoruz.

Şimdi metin butonunu kullanarak formumuzda isim-soyisim elemanı oluşturalım. “Metin”butonuna tıklıyoruz, bir pencere açılıyor. “Alan Türü” kısmındaki “Zorunlu Alan” seçeneğini işaretlediğimizde, formu dolduran kişi bu alanı doldurmadan formu gönderemiyor. İşaretleyelim.

“Adı” kısmına elemanın etiket bilgisini yazacağız. Burayı ister olduğu gibi bırakın, ister elemanın ne olduğunu daha sonradan anlayabilmek için özel bir isim verin. Elemanımız formu gönderen kişinin adı ve soyadını içereceğinden bu elemana “isim-bilgisi” diyebiliriz. Yalnız etikete isim verirken Türkçe karakterler ve boşluk kullanmayın.

“Varsayılan Değer” kısmı da elemanın içinde görünecek metindir. “İsminizi ve soyisminizi buraya yazınız” gibi bir metin yazabilirsiniz. Boş da bırakabilirsiniz. Eğer buraya bir metin yazarsanız hemen altındaki “Bu metni alanın yer tutucusu olarak kullan” seçeneğini işaretleyin. İşaretlemezseniz formda sanki orası doldurulmuş gibi görünür ve formu dolduran kişinin o kutuyu doldurmasına gerek kalmaz. İşaretlediğinizde ise yazdığınız metin silik bir şekilde görünür ve kullanıcı o alanı doldurmak için tıklayıp yazı yazmaya başladığında yazı kaybolur. Bu şekilde kullanıcı o alanı doldurmak zorundadır.

“Bu alan yazarın adını gerektirir” bu kısım şöyle: Eğer üyelik sisteminiz varsa ve formunuz sadece üyelerinize yönelikse, bu alana üyenin ismini yazması istenir. Eğer üyenin giriş yaptığı bilgilerle yazdığı isim soyisim uyuşmazsa, formu gönderemez. Böyle bir özellik istiyorsanız burayı işaretleyin.

“Kimlik özniteliği” ve “Sınıf özniteliği” kısımlarını boş bırakın. Bu kısımlar biraz daha profesyonellere yönelik mevzular. Şimdilik bizim işimize yaramaz.

İşimiz bitince “Etiket Ekle” butonuna basıyoruz. Form doldurma alanımıza aşağıdaki görseldeki kodlar eklendi. Bu form alanın da etiketin önüne birşeyler yazıp bir kaç html kodu kullanacağız. Henüz düzenleme yapmadığımızdan iletişim formumuz yine aşağıdaki görseldeki gibi görünecektir.

İletişim Formu

Gelelim bu alanı düzenlemeye. Formumuzdaki tüm alanlar paragraf formunda olduğundan önce alan etikeninin başına <p> etiketi açıyoruz. Eğer form alanları arasında satır boşluğu olmasın isterseniz <br> etiketi de kullanabilirsiniz. Daha sonra bu alanın ne olduğunu belirtmek için alanın ismini yazıyoruz. “Ad Soyad” gibi… Formun doldurulması gereken zorunlu alanı olarak belirlediğimizden yanına parantez içinde “(Gerekli)” yazabiliriz. Eğer bu yazıyı kalınlaştırmak istiyorsak, yazıyı <b> </b> etiketleri içine alabiliriz. İşimiz bittiğinde görünüm şu şekilde olacak:

<p><b>Adınız Soyadınız (Gerekli)</b>[text* isim-bilgisi placeholder "İsminizi ve soyisminizi buraya yazınız"]

Formumuzda da eklediğimiz alan aşağıdaki şekilde görünecek:

Contact Form 7

Etiketler ile form alanı ilişkisinin mantığını sanırım anladık. Pekişmesi için bir alan daha oluşturalım. Bu da e-posta alanı olsun. “eposta” butonuna tıklıyoruz. “Zorunlu Alan” kısmını işaretliyoruz. “Adı” kısmına “eposta-bilgisi” yazıyoruz. “Varsayılan Değer” kısmına “E-posta Adresinizi Buraya Yazınız” yazıyoruz. “Bu metni alanın yer tutucusu olarak kullan” seçeneğini işaretleyip “Etiket Ekle” butonuna tıklıyoruz. Html etiketleriyle düzenlememizi yapıyoruz. Form alanımızın son hali şu şekilde oluyor:

<p><b>Adınız Soyadınız (Gerekli)</b>[text* isim-bilgisi placeholder "İsminizi ve soyisminizi buraya yazınız"]

<p><b>E-Posta (Gerekli)</br>[email* eposta-bilgisi placeholder "E-posta adresinizi buraya yazınız"]

Son olarak da bir gönder butonu ekleyelim. Bu buton formda, temanızın sağladığı varsayılan buton şekillerine göre biçim alır. Kullanıcılar bilgileri girdikten sonra bu butona tıklarlar ve form bize ulaşır. Üstteki butonlardan “gönder”e basıyoruz. Açılan pencereden “Etiket” kısmına “Gönder”yazıyoruz ve “Etiket ekle” butonuna basıyoruz. Form alanından oluşan etiketin önüne yine <p>etiketini koyuyoruz. Form alanımızın son şekli böyle oluyor:

<p><b>Adınız Soyadınız (Gerekli)</b>[text* isim-bilgisi placeholder "İsminizi ve soyisminizi buraya yazınız"]

<p><b>E-Posta (Gerekli)</br>[email* eposta-bilgisi placeholder "E-posta adresinizi buraya yazınız"]

<p>[submit "Gönder"]

Görünümü de böyle:

Contact Form 7 Görünüm

Biz son olarak aşağıdaki gibi bir form oluşturduk. Siz de bunu deneyebilirsiniz. Anlatımın geri kalanını aşağıdaki kodlarla oluşturduğumuz form üzerinden yapacağız.

<p><b>Adınız Soyadınız (Gerekli)</b>[text* isim-bilgisi placeholder "İsminizi ve soyisminizi buraya yazınız"]

<p><b>E-Posta (Gerekli)</br>[email* eposta-bilgisi placeholder "E-posta adresinizi buraya yazınız"]

<p><b>Konu</b>[text konu-bilgisi placeholder "Konuyu Buraya Yazınız"]

<p><b>İletiniz</b>[textarea* mesaj placeholder "İletinizi Buraya Yazınız"]

<p>[submit "Gönder"]

İşimiz bitince sağ tarafta bulunan “Durum, çoğalt, sil, kaydet” gibi butonların olduğu alandan “Kaydet” butonuna basıyoruz. Form kaydedildikten sonra form alanının hemen başında “Bu kısa kodu kopyalayın ve yazınızın, sayfanızın ya da metin parçacığı içeriğinizin içine yapıştırın:”yazısıyla beraber size bir kısa kod verir. “[contact-form-7 404 “Not Found”]“ gibi. Bu kodu formu yayınlayacağımız sayfaya yapıştıracağız.

Sanırız mantığı anladık. Şimdi diyeceksiniz ki oluşturduğum formu nasıl kontrol edeceğim. Diğer ayarlara geçmeden önce bunu açıklayalım.

B. Oluşturulan Formu Görüntüleme ve Yayınlama

Eklentinin eski sürümlerinde oluşturduğunuz formun ön izlemesini yan tarafta görebiliyordunuz. Böylece canlı olarak izleyip gerekli düzenlemeleri yapmak kolay oluyordu. Yeni sürümde ise bunu kaldırmışlar. Sebebini bilmiyoruz ama önemli değil. Formumuzu sitemize entegre edip kontrol edebiliriz.

Bunun için öncelikle bir sayfa oluşturmamız gerekiyor. Admin panelimizden “Sayfalar > Yeni Ekle”yolunu izliyoruz. Sayfamıza bir başlık ekliyoruz. “İletişim” gibi… Yazı alanına da oluşturduğumuz formun kısa kodunu yapıştıracağız. Yukarıda bu kodu nasıl elde edeceğinizi anlattık. “İletişim > İletişim Formları” yolunu izleyerek de oluşturduğunuz formun kısa kodunu listeden edinebilirsiniz.

Kısa kodu yapıştırdıktan sonra sayfamızı kaydediyoruz. Oluşturduğumuz sayfaya baktığımızda formumuzu görebilirsiniz. Form üzerindeki değişiklikleri bu sayfayı yenileyerek canlı olarak izleyebiliriz. Hem de formunuzu böylece yayınlamış oluruz. Her değişiklikte formumuzun kısa kodu değişmez. Bu nedenle kısa kodu tekrar tekrar iletişim sayfanızdan değiştirmenize gerek yok. Yaptığınız değişiklikle form üzerine yansıyacaktır.

Contact Form 7 Kullanım / 2

C. Posta

Oluşturduğumuz form kullanıcı tarafından doldurulup gönderildikten sonra belirleyeceğimiz e-posta adresimize gidecek. Bu e-posta adresini ve formun bize ne şekilde geleceğini “Posta”sekmesinden ayarlayacağız.

Buradaki anlatımı yukarıda oluşturduğumuz forma göre yapacağız. Mantığı anlamanız için siz de dilerseniz bu forma göre ilerleyin.

“Kime” kısmına formun gideceği e-posta adresini yazıyoruz. Bu tabi ki bizim daha önceden oluşturduğumuz bir adres olmalı. Bizim için “info@32byte.org” olacak.

“Kimden” kısmına da formun kimden ve nereden geldiğini ayarlıyoruz. [isim-bilgisi] etiketini buraya ekleyerek postada kimden kısmında gönderenin ismini görebiliriz. Etiketten sonra “<>”arasına kendi domain uzantılı e-posta adresimizi yazıyoruz. Yine “Kime” kısmına yazdığımız e-posta adresini yazabiliriz. Yazdığımız e-posta adresi domainimizin uzantısına sahip değilse, form çalışmayacaktır. Çünkü formun gönderilebilmesi için sizin mail sunucularınız kullanılmaktadır. Domain uzantılı mail oluşturma hakkında firiniz yoksa sizi şöyle alaım: Domain Uzantılı Mail Hesabı Açıyoruz Buraya yazacağımız kodlar şu şekilde olacak:

[isim-bilgisi] <info@32byte.org>

“Konu” kısmına formda bulunan konu etiketini giriyoruz. Bizim formumuza göre bu etiket [konu-bilgisi] oluyor.

“Ek Başlıklar” kısmına, eğer gönderilen e-postaya bir cevap yazacaksak, cevabın gideceği e-posta adresinin eklenmesini sağlayabiliriz. Bu e-posta adresi, formu dolduranın e-posta adresi olacağından burada kullanacağımız etiket [eposta-bilgisi] olacak. Başına da “Reply-to:” yazacağız. Kodumuz şu şekilde:

Reply-To: [eposta-bilgisi]

“İleti Gövdesi” kısmında da belirlediğimiz etiketleri ilgili kısımlara yazıyoruz. Kodumuz şu şekilde:

Kimden: [isim-bilgisi] <[eposta-bilgisi]>
Konu: [konu-bilgisi]

İleti Gövdesi:
[mesaj]

--
Bu e-posta 32Byte.org (http://32byte.org) adresindeki iletişim formundan gönderildi.

Anlatımımızı görsellerle destekleyelim ki tam olarak otursun.

Posta Alanı:

Oluşturulan Formun Görünümü:

Form Gönderildikten Sonra Gelen E-Posta:

Buradaki mantık, form sayfasında oluşturduğumuz form alanlarının etiketlerini Posta kısmındaki uygun yerlere yerleştirmek. Form doldurulup bize gönderildiğinde tanımladığımız etiketlerin bulundukları alanlar, formu dolduranın girdiği bilgilere göre oluşmuş oluyor. Budur yani durum.

D. İletiler

Bu kısım gayet açık. Ziyaretçi formu doldururken yaptığı işlemlere göre karşısına çıkacak iletileri,uyarıları falan bu kısımdan istediğimiz gibi belirleyebiliyoruz. Mesela “Gönderenin iletisi başarılı olarak gönderildi.” kısmındaki yazıyı “İletiniz gönderildi. Size en kısa sürede dönüş yapacağız.”yazdığımızda, eğer formda hatalı bir giriş yoksa ziyaretçimizin karşısına bu şekilde bir ileti çıkacaktır. Bu kısımdaki yazıları açıklamaları baz alarak kafanıza göre düzenleyebilirsiniz.

E. Ek Ayarlar

Bu kısma eklemek istediğiniz kodları yazıyoruz. Açıklaması burada: http://contactform7.com/additional-settings/

Form oluşturma işlemimiz bitti. Oluşturduğumuz formu “B” maddesinde anlattığımız gibi bir sayfa oluşturup, formun kısa kodunu eklemek suretiyle ziyaretçilerinize sunabilirsiniz. Sadece sayfa için değil, istediğiniz içeriğe bu kısa kodu kullanarak formlarınızı eklemeniz mümkün. Her form için ayrı formlar oluşturmamız gerekiyor. Her ayrı form için de ayrı kısa kodları kullanmamız gerektiğini de unutmayalım.

4- Form Gönderilemiyor ya da Spama Düşüyor

Formu doğru bir şekilde oluşturduğunuz halde form gitmiyorsa SMTP ayarlarını daha önceden yapmamışsınız demektir. Bahsettiğimiz ayarlar yapılmamışsa gönderilen form ya spam kutusuna düşecek, ya da hiç gönderilmeyecektir. Bunun sebebi ise sunucumuzun güvenlik açığı nedeniyle e-posta fonksiyonunu kapatmış olmasıdır. Bunu da SMTP ayarlarıyla kolayca aşabiliriz. Ne şanslısınız ki bu ayarlamaları daha önceden anlatmıştık: Mailleriniz Spama Düşmesin: WP Mail SMTP Eklentisi ve Ayarları

Bu konuya göre eklentinizi kurup ayarlamaları yaptığınızda hiç bir probleminiz kalmayacak.


Contact Form 7 eklentisini kullanarak form oluşturma işlemi karışık gibi görünse de, etiket mantığını anladıktan sonra aslında bu kadar basit. Yine de takıldığınız yerler olursa yorum kısmına yazın. Elimizden geldiğince yardımcı olmaya çalışırız.

Yorum Yap

Yazar Hakkında

Samet KARACAN

Owner # wordpress, web güvenlik, sistem yönetimine dair ~

Yorum Yap