Bir eklenti kullanarak iletişim formu nasıl eklenir – P2: WPForms kullanın
Önceki “İletişim Formu” makalesinde, bir iletişim formunun ne olduğunu ve bir iletişim formu eklentisinin nasıl kullanılacağını öğrendik. Söz verildiği gibi, WPForms ile başka bir öğretici yazıyorum ve bu makalede göstereceğim.
İçindekiler tablosunu gizle
1. Adım 1: WPForms eklentisini yükleyin ve etkinleştirin
2. Adım 2: Yeni bir iletişim formu oluşturun ve şablonu seçin
3. Adım 3: İletişim formu için alanı ekleyin
3.1. Alanı Ekle
3.2. Her alan için genel seçeneği ayarlayın
3.3. “Adınız” alanını ayarlayın
3.4. “Telefon Numaranız” alanını ayarlayın
3.5. “E -postanız” alanını ayarlayın
3.6. “Öğrenme Konumu” ve “Ana” alanlarını ayarlayın
3.7. “Listeyi” Alan olarak ayarlayın
4. Adım 4: İletişim formunu yapılandırın
4.1. Genel Ayarları Yapılandırma
4.2. Bildirimleri Yapılandırma
4.3. Yapılandırma Onayı
5. Adım 5: Sayfadaki / Gönderideki Formları Göster
6. Adım 6: Form Stili
7. Son Kelimeler
WPForms, gerçek zamanlı bir sürükleme ve freemium temas formunun bir eklentisidir. Deneyimlerime göre, bu eklenti ile çalışmak kolay ve rahat. Bu serinin 1. bölümünde oluşturduğumuz üniversite kayıt formunun örneğini hatırlıyor musunuz? Şimdi, WPForms ile aynı şeyi yapacağız.
Adım 1: WPForms Eklentisi eklentisini WordPress.org adresinden ücretsiz bir sürüme yükleyin ve etkinleştirin, böylece eklentiyi yalnızca yönetici kontrol paneline yüklemeniz ve etkinleştirmeniz gerekir.
WordPress için WPForms tarafından İletişim Formu – Drag & Drop Form Builder
Yazar: WPForms’ın mevcut sürümü: 1.7.1.2
Son Güncelleme: 18 Kasım 2021 WPForms-Lite.1.7.1.2.zip
% 98 Sıralama 5.000.000+ WP 4.9+ yükleme 2. Adım 2: Yeni bir iletişim formu oluşturun ve Yönetici Gösterge Tablonuzda Şablon’u seçin, WPForms> Yeni Ekle.
İşte kullanmanız gereken arayüz:
Yazar: WPForms’ın mevcut sürümü: 1.7.1.2
Son Güncelleme: 18 Kasım 2021 WPForms-Lite.1.7.1.2.zip
% 98 Sıralama 5.000.000+ WP 4.9+ yükleme 2. Adım 2: Yeni bir iletişim formu oluşturun ve Yönetici Gösterge Tablonuzda Şablon’u seçin, WPForms> Yeni Ekle.
İşte kullanmanız gereken arayüz:
Sol tarafta 5 parça görebilirsiniz:
Kurulum: İletişim formunu adlandırın ve şablonu seçin.
Alan: İletişim formları için alanı ekleyin ve ayarlayın.
Ayarlar: Bildirim, onay ve genel düzenlemeleri yapılandırma.
Pazarlama: Sürekli Kişiler, Kampanya Monitörleri, MailChimp, …
Ödeme: PayPal Standard, Stripe ve Gomesize.net’ten ödeme ekleyin.
Not: Bir e -posta pazarlama kampanyası çalıştırmıyorum ve ödeme bilgilerine ihtiyacım yok. Bu nedenle, bir pazarlama ve ödeme departmanına ihtiyacım yok.
Kurulum bölümüne formunuzun adını girin ve istediğiniz şablonu seçin.
Dört varsayılan şablon vardır:
Alan: İletişim formları için alanı ekleyin ve ayarlayın.
Ayarlar: Bildirim, onay ve genel düzenlemeleri yapılandırma.
Pazarlama: Sürekli Kişiler, Kampanya Monitörleri, MailChimp, …
Ödeme: PayPal Standard, Stripe ve Gomesize.net’ten ödeme ekleyin.
Not: Bir e -posta pazarlama kampanyası çalıştırmıyorum ve ödeme bilgilerine ihtiyacım yok. Bu nedenle, bir pazarlama ve ödeme departmanına ihtiyacım yok.
Kurulum bölümüne formunuzun adını girin ve istediğiniz şablonu seçin.
Dört varsayılan şablon vardır:
Basit İletişim Formu
Bülten Kayıt Formu
Öneriler
Boş form
Boş formlar dahil değil, diğer şablonların iletişim formlarını daha hızlı hale getirmek için kullanabileceğiniz kendi inşa öncesi alanları vardır. Ayrıca, daha fazla şablon almak için WPForms eklentisini (yalnızca ücretli sürümde mevcuttur) yükleyebilirsiniz. Bu makalede, başlangıçtan itibaren bir adım adım iletişim formu oluşturmak için boş bir form şablonu seçtim. Bu, her şeyi daha kolay ve derinlemesine anlamanıza yardımcı olacaktır.
Adım 3: Kontak formu için alanı ekle Adım 2’de boş bir form şablonu seçtikten sonra alanı ekleyin, Saha bölümüne aktarılırsınız.
Bülten Kayıt Formu
Öneriler
Boş form
Boş formlar dahil değil, diğer şablonların iletişim formlarını daha hızlı hale getirmek için kullanabileceğiniz kendi inşa öncesi alanları vardır. Ayrıca, daha fazla şablon almak için WPForms eklentisini (yalnızca ücretli sürümde mevcuttur) yükleyebilirsiniz. Bu makalede, başlangıçtan itibaren bir adım adım iletişim formu oluşturmak için boş bir form şablonu seçtim. Bu, her şeyi daha kolay ve derinlemesine anlamanıza yardımcı olacaktır.
Adım 3: Kontak formu için alanı ekle Adım 2’de boş bir form şablonu seçtikten sonra alanı ekleyin, Saha bölümüne aktarılırsınız.
İletişim formunuz için alan eklemek için, istenen alanı artı sekme alanından sürükleyin ve iletişim formuna bırakın. Ardından, alanı ayarlamak için sahaya tıklayın, ardından Alan Seçeneği sekmesindeki parametreyi düzenleyin.
Ayrıca, imleci alana yönlendirerek ve istenen düğmeyi tıklayarak alanı silebilir veya ikiye katlayabilirsiniz.
Bu makalede, aşağıdaki alanları eklemem gerekiyor:
Alanın Adı
Alan Türleri
Telefon numaranız
Numaralar td> tr>
Konum
targe
/tr>
BAYG BOX
Tüm bu alanları ekledikten sonra, bir sonraki adımda her alanı ayarlamanız gerekir. Genel olarak genel seçeneği ayarlayın Genel olarak, her alanı ayarlamak için iki tür seçenek vardır: Temel Seçenekler: Tüm alanlar bu seçeneği içerir ve iletişim formlarınızı net ve anlaşılabilir hale getirmek için onlarla gerçekten çalışmalısınız.
Etiket: Görüntülemek istediğiniz alanın adını girin.
Açıklama: Bu, kullanıcılara ne yapmaları gerektiğini anlatan alanın altında bir metin ekranıdır.
Gerekli: Bu isteğe bağlı! Bu sütunun doldurulması gerektiğini kontrol edin.
Bir sonraki adımda, "temel bilgilerden" bahsettiğimde, bu temel seçenekle uğraşmanız gerektiği anlamına gelir.
Gelişmiş Seçenekler: Her alan için birkaç gelişmiş özellik vardır. Bu, onlarla başa çıkmanız için isteğe bağlıdır, ancak dikkat etmeniz gereken bazı önemli şeyler vardır:
Yer tutucu metin: Kullanıcı verileri girmeden önce alandaki metni görüntüler. Bu metin, kullanıcıların ne doldurmaları gerektiğini kolayca anlamalarına yardımcı olmak için bir kılavuz veya örnek olarak kullanılabilir. Örneğin, e -posta alanından yer tutucu metnini "E -postanızı gir" olarak ayarlayabilirsiniz. Varsayılan değer: Aynı cevaba sahip birçok kişi varsa, zaman ve kullanıcı personelinden tasarruf etmek için varsayılan cevabı ayarlayabilirsiniz. Örneğin, New York'ta yaşayan insanlar için bir iletişim formu oluşturursunuz, böylece "konum" alanında varsayılan "New York" değerini girebilirsiniz.
CSS Sınıfı: Sahaya bir stil vermek için bu kutuya CSS sınıfını girin. Bir sonraki adımda, iletişim formunu düzenlemek için bu bölüme kodu gireceğim.
Notlar:
Kontak Form 7'de varsayılan değeri yer tutucu metni olarak kullanabilirsiniz. Ancak ayrı bir yer tutucu metin bölümünüz olduğu için WPForms'ta daha rahat. Buna ek olarak, WPForms, alanın altında metin görüntüleyen bir açıklama bölümü vardır. Bu yöntemi kullanıyorum çünkü iletişim formumu daha iyi gösteriyor.
WPForms talimatlarını okumak için seçeneğin / alanın yanındaki soru işareti düğmesini tıklayabilirsiniz.
Ayrıca, her alana bağlı olarak birkaç farklı seçenek vardır. Ne olduğunu öğrenelim! "Adınız" alanını ayarlayın Basit çizgi metni alanını seçin ve sadece temel bilgileri doldurun:
Bu alanda, Gelişmiş Seçenek bölümünde 2 seçenek daha var:
Açıklama: Bu, kullanıcılara ne yapmaları gerektiğini anlatan alanın altında bir metin ekranıdır.
Gerekli: Bu isteğe bağlı! Bu sütunun doldurulması gerektiğini kontrol edin.
Bir sonraki adımda, "temel bilgilerden" bahsettiğimde, bu temel seçenekle uğraşmanız gerektiği anlamına gelir.
Gelişmiş Seçenekler: Her alan için birkaç gelişmiş özellik vardır. Bu, onlarla başa çıkmanız için isteğe bağlıdır, ancak dikkat etmeniz gereken bazı önemli şeyler vardır:
Yer tutucu metin: Kullanıcı verileri girmeden önce alandaki metni görüntüler. Bu metin, kullanıcıların ne doldurmaları gerektiğini kolayca anlamalarına yardımcı olmak için bir kılavuz veya örnek olarak kullanılabilir. Örneğin, e -posta alanından yer tutucu metnini "E -postanızı gir" olarak ayarlayabilirsiniz. Varsayılan değer: Aynı cevaba sahip birçok kişi varsa, zaman ve kullanıcı personelinden tasarruf etmek için varsayılan cevabı ayarlayabilirsiniz. Örneğin, New York'ta yaşayan insanlar için bir iletişim formu oluşturursunuz, böylece "konum" alanında varsayılan "New York" değerini girebilirsiniz.
CSS Sınıfı: Sahaya bir stil vermek için bu kutuya CSS sınıfını girin. Bir sonraki adımda, iletişim formunu düzenlemek için bu bölüme kodu gireceğim.
Notlar:
Kontak Form 7'de varsayılan değeri yer tutucu metni olarak kullanabilirsiniz. Ancak ayrı bir yer tutucu metin bölümünüz olduğu için WPForms'ta daha rahat. Buna ek olarak, WPForms, alanın altında metin görüntüleyen bir açıklama bölümü vardır. Bu yöntemi kullanıyorum çünkü iletişim formumu daha iyi gösteriyor.
WPForms talimatlarını okumak için seçeneğin / alanın yanındaki soru işareti düğmesini tıklayabilirsiniz.
Ayrıca, her alana bağlı olarak birkaç farklı seçenek vardır. Ne olduğunu öğrenelim! "Adınız" alanını ayarlayın Basit çizgi metni alanını seçin ve sadece temel bilgileri doldurun:
Bu alanda, Gelişmiş Seçenek bölümünde 2 seçenek daha var:
Sınır Uzunluğu: Sahaya girilebilecek karakterin maksimum sınırını seçmek için kontrol edin.
Giriş Maskesi: Alan için özel bir format istemek için giriş maskesini girin. Daha fazla bilgi edinin. "Telefon numaranız" alanını ayarlayın Bu alan özel bir şey değildir. Sadece sayı alanını seçin ve temel bilgileri doldurun:
"E -postanız" alanını ayarlayın E -posta alanını seçin ve alan için temel bilgileri doldurun:
Bu alanın temel bir seçeneği daha vardır: e -posta onayını etkinleştirin. Kullanıcıdan e -posta adreslerini iki kez vermesini istemek için kontrol edebilirsiniz. Bu, e -postalarının doğru olmasını sağlar.
"Öğrenme Konumu" ve "Ana" alanlarını ayarlayın Önce açılır alanını seçin. Seçilen bölümde, alan için seçeneği girin. Seçenekleri eklemek/silmek için (+) (-) tıklayabilirsiniz.
Bu alanın temel bir seçeneği daha vardır: e -posta onayını etkinleştirin. Kullanıcıdan e -posta adreslerini iki kez vermesini istemek için kontrol edebilirsiniz. Bu, e -postalarının doğru olmasını sağlar.
"Öğrenme Konumu" ve "Ana" alanlarını ayarlayın Önce açılır alanını seçin. Seçilen bölümde, alan için seçeneği girin. Seçenekleri eklemek/silmek için (+) (-) tıklayabilirsiniz.
Ayrıca, aynı anda birçok seçenek eklemek için Massal Ekle düğmesine de tıklayabilirsiniz. Seçimler Ekle kutusunda, istenen sırayı doldurun (her satır şeklinde seçenek) ve ardından yeni seçenekler ekle tıklayın.
Buna ek olarak, bu alanda, dikkat etmeniz gereken 2 gelişmiş seçenek vardır:
Stil: İki seçenekle bir gerilme menüsü ayarlayabilirsiniz: klasik ve modern. Modern stil, anahtar kelimelere göre arama yapmanızı sağlar. Bu nedenle, bu birçok seçeneğe sahip menüde iyi çalışır (10'dan fazla seçenek).
Dinamik Seçenekler: Kullanıcıların yazı türü veya taksonomi seçeneğini seçmelerine izin verin. Örneğin, Dinamik Gönderi Türü Kaynağı Gönderi olarak seçerseniz, çekme menüsündeki her seçenek web sitenizdeki bir yayındır.
Dinamik Seçenekler: Kullanıcıların yazı türü veya taksonomi seçeneğini seçmelerine izin verin. Örneğin, Dinamik Gönderi Türü Kaynağı Gönderi olarak seçerseniz, çekme menüsündeki her seçenek web sitenizdeki bir yayındır.
"Kayıt" a Alanı Ayarla onay kutusu alanını seçin ve açılır düzlem gibi seçenekleri girin.
Bu alanda, dikkat etmeniz gereken 2 gelişmiş seçenek vardır:
Resim seçeneğini kullanın: Seçiminizi göstermek ve iletişim formunuzu daha çekici ve görselleştirilmiş hale getirmek için kullanabilirsiniz. Rastgele Seçimler: Bu, insanların ilk olduğu için seçimi seçmesini önleyebilir.
Adım 4: Kontak formunu yapılandırma Bir iletişim formu oluşturduktan sonra, bunu yapılandırmamız gerekir. WPForms'un ücretsiz sürümünde, aşağıdaki üç parçayı yapılandırabilirsiniz: WPForms eklentisinin genel ayarını yapılandırın bu bölümdeki her seçenek için özel talimatlar vardır. Soru işareti düğmesine tıklamanız, dikkatlice okumanız ve bu alanlara dikkat etmeniz gerekir:
Resim seçeneğini kullanın: Seçiminizi göstermek ve iletişim formunuzu daha çekici ve görselleştirilmiş hale getirmek için kullanabilirsiniz. Rastgele Seçimler: Bu, insanların ilk olduğu için seçimi seçmesini önleyebilir.
Adım 4: Kontak formunu yapılandırma Bir iletişim formu oluşturduktan sonra, bunu yapılandırmamız gerekir. WPForms'un ücretsiz sürümünde, aşağıdaki üç parçayı yapılandırabilirsiniz: WPForms eklentisinin genel ayarını yapılandırın bu bölümdeki her seçenek için özel talimatlar vardır. Soru işareti düğmesine tıklamanız, dikkatlice okumanız ve bu alanlara dikkat etmeniz gerekir:
Metin düğmesini gönderin: İletişim Formu 7'de bir gönderme alanı oluşturmalısınız. Ancak WPForms'ta Gönder düğmesi zaten içinde. Bu bölümdeki bu düğmenin metnini, bir e -posta gönderin, ...
Anti-spam korumasını etkinleştirin: Bazen spam gönderenler sizi birçok "çöp formu" ile rahatsız edebilir. Bu durumda, bu anti-spam özelliğini etkinleştirmelisiniz.
Bildirimleri Yapılandırma Kullanıcı her kişi formu gönderdiğinde, Ayarlar> Bildirimine Taşın. Kullanıcı kişi formunu daha kolay gönderdiğinde aldığınız e -postayı yönetmek için bu bölümdeki alana "akıllı etiketler" veya metin ekleyebilirsiniz. Not: Akıllı etiketler, kişi form bildiriminize otomatik olarak bilgi ekleyebilir. Bu benim ayarlarımın bir örneği:
Yapılandırma Onayı Onay bölümünde, kullanıcı tarafından alınan iletiyi iletişim formunu gönderdikten sonra yapılandırabilirsiniz.
Tüm yapılandırmayı tamamladığınızda, Kaydet'i tıklayın. Adım 5: Sayfanızı / gönderide görüntülenmek için sayfadaki / yayındaki formu göster, 2 yol vardır. İlk yol, formunuzu sayfada görüntülemek için gömme üzerine tıklamaktır:
Bundan sonra, iletişim formunu zaten sitenizdeki yeni sayfa veya sayfadaki sabitleyin.
İkinci yol, iletişim formunun bir kontak form kodu sayfaya/gönderiye eklemektir. İkinci yolu seçmenizi tavsiye ederim çünkü iletişim formunu yazı ve sayfada görüntüleyebilirsiniz. Bunu yapmak için, yönetici kontrol panelinde, tüm formları açın, iletişim formlarınızı bulun ve kısa kodu kopyalayın.
Bildirimleri Yapılandırma Kullanıcı her kişi formu gönderdiğinde, Ayarlar> Bildirimine Taşın. Kullanıcı kişi formunu daha kolay gönderdiğinde aldığınız e -postayı yönetmek için bu bölümdeki alana "akıllı etiketler" veya metin ekleyebilirsiniz. Not: Akıllı etiketler, kişi form bildiriminize otomatik olarak bilgi ekleyebilir. Bu benim ayarlarımın bir örneği:
Yapılandırma Onayı Onay bölümünde, kullanıcı tarafından alınan iletiyi iletişim formunu gönderdikten sonra yapılandırabilirsiniz.
Tüm yapılandırmayı tamamladığınızda, Kaydet'i tıklayın. Adım 5: Sayfanızı / gönderide görüntülenmek için sayfadaki / yayındaki formu göster, 2 yol vardır. İlk yol, formunuzu sayfada görüntülemek için gömme üzerine tıklamaktır:
Bundan sonra, iletişim formunu zaten sitenizdeki yeni sayfa veya sayfadaki sabitleyin.
İkinci yol, iletişim formunun bir kontak form kodu sayfaya/gönderiye eklemektir. İkinci yolu seçmenizi tavsiye ederim çünkü iletişim formunu yazı ve sayfada görüntüleyebilirsiniz. Bunu yapmak için, yönetici kontrol panelinde, tüm formları açın, iletişim formlarınızı bulun ve kısa kodu kopyalayın.
Ardından, bu kısa kodu istenen gönderi/sayfaya yapıştırın.
Ve sonuç bu:
Bir iletişim formu örneği gibi görünmüyor, bu yüzden biraz ayarlamalıyım. Adım 6: Yönetici Gösterge Tablosundaki Form Stili, WPForms> Tüm formları açın, iletişim formlarınızı bulun ve ardından Düzenle'yi tıklayın.
Şimdi, her bir alana tıklayın, Gelişmiş Seçenek> CSS sınıfını açın ve aşağıdaki değerleri ekleyin:
Adınız ve kaydolun: IP-100
Telefon numaranız, e-posta, çalışma konumunuz, Binbaşı: IP-50
Ardından, özelleştirici> Ekleme CSS'yi açın, bu kodu ekleyin: .WPFF-Field-Container {
Ekran: Esnek;
Esnek sargı: sarma;
Gerekçelendirme: Antara-Space
}
.ip-50 {
Genişlik:%48! Önemli;
}
.ip-100 {
Genişlik:%100! Önemli;
}
Div.wpforms-Container-Full .Wpforms-form giriş.Wpforms-Field-Medium,
div.wpff-container-full .wpfff-form Select.wpforms-field-medium {
Maksimum genişlik:%100;
}
.ip-100 ul {
Ekran: Esnek;
Justify-Content: Uzay arası;
}
Div.wpforms-Container-Full {
Marj-Bawah: 24 piksel;
Arka plan: #eeeeee; Rulman: 20 piksel;
} Son olarak, Publish'i tıklayın.Ve bu nihai sonuç:
İletişim formu şimdi daha iyi görünüyor, değil mi?Örneğime gerçekten benzeyen bir şekle sahip olmak için son adımı yeni bitirdik.Deneyimlerimin son kelimeleri, WPForms'ta olduğu gibi sürükleme ve gevşek arayüzü kullanmak, Kişiye Form 7'yi kullanmaktan daha kolay ve daha hızlıdır. Ayrıca, daha önce oluşturulmuş bir nakliye düğmesi ve metin olarak daha kullanışlı 2 parça vardır. Yer tutucu açıklamalar.Doğrudan önizleme de çok rahat.Bu, formu yaparken ve ayarlarken hataları daha kolay tespit etmeme yardımcı olur.Daha fazla iletişim formu eklentilerinin nasıl kullanılacağını öğrenmek için, bu diziden gelecek makalelerimizi izleyin!WPForms hakkında sorularınız varsa veya iletişim formu eklentisini önerin, yorumlar bölümünde bırakmaktan çekinmeyin.
}
.ip-50 {
Genişlik:%48! Önemli;
}
.ip-100 {
Genişlik:%100! Önemli;
}
Div.wpforms-Container-Full .Wpforms-form giriş.Wpforms-Field-Medium,
div.wpff-container-full .wpfff-form Select.wpforms-field-medium {
Maksimum genişlik:%100;
}
.ip-100 ul {
Ekran: Esnek;
Justify-Content: Uzay arası;
}
Div.wpforms-Container-Full {
Marj-Bawah: 24 piksel;
Arka plan: #eeeeee; Rulman: 20 piksel;
} Son olarak, Publish'i tıklayın.Ve bu nihai sonuç:
İletişim formu şimdi daha iyi görünüyor, değil mi?Örneğime gerçekten benzeyen bir şekle sahip olmak için son adımı yeni bitirdik.Deneyimlerimin son kelimeleri, WPForms'ta olduğu gibi sürükleme ve gevşek arayüzü kullanmak, Kişiye Form 7'yi kullanmaktan daha kolay ve daha hızlıdır. Ayrıca, daha önce oluşturulmuş bir nakliye düğmesi ve metin olarak daha kullanışlı 2 parça vardır. Yer tutucu açıklamalar.Doğrudan önizleme de çok rahat.Bu, formu yaparken ve ayarlarken hataları daha kolay tespit etmeme yardımcı olur.Daha fazla iletişim formu eklentilerinin nasıl kullanılacağını öğrenmek için, bu diziden gelecek makalelerimizi izleyin!WPForms hakkında sorularınız varsa veya iletişim formu eklentisini önerin, yorumlar bölümünde bırakmaktan çekinmeyin.