Contact Form 7 Nedir, Ayarları Nasıl Yapılır?

İnternette ziyaret ettiğiniz web sitelerinin misyonu ne olursa olsun, hemen hemen aynı bileşenlerden meydana geldiğini mutlaka fark etmişsinizdir. Keza tipik bir web sitesinin menüsünde hakkımızda, hizmetler ve iletişim gibi alanlar mutlaka yer alır. Siteden hizmet/ürün satın almayı düşünen kullanıcı kitlesine erişim sağlayabilmek adına, bilhassa iletişim alanları oldukça önemlidir. Satışın sağlanarak, dönüşümün tamamlanabilmesi için gerekli bir etmendir. Bu yazımızda contact form 7 nedir , ayarları nasıl yapılır tüm detayları ile sizlere anlatacağız.

İletişime geçmek için yaygın olarak tercih edilen telefon görüşmeleri, bazı kurumsal yapıların ilk seçeneği değildir. Bu noktada da, firmalar iletişim alanlarında iletişim formlarını daha verimli bulmaktadırlar. O halde, Contact Form 7 nedir? Peki WordPress’te iletişim formları nasıl oluşturulur?

1. Temanızın hali hazırda bir “contact” sayfası şablonu vardır. Ondan yararlanabilirsiniz.
2. İletişim sayfanıza bir form eklemek için bir eklenti kullanabilirsiniz.

Bu yazımızda da size ikinci seçenekle ilgili detaylı bir anlatım yaparak, “Contact Form 7 nedir, ayarları nasıl yapılır?” sorusuna cevap vereceğiz.

Contact Form 7 Nedir?

Contact Form 7, basit ve hızlı bir şekilde iletişim formları oluşturmanız için ücretsiz olan bir WordPress eklentisidir.

Birçok özelleştirilebilir alanın varlığı sayesinde esnektir. Bununla birlikte spam ile mücadeleye yardımcı olur. Resmi dizindeki en popüler eklentilerden biridir.

Temel Bir Contact Form 7 Oluşturma

Her eklentide olduğu gibi Contact Form’u da, WordPress’in Eklentiler kısmından bulup, etkinleştirebilirsiniz. Akabinde, menüye bir Contact öğesinin eklendiğini göreceksiniz. Eklentinin ana sayfasına gitmek için üzerine tıklayın. Öncelikle Contact Form 7, Akismet veya reCAPTCHA aracılığıyla spamden korunduğunuzu bildirir.

Ayrıca CF7’nin yaratıcısı Takayuki Miyoshi tarafından tasarlanan ek bir eklenti olan Flamingo’yu indirebilirsiniz. Bu sayede formlarınıza gönderdiğiniz tüm mesajları bir veritabanına kaydedebilirsiniz. Son olarak, ekranın üst kısmındaki (veya menüdeki) Yeni Ekle düğmesine tıklamanız yeterli olacaktır.

Dört farklı sekme içeren bir sonraki sayfaya geleceksiniz:

• Form
• E-Posta
• Mesajlar
• Ek ayarlar

Enter title here

İlk bölümde, formunuza bir isim verebilirsiniz. Örneğin, “contact” olarak adlandırın. Oluşturduğunuz formun belirli bir sayfaya yerleştirilmesi gerekiyorsa (destek formu, teklif talep formu vb.) ona belirli bir ad da verebilirsiniz. Değişikliklerinizi yaptıktan sonra kaydetmeyi unutmayın.

“Form” Sekmesi

Bu bölüm, iletişim formunuzun HTML kodunu içerir. Form alanları ve Gönder düğmesi için etiketler içeren birkaç paragraf ( tags <p>...</p> ) mevcuttur.

Tüm bunları daha iyi anlamak için detaylandıralım.

<label> Your Name (required)

[text* your-name] </label>

Yukarıdaki kod, “Your Name (required)” metnini ve ardından adla ilişkili metin alanını görüntüler. E-Posta, konu ve mesaj alanları aynı şekilde yapılandırılmıştır. Köşeli parantez içindeki son öğe [submit “Send”] form doğrulama düğmesinin etiketini içerir.

Tag’lerin Kullanım Alanları

Formun üzerindeki düğmeler, oluşturduğunuz formlara her türlü alanı eklemenize olanak tanır. Metin, e-posta, tarih, açılır menü, radyo düğmeleri, test ve hatta dosya gönderme vb. gibi.

“Mail” Sekmesi

• For: Mesajın gönderileceği e-posta (sizin veya müşterinizin e-postası).
• From: Gönderenin e-posta adresi. Burada, formun e-posta alanından kişinin e-postasını alırız (form kodundaki [your-email] etiketi ile tanımlanır). Ad, e-postadan önce [your-name] etiketiyle belirtilir. Gelen kutunuzda düzgün bir şekilde görüntülenmesi için NAME < EMAIL> yapısını bu alanda tutmanız önemlidir.
• Subject: Form, gönderenin belirttiği konuyu [your-subject] etiketi sayesinde alır. Ancak, kullanmak zorunda değilsiniz.
• Additional headers: Bu alan, kopyalanacak ve gizli kopyalanacak kişileri belirtmek için kullanışlıdır. Örneğin, sizinle iletişim kuran kişiye e-postanın bir kopyasını gönderebilirsiniz. Bir kişiyi kopyalamak için Cc ekleyin: [email protected].  Bir kişiyi gizli kopyaya almak için Bcc’yi kullanın: [email protected]. Normal kopyada olduğu gibi NAME < EMAIL> yapısı da çalışır.
• Message body: Bu alan, alacağınız mesajı biçimlendirmek için kullanılacaktır. Daha net görmek için, yalnızca gönderenin mesajını içerecek şekilde yalnızca [your-message] etiketini ekleyin (e-posta ve ad zaten from alanındadır). Bunu yaparak, alınan mesaj daha çok doğrudan gönderilen bir mesaj gibi görünecektir.
• İletinin hangi formdan gönderildiğini belirtmek için Contact-form-7 tarafından otomatik olarak bir imza eklenir. Optimum olmayabilir, ancak e-postanın kaynağının bir hatırlatıcısı olarak saklayın.
• Exclude lines with blank mail-tags from output: Bu seçenek, etiketin gönderici tarafından belirtilmediği satırları hariç tutmak için kullanılır.
• Use HTML content type: Burada, HTML biçiminde iletişim e-postaları almak için kutuyu işaretleyin. Çoğu durumda bu gerekli değildir.
• File attachments: Ekleri almak için bu alanda ilgili etiketleri belirtmeniz gerekecektir. Bu alanı boş bırakırsanız hiçbir şey almayabilirsiniz.

Mail (2)

Bu alan, farklı yapılandırılmış bir mesaj göndermek istiyorsanız kullanışlıdır. Örneğin, e-postanın bir kopyasını gönderene göndermek istiyor olabilirsiniz. Bu durumda giriş kısmına şöyle bir cümle ekleyebilirsiniz: “Bana ulaştığınız için teşekkür ederim, 24 saat içinde cevap vereceğim. Bir hatırlatma olarak, mesajınızın içeriği şöyle:”.

“Messages” Sekmesi

E-posta gönderildiğinde, karşılığında görüntülenecek olan hata ve başarı mesajları gelir. Her şey yolunda giderse, başarı mesajı görüntülenecektir. Aksi takdirde soruna bağlı olarak hata mesajlarından biri görüntülenecektir.

“Additional settings” Sekmesi

Bu sayfanın son bölümü biraz daha gelişmiş kullanımlarla ilgilidir.

Contact-Form-7’ye Ek Alanlar Ekleyin

Bir formun düzenleme sayfasının farklı bölümlerini keşfettikten sonra, yeni alanlar eklememizi sağlayacak etiketlerin kullanımına bakalım.

• Metin alanı: Bir metin alanı yapılandırma kutusu görüntülenecektir. Bunu atayabilirsiniz.
• Doldurma zorunluluğu;
• Bir isim;
• Varsayılan bir değer (filigran olarak yerleştirebileceğiniz);
• Akismet eklentisi aracılığıyla bir anti-spam kontrolü (sadece metin alanı bir isim ise kullanışlıdır);
• Bir tanımlayıcı (CSS için);
• Bir sınıf (her zaman CSS için).

Artık bu alan formda olduğuna göre, herhangi biri bir mesaj gönderdiğinde onu almak mümkün olacaktır. Konu ile ilgili daha detaylı bilgi sahibi olmak isterseniz En İyi 5 WordPress İletişim Formu Eklentisi yazımızı da okuyabilirsiniz.

1.     Date Alanı

Diyelim ki bir rezervasyon formu oluşturdunuz. Bir varış tarihiniz ve bir ayrılış tarihinizin olması zorunludur. Metin alanıyla aynı şekilde bir tarih ayarlayabilirsiniz.

2.     Text Alanı

Mesajlarını yazmak için gönderenlerin bir metin alanına ihtiyacı olacaktır. Diğer alanlarda olduğu gibi, ilk etiket form koduna, ikincisi ise mesajın gövdesine eklenmelidir.

3.     Drop-down Menu

Formunuz, ziyaretçilerinizin sizinle iletişim kurmasına izin verir. Ayrıca formlar, iletişim tekliflerinizden biri hakkında olabilmektedir. Bu durumda ziyaretçinin hangi teklif hakkında bilgi istediğini öğrenmek için bir drop-down menu yararlı olacaktır. Bunun için satır başına bir choice belirtin ve gerekirse bazı choice’leri kontrol edin.

4.     Kabul (Acceptance)

Bu alanla bir kabul düğmesi ekleyebilirsiniz. Ayrıca buton ziyaretçiniz tarafından kontrol edilmezse e-posta gönderilmeyecektir. GDPR’ye (Genel Veri Koruma Yönetmeliği) kısmen uymak isteyebilirsiniz. Bu durumda, ziyaretçilerinizden Gizlilik Politikanızı kabul etmelerini istemelisiniz. Bunun için bu alanı kullanabilirsiniz. Bu durumda, iki <label> etiketinin ortasına küçük bir metin ekleyebilirsiniz. “Bu kutuyu işaretleyerek bu sitenin Gizlilik Politikasını kabul ediyorum” gibi…

5.     Quiz

Size gönderilen e-postaları filtrelemek istiyorsanız bir test yapabilirsiniz. İstenmeyen e-posta, contact-form-7 tarafından genellikle iyi bir şekilde ele alınır. Ancak, ikincil bir soru eklemek, muhataplarınızın gerçekten insan olduğundan emin olmanızı sağlar.

6.     Dosya Gönderimi (Sending files)

Kişileriniz de siz resim, doküman gibi dosyalar gönderir.  Herhangi bir dosya türünü almaktan uzak durmak için bir maksimum bir boyut belirlemelisiniz. Beklediğiniz dosyalara bağlı olarak 1, 2, 3, 10 MB veya daha fazlasını belirtebilirsiniz.

Ayrıca formunuz tarafından kabul edilen dosya biçimlerini de belirtebilirsiniz: pdf|doc|docx. Önemli olan uzantıları dikey çubuklarla ayırmaktır.

İkinci etiketi ([file]iletinin gövdesine değil, e-postanın Attachments alanına koyun.

7.     Submit Butonu

Mesajını göndermek için muhatabınızın Gönder düğmesine tıklaması gerekecektir. Etiket, düğmenin metnine karşılık gelir, bu nedenle belirtmek önemlidir. Ardından etiketi soldaki form koduna yapıştırın.

Contact Form 7’de CAPTCHA

Captcha, insanları robotlardan ayırarak spam ile mücadeleye yardımcı olan bir testtir. Ayrıca bir eylem gerçekleştirmeden (bir dosya indirmeden, bir e-posta hesabı oluşturmadan, bir yorumu doğrulamadan, bir form göndermeden vb.) önce kullanıcıdan bir yanıt (fotoğraf seçme, sözcükleri kopyalama) gerektirir.

Formlarınızı Özelleştirmek için 5 İpucu

Formlarınızın biraz daha gelişmiş olmasını istiyorsanız, işte size bazı ipuçları. Tabii bu eklenti ile yapabilecekleriniz bunlarla sınırlı değil. Ne yapabileceklerini görmek için Contact Form 7 ile birleşen diğer eklentilere bir göz atın.

1.     Herhangi bir yere form ekleyin

Varsayılan olarak, yalnızca yayınlara (yazılar, sayfalar veya diğer) ve widget’lara form eklemek mümkündür. Bir sayfa şablonuna veya temanızın belirli bir yerine bir form eklemek istiyorsanız, aşağıdaki PHP kodunu kullanın.

<?php echo do_shortcode( ‘[contact-form-7 id=”1234″ title=”Contact Form 1″]’ ); ?>

2.     Ziyaretçinin alıcıyı seçmesine izin verin

Ziyaretçilerinize şirketinizdeki belirli bir kişi veya departmanla iletişim kurma fırsatı vermek için yapabileceğiniz bir şeyler var. Bir açılır menü oluşturun ve alıcıları seçeneklere yerleştirin. Ziyaretçilere gönderilen e-postaları gizlemek için DEPARTMENT|EMAIL yapısını kullanın (ör. Executive|[email protected]). Bunun çalışması için, To: alanına [Department] etiketini koymak gerekir.

3.     Ziyaretçinin IP’sini alın

Herhangi bir nedenle sizinle iletişime geçen kişinin IP’sini almak istiyor olabilirsiniz. Bu durumda mesajın gövdesine (örneğin imzanın altına) [_remote_ip] etiketini ekleyin.

4.     Gönderinin tarihini ve saatini alın

Ayrıca, e-postanın gönderildiği tarih ve saate sahip olmak mümkündür.  Gerekirse, mesajın gövdesine [_date] ve [_time ] etiketlerini ekleyebilirsiniz.

5.     Gönderim sayfasının adresini alın

Formunuzu bir widget’a veya temanızdaki herhangi bir şeye entegre mi ettiniz? Ayrıca formun tam olarak hangi sayfadan gönderildiğini bilmek ilginç olabilir. Bunu yapmak için mesajın gövdesine [_url] etiketini ekleyin.

Contact Form resmi WordPress.org dizininin 6 eklentisinden biridir. 7, 5 milyondan fazla aktif kuruluma sahiptir. Basit formlar oluşturmanıza izin verir, ancak onunla karmaşık şeyler oluşturmak her zaman kolay olmayacaktır. Doğru bir görüntü elde etmek için biraz HTML bilgisine ihtiyacınız olacak. Temel bir CSS bilginiz varsa, her bir elemente eklenebilen sınıflar ve tanımlayıcılar sayesinde özelleştirmeyi zorlayabileceksiniz.

SMTP Mail Kurulumu ve Ayarları

WordPress mail SMTP ayarlarını kurabilmek için ilk olarak web sitenize Wp mail SMTP by WPForms eklentisini yükleyin. Ardından eklenti ayarlarını kurabilmek için sunucunuzda oluşturduğunuz mail adresinizin smtp host, smtp port ve mail adresinizin kullanıcı adı ve şifresiniz bilmeniz gerekir. Eğer bu veri sizde mevcut değilse sunucunuzu barındırdığınız şirketin destek birimi ile iletişime geçip talepte bulunabilirsiniz.

Adım 1

WordPress Mail SMTP ayarlarını kurabilmek için admin yönetici panelinizin sol bölümünde bulunan “Eklentiler” satırına tıklamalısınız.  Açılan pencerede mevcut olan “Eklenti yükle” butonuna bastıktan sonra arama kısmına yüklemek istediğimiz eklentiyi görmek için “WP Mail SMTP” yazıyoruz. Çıkan tüm sonuçlar arasında” WP Mail SMTP by WPForms” eklentisinin üstünde yer alan “Hemen Yükle” butonuna basarak eklentiyi sitenize hızlı bir şekilde yüklüyorsunuz.  Bu yükleme işleminin hemen ardından, yüklediğiniz eklentiyi aktif hale getirmek için “Etkinleştir” butonuna tıklamalısınız.

Adım 2

Eklentiyi aktif hale getirdikten sonra gereken kurulum ayarlarını oluşturabilmek adına yönetim panelimizin sol bölümünde bulunan “Ayarlar” menüsünün alt bölümünde oluşan “WP Mail SMTP” butonuna tıklıyoruz.

Adım 3

Bu sayfada “Form Email” ve “Form Name” kısmı sayfanızın Genel ayarlarında bulunan verileri otomatik olarak almaktadır. Ayrıca form email bölümünde mevcut olan mail adresi ile SMTP Username bölümüne yazacağınız mail adresi farklı olmamalıdır. 

Adım 4

Bu işlemleri tamamlayıp sayfayı aşağı doğru indirdiğinizde Mailler kısmında mevcut olan “Diğer SMTP” seçeneğini işaretliyoruz. Hemen ardından SMTP Host bilgilerini girin. SSL kullanıyorsanız “Encryption” bölümüne SSL olarak tıklayın. SMT Port bölümü genel olarak SSL kullananlar için 465, SSL kullanmayanlar için 587’dir. 

Adım 5

Bir sonraki adımınızda SMTP Username bölümüne alakalı mail adresini yazıyoruz. “SMTP Password” bölümüne mail adresinizin şifresiniz yazmalısınız. Bu bilgileri tamamladıktan sonra “Save settings” butonuna tıklayıp işleminizi sonlandırıyorusunuz.

Adım 6

Yaptığınız kurulum ve ayarların düzgün çalışıp çalışmadığını test edebilmek için aynı sayfanın üst bölümündeki “Email test” butonuna tıklayın. Açılan pencerede “Send to” kısmına e-postanızı yazmayı unutmayın. Hemen ardından send mail bölümüne tıklayın. Doğru çalışıyorsa “Test HTML email was sent Successfully!” (Test HTML e-postası Başarıyla gönderildi) yazısı yazacaktır.