Eklenti Kullanarak İletişim Formları Nasıl Eklenir – P2: WPForms Kullanın

“İletişim Formu” serisinin bir önceki yazısında, iletişim formunun ne olduğunu ve Contact Form 7 eklentisinin nasıl kullanılacağını öğrenmiştik. Söz verdiğim gibi, WPForms ile başka bir öğretici yazdım ve bu makalede size göstereceğim.

WPForms, gerçek zamanlı bir önizlemeye sahip ücretsiz bir sürükle ve bırak iletişim formu eklentisidir. Tecrübelerime göre, bu eklenti ile çalışmak kolay ve kullanışlı.

Bu serinin 1. bölümünde oluşturduğumuz bu üniversite kayıt formu örneğini hatırlıyor musunuz? Şimdi aynısını WPForms ile oluşturacağız.

Adım 1: WPForms Eklentisini Kurun ve Etkinleştirin

Bu eklentinin wordpress.org'da ücretsiz bir sürümü var, bu yüzden eklentiyi doğrudan Yönetici Panosuna yüklemeniz ve etkinleştirmeniz yeterli.

WPForms'dan İletişim Formu – WordPress için Sürükle ve Bırak Form Oluşturucu

Yazar(lar): WPForms

Mevcut Sürüm: 1.7.1.2

Son Güncelleme: 18 Kasım 2021

wpforms-lite.1.7.1.2.zip

%98 Derecelendirme 5.000.000+ Yükleme WP 4.9+ Gerektirir

2. Adım: Yeni Bir İletişim Formu Oluşturun ve Bir Şablon Seçin

Yönetici Panonuzdan WPForms > Yeni Ekle'ye gidin.

İşte çalışmanız gereken arayüz:

Sol kenar çubuğunda 5 bölüm görebilirsiniz:

1. Kurulum : İletişim formuna bir ad verin ve şablonunu seçin.
2. Alanlar : İletişim formu için alanlar ekleyin ve özelleştirin.
3. Ayarlar : Bildirimleri, onayları ve genel ayarları yapılandırın.
4. Pazarlama : Constant Contact, Campaign Monitor, Mailchimp gibi e-posta pazarlama araçlarıyla bağlantı kurun…
5. Ödemeler : PayPal Standard, Stripe ve Authorize.Net'ten ödeme ekleyin.

Not : Herhangi bir e-posta pazarlama kampanyası yürütmüyorum ve formum ödeme bilgisi gerektirmiyor. Bu nedenle, Pazarlama ve Ödemeler bölümlerine ihtiyacım yok.

Kurulum bölümünde, form adınızı girin ve istediğiniz şablonu seçin.

Dört varsayılan şablon vardır:

• Basit İletişim Formu
• Bülten Kayıt Formu
• için öneri
• Boş form

Boş Form dışında , diğer şablonların, iletişim formlarını daha hızlı oluşturmak için kullanabileceğiniz kendi önceden oluşturulmuş alanları vardır. Ek olarak, daha fazla şablon almak için WPForms eklentilerini (yalnızca ücretli sürümlerde mevcuttur) yükleyebilirsiniz.

Bu yazımda, en baştan adım adım iletişim formu oluşturmak için Boş Form şablonunu seçiyorum. Bu, her şeyi daha kolay ve derinlemesine anlamanıza yardımcı olacaktır.

3. Adım: İletişim Formu için Alanlar Ekleyin

Alan Ekle

2. adımda Boş Form şablonunu seçtikten sonra Alanlar bölümüne taşınacaksınız.

İletişim formunuz için alanlar eklemek için, Alan Ekle sekmesinden istediğiniz alanları sürükleyin ve iletişim formuna bırakın.

Ardından, bir alanı özelleştirmek için üzerine tıklayın ve ardından Alan Seçenekleri sekmesinde parametrelerini düzenleyin.

Ayrıca, bir alanı üzerine gelip istediğiniz düğmelere tıklayarak silebilir veya çoğaltabilirsiniz.

Bu yazıda aşağıdaki alanları eklemem gerekiyor:

Tüm bu alanları ekledikten sonra sonraki adımlarda her bir alanı özelleştirmeniz gerekiyor.

Her Alan için Genel Seçenekleri Özelleştirin

Genel olarak, her alanı özelleştirmek için iki tür seçenek vardır:

Temel seçenekler : Tüm alanlar bu seçenekleri içerir ve iletişim formunuzun açık ve anlaşılır olması için mutlaka bunlarla çalışmalısınız.

• Etiket : Görüntülemek istediğiniz alan adını girin.
• Açıklama : Bu, kullanıcılara ne yapmaları gerektiğini söyleyen alanın altındaki metin ekranıdır.
• Gerekli : İsteğe bağlı! Bu alanın doldurulmasını zorunlu kılmak için işaretleyiniz.

Sonraki adımlarda “temel bilgiler”den bahsettiğimde bu temel seçeneklerle uğraşmanız gerekiyor demektir.

Gelişmiş seçenekler : Her alan için bazı gelişmiş özellikler vardır. Onlarla ilgilenmeniz isteğe bağlıdır, ancak bakmanız gereken bazı önemli şeyler var:

• Yer tutucu metin : Kullanıcılar veri girmeden önce alanların içinde bir metin görüntüleyin. Bu metin, kullanıcıların neyi doldurmaları gerektiğini kolayca anlamalarına yardımcı olmak için bir kılavuz veya örnek olarak kullanılabilir. Örneğin, e-posta alanının Yer Tutucu metnini “E-postanızı girin” olarak ayarlayabilirsiniz.
• Varsayılan değer : Aynı cevaba sahip birçok kişi varsa, kullanıcıların zamandan ve emekten tasarruf etmesi için varsayılan bir cevap ayarlayabilirsiniz. Örneğin, New York'ta yaşayan kişiler için bir iletişim formu oluşturursunuz, böylece “Location” alanına varsayılan “New York” değerini girebilirsiniz.
• CSS Sınıfları : Alanı biçimlendirmek için bu kutuya CSS sınıflarını girin. Bir sonraki adımda, iletişim formuna stil vermek için bu bölüme kod ekleyeceğim.

Not :

• İletişim Formu 7'de, yer tutucu metin olarak varsayılan değeri kullanabilirsiniz. Ancak, ayrılmış Yer Tutucu Metni bölümünüz olduğundan WPForms'da daha uygundur. Ayrıca, WPForms, alanın altındaki metni görüntüleyen Açıklama bölümüne sahiptir. İletişim formumun daha iyi görünmesini sağladığı için bu yolu kullanıyorum.

• Onlar için WPForms talimatını okumak için seçenekler / alanların yanındaki soru işareti düğmesine tıklayabilirsiniz.

Ek olarak, her alana bağlı olarak bazı farklı seçenekler vardır. Ne olduklarını öğrenelim!

“Adınız” Alanını Özelleştirin

Basit Çizgi Metni alanını seçin ve sadece temel bilgileri doldurun:

Bu alanda Gelişmiş Seçenekler bölümünde 2 seçenek daha bulunmaktadır:

• Sınır uzunluğu : Alana girilebilecek maksimum karakter için bir sınır seçmek için işaretleyin.
• Giriş Maskesi : Alan için belirli formatlar gerektirmek üzere giriş maskelerini girin. Burada daha fazla ayrıntı okuyun.

“Telefon Numaranız” Alanını Özelleştirin

Bu alanın özel bir yanı yok. Sadece Sayılar alanını seçin ve temel bilgileri doldurun:

“E-postanız” Alanını Özelleştirin

E-posta alanını seçin ve alan için temel bilgileri girin:

Bu alanın bir temel seçeneği daha vardır: E-posta Onayını Etkinleştir . Kullanıcılardan e-posta adreslerini iki kez vermelerini istemek için kontrol edebilirsiniz. Bu, e-postalarının doğru olduğundan emin olur.

“Çalışılacak Yer” ve “Ana” Alanları Özelleştirin

İlk önce, Açılır alanı seçin. Seçenekler bölümünde, alan için seçenekleri girin. Seçim eklemek/kaldırmak için (+) (-)' ye tıklayabilirsiniz.

Ayrıca, aynı anda birçok seçenek eklemek için Toplu Ekle düğmesine de tıklayabilirsiniz. Seçim Ekle kutusunda, seçenekleri istediğiniz sırayla doldurun (her seçim bir satırdır) ve ardından Yeni Seçenekler Ekle öğesini tıklayın.

Ayrıca bu alanda dikkat etmeniz gereken 2 gelişmiş seçenek bulunmaktadır:

• Stil : Açılır menünüzü iki seçenekle şekillendirebilirsiniz: klasik ve modern. Modern tarz, anahtar kelimelere göre arama yapmanızı sağlar. Bu nedenle, çok seçenekli (10'dan fazla seçenek) menülerde iyi çalışır.
• Dinamik Seçenekler : Kullanıcıların gönderi türleri veya sınıflandırmalardan seçim yapmasına izin verin. Örneğin, eğer mesajına olarak Dinamik Mesaj Tipi Kaynağı, açılır menüden her seçim web sitenizde bir yazıdır seçin.

"Kaydol" Alanını Özelleştir

Onay Kutuları alanlarını seçin ve Açılır alanlar gibi seçenekleri girin.

Bu alanda dikkat etmeniz gereken 2 gelişmiş seçenek bulunmaktadır:

• Görsel seçimlerini kullan : Seçimlerinizi göstermek ve iletişim formunuzu daha çekici ve görsel hale getirmek için kullanabilirsiniz.
• Rastgele Seçimler : Bu, insanların yalnızca ilk seçenek olduğu için bir seçim yapmasını engelleyebilir.

4. Adım: İletişim Formunu Yapılandırın

Bir iletişim formu oluşturduktan sonra, onu yapılandırmamız gerekiyor. WPForms'un ücretsiz sürümünde aşağıdaki üç bölümü yapılandırabilirsiniz:

Genel Ayarları Yapılandır

WPForms eklentisi, bu bölümdeki her seçenek için özel talimatlara sahiptir. Soru işareti butonuna tıklayıp dikkatlice okumalı ve şu alanlara dikkat etmelisiniz:

• Gönder Butonu Metni : İletişim Formu 7'de Gönder alanını oluşturmanız gerekmektedir. Ancak WPForms'da gönder düğmesi yerleşiktir. Bu bölümdeki bu düğmenin metnini Kaydol, E-posta Gönder,… gibi istediğiniz şekilde değiştirebilirsiniz.
• İstenmeyen posta önleme korumasını etkinleştirin : Bazen istenmeyen e -posta gönderenler tonlarca "çöp kutusu" aracılığıyla sizi rahatsız edebilir. Bu durumda, istenmeyen posta önlemenin bu özelliğini açmalısınız.

Bildirimleri Yapılandırın

Bir kullanıcı iletişim formu gönderdiğinde bir e-posta bildirimi almak istiyorsanız, Ayarlar > Bildirimler'e gidin .

Bir kullanıcı iletişim formu gönderdiğinde aldığınız e-postayı daha kolay yönetmek için bu bölümdeki alanlara "akıllı etiketler" veya metin ekleyebilirsiniz.

Not : Akıllı etiketler, iletişim formu bildirimlerinize otomatik olarak bilgi ekleyebilir.

Bu benim ayarlarıma bir örnek:

Onayları Yapılandırın

Onay bölümünde, kullanıcıların iletişim formlarını gönderdikten sonra alacakları mesajları yapılandırabilirsiniz.

Tüm yapılandırmayı tamamladığınızda, Kaydet'i tıklamanız yeterlidir.

Adım 5: Formu Sayfalarda / Gönderilerde Görüntüleyin

Formlarınızı sayfalarda/yazılarda göstermenin 2 yolu vardır.

İlk yol, formunuzu bir sayfada görüntülemek için Göm'ü tıklamaktır:

Bundan sonra, iletişim formunu sitenizdeki yeni bir sayfaya veya mevcut bir sayfaya yerleştirin.

İkinci yol, iletişim formunun kısa kodunu sayfalara / gönderilere eklemektir. İletişim formunu hem yazılarda hem de sayfalarda görüntüleyebildiği için ikinci yolu seçmenizi tavsiye ederim. Bunu yapmak için Yönetici Panosu'nda WPForms > Tüm Formlar'a gidin, iletişim formunuzu bulun ve kısa kodunu kopyalayın.

Ardından, bu kısa kodu istediğiniz yazılara / sayfalara yapıştırın.

Ve işte sonuç:

Henüz iletişim formu örneğine benzemiyor, bu yüzden biraz şekillendirmem gerekiyor.

Adım 6: Formu Stillendirin

Yönetici Panosu'nda WPForms > Tüm Formlar'a gidin , iletişim formunuzu bulun ve ardından Düzenle'yi tıklayın.

Şimdi, her bir alanı tıklayın, Gelişmiş Seçenekler > CSS Sınıfları'na gidin ve aşağıdaki değerleri ekleyin:

• Adınız ve Kayıt Olun : ip-100
• Telefon Numaranız , E-posta adresiniz , Öğreneceğiniz Yer , Binbaşı : ip-50

Ardından, Özelleştirici > CSS Ekleme seçeneğine gidin, bu kodu ekleyin:

 .wpforms-field-container {
    ekran: esnek;
    esnek sarma: sarma;
		justify-content: boşluk-arasında
}

.ip-50 {
    genişlik: %48!önemli;
}

.ip-100{
		genişlik: %100!önemli;
}

div.wpforms-container-full .wpforms-form input.wpforms-field-medium,
div.wpforms-container-full .wpforms-form select.wpforms-field-medium {
	maksimum genişlik: %100;
}

.ip-100 ul {
	ekran: esnek;
	justify-content: boşluk-arasında;
}

div.wpforms-container-ful {
    kenar boşluğu-alt: 24 piksel;
    arka plan: #eeeeee;
    dolgu: 20 piksel;
}

Son olarak, Yayınla'yı tıklayın.

Ve işte nihai sonuç:

İletişim formu şimdi daha iyi görünüyor, değil mi? Örneğime tamamen benzer bir forma sahip olmak için son adımları yeni bitirdik.

Son sözler

Deneyimlerime göre, WPForms'daki gibi sürükle ve bırak arayüzünü kullanmak, İletişim Formu 7'yi kullanmaktan daha kolay ve hızlıdır. Ayrıca, önceden oluşturulmuş gönder düğmesi ve Yer Tutucu Metin ve Açıklama olarak 2 kullanışlı bölüm daha vardır. Canlı önizleme de çok uygundur. Formu oluştururken ve özelleştirirken hataları daha kolay tespit etmeme yardımcı oluyor.

Daha fazla iletişim formu eklentisini nasıl kullanacağınızı öğrenmek için bu serinin gelecek makalesini takip edin! WPForms hakkında herhangi bir sorunuz varsa veya herhangi bir iletişim formu eklentisi önerirseniz, yorum bölümünde bırakmaktan çekinmeyin.