WordPress Contact Form 7 Kurulumu & Kullanımı
Merhaba Arkadaşlar,
Bu makalede sizlere gördüğüm kadarıyla en çok kullanılan iletişim formu eklentilerinden ” Contact Form 7 ” yi tanıtacağım ve kurulumunu anlatacağım. Kuracağımız bu eklenti sayesinde basit olarak ” adı , e-mail adresi , konu , mesaj ” gibi bölümleri bulunan bir iletişim formu yaratabileceğimiz gibi rezervasyon formu gibi daha kapsamlı bir form da yaratabiliriz. Bu makalede sizlere basit anlamda iletişim formunun nasıl oluşturulacağını göstereceğim ve bu formu nasıl genişletebileceğinizi anlatacağım.
- Hemen işlemlerimize başlayalım.
- İlk olarak makalenin en alt bölümünde bulunan indirme yollarından eklentiyi bilgisayarımıza indiriyoruz.
- Daha sonra WordPress Yönetim Panelimizde ki menüler arasından ” Plugins ” butonuna tıklayarak sayfasına giriyoruz.
- Sayfanın üstünde belirecek olan ” Add New ” butonuna tıklayarak yeni plugin ekleme sayfasına giriş yapmış oluyoruz.
- Açılan sayfada üstte bulunan sekmelerden ” Upload ” a tıklıyoruz ve indirdiğimiz .rar uzantılı dosyayı seçerek eklentiyi yüklemiş oluyoruz.
- Yükleme işlemi yapılırken sizden sunucuya bağlanmak için ftp bilgilerinizi girmeniz istenecektir. Bunları da yapmanız gerekmektedir.
- İşlem tamamlandıktan sonra ” Plugins / Installed Plugins ” sayfasına girerek ” Contact Form 7 ” eklentisinin altındaki ” Activate ” yazısına tıklayarak eklentiyi aktifleştiriyoruz.
- Bunu da yaptıktan sonra Yönetim Panelimizdeki menüler arasına yeni bir şey eklenecektir. Adı ” Contact ” olan bu menü formlarımızı oluşturup düzenleyebileceğimiz sayfanın adıdır.
Sayfa içerisine girdiğimizde default olarak bir adet formun oluşturulduğunu göreceğiz. Dilersek üstten Add New butonuna tıklayarak kendimiz yeni ekleyebiliriz ama şu anda hazırda bulunan Form’ u kullanacağız. Form üzerine tıklayarak kendi sayfasına gidiyoruz. Sayfa açıldığında genelde ilk gözümüze çarpan şey koyu renk bir arka plan üzerine yazılmış olan
[ contact-form-7 id="262" title= " Contact form 1 " ]
şeklindeki kod bloğu olacaktır. Bu bizim oluşturduğumuz formun sayfaya çekilmesine yarayan kod bloğudur. Eklentinin kendi oluşturduğu formu hiç değiştirmeden ” İletişim ” sayfamıza gidiyoruz ve bu kodu yapıştırıp kaydediyoruz. Sayfamızın ekran görüntüsüne baktığımızda formun geldiğini göreceğiz.
Şimdi tekrar form içerisine dönelim ve neyin nereden düzenlenebileceğini görelim. Formun düzenleme sayfasını açtığımızda alt bölümde sekmeler olduğunu göreceğiz. İlk sekme olan ” Form ” a girdiğimizde az önce ekran görüntüsünde karşımıza gelen nesnelerin burada bulunduğunu göreceğiz. Bu sekmede ” Generate Tag ” butonu vasıtasıyla yeni bileşenler ekleyebilirken
tag’ leri içinde bulunan kısımları ve bir alt satırdaki kodlarını düzenleyerek te işlemlerimizi gerçekleştirebiliriz. Örnek bir iletişim formu şu şekilde olabilir :
<p>Adınız( Doldurulması Zorunludur ) : <br />
</p>
<p>E-Mail Adresiniz( Doldurulması Zorunludur ) : <br />
[email* your-email] </p>
<p>Konu Başlığı : <br />
</p>
<p>Mesaj İçeriği : <br />
[textarea your-message] </p>
<p>[submit "Gönder"]</p>
Kodlar içerisine baktığımızda bazı bölümlerde ” * ” gözümüze çarpacaktır. Bu ” * ” ların anlamı o text alanının boş bırakılması halinde hata verilmesinin istenmesidir. Ayrıca php tabanlı kendi yazacağımız bir iletişim formunda e-mail kontrolü için uğraşmamız gerekirken burada kısa bir biçimde bu işlemi yürütebildiğimizde görüntülenebilmektedir.
İkinci sekme olan ” Mail ” de gönderileceği adres ve gösterim biçimi belirlenmektedir.
” Mail(2) ” sekmesinde ki checkbox ‘ a tıklarsak aynı mailin iki farklı adrese gönderilebildiğini göreceğiz.
” Messages ” sekmesinde ise ” Gönder ” butonuna basıldığında tetiklenen işlemler sonucunda ekrana dönecek olan mesajlar yer almaktadır. Eğer gönderildi ise başarılı mesajını , eğer gönderilemedi ise hata ve nedenini belirtelebileceğimiz bölümler burada yer almaktadır.
Not : Bu ders içeriğinde kullanılan dosyaları İndir Sayfası 22 No ‘lu Maddeden İndirebilirsiniz..
Veya : Eklentinin en güncel haline ulaşmak için WordPress.Org sayfasını ziyaret edebilirsiniz.
peki yeni bir metin alanı checkbox ya da radyo button ekleme işlemini nasıl yapabiliriz??
@3d max ödev,
Contact Form işlemlerini yaptığımız alanda sağ bölümde bulunan ” Generate Tag ” menüsüne tıkla ve açılan menüden Checkboxes veya Radiobuttons seçeneğine git. Örneğin Checkboxes seçtiğini düşünürsek burada CSS içerisinden vereceğin bir id veya class ‘ı yazabileceğin iki alan göreceksin. Eğer bir Css işlemi yaptıysan bunları doldurabilirsin. Hemen bir alt bölümde de yine bu Checkbox ile ilgili Label özelliği birincil özelliği gibi alanlar bulunacaktır. Daha sonra ” Copy this code and paste it into the form left. ” yazısının altındaki kodu kopyalayıp sol bölümdeki form alanından istediğin yere yapıştırabilirsin.
İyi Çalışmalar.
Anladım hocam uyguladım dediklerinizi ve başarılı bir form oluşturabildim. Teşekkürler.
Arkadaşlar formu şuan ben siteme ekledim fakat test edip gönder dediğimde —–İletinizi gönderme başarısız oldu. Lütfen daha sonra tekrar deneyin ya da yönetici ile başka bir yöntemle iletişime geçin.—– diye bir hata mesajı veriyor bu sonurun nasıl çözebilirim. yardımlarınız için şimdiden teşekkürler
@Kadir Meriç,
Bu senin kurulum yaptığın dosyaların bozukluğu da olabilir , Hata ve onay mesajlarını düzenlediğin alan ile ilgili bir şey de olabilir. Mail adresini kontrol ettiğinde mailler gelmiyorsa kurulum dosyaları hatalıdır. Benim verdiğim indirme yollarını kullanarak indirip kurulum yaparsan bir sorun kalmayacaktır.
İyi Çalışmalar.
Merhaba. Formu uyguladım ve düzgün görünüyor ancak “İletiniz başarılı olarak gönderildi. Teşekkürler.” mesajına rağmen “Kime” hanesinde belirttiğim adrese mesaj ulaşmıyor. Gönderimi yapacak mail adresi için gerekli ayarları nereye girmeliyim bunu bulamadım. yardımcı olabilirseniz sevinirim.
@Serdar,
Panelde sol bölümde ” Contact ” isimli menüye gir. Burada mail sekmesi altında ” To: ” seçeneğini göreceksin. Mail adresini buraya yazman gerekmektedir. Eğer bu şekilde yaptıysan ve halen hata alıyorsan eklentiyi yeniden kurmayı , farklı bir yerden indirip o dosyalar ile kurmayı denemeni öneririm.
selam. teşekkürler anlatım için. iletişim numarası isimli yeni bir seçenek eklemek istiyorum sağdan etiket oluştura tıklıyorum. telefon numarasını seçiyorum. ordan sonra ne yapmalıyım. denedim “telefon numaranız” isimli bir bölüm eklendi. fakat o alan dolduruulduğunda mailime iletişim numarası gelmiyor.
http://img6.imageshack.us/img6/4372/xjmp.jpg
@emre,
Mantık olarak aynı yolu izlemen gerekmektedir. Yeni bir text alanı eklerken nasıl bir yol izleyip doldurulduğunda mail adresine gelmesini sağlıyorsan telefon numarası seçeneği içinde aynı yolu izlemelisin. Eğer olmuyor ise bir text alanı daha ekleyerek bu sorununu çözebilirsin. Yani insanlar sana telefon numarasını da bir text alanı içerisinde gönderirler. Ayrıca eklenti dosyaların içerisinde olabilecek bir bozuklukta söz konusu olabilir. Bunlar sen dosyayı hiç karıştırmasan dahi zamanla oluşabiliyor. Eklenti dosyalarını yeni indireceğin dosyalar ile güncelleyebilirsin.
Sorununu bu önerdiğim yöntemler ile çözemezsen tekrar yorum yaparak destek isteyebilirsin. Daha geniş veya resimli bir anlatım ile sana yardımcı olmaya çalışırım.
İyi Çalışmalar.
Hocam gelen mail ve server ayarlarını gösterir bir link mevut mudur? Sadece Wp mail yapsak olur mu? Ve son sorum Hazır Çerçeve template bulabilir miyiz. Sağolasınız
@Murat Gencer,
Söylemek istediğini tam anlamadım ama eğer bir mail sistemi oluşturmak istiyorsan zaten wordpress tabanlı bir sistemde bu eklenti ile isteğini gerçekleştirebiliyorsun. Herhangi bir server ayarı yapmadan istediğin mail adresine yönlendirebiliyorsun.
Contact Form kulanıyorum bir sipariş formu yaptım firma ismi ve tel.numarı ekledim ama bana mail düşerken firma adı ve tel. düşmüyor hata yapıyorum galiba nasıl yapalibilrim yardımcı olurmusunuz.
@hasan selçuk turan,
Eğer eklediğiniz hiç bir alan size ulaşmıyorsa Bunu ya solda bulunan eklenti sayfasında solda bulunan ” Form ” alanı içerisine eklemediğinizden kaynaklanıyordur ya da eklentinizde çalışmayan dosyalar bulunmaktadır. İlk olarak eklenti dosyalarınızı yenileyin. Bir sonuç alamazsanız oluşturduğunuz text alanlarını söylediğim bölüme eklemeyi unutmayın.
hocam ben yerel sunucuda kurdum programı.söylenilenleri harfiyen yaptım ama hata alıyorum.neden olabilir
acemi wordpressci,
localhost üzerinde oluşan bir problem ile ilgili birçok problem olabilir. Senin bilgisayarın, localhost’u çalıştırdığın program vb. bir çok neden çıkabilir. İnternet üzerinde de aynı eklentiyi kullanabilirsen sorun olup olmadığını daha sağlıklı görebilirsin.
hocam formu yollayan üyenin adını görmek için kimden kısmına ne yazmalıyım.
@kerem aydaş,
Form zaten sana geldiğinde gönderenin adı da yazacaktır. Ama sen sadece kendi üyelerinden mesaj alıyorsan bununla ilgili bir özelliğini bilmiyorum.
Merhaba,
Yeni bir sayfa oluşturduğumda form görünüyor ancak, daha önce hazırlanmış bir şablona nasıl ekleyeceğim? sayfa içersine bir linkle mi çağırcam?
@idil tuğba,
Anladığım kadarıyla varolan bir sayfanın içerisine eklemek istiyorsun. Makalede anlattığım gibi form için sana verilen kodu sayfaya ekleyerek çağırabilirsin.
merhabalar. hocam conctfrom ile mail gönderimi başarılı oldupu yazıyor fakat mail epostaya düşmüyor
@Mustafa,
Mail gönderilen adresi ve eklenti dosyalarını tekrar kontrol edebilir misin ? Eğer eklentinin güncel sürümünü kullanıyorsan ve mail adresini doğru yazdıysan hosting servisini aldığın firma ile görüşmelisin.
Hocam hersey tamam ama içerik boş geliyor nerde hata yapıyorum
@Uydunet,
Oluşturduğun alanların doğru ” name ” değerleri aldığından emin olur musun ?
Merhaba, ben bir site üzerinde deneme yapmaktayım ve malum sitede istek paneli için contact form7 kulllandım yanlız konu içeriği ” isteğiniz ” olan yerdeki kutucuk büyük olduğundan sayfa sağ tarafa doru kayma yapıyor bunu nasıl düzeltebiliriz, teşekkürler
@metehan,
Eklediğin alanda genişlik ve yükseklik değerlerini belirleyemiyorsun. Yani standart bir genişlikte ekleniyor. Bunu düzenlemek için panelde eklerken class veya id değeri vererek css ile düzenlemen gerekmektedir. Örneğin bu kutunun 100px genişliğinde olmasını istiyorsan ve id değeri olarak “isteginiz” verdiysen css sayfası içerisinde
#isteginiz{width: 100px;}
satırını eklemen gerekmektedir.
arkadaşlar belki konuyla tam alakası yok ama birşey sormak istiyorum. Cf7de mesela iki alan yapıp birisi kendisi birisi doğrulaması olarak nasıl yapabiliriz araıştırdım fakat pek birşey bulamadm?
@sefa toprak,
Bunu hem sunucu tarafında hem de istemci tarafında yapabilirsin. Sunucu tarafında kontrol etmen daha doğru olacaktır. Veritabanına verileri gönderirken bir if sorgusu ile örneğin sifre1 ve sifre2 id değerlerine sahip alanlar var ise ikisinin içindeki değerleri karşılaştırabilirsin. Eğer istemci taraflı yapmak istersende jquery ile butona tıklandığında ikisinin değerini aldırmak için iki değişken oluşturup yine bir if sorgusu ile ikisinin birbirine eşit olup olmadığını kontrol edebilirsin.
Kullanacağın sistem ile ilgili daha detaylı bilgi verebilirsen jquery ile bununla ilgili bir kod örneği paylaşabilirim.
insan kaynakları formu yapmam lazım bir site için ve telefon ile mail doğrulaması istiyor müşteri iki alanın da kontrolü gerekiyor bu konuda yardımcı olabilir misiniz dediğiniz gibi jquery ile oluyorsa öyle
@sefa toprak,
Telefon doğrulaması olarak belirttiğin işlemi telefon input alanına toplamda 10 rakam girilsin ve kendi kendine gruplansın olarak anlıyorum. Bunun için http://digitalbush.com/projects/masked-input-plugin/ linkinde bulunan plugini öneririm. Sitede kullanımı ile ilgili gerekli bilgi ve dökümantasyonu bulabilirsin.
Mail doğrulaması içinde form içerisinde ki tüm input alanlarına “form-control” class’ını ve email alanı için ekstra olarakta “email” class’ını verebilirsen aşağıdaki kod blogu senin için yeterli olacaktır. Mail kontrolünün dışında boş alanlarda var ise uyarı vermesi için ekstra bir alan daha ekledim. Eğer form alanları boş ise veya email alanında doğru bir içerik girilmediyse “error” isimli bir class değeri verilecektir.
— — —
$(“form”).submit(function(event){
event.preventDefault();
$(this).find(“.form-control”).each(function(){
if($(this).val() == “”){
$(this).addClass(“error”);
}else if($(this).hasClass(“email”)){
var _email = $(this).val(),
_emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,10})?$/;
if(!_emailReg.test(_email)) {
$(this).addClass(“error”);
} else {}
}else{
//Form Gönderme İşlemi
}
});
});
— — —
aslında tam olarak istediğim şuydu sanırm çok iyi izah edemedim
http://i.hizliresim.com/07oN3B.jpg burdaki gibi birşey
@sefa toprak,
O zaman “Telefonunuz” input alanına id değeri olarak “tel1” ve diğerine “tel2” vermelisin. Ardından “E-mail Adresiniz” input alanına id değeri olarak “email1” ve diğerine “email2” vermelisin. Ayrıca boş bırakılmasını istemediğin tüm input alanlarına da “form-control” class değerini vermelisin. Ardından şu şekilde bir kod ile formun gönderilmesi anında gerekli kontrol yapılmış olacaktır.
— — —
$(“form”).submit(function(){
var tel1 = $(“#tel1”).val(),
tel2 = $(“#tel2”).val(),
email1 = $(“#email1”).val(),
email2 = $(“#email”).val(),
inputVal = $(“.form-control”).val();
$(this).find(“.form-control”).each(function(){
if(tel1 != tel2){
alert(“telefon numaraları eşit değildir.”);
}else if(email1 != email2){
alert(“email adresleri eşit değildir.”);
}else if(inputVal == “”){
$(this).addClass(“error”);
}else{
//form gönderme işlemleri
}
});
});
— — —
Yardımlarınız için çok teşekkür ederim
Detaylı anlatımın için teşekkür ederim. Konuyu biraz zor buldum ama yorumlara bile tek tek cevap vermişsiniz. Elinize sağlık.
Merhabalar;
CF7 ile oluşturduğum iletişim formunu wordpress sayfasına entegre ediyorum ve gönder butonu ile gönderilen mesaj e-posta adresine düşüyor. Fakat gönder butonuna tıkladıktan sonra “iletiniz başarı ile ulaştı” mesajını alamıyorum. Gönder butonu yanındaki işaret sürekli döner vaziyette animasyon oynatmaya devam ediyor. Hiçbir olumlu ya da olumsuz mesajı ekrana yazmıyor.
@cem,
Mail ulaşıyor ise eklenti içerisinde mesajların gösterildiği fonksiyon içerisinde eksik bir şeyler olabilir. Eklentinin son halini indirerek dosyaları güncelleyebilir misin ?
Merhaba, CF7 ile oluşturduğum iletişim formlarında
1.satırda [Adı Soyadı] [E-posta Adresi]
2. Satırda Telefon +90 [ALAN KODU – aşağı açılır menu] [Telefon numarası text alanı]
3. Satırda [MESAJ – text alanı]
4. Satırda [GÖNDER – butonu]
gibi bir düzenleme ile form oluşturmak istiyorum.
Form alanlarını yanyana yerleştirmek mümkün olmuyor.
Ben çok eskiden kullanılan table etiketiyle bunu çözmeye çalıştım fakat içime sinmedi. Her yerde tr ve td etiketleri hoş değil.
Bunun responsive bir çözümü olmalı diye düşündüm.
Siz ne düşünürsüz ?
@cem,
evet bunu responsive ile çözebilirsin fakat eklenti içerisinde bunun çözümünün olmadığını ve bunu kendinin css yazarak yapman gerektiğini düşünüyorum. Css ile her bir satır için “form-row” ve her bir sütun için “form-col” gibi class’lar oluşturarak aynı tablo mantığında ki gibi oluşturabilirsin. Media query ile örneğin 768px altına inildiğinde tüm “form-col” class’ına sahip alanlara 100% genişlik vererek sorununu çözmüş olursun.
Ne yaptıysam Olmadı..
Gönderenin iletisinin gönderilmesi başarısız oldu
hatası alıyorum.
@Bayrakçı,
Eğer eklentinin güncel versiyonları kullandığında da hata devam ediyor ise hosting firması ile iletişime geçmeni öneririm. Mail gönderimi ile ilgili bir kısıtlamadan kaynaklanıyor olabilir.
Arkadaş selamın aleyküm bir konu hakkında fikirlerinize ihtiyacım var. Yaptığım sayfaya bir formu ekledim ve müşterinin şubelerini buraya girdim. Şube seçip bilgi almak isteyen kişilerin bilgileri ilgili şubeye mail gitmesini istiyorum.
Kısacası seçilen şubeye form üzerinden e mail gitmesini istiyorum. Bu konu hakkında nasıl bir çalışma yapabiliriz.
Teşekürler.
@Hasan Yalçın,
https://contactform7.com/selectable-recipient-with-pipes/ bu linkteki yapıyı uygulayabilirsin.