Eklenti Kullanarak İletişim Formları Nasıl Eklenir – P1: İletişim Formunu Kullan 7

Profesyonel bir web sitesine sahip olmak istiyorsanız iletişim formu en önemli unsurlardan biridir. Özel eklentiler kullanıyorsanız, bir iletişim formu oluşturmak ve kurmak bile zor değil. Eklentilerle kolay ve hızlı bir şekilde iletişim formları oluşturmanıza yardımcı olmak için en popüler iletişim formu eklentilerinin nasıl kullanılacağına ilişkin talimatları derledik ve yazdık.

“İletişim Formu” serisinin ilk bölümünde şunları öğrenelim:

• İletişim formu nedir?
• İletişim formunun faydaları
• Form oluşturmak için Contact Form 7 eklentisi nasıl kullanılır?

İletişim Formu Nedir ve Faydaları?

İletişim Formu Nedir?

İletişim formu, pazarlamacılara tanıdık gelen bir terimdir. İletişim formunu kullanarak, kullanıcılar e-posta adresinizi bilmeden doğrudan web sitesinde e-posta gönderebilir ve sizinle iletişim kurabilir.

Bir iletişim formu genellikle kullanıcıların e-posta, telefon numarası, ad, e-posta içeriği gibi gerekli bilgileri doldurması için birçok alana sahiptir. Ayrıca, genellikle bir İletişim sayfasına veya müşterilerin iletişim bilgilerini almanız gereken alana yerleştirilir. . İşte bir örnek:

İletişim Formunun Faydaları

Kullanıcılar iletişim formunu site sahibine bilgi göndermek için (iletişim bilgilerini bırakmak, destek talepleri veya diğer istekleri göndermek için…) doğrudan o site üzerinden kullanabilmeleri, iletişimi çok daha kolay ve hızlı hale getirir.

Ayrıca, bir iletişim formu kullanmak, e-postanızı gizli tutabilir ve istenmeyen postaları ve güvenlik tehditlerini azaltabilir. Bu nedenle, her gün spam ve çöp dolu posta kutusuyla uğraşmak zorunda kalmayacaksınız.

Ayrıca iletişim formları, formda talep ettiğiniz bilgileri doldurmaları gerektiğinden, kullanıcıların bilgilerini daha kolay toplamanıza yardımcı olur. Bu, daha fazla potansiyel müşteri elde etmek için stratejilerden biridir.

Genel olarak, profesyonel bir web sitesi oluşturmak ve işinize daha fazla fayda sağlamak için iletişim formlarını kullanmalısınız.

İletişim Formu Nasıl Oluşturulur

Alanlar ve formlar oluşturmak için istediğiniz gibi kod yazabilirsiniz. Ancak, kodlayıcı değilseniz, bu mümkün değildir. Veya bunu yapmak için bir kodlayıcı kiralayarak bir miktar para ödemeniz gerekir.

Bu nedenle, teknoloji dışı kullanıcılar ve hatta geliştiriciler için (zamandan ve emekten tasarruf etmek için) iletişim formları oluşturmak için en kullanışlı çözüm bir eklenti kullanmaktır. Artık basit, kolay, hızlı ve ücretsiz birçok iletişim formu eklentisi var. Yani, onları bir iletişim formu oluşturmak için kullanmamak için hiçbir neden yok, değil mi?

Bu serinin tüm makalelerinde size aşağıdaki gibi bir üniversite kayıt formunun nasıl oluşturulacağını göstereceğim:

İletişim Formu 7'yi Kullanarak Form Oluşturun

“Eklentileri Kullanarak İletişim Formu Oluşturun” serisinin bu ilk makalesinde, bugün mevcut olan en popüler ücretsiz iletişim formu eklentilerinden biri olan Contact Form 7'yi kullanıyorum.

Her şeyden önce, bu eklentiyi wordpress.org'daki eklenti deposundan indirip yükleyin veya yüklemek ve etkinleştirmek için Gösterge Tablosu > Eklenti > Yeni Ekle'ye gidin.

İletişim Formu 7

Yazar(lar): Takayuki Miyoshi

Mevcut Sürüm: 5.5.3

Son Güncelleme: 28 Kasım 2021

iletişim formu-7.5.5.3.zip

%82 Derecelendirme 5.000.000+ Kurulum WP 5.7+ Gerekiyor

Bu eklenti ile yukarıdaki üniversite kayıt formunu oluşturmak için özel talimatlar.

Arayüz

Yeni bir iletişim formu oluşturmak için Pano > Kişi > Yeni Ekle'ye gidin. İşte çalışacağınız arayüz:

(1): İletişim formunun adını girin
(2): Aşağıdakileri içeren bir iletişim formu oluşturmak ve ayarlamak için sekmeler:

• Form sekmesi: iletişim formu için alanlar oluşturun
• Posta sekmesi: iletişim formundan aldığınız e-postaları ayarlayın
• Mesaj sekmesi: veri yüklemede bir hata olduğunda, form gönderilemediğinde, form başarıyla gönderildiğinde, kullanıcıların aldığı bildirimleri içerir.
• Ek Ayarlar sekmesi: iletişim formuna başka öğeler ekleyin.

İletişim Formu için Alanlar Oluşturun

Bahsettiğim gibi, bir iletişim formu, kullanıcıların bilgi girmesine veya bunlarla etkileşime girmesine izin veren alanlar içerir. Bu alanları oluşturmak için kullanılan Form sekmesi:

(1) forma eklenecek ad, e-posta, numara, gönder düğmesi, … gibi alanlardan oluşur. Herhangi bir alan eklemek için ilgili alanın adına tıklamanız yeterlidir.

(2) form yapısını HTML formatında görüntülemek için alandır. Yeni bir iletişim formu oluştururken, e-posta, ad, konu ve gönder düğmesi gibi basit alanlara sahip temel bir form için varsayılan yapıya sahip olacaksınız. Bu formu hemen kullanabilir veya ona dayalı yeni bir form oluşturabilirsiniz.

Alanlar için Genel Talimat

İstediğiniz alanı seçtikten sonra, alana gerekli bilgileri girdiğiniz bir açılır pencere görünecektir. Her alan farklı bilgiler gerektirir, ancak genel olarak hepsinde aşağıdaki bölümler bulunur:

İsim : isim niteliği
Varsayılan değer : alanın varsayılan değeri
Kimlik özelliği : Alanın kimliği
Class niteliği : alanın sınıfı

Not : ID niteliği ve Sınıf niteliği isteğe bağlıdır ve özel bilgilerinizi buraya girebilirsiniz. Aşağıdaki iletişim formunu şekillendirme adımlarını daha kolay istiyorsanız, bu 2 bölümü doldurmalısınız.

Bu bilgileri doldurduktan sonra, bu kutunun altında oluşturduğunuz alanın Etiketini göreceksiniz. Bu alanı formun HTML'sine eklemek için Etiket Ekle'ye tıklayın.

Normalde Contact Form 7 ile oluşturulan bir iletişim formundaki her alanın etiketi aşağıdaki yapıya sahip olacaktır:

 [field* name_attribute id:field_id class:field_class "alanın varsayılan değeri"]

Açıklamalar:

• field * , seçtiğiniz alanın türüdür. Bu, bir alanın en önemli ve olmazsa olmaz kısmıdır.
• * bu alanın gerekli olduğu anlamına gelir. Kullanıcıları girmeye zorlamak istemiyorsanız * işaretini kaldırın.

İletişim Formu 7'deki alan etiketinin yapısı hakkında daha fazla bilgi edinmek için bu belgelere bakın. Bir iletişim formunun anlamını ve HTML yapısını anlamak, kod kullanarak düzenlemenizi, oluşturmanızı ve yeni alanlar eklemenizi kolaylaştıracaktır. Özellikle kodlayıcılar ile yukarıdaki sözdizimine göre formu oluşturmak için HTML kodu yazabilirler. Ancak, kodlayıcı olmayanlarla zor olabilir, bu nedenle aşağıdaki adımları izlemenizi öneririm.

Bu serideki iletişim formları ile aşağıdaki alanları seçmem gerekiyor:

Tüm alanlar yukarıda bahsettiğim ortak bilgilere sahiptir. Bu nedenle, şimdi her alanın belirli kısımlarını yönlendiriyorum.

Aşağıda her alan için ayrıntılı talimatlar bulunmaktadır.

Ad Girmek İçin Bir Alan Oluşturun

Metin alanını seçin ve alan için temel bilgileri kutuya girin:

Alan türü bölümünde, (isteğe bağlıdır) bu alan doldurulacak zorunlu olduğunu gerektirmesi seçin edebilirsiniz.

Not : Varsayılan değer bölümünde, kullanıcılar verileri girmeden önce bu içeriği alanda görüntülemek için Bu metni alanın yer tutucusu olarak kullan'ı seçin. Kullanıcılara alanda neyi doldurmaları gerektiğini açıklamak için bu modu kullanmalısınız.

Akismet bölümü, bir istenmeyen posta önleme eklentisi olan Akismet eklentisi ile ilgilidir. Bu eklentiye sahip değilseniz, o zaman bu bölümle ilgilenmeyin.

Telefon Numarası Girmek İçin Bir Alan Oluşturun

Sayı alanını seçin ve alan için temel bilgileri doldurun.

Alan türü bölümünde bu alan için bir tür seçin. İki tür alan vardır: Spinbox ve Slider .

Kaydırıcı , sayı seçmek için aşağıdaki gibi bir ölçek gösterecektir:

Bu stil, belirli bir ölçeğe göre sayıları puanlamak veya seçmek için uygundur.

Bu arada Spinbox , herhangi bir numarayı, alana telefon numarası, kart numarası, kimlik kartı numarası gibi sayıların sırasını girmenize izin veriyor… Yani bu örnekte Spinbox'ı seçiyorum.

Aralık bölümü, sayı için bir sınır seçmenize olanak tanır. Bu örnekte, bu bölüme ihtiyacım olmadığı için hiçbir şey doldurmadım.

Bölümleri ve Çalışma Yerlerini Seçmek için Bir Alan Oluşturun

Bu alan ile açılır menüyü seçin .

Şimdi, Seçenekler bölümünde ana dal ve yer seçeneklerini doldurun, her seçeneğin bir satır olduğunu unutmayın.

Kullanıcıların aynı anda birden çok seçenek belirlemesine izin vermek istiyorsanız, Birden çok seçime izin ver 'i tıklayın.

Kayıt Amacı Seçimi İçin Bir Alan Oluşturun

Onay kutusu alanını seçin.

Seçenekler bölümü, yukarıdaki açılır menü alanındakine benzer. Ek olarak, aşağıdaki gibi onay kutuları için daha fazla seçenek vardır.

• Önce bir etiket, en son bir onay kutusu koyun
• Her öğeyi etiket öğesiyle sarın
• Onay kutularını özel yapın (yalnızca 1 seçenek belirlemenize izin verilir).

Gönderme Düğmesini Oluşturun

Son olarak, gönder alanını seçin ve aşağıdaki gereklilik olarak bilgileri doldurun ( Etiket'in bu düğmede görünecek kelime olduğunu unutmayın, örneğin “Gönder”, “Kaydol”, “Onayla”).

Özellikle, yeni bir form oluştururken, bu eklenti zaten otomatik olarak gönderilen bir alan oluşturmuştur. Bu nedenle yeni bir alan oluşturmadan bu alanı kullanabilirsiniz.

Alanlar için Etiketler Ekle

Artık iletişim formu için alanlar oluşturmayı bitirdiniz. Ancak, alanlarınızın iletişim formunda aşağıdaki gibi görüntülenecek bir adı yok:

Bu nedenle, formun HTML kısmına aşağıdaki kod yapısını ekleyerek alanlara etiket eklemeniz gerekir:

 <label> Alan Etiketi
[Alan etiketi] </label>

Ardından, Alan Etiketi bölümüne alanın etiketini yazın. Ardından yukarıdaki tüm bilgileri doldurun, Kaydet'i tıklayın .

Alanları oluşturduktan sonra, iletişim formum aşağıdaki kod yapısına sahip, alanları ön uçta istenen konumda gösterecek şekilde düzenlediğimi unutmayın:

 <etiket> Adınız (gerekli)
[metin* adınız "adınızı girin"] </label> 

<etiket> Telefon Numaranız
[number phone placeholder "telefon numaranızı girin"] </label> <label> E-postanız (gerekli)
[e-posta* e-posta adresiniz "e-posta adresinizi girin"] </label>

<etiket> Binbaşı
[seçin* ana dal "Bilgisayar bilimi" "Dilbilim" "Tarım" "Mühendislik" "e-Ticaret"] </label>
<etiket> Çalışmak için konum 
[seçin* Öğrenim yeri "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </label>

</label> Kaydolun
[checkbox* register label_first "Çalışma" "Bir tur atın" "Danışın"] </label>

[Gönder Gönder"]

Bu sefer, iletişim formunuz hala web sitesinde görünmüyor. Ön uçta görüntülemek için birkaç adım daha yapmanız gerekir.

İletişim Formu Ayarları

E-postayı Ayarla

Posta sekmesi, kullanıcılar tarafından iletişim formları gönderildiğinde alacağınız e-postanın içeriğini özelleştirmenize olanak tanır. Bu bölümü ayarlamak için, az önce oluşturduğunuz iletişim formundaki alanların posta etiketlerini eklemeniz gerekir. İşte bir örnek:

Açıklamalar:

• Kime : İletişim formunu kontrol etmekten sorumlu kişinin e-postasını girin.
• Kimden ve Konu : Bu iletişim formunu kimin gönderdiğini belirlemek için burada bir isim belirlemelisiniz.
• İleti Gövdesi : İletişim formundan e-posta aldığınızda, kullanıcılardan talep ettiğiniz tüm bilgilerin görüntülenmesini sağlamak için buraya posta etiketleri ekleyin.

Diğer ayarlar

Mesaj sekmesi

Sekme açıklamasında görebileceğiniz gibi durumlarda kullanılan mesajları girin. Örneğin, kullanıcılar formu başarıyla gönderdikten veya gönderemedikten sonra, bu konuda onları bilgilendirmek için bir mesaj eklemelisiniz. Veya kullanıcılar zorunlu bir alanı unuttuklarında, kullanıcıların o alanı doldurmak için geri gelmeleri için bir mesaj da eklemelisiniz. Bunlar küçük detaylar olsa da kullanıcı deneyimini geliştirmeye özen göstermelisiniz.

Ek Ayarlar Sekmesi

Bu sekme, aşağıdakileri yüklemek için kod parçacıkları eklemenize yardımcı olur:

• Yalnızca aboneler modu
• Demo modu
• posta atlama
• Doğrulama olarak kabul
• Flamingo ayarları
• Mesaj depolamayı engelleme
• JavaScript kodu

Kullanmanız gereken bazı oldukça faydalı parçalar vardır, örneğin:

• Yalnızca aboneler modu : Bu mod, yalnızca web sitenizde oturum açmış kullanıcıların iletişim formunu göndermesine izin verir. Bu, istenmeyen iletileri ortadan kaldırır ve yalnızca sizinle gerçekten iletişim kurmak isteyenler içindir.
• Doğrulama olarak kabul : kullanıcılar bu kutuyu işaretlemeyip başka bir alana geçtiğinde Kabul onay kutusu için bildirimleri görüntülemek için bir özellik ekleyin. Varsayılan olarak, kullanıcılar Kabul onay kutusunu işaretlemezlerse, hata mesajı yalnızca formu gönderdikten sonra görüntülenir. Bu Kabul onay kutusu genellikle "Web sitesi şartlarını kabul ediyorum" gibi alanlar oluşturmak için kullanılır, ancak başka içerik türleri oluşturmanız durumunda , doğrulama olarak Kabul'ü eklemeniz gerekebilir.

Ek Ayarlar sekmesindeki diğer özellikler hakkında daha fazla bilgi edinmek için daha fazlasını buradan okuyabilirsiniz.

Web Sitesinde İletişim Formunu Görüntüleyin

Son adım, web sitesinde az önce oluşturduğunuz iletişim formunu görüntülemektir.

Hala yeni bir form oluşturmak için arayüzde, kısa kodu kopyalayın ve istediğiniz sayfaya veya gönderiye yapıştırın.

İşte nihai sonuçlarım:

Ancak, iletişim formum pek iyi görünmüyor, bu yüzden biraz şekillendirmem gerekiyor.

Bu makalenin başında verdiğim şablon gibi iletişim formunu yeniden biçimlendirmek istiyorsanız, stil oluşturmayı kolaylaştırmak için formun HTML'sini aşağıdaki gibi düzenlemeniz gerekir:

 <div class="form__field form__tam genişlik">
<label>Adınız (gerekli)
[metin* adınız yer tutucusu "adınızı girin"]
</label>
</div>
<div class="form__field">
<label>Telefon Numaranız
[numara telefon yer tutucusu "telefon numaranızı girin"]
</label>
</div>
<div class="form__field">
<label>E-postanız (gerekli)
[e-posta* e-postanız yer tutucusu "e-postanızı girin"]
</label>
</div>
<div class="form__field">
<label>Binbaşı
[büyük* "Bilgisayar bilimi" "Dilbilim" "Tarım" "Mühendislik" "e-Ticaret" seçin]
</label>
</div>
<div class="form__field">
<label>Çalışılacak yer
[seçin* Öğrenim yeri "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"]
</label>
</div>
<div class="form__field form__tam genişlik">
<label>Kaydolun
[onay kutusu* register use_label_element "Çalışın" "Bir tur atın" "Danışın"]
</label>
</div>
<div class="form__field form__tam genişlik">
[gönder "Gönder"]</div>

Ardından temanızın Özelleştirici > Ek CSS'ye gidin ve aşağıdaki kodu yapıştırın:

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Son olarak, kaydetmek için Yayınla'yı tıklayın.

Son sözler

İletişim Formu 7'yi ilk kullandığınızda, kodlayıcı değilseniz HTML'ye yabancı olabilirsiniz. Ancak, bu öğreticiyi okuduktan sonra her şeyin daha kolay hale geldiğini düşünüyorum, değil mi?

Başka araçlarla bir iletişim formu oluşturmayı denemek isterseniz, bu serinin bir sonraki makalesini sabırsızlıkla bekleyin. Hangi eklentiyi önermek istiyorsunuz? Bu yazının altına bir yorum bırakın!