WordPress alt yapısını kullanarak yapmış olduğunuz web siteleri için WordPress iletişim formu eklentisi arıyorsanız bu yazımda detaylarıyla bulabilirsiniz.
Yine bu yazıda WordPress iletişim formu eklentileri içerisinde en popüler eklentilerden olan Contact Form 7 eklentisinin kurulumunu, ayarlarını ve kullanımını öğreneceğiz.
Contact Form 7 eklentisi bugün itibariyle 5 milyonun üzerinde indirilmiş bir eklentidir. Bu rakam bile Contact Form 7 eklentisinin başarısını rahatlıkla ortaya koyuyor.
Contact Form 7 eklentisi ile birden çok iletişim formunu yönetebilir, buna ek olarak formları ve e-posta içeriklerini esnek bir biçimlendirmeyle özelleştirebilirsiniz.
Konuyu daha fazla uzatmadan Contact Form 7 kurulumuna başlayalım.
CONTACT FORM 7 KURULUMU
WordPress yönetim panelinden Eklentiler -> Yeni ekle yolunu izliyoruz.
Arama kutusuna Contact Form 7 yazarak eklentiyi aratalım. Resimde gördüğünüz eklentiyi Hemen yükle butonuna tıklayarak yükleyelim.
Contact Form 7 Eklentisini wordpress.org sitesinden de indirebilirsiniz.
Yükleme işleminden sonra Etkinleştir butonuna tıklayarak eklentiyi etkinleştiriyoruz.
Eklentiyi etkinleştirdikten sonra WordPress yönetim panelinde Contact isminde menü öğesi eklenmiş oldu.
WordPress iletişim formu eklentisinin kurulumunu bitirdik. Şimdi de ayarlarına ve kullanımına geçelim.
CONTACT FORM 7 AYARLARI VE KULLANIMI
WordPress yönetim panelinden Contact menüsü altında 2 seçenek bulunuyor.
Add New diyerek yeni bir iletişim formu oluşturabiliriz. Ama eklentiyi kurduğumuzda varsayılan olarak bir iletişim formu geliyor. Biz bu varolan iletişim formu üzerinde değişiklikler yapacağımız için Contact Forms seçeneğine tıklıyoruz.
Gördüğünüz gibi Contact form 1 isminde bir iletişim formu var. Edit‘e tıklayarak düzenlemeye başlayalım.
Kırmızı ile çizmiş olduğum alanları türkçeleştiriyorum.
İletişim formuna bir isim veriyorum ve alt kutudaki gerekli yerleri düzenliyorum.
Türkçeleştirme işleminden sonra son hali şu şekilde oldu.
Resimde gördüğünüz arkaplan rengi mavi olan kısa kod çok önemli. Gerekli tüm ayarlamaları bitirdikten sonra bu kısa kodu kullanacağız.
Dikkat ederseniz iletişim formu için varsayılan istenilen bilgiler şunlar:
- Ad Soyad
- E-posta
- Konu
- Mesajınız
Bunların dışında ekleyebileceğimiz birçok seçenek bulunuyor.
Örneğin dosya gönderimi için file seçeneğini ekleyebiliriz. Yada açılır listeden seçim yapabilmek için drop-down menu ekleyebiliriz. Şuan temel ihtiyaçlarımızı görecek bir iletişim formu yapıyoruz. Yazının sonlarına doğru diğer seçenekleride anlatacağım.
Form sekmesi altındaki ayarlamaları bitirdik.
Şimdi Mail sekmesine geçiyoruz.
Bu kısmı varsayılan ayarları ile bırakabilirsiniz. İletişim formu doldurulup gönderildiğinde bilgilerin hangi mail adresine gideceğini vb.. bu kısımda ayarlıyoruz.
WordPress kurulumunu yaparken girmiş olduğunuz E-posta adresiniz varsayılan olarak buraya geliyor. Eğer iletişim sayfasından gelen mesajların bu E-posta adresine düşmesini istiyorsanız bu alanda bir değişiklik yapmanıza gerek yok.
Ama başka bir E-posta adresine gelmesini istiyorsanız buradaki To ve From alanlarına yeni E-posta adresinizi girmeniz gerekiyor.
Mail sekmesi altındaki Contact Form 7 ayarları da bu şekilde.
Messages sekmesi altındaki ayarlara geçelim.
Burada yapılan işlemler sonrasında herhangi bir hata olup olmaması durumuna göre gösterilecek mesajlar bulunuyor.
Örneğin iletişim formundaki bilgiler hatasız bir şekilde E-posta ya düşerse “Mesajınız başarıyla iletildi” gibi bir mesaj gösterilebilir. Yada herhangi bir hata durumunda bu hatanın detayı gösterilebilir.
Gördüğünüz gibi tüm ihtimaller göz önüne alınarak birçok mesaj bulunuyor. Şuan bu mesajlar ingilizce olarak yazılmış. Eğer bu mesajları türkçeleştirmek isterseniz tek tek türkçelerini yazmanız gerekiyor.
Sizin için mesajları türkçeye çevirdim. Buradan kopyala-yapıştır ile değişiklikleri yapabilirsiniz.
Thank you for your message. It has been sent. (Mesajınız için teşekkürler. Mesajınız başarıyla gönderildi. En kısa sürede size dönüş yapılacaktır.)
There was an error trying to send your message. Please try again later. (Mesajınızı göndermeye çalışırken bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.)
One or more fields have an error. Please check and try again. (Bir veya daha fazla alanda hata var. Lütfen kontrol edip tekrar deneyin.)
There was an error trying to send your message. Please try again later. (Mesajınızı göndermeye çalışırken bir hata oluştu. Lütfen daha sonra tekrar deneyiniz.)
You must accept the terms and conditions before sending your message. (Mesajınızı göndermeden önce şartları ve koşulları kabul etmeniz gerekiyor.)
The field is required. (Bu alan zorunludur)
The field is too long. (Bu alan çok uzun)
The field is too short. (Bu alan çok kısa)
The date format is incorrect. (Tarih formatı yanlış)
The date is before the earliest one allowed. (Tarih izin verilen en erken günden önce olamaz.)
The date is after the latest one allowed. (Tarih izin verilen en son saatten sonra olamaz.)
There was an unknown error uploading the file. (Dosya yüklenirken bilinmeyen bir hata oluştu.)
You are not allowed to upload files of this type. (Bu tür dosyaları yükleyemezsiniz.)
The file is too big. (Dosya çok büyük.)
There was an error uploading the file. (Dosya yüklenirken bir hata oluştu.)
The number format is invalid. (Girilen sayı biçimi geçersiz.)
The number is smaller than the minimum allowed. (Girilen sayı izin verilen minimum değerden daha küçük.)
The number is larger than the maximum allowed. (Girilen sayı izin verilen maksimum değerden daha büyük.)
The answer to the quiz is incorrect. (Testin cevabı yanlış.)
The e-mail address entered is invalid. (Girilen e-posta adresi geçersiz.)
The URL is invalid. (URL geçersiz.)
The telephone number is invalid. (Telefon numarası geçersiz.)
Messages sekmesindeki ayarları da bitirdik.
Additional Settings sekmesinde herhangi birşey yapmamıza gerek yok.
Tüm ayarları kaydedelim ve arkaplan rengi mavi olan Contact Form 7 kısa kodunu kopyalayalım.
WordPress yönetim panelinden yeni bir sayfa ekleyelim.
Sayfa başlığına İletişim yazıyorum ve sayfa içerisine, kopyalamış olduğum kısa kodu yapıştırıyorum.
İletişim sayfasını kaydedip tarayıcıda açalım.
Gördüğünüz gibi WordPress iletişim formu artık hazır.
Gerekli bilgileri girip Gönder butonuna tıkladığınızda bilgiler ayarlarda belirtmiş olduğunuz E-posta adresine düşecektir.
Bu iletişim formu normalde ihtiyacımızı karşılayacaktır. Ama daha farklı iletişim formları da hazırlamak isteyebiliriz.
Örneğin iletişim formu ile dosya gönderimi ve açılır listeden seçim yapma özelliklerini de ekleyelim.
İlk olarak açılır listeden seçim yapma özelliğini ekleyelim.
Form sekmesi altında drop-down menu butonuna tıklıyoruz.
Açılan ekranda gerekli ayarları yapıyoruz.
Eğer bu alandan seçim yapılmasının zorunlu olmasını istiyorsak Required field kutucuğunu işaretlememiz gerekiyor.
Açılır listenin öğelerini Options alanına yazıyoruz. Herbir öğe tek satırda yazılır. Örneğin benim yaptığım açılır listenin 2 öğesi olacak. Biri Teklif Al diğeri Randevu Al.
Id veya class vermek istiyorsanız onları yazabilirsiniz.
Yine çoklu seçim yapılmasını istiyorsanız Allow multiple selections kutucuğunu işaretleyebilirsiniz.
Ayarları yaptıktan sonra Insert Tag butonuna tıklayarak ekliyoruz.
Form sekmesi altında bu sefer de file butonuna tıklayalım.
Eğer dosya eklemenin zorunlu olmasını istiyorsak Required field kutucuğunu işaretlememiz gerekiyor.
Gönderilecek dosyanın max boyutunu belirleyebiliriz. Örneğin burada 10mb olarak belirledim.
Gönderilecek dosyanın türünü belirleyebiliriz. Örneğin burada dosya türü olarak gif, png, jpg, jpeg belirledim. Yani bu türler dışında bir dosya gönderilemez.
Id veya class vermek istiyorsanız onları yazabilirsiniz.
Ayarları yaptıktan sonra Insert Tag butonuna tıklayarak ekliyoruz.
Gördüğünüz gibi bu alanlar da WordPress iletişim formu alanlarına eklendi.
İletişim sayfasını açtığımızda artık iletişim formumuz aşağıdaki gibi olacaktır.
WordPress iletişim formu eklentisi olan Contact Form 7 ayarları ve kullanımı bu şekilde.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
Tüm Detaylarıyla Html Form Oluşturma
Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma
Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma
Yeni bir yazımda görüşmek üzere.
Öncelikle Çok Teşekkür Ederim Bilgi İçin.
Size Bir Sorum Olacaktı
Peki Bu Forum Temasını Düzenleyebiliyor muyuz?
CSS ve HTML kodları ile?
Evet, düzenleyebilirsiniz. Ama değişiklik yapmadan önce mutlaka yedek almanızı tavsiye ederim. Böylece herhangi bir olumsuz durumda eski haline döndürebilirsiniz.
Gösterdiğiniz şekilde yapıyorum ama kaydettiğim e postaya gönderilmiyor ileti
WordPress kurulumunu yaparken kullandığınız email adresine mi göndermeye çalışıyorsunuz? Yoksa eklenti ayarlarını yaparken Mail sekmesi altında yeni bir email adresi yazıp buna mı göndermeye çalışıyorsunuz?
Merhaba form öğelerinin boyutunu nasıl değiştirebilirim?
Örneğin isim kısmının boyu sayfanın genişliği kadar değilde 1/3 ü kadar olsun istiyorum html kısmını nasıl düzenleyebilirim?
İsim:
|________________________________________________________________________________________________|
İsim:
|_______________________________|
Not: Bu şekil olsun istiyorum mesela nasıl yapabilirim?
Merhabalar. Sabit bir genişlikte olmasını istiyorsanız px olarak bir değer verebilirsiniz. Ama ekranın genişliğine göre form öğelerinin genişliğinin de responsive olarak değişmesini istiyorsanız % (yüzde) değer verebilirsiniz. Örneğin: input{ width: 33%};
<input name="option_name" type="checkbox" value="1" KVKK Metni’ni okudum , onaylıyorum.
şeklinde bir kod yaptım istediğim şekilde oluyo ama zorunlu hale getirmek için * sembolünü nereye koyacağımı bilemiyorum 🙁 bu konuda yardımcı olursanız işten kovulmamamı sağlayabilirsiniz :)) ek bir şey daha sorayım KVKK Metni’ni okudum , onaylıyorum. yazısına link ekleyebiliyor muyum bağlantı olarak ? teşekkür ederim şimdiden