Bir Eklenti Kullanarak Kişi Formu Nasıl Eklenir – P1: İletişim Formu 7’yi kullanın
Profesyonel bir web sitesine sahip olmak istiyorsanız, iletişim formu en önemli unsurlardan biridir. Özel bir eklenti kullanıyorsanız iletişim formunu oluşturmak ve ayarlamak bile zor değildir. Eklentilerle kolay ve hızlı bir şekilde bir iletişim formu oluşturmanıza yardımcı olmak için, en popüler kişi form eklentisinin nasıl kullanılacağına dair talimatları derledik ve yazdık.
İçindekiler tablosunu gizle
1. Temas formu ve faydaları nedir?
1.1. İletişim formu nedir?
1.2. İletişim formunun faydaları
2. Bir iletişim formu nasıl oluşturulur
3. İletişim formunu kullanarak bir form oluşturun 7
3.1. Arayüz
3.2. İletişim formları için bir alan oluşturun
3.3. Alana bir etiket ekleyin
3.4. İletişim Formu Ayarları
3.5. Web sitesinde iletişim formlarını göster
4. Son Kelimeler
“İletişim Formu” serisinin ilk bölümünde, şunları öğrenelim:
İletişim formu nedir?
İletişim formunun faydaları
Bir form oluşturmak için Kontak Formu eklentisini 7 nasıl kullanırım?
Temas formu ve faydaları nedir? İletişim formu nedir? İletişim formu pazarlamacılar için tanıdık bir terimdir. İletişim formunu kullanarak kullanıcı bir e -posta gönderebilir ve e -posta adresinizi bilmeden doğrudan web sitesinde sizinle iletişime geçebilir. İletişim formları genellikle kullanıcıların e -posta, telefon numarası, ad, e -posta içeriği gibi gerekli bilgileri doldurmaları için birçok alana sahiptir. İşte örnekler:
Bu serinin tüm makalelerinde, bir üniversite kayıt formunun nasıl oluşturulacağını göstereceğim:
“Eklenti kullanarak bir iletişim formu oluştur” dan ilk makalede Kişisel Form 7 kullanarak bir form oluşturun, bugün mevcut olan en popüler ücretsiz iletişim formlarından biri olan Kişi Formu 7’yi kullanıyorum. Her şeyden önce, bu eklentiyi wordpress.org adresindeki eklenti deposundan indirin ve yükleyin veya yüklemek için yeni eklenti> Ekle.
% 82 Sıralama 5.000.000+ WP 5.7+ yükleme gerektirir
Bu eklenti ile yukarıda bir üniversite kayıt formu oluşturmak için özel talimatlar aşağıdadır. Arayüz, yeni bir iletişim formu oluşturmak için gösterge tablosunu> Kişiye> Yeni Ekle’yi açar. İşte kullanacağınız arayüz:
(1): İletişim formunun adını girin (2): Bir iletişim formu oluşturmak ve hazırlamak için sekme aşağıdakiler dahil olmak üzere aşağıdakiler:
Form sekmesi: İletişim formları için bir alan oluşturun
Mesaj sekmesi: Verileri girmede bir hata olduğunda kullanıcı tarafından alınan bir bildirim ekleyin, form gönderilemez, form başarıyla gönderilir, …
Ek Ayarlar sekmesi: İletişim formuna başka öğeler ekleyin.
Bahsettiğim gibi iletişim formu için bir alan oluşturun, iletişim formu kullanıcının bilgi girmesine veya onunla etkileşime girmesine izin veren alanı içerir. Bu alanları oluşturmak için kullanılan form sekmesi aşağıdadır:
(1) Adlar, e -postalar, numaralar, gönderme düğmeleri gibi formlara eklenecek alanlardan oluşur … Herhangi bir alan eklemek için uygun alan adını tıklayın. (2) form yapısını HTML formatında görüntüleyen bir alandır. Yeni bir iletişim formu oluştururken, e -posta, ad, konu ve gönder düğmesi gibi basit alanlara sahip temel formlar için varsayılan bir yapıya sahip olacaksınız. Bu formu doğrudan kullanabilir veya forma dayalı yeni bir form oluşturabilirsiniz. Alan için Genel Talimatlar İstenen alanı seçtikten sonra, alanda gerekli bilgileri girdiğiniz Sembulan görünecektir. Her alan farklı bilgiler gerektirir, ancak genel olarak, hepsinin aşağıdaki bölüme sahip olması: Ad: Öznitelik Adı Değer Varsayılan: Varsayılan Değer Özellik Kimliği: Kimlik Sınıfı Özellikler: Sınıf Alan Not: Kimlik özellikleri ve sınıf özellikleri isteğe bağlıdır ve siz Özellikle orada sizin için bilgi girebilir. Aşağıdaki iletişim formlarını daha kolay ayarlamak için adımlar istiyorsanız, bu 2 bölümü doldurmalısınız. Bu bilgileri doldurduktan sonra, bu kutunun altında oluşturduğunuz alan etiketlerini göreceksiniz. Bu alanı HTML formuna eklemek için etiketi ekleyin.
Genellikle, temas formu 7 ile oluşturulan temas formundaki her alanın etiketi aşağıdaki yapıya sahip olacaktır:
Alan * seçtiğiniz alan türüdür. Bu en önemli kısımdır ve bir alana ait olmalıdır.
İletişim formu 7’deki alan etiketi yapısı hakkında daha fazla bilgi için bu belgelere bakın. HTML’nin iletişim formundan anlamını ve yapısını anlamak, kodu kullanarak yeni alanları düzenlemenizi, oluşturmanızı ve eklemenizi kolaylaştıracaktır. Özellikle kodlayıcılarla, yukarıdaki sözdizimine göre formu yapmak için HTML kodu yazabilirler. Bununla birlikte, kodlayıcı olmayanlarla zor olabilir, bu yüzden aşağıdaki adımları takip etmenizi öneririm. Bu serideki iletişim formuyla aşağıdaki alanı seçmeliyim:
> Numara
E -postanız
e -mail
Açılır menü
Big
Drop Recersal Menü
> onay kutusu
Her öğeyi etiket öğeleriyle sarın Telefon numaranız E -postanız (zorunlu) Binbaşı Öğrenmenin yeri Kayıt [Gönder "Gönder"] gönder
Gönder Yukarıda söylediğim genel bilgiler. Bu nedenle, her bir akım alanın sadece belirli kısımlarına rehberlik ediyorum. Her alan için ayrıntılı talimatlar aşağıdadır. Adını girmek için bir alan oluşturun Metnin metnini seçin ve temel alan bilgilerini kutuya girin:
Alan türünün bazı kısımlarında, bu alanın doldurulması için talep etmeyi seçebilirsiniz (bu isteğe bağlıdır).
Not: Varsayılan değer bölümünde, kullanıcı verileri girmeden önce bu içeriği alanda görüntülemek için bu metni düzlem için bir yer olarak kullanın. Sütunu doldurmaları gereken kullanıcılara açıklamak için bu modu kullanmalısınız. Akismet kısmı Akismet-Anti spam eklentileri ile ilişkilidir. Bu eklentiye sahip değilseniz, bu bölümü umursamayın. Telefon numarasını girmek için bir alan oluşturun Alan numarasını seçin ve alanın temel bilgilerini doldurun. Alanın bölümünde bu alanın türünü seçin. İki tür alan vardır: spinbox ve kaydırıcı. Kaydırıcı, numarayı aşağıdaki gibi seçmek için ölçeği görüntüleyecektir:
Bu stil, belirli ölçeğe göre sayıları yazdırmak veya seçmek için uygundur. Bu arada, spinbox herhangi bir numarayı, telefon numaraları, kart numaraları, KTP numaraları, ... bu nedenle bu örnekte Spinbox'ı seçiyorum. Aralık bölümü, sayı için limiti seçmenizi sağlar. Bu örnekte, bu bölüme ihtiyacım yok, bu yüzden hiçbir şey doldurmam. Bu alanla ana dalları ve öğrenme konumlarını seçmek için bir alan oluşturun, ısıtılmış menüyü seçin.
Şimdi seçilen bölümdeki ana dallar ve yerler seçimini doldurun, her seçimin bir çizgi olduğunu unutmayın. Kullanıcıların aynı anda birkaç seçenek seçmesine izin vermek istiyorsanız, birkaç seçeneğe izin verin. Kayıt amacını seçmek için bir alan oluşturun onay kutusu alanını seçin.
Önce etiketi yerleştirin, son onay kutusu
[Etiket Alanı] Ardından, Alan Etiketi bölümündeki Alan etiketini yazın. Ardından yukarıdaki tüm bilgileri doldurun, Kaydet'i tıklayın. Bir alan oluşturduktan sonra, iletişim formum aşağıdaki kod yapısına sahiptir, alanı ön uçta istenen konumda görüntüleyecek şekilde ayarladığımı unutmayın: Adınız (zorunlu)
[Metin* adı "" Adınızı girin "]
Telefon numaranız
[Numara telefon yer tutucu "Telefon numaranızı girin"] E -postanız (zorunlu)
[Seç* Bilgisayar Bilimi Bölümü "" Dilbilim "" Tarım "" Mühendislik "" E -Ticaret "]
Öğrenmenin yeri
[Öğrenme Konumu "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"] </Bel'ı seçin
[Onay kutusu* LABEL_FIRST Kayıt "Öğrenin" "" "Danışmanlık" ı takip edin]
[Gönder "Gönder"] Bu sefer iletişim formlarınız henüz web sitesinde görünmedi. Ön uçta görüntülemek için birkaç adım daha atmanız gerekir. E -posta sekmesi Postası'nı ayarlayan kişi formu, iletişim formu kullanıcı tarafından gönderildiğinde alacağınız e -posta içeriğini ayarlamanıza olanak tanır. Bu bölümü hazırlamak için, yeni oluşturduğunuz kişi formuna alandan bir e -posta etiketi eklemeniz gerekir. İşte örnekler:
Açıklama:
TO: İletişim formunu kontrol etmekten sorumlu kişiyi girin.
Konudan: Bu iletişim formunu kimin gönderdiğini belirlemek için buradaki adı belirlemelisiniz.
Ajans Mesajı: İletişim formundan bir e -posta aldığınızda, kullanıcıdan istediğiniz tüm bilgileri görüntüleyeceğinden emin olmak için mektup etiketini buraya ekleyin.
Diğer Ayarlar sekmesi mesajı
Sekme açıklamasında görebileceğiniz gibi durumda kullanılan mesajı girin. Örneğin, kullanıcı başarıyla bir form gönderdikten veya gönderemedikten sonra, onlara bunu anlatmak için bir mesaj eklemeniz gerekir. Veya kullanıcılar doldurulması gereken alanları unuttuğunda, kullanıcıların alanı doldurmak için geri dönebilmeleri için bir mesaj eklemeniz gerekir. Bu küçük bir ayrıntı olmasına rağmen, kullanıcı deneyimini geliştirmek için dikkat etmelisiniz. Ek ayar sekmesi
Bu sekme, aşağıdakileri yüklemek için kod görüntülerini eklemenize yardımcı olur: Müşteri Özel Modu
Mektubu özledim
Doğrulama olarak kabul
Flamingo ayarları
Mesaj deposuna basıldığında
Müşteri Özel Modu: Bu mod yalnızca web sitenizden giren kullanıcıların iletişim formları göndermesine olanak tanır. Bu, spam mesajlarını ve yalnızca sizinle gerçekten iletişim kurmak isteyenler için kaldırır.
Doğrulama Olarak Kabul: Kullanıcı bu kutuyu kontrol etmediğinde ancak diğer alanlara geçtiğinde resepsiyon onay kutusu için bir bildirim görüntülemek için bir özellik ekleyin. Çünkü varsayılan olarak, kullanıcı kabul kutusunu kontrol etmezse, hata mesajı yalnızca formu gönderdikten sonra görüntülenir. Bu resepsiyon onay kutusu genellikle "Web Sitesinin gereksinimlerine katılıyorum" gibi alanlar oluşturmak için kullanılır, ancak başka türden içerik türleri oluşturursanız, doğrulama olarak kabul eklemeniz gerekebilir.
Ek Ayarlar sekmesindeki diğer özellikler hakkında daha fazla bilgi edinmek için buradan daha fazlasını okuyabilirsiniz. Web Sitesindeki İletişim Formlarını Göster Son adım, web sitesinde yeni 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 sayfaya veya istenen yayında yapıştırın.
Aşağıdakiler nihai sonucum:
Ancak, iletişim formum iyi görünmüyor, bu yüzden biraz düzenlemem gerekiyor. Bu makalenin başında verdiğim şablon gibi iletişim formlarını yeniden düzenlemek istiyorsanız, stili kolaylaştırmak için HTML formunu aşağıdaki gibi düzenlemeniz gerekir: < İsim (zorunlu)
[Metin* Adınız için yer "Adınızı girin"]
[Yer tutucu telefon numarası "Telefon numaranızı gir"]
[e -posta* e -postanızı yer tutucu "e -postanızı girin"]
[Seç* Bilgisayar Bilimi Bölümü "" Dilbilim "" Tarım "" Mühendislik "" E -Ticaret "]
[Öğrenme Konumu "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphia"]
[Onay kutusu* use_label_element "Öğrenme" "" "" danışın "turunu takip edin]
sonra özelleştirici temanıza gidin> Ek CSS ve aşağıdaki kodu yapıştırın: #WPCF7-F330-P104-O1 .WPCF7-Form {Display: Flex; Flex-Wrap: sar; Marj: 0 -15px; Dolgu: 20px; Arka plan: #eeeeee; }. Form_field {genişlik:%50; Dolgu: 0 15px; Marj-Alt: 20px; } .Form__field.form_full-width {genişlik:%100; } .Form_field giriş: odak :: yer tutucu {opaklık: 0; } .Form_field girişi, .form__field seç {genişlik:%100; Renk: #77818E; yazı tipi tarzı: italik; } .Form_field giriş :: yer tutucu, .form_field Select :: yer tutucu {color: #77818E; } .Form_field giriş [type = "gönder"] {color: #4299e1; Genişlik: Otomatik; Arka plan: #fff; Sınır: 1px katı #4299E1; } .Form_field span.wpcf7-list-öğe {marj: 10px 20px 0 0; Ekran bloğu; }. Form_field span.wpcf7 liste-öğe girişi {genişlik: otomatik; } .wpcf7-checkbox {ekran: flex; Justify-Content: Uzay arası; } Son olarak, kaydetmek için Publish'i tıklayın. Son kelimeler İletişim Formunu ilk kullandığınızda, kod üreticisi değilseniz HTML ile garip hissedebilirsiniz. Ancak, bu öğreticiyi okuduktan sonra, her şeyin daha kolay olduğunu düşünüyorum değil mi? Diğer birkaç araçla bir iletişim formu yapmaya çalışmak istiyorsanız, bu diziden gelen makalemi dört gözle bekleyin. Hangi eklentiyi önermek istiyorsunuz? Bu makalenin altında bir yorum bırakın!