İLETİŞİM SAYFASI OLUŞTURMA VE CONTACT FORM-7 İLETİŞİM FORMU EKLENTİSİNİN KURULUMU

mobizen
MOBIZEN REKLAMSIZ EKRAN KAYIT PROGRAMI
Nisan 1, 2020
eptt avm ücretsiz maske
Ücretsiz Maske Siparişi Epttavm ile Nasıl Verilir?
Nisan 5, 2020
Show all

İLETİŞİM SAYFASI OLUŞTURMA VE CONTACT FORM-7 İLETİŞİM FORMU EKLENTİSİNİN KURULUMU

Contact Form 7 iletisim formu İletişim Sayfası

İletişim formları neredeyse tüm web siteleri için olmazsa olmazdır. Bu yazımızda çok yaygın kullanılan Contact Form-7 ile nasıl iletişim formu hazırlayacağımızı ve yeni bir İletişim Sayfası ‘nın nasıl oluşturulacağını anlatacağım.


Contact Form-7 İletişim Formu Eklentisinin Kurulumu

Örnek sitemize ait ilk Ana Sayfa görüntüsü aşağıdadır.

İlk Ana Sayfa Görüntüsü
İlk Ana Sayfa Görüntüsü
Eklentiler Menüsü
Eklentiler Menüsü

Öncelikle sitemizin Admin Paneline girelim ve sol kısımda bulunan “Eklentiler“ başlığının altında yer alan “yeni ekle”sekmesine tıklayalım.

Eklenti Yükleme Sayfası
Eklenti Yükleme Sayfası

Yukarıda ki resimde görünen, eklenti arama kısmına “contact form 7” yazınız ve çıkan “contact form 7” eklentimizi “hemen yükle” diyerek yüklüyoruz.

Eklenti Etkinleştirme
Eklenti Etkinleştirme

“Etkinleştir” sekmesine tıklayarak eklentimizi etkinleştiriyoruz.

İletişim Menüsünün Eklenmesine Ait Ekran Görüntüsü
İletişim Menüsünün Eklenmesine Ait Ekran Görüntüsü

Etkinleştirme işlemi yapıldıktan sonra sol kısımda; yukarıda ki resimde de görüldüğü üzere “iletişim” isminde yeni bir sekme eklendi. Eklentimizin ayarlarını bu kısımdan yapacağız. İletişim Formları sekmesine tıklıyınca aşağıda ki arayüzle karşılaşıyoruz.

İletişim Formu
İletişim Formu

“İletişim Formu 1” yazan kısımda ki düzenle sekmesine tıklayarak iletişim formumuzu düzenlemeye başlıyoruz.


Form Sekmesi

İletişim Formuna Ait Ayarlar - Form Sekmesi
İletişim Formuna Ait Ayarlar – Form Sekmesi

 İletişim formumuzun içerisinde bulunan ve kullanıcının dolduracağı kısımları değiştirebiliriz, örnek olarak mevcut alanlara ek olarak telefon numarası ve şirket adını da kullanıcının doldurmasını istiyoruz. Yukarıda ki ve aşağıda ki iki görüntü arasında ki farka lütfen dikkat edin, aşağıda ki forma kullanıcının doldurabilmesi için “telefon numası” ve “şirket adı” seçeneklerini ekledim. Bu eklemeyi şu şekilde yapıyoruz, yukarıda ki kısımda bulunan herhangi bir maddeyi seçip kopyalıyoruz ve alt kısma yapıştırıyoruz, daha sonra ne ekleyeceksek kopyaladığımız metinleri o şekilde değiştiriyoruz ve ayarları kaydediyoruz. Siz benim eklediğim metinlere bakarak ekleme yapabilirsiniz. Ayrıca eklediğiniz metinlerin içerisine yukarıda ki gibi (gerekli) yazarsanız o seçenek doldurulmadan form gönderilemez. Yaptığım işlemleri Youtube Kanalımda video ile de anlattım isterseniz bu adımları video’dan izleyerekte gerçekleştirebilirsiniz. Sorularınızı lütfen yorumlar kısmında bana iletiniz.

İletişim Formu'nun Düzenlenmesi
İletişim Formu ‘nun Düzenlenmesi

İstediğimiz metinleri ekledikten sonra kaydet kısmına basıyoruz ve eklediğimiz kısımların forma eklendiğini göreceksiniz.

İletişim Formu Sayfası İlk Hali
İletişim Formu Sayfası İlk Hali
İletişim Formu Sayfası Sonraki Hali
İletişim Formu Sayfası Sonraki Hali

Eklediğimiz “telefon numarası ve şirket ismi” her ne kadar formda görünse de form doldurulduğunda bize gelen mail’de bu kısımlar görünmez çünkü “posta” sekmesinde de bazı ayarlamalar yapmamız gerekmektedir. Bir sonra ki kısımda posta sekmesinin ayarlarının nasıl yapılacağı anlatılmıştır.


Posta Sekmesi

Bu aşamada formumuzun kullanıcı tarafından doldurulup gönderildikten sonra hangi adrese gideceğini  ayarlamamız gerekiyor. Bu ayarlamayı “posta” sekmesine tıklayarak gerçekleştiriyoruz.

Aşağıda ki resimde görünen “message body” kısmına önceki bölümde form sekmesine eklediğimiz “telefon numarası ve şirket adı” satırlarını resimde görüldüğü formatta ekleyiniz.  “message body” kısmı size gelecek mailde formdaki hangi satırların size iletilmesini belirlediğiniz kısımdır.

İletişim Formuna Ait Ayarlar - Posta Sekmesi
İletişim Formuna Ait Ayarlar – Posta Sekmesi

Yukarıda ki resimde görünen “Kime” kısmına kullanıcı tarafından doldurulan formun gönderilmesini istediğiniz, mümkünse “site adı” uzantılı mail adresinizi (ör.:destek@teknosea.com) yazınız. Normal şartlarda bu kısma varsayılan olarak, sitenizin admin mail adresi otomatik olarak gelecektir. Bu arada üst kısımda bulunan form ismini “iletişim formu” veya “sipariş formu” olarak değiştirebilirsiniz. Ben şimdilik iletişim formu olarak değiştiriyorum ve kaydediyorum.

“Kimden” ve “Konu” sekmeleri size gelen mailin ne şekilde geleceğine ilişkin ayarlardır. Varsayılan olarak gelmektedir, yukarıda ki formda ben hiçbir değişiklik yapmadım isterseniz tercihleriniz doğrultusunda değiştirebilirsiniz. Bu kısımlar form doldurularak size gelen mailin genel konusu ve nereden geldiğini belirlediğiniz kısımdır.


İletiler Sekmesi

İletiler sekmesine tıkladıktan sonra karşılaşacağınız aşağıda ki ekranda görüldüğü üzere kullanıcıya gösterilecek uyarı mesajları ayarlanmaktadır. Bu ayarlar varsayılan olarak değiştirilmeden bırakılabilir. Ancak bazen ayarlar varsayılan dil olarak ingilizce gelebilmektedir bu durumda bu uyarıları türkçeye çevirmeniz gerekecektir.

İletişim Formuna Ait Ayarlar - İletiler Sekmesi
İletişim Formuna Ait Ayarlar – İletiler Sekmesi

“Ek ayarlar” sekmesine girmenize gerek yok, hazırladığınız formu kaydederek çıkabilirsiniz. Ancak bu formu nasıl yayınlayacağız. Bu aşamadan sonra iletişim sayfası hazırlamanız gerekecektir veya sitenizde hazır herhangi bir sayfada hazırladığınız bu iletişim formunu kullanıcılara sunmanız gerekecektir.

İletişim Formuna Ait Ayarlar - Ek Ayarlar Sekmesi
İletişim Formuna Ait Ayarlar – Ek Ayarlar Sekmesi

İletişim Formu için İletişim Sayfası Oluşturma

Öncelikle yukarıda ki resimde de görünen formun kısa kodunu kopyalıyoruz.

Sol kısımda bulunan “sayfalar” sekmesinde ki “yeni ekle” kısmına tıklayarak yeni bir sayfa açıyoruz.

İletişim Sayfası Oluşturma
İletişim Sayfası Oluşturma

Oluşturmuş olduğumuz formun kısa kodunu yeni sayfamızda aşağıda ki resimde görünen kısma ekliyoruz, oluşturduğumuz bu sayfaya bir isim veriyoruz ve sağ üst kısımda yer alan “yayımla” sekmesine tıklayarak sayfamızı yayınlıyoruz.  

İletişim Sayfasında Kısa Kodun Eklendiği Kısım
İletişim Sayfasında Kısa Kodun Eklendiği Kısım

“Sayfayı Görüntüle” sekmesine tıkladığımızda hazırladığımız “ iletişim formu ” sayfasını göreceğiz.

Yayımlanan İletişim Sayfası
Yayımlanan İletişim Sayfası

Kullanıcı bu formu doldurarak gönder sekmesine tıkladığında belirlemiş olduğumuz mail adresine doldurulan form gelecektir.  Form kullanıcı tarafından doldurulduktan sonra aşağıda ki bilgilendirme çıkacaktır.

Kullanıcı Formu Doldurduktan Sonra ki Cevap Yazısı
Kullanıcı Formu Doldurduktan Sonra ki Cevap Yazısı

Şimdi mail kutumuza, doldurulan formun gelip gelmediğini control edelim.

Kullanıcı Tarafından Form Doldurulduktan Sonra Bize Gelen Mail
Kullanıcı Tarafından Form Doldurulduktan Sonra Bize Gelen Mail

Yukarıda ki mail’de görüldüğü üzere doldurulan form mail adresimize geldi. Son olarak oluşturmuş olduğumuz formu web sitemize nasıl ekleyeceğimizi anlatacağım.

İletişim Sayfası Menüsünün Eklenmesi
İletişim Sayfası Menüsünün Eklenmesi

Sitemizde admin olarak giriş yaptıktan sonra özelleştir sekmesine tıklıyoruz.

Menü Ekleme
Menü Ekleme

Açılan bu kısımda menüler sekmesine tıklıyoruz.

Menünün Konumunun Belirlenmesi
Menünün Konumunun Belirlenmesi

Bu kısımda benim örnek menümün yapısı gereği logomun sağında ve solunda iki adet menü kısmı var, sizde muhtemelen tek menü vardır, bu farklılık size şaşırtmasın. Ben sağda ki menüme iletişim formu eklemek istiyorum. Bu nedenle sağ menüyü tıklıyorum.

Menü İsmi Değiştirme ve Ekleme
Menü İsmi Değiştirme ve Ekleme

Bu kısımda “Eleman ekle” diyoruz.

İletişim Formu'nun Eklendiği Menünün Yayımlanması
İletişim Formu ‘nun Eklendiği Menünün Yayımlanması

Sağ kısımda açılan bu menüden, daha önce sayfalar kısmında oluşturduğumuz “iletişim sayfasını” ekliyoruz ve yukarıda ki ekran görüntüsü ile karşılaşıyoruz. Daha sonra “Yayımla” diyoruz. Artık İletişim formumuz “iletişim formu” isimli menü içerisinde yayınlanmıştır.

İletişim Formu'nun Yayımlandığı Menü
İletişim Formu ‘nun Yayımlandığı Menü

“İletişim Formu” menüsüne tıkladığımızda oluşturduğumuz menü açılacaktır. Bu menünün adını değiştirmek isterseniz az önce “iletişim formu” menüsünü oluşturduğumuz kısımda menü ismini “iletişim” olarak değiştirebiliriz.

İletişim Formu Menüsünün İsminin İletişim Olarak Değiştirilmesi
İletişim Formu Menüsünün İsminin İletişim Olarak Değiştirilmesi
İletişim Menüsü
İletişim Menüsü

Kullanmış olduğunuz temaya veya sayfa yapıcı eklentiye göre isterseniz iletişim sayfanıza iletişim formunun yanısıra işletmenizin adresini belirten; adresinizi gösteren google maps uzantısını, sosyal medya hesaplarınızı ve telefon numarası bilgilerinizi ekleyebilirsiniz. Site yapımında ihtiyaç duyacağınız birçok konuda makale yazmaya devam edeceğim, mümkün mertebe yazıları video dersleri ile de anlatmaya çalışacağım. Umarım işinizi görmüştür, diğer yazılarımıza göz atmayı unutmayınız. Teknosea Web Tasarım olarak sağlıklı günler dileriz.

Muhammet Karaaslan
Muhammet Karaaslan
1989 İstanbul Doğumlu. Elektronik M.Y.O, İşletme Fakültesi ve Bilişim Sistemleri Yüksek Lisans Mezunu. Teknosea Bilişim'de Yönetici.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir