İletişim formu eklentisi nasıl kurulur 7. Formun tüm alanları (etiketler)

İyi günler sevgili blog okuyucuları. WordPress'te geri bildirim formları konusuna devam ediyoruz. Ve onlardan bahsettiğimiz için bugün WP Contact Form 7 eklentisinden bahsetmeyi öneriyorum.Sonra, size adım adım eklenti kurulumunu anlatacağım ve ayrıca bu eklenti için eklentileri kısaca anlatacağım.

Sayfa gezintisi:

WordPress İletişim Formu 7'nin Açıklaması

2) WordPress yöneticisinde Contact Form 7 eklentisini etkinleştirin.

3) Resimde gösterildiği gibi yeni oluşturulan sekmeye gidin:

4) "Yeni Ekle" sekmesine tıklayın ve varsayılan form dilini belirtin veya istediğinizi seçin

5) İletişim formunun adını belirtin ve kaydet'e tıklayın.

6) Artık formu görüntülemek için bir gönderiye veya kenar çubuğuna kopyalanıp yapıştırılabilen bir kısa kodumuz var - contact-form-7 id="1252" title="(!LANG:Form numarası 1" (надо взять в !} köşeli parantez resimdeki gibi).

7) Formumuz şöyle görünür:

Tabii ki, çok güzel değil, ama kimse kendi stillerinizi yaratmaya veya kendi formunuzu yaratmaya ve oraya eklemeler eklemeye zahmet etmiyor.

Şablonda rastgele bir yerde İletişim Formu 7 nasıl görüntülenir?

6. paragrafta adım adım kurulum Size CF7 kod kısa kodunu nasıl alabileceğinizi gösterdim ve ayrıca bu kodun bir widget'ta veya bir gönderide, sayfada görüntülenebileceğini açıkladım. Ayrıca İletişim formu 7'yi şablonun herhangi bir yerinde görüntüleyebileceğinizi söylemek istiyorum. Bunu yapmak için aşağıdaki basit kodu girin:

Hepsi bu, her şeyi doğru yaptıysanız, WordPress şablonunda herhangi bir yerde İletişim Formu 7'nin çıktısını alacaksınız.

İletişim Formu 7 Giriş Alanını Özelleştirme

Onun sayesinde ayrıca aşağıdaki gibi kutulara sahip olacaksınız:

İletişim formu 7 için yanıt yanıtını yapılandırma

CF7 4.4 ve üstü eklentinin yeni sürümünde geliştirici, gelen alanına girmenizi önerir (burada aşağıdaki dış görünümdedir)

alan adınızla eşleşen doğru adres. Deriden bakıldığında bu öneri bir sorun yaratır:

Postadan kullanıcıya nasıl yanıt verilir?

Sadece cevapla'ya tıklarsanız, o zaman kendi mailimize cevap vereceğiz, aslında kendimiz cevaplayacağız. Bu çok elverişsizdir, çünkü kullanıcının adresini postaya manuel olarak kopyalamamız ve ancak ondan sonra yanıt vermemiz gerekir.

Bu sorunun çözümü her zaman olduğu gibi basittir. sahada ihtiyacın var Ek başlıklar kod ekle:

Yanıtla:

Elbette, e-posta adresinizin posta kısa kodunuzla değiştirilmesi gerekiyor. Aşağıdaki cilde bakın:


Şimdi, bir WordPress geri bildirim mektubu aldığınızda, yanıtlamak için postayı tıklayabilirsiniz ve cevabınız doğru e-postaya gönderilecektir.

Bu adımlardan sonra bir sorunla karşılaşırsanız linke tıklayarak yazıyı okumalısınız. Contact Form 7 eklentisinde ana sorunlar ve sorunların nedenleri açıklanmıştır.

Bu kadar. Eklentinin ve düzenlerinin nasıl yapılandırıldığını anladığınızı umuyorum.

(Son güncelleme: 19.05.2019)

Selamlar sevgili okuyucu! Bugün size popüler Contact Form 7 eklentisini (5 milyondan fazla kurulum) kullanarak WordPress'te bir web sitesi / blog yazarı ile nasıl iletişim formu oluşturacağınızı göstereceğim. Gönderi dahil : doğru ayarİletişim Formu 7, spam koruması nasıl değiştirilir ve yapılandırılır görünüm formlar. Ayrıca ana nedenlere de dikkat çekti - iletişim formunun neden çalışmadığı ve mektup göndermediği .

İletişim Formu okuyucularınızla iletişim halinde kalmanın önemli bir yoludur ve bunun tersi de geçerlidir. Kişisel bir mektup yazın, yazara bir teklifte bulunun (ki bunu reddedemez), bir soru sorun, biraz ve çok daha fazlasını gönderin. Tüm bunlar devralacak ve değerli bilgileri dışarıdakilere ifşa etmeyecek, iletişim formumuz WordPress İletişim Formu 7. İşte bu kadar. Ben böyle yazdım, kendim beğendim.

Ah, mektup geldi! İletişim formu 7 aferin

Seni sıkmayacağım sevgili okuyucu, karalamalarla - hadi işe başlayalım. WordPress modülünün kurulumu ve doğru konfigürasyonu - iletişim formu 7.

WordPress İletişim Formu 7 Eklentisi

WP İletişim Formu 7 Eklentisi

İletişim Formu 7, formların ve postaların içeriğini oldukça basit biçimlendirme ile esnek bir şekilde özelleştirebileceğiniz çok sayıda iletişim formunu yönetebilir. Formlar, Ajax gönderimi, CAPTCHA, Akismet'in spam filtresi ve daha fazlası için yerleşik desteğe sahiptir.

Tüm manipülasyonlar WordPress yönetici panelinde gerçekleştirilir. Eklentiyi yüklemek için "Eklentiler" bölümünde "Yeni Ekle"ye tıklayın. "Ara" penceresine İletişim Formu 7'ye giriyoruz. Doğal olarak ilk o görüntülenecektir. "Yükle" düğmesine tıklayın:

eklenti nasıl kurulur

Varsayılan olarak 1 numaralı iletişim formu

Resimden, varsayılan olarak iletişim formunun standart bir sürümünün ve yeni bir sayfaya, gönderiye veya postaya eklemek için hazır bir kısa kod olduğunu görebilirsiniz. kenar çubuğu(metin widget'ı aracılığıyla). Sitenin ayrı bir sayfasına yüklenen iletişim formu 7 varsayılan görünümü:

Görünüm: Standart WordPress İletişim Formu

Yalnızca görüntülemek, kontrol etmek veya değiştirmek istiyorsanız, yani ona ek alanlar ekleyin, ardından "Düzenle" öğesini tıklayın. Yukarıdaki ekran.

İletişim Formunu Düzenle sayfası açılır. Eklenti Rusçadır ve bu nedenle neyin ne olduğunu anlamanız çok kolay olacaktır. Form Şablonu sekmesi. Form şablonunu ihtiyaçlarınıza göre değiştirebilirsiniz.

Örneğin, bir form şablonuna dosya yükleme alanı eklemek için şunları yapmanız gerekir: Etiketin ekleneceği yeri fare ile işaretleyin (en iyisi mesajdan sonra) ve ilgili "dosya" sekmesini tıklayın. Bu özellikle, kullanıcıların formunuz aracılığıyla dosyalarını yüklemelerine izin verebilirsiniz ve ardından size dosya ekleriyle birlikte bir e-posta gönderilecektir:

İletişim formunu düzenleyin. Dosya sekmesi

Bir pencere açılacaktır - Form Etiketi Oluşturucu: dosya:

Postaya yüklenen bir dosyayı eklemek için etiketi () eklemeniz gerekir.

İletişim Formu 7, dosya türü ve dosya boyutu için varsayılan sınırlar uygular. Seçeneklerinizi ayarlamadığınızda, varsayılan dosya uzantıları şunlardır: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav , ve wmv. Ve izin verilen dosya boyutu 1 MB'dir (1048576 bayt). "Etiket Ekle" düğmesini tıklayın:

Form şablonuna eklenen dosya etiketi

Fare imleci ile işaretlendiğinde ek bir etiket görünecektir. Yanlış yere yapıştırdıysanız, kopyalayın ve doğru yere yerleştirin. Aynı şekilde gerekli etiketleri de formunuza ekleyin. Ek etiketler ekledikten sonra mavi "Kaydet" düğmesini tıkladığınızdan emin olun. Ve bir mektuba dosya ekleme düğmesi, mesaj alanından sonra şöyle görünecektir:

İletişim formunda dosya seç düğmesi

Her şeyi doğru yaparsanız, ek alanlarla ilgili sorun yaşamayacaksınız.

Ayrıca Posta, Form Gönderme Bildirimleri ve Gelişmiş Ayarlar sekmelerini de kontrol edin. Bana göre hiçbir şeyi değiştirmeye gerek yok. Yalnızca Ek ayarlarda parametreyi belirtebilirsiniz - yalnızca aboneler için - aboneler_yalnızca: true . Ayrıntılı bilgi için, ek parametreler için ayarlar sayfasına bir bağlantı olacaktır.

Ve şimdi arkadaşlar, hazırlanan iletişim formunu bir web kaynağının ayrı, yeni bir sayfasına veya kenar çubuğuna yerleştirmemiz gerekiyor. Bu kolayca yapılır.

İletişim formunu sitenin / blogun ayrı bir sayfasına yerleştiriyoruz

Tüm ayarları yaptıktan ve formu kaydettikten sonra, İletişim Formları veya İletişim Formunu Düzenle sayfasındaki kısa kodu kopyalayın. Bundan sonra, yeni bir sayfa oluşturun - Sayfalar - Yeni Ekle bölümü. Sayfanın adını girin, örneğin "Kişiler". Gönderi düzenleyiciyi "Metin" moduna geçirin ve kısa kodu gönderi alanına yapıştırın:

İletişim formu ile yeni sayfa

eğer varsa yeni sayfa otomatik olarak menüye eklenir, ardından "Sipariş" 1, 2 veya 3'ü ayarlarız (menüde hangisi varsa, İletişim sayfası görüntülenir). "Yayınla" düğmesini tıklayın. Her şey. Hazır. Menüye manuel olarak da bir sayfa ekleyebilirsiniz. Artık blogun / sitenin yazarıyla iletişim kurmak için bir formunuz var.

Aynı şekilde kenar çubuğuna, altbilgiye veya makalenin metnine bir iletişim formu eklenir. Kısa kodu kopyalayın ve gönderilerinize veya metin widget içeriğinize yapıştırın. Formu istediğiniz zaman düzenleyebileceğinizi veya farklı etiketler/alanlarla yeni bir tane oluşturabileceğinizi bilin.

İletişim Formu 7 aracılığıyla spam mı alıyorsunuz?

Koruma var. Spam gönderenler her şeyi etkiler, iletişim formlarınız istisna değildir. İstenmeyen postalara uğramadan önce, İletişim Formu 7'nin güçlü istenmeyen posta önleme özellikleriyle iletişim formlarınızı koruyun.

Contact Form 7, Akismet ile spam filtrelemeyi destekler. Akıllı reCAPTCHA, can sıkıcı spam botlarını engeller. Yorumların kara listesini kullanarak, belirli içerikleri içeren mesajları da engelleyebilirsiniz. anahtar kelimeler veya belirli IP adreslerinden gönderilir.

"Entegrasyon" u tıklayın. Google reCAPTCHA sizi spam ve diğer otomatik kötüye kullanımlardan korur. reCAPTCHA Contact Form 7 entegrasyon modülü ile spam botlar tarafından form gönderimini engelleyebilirsiniz.

Google reCAPTCHA v3 entegrasyonu: spam koruması

Diğer recaptcha servisleriyle eklenti entegrasyonu

Kurulum Entegrasyonunu Ezberleyin ve ardından ReCaptcha API anahtarlarını almak için bağlantıyı izleyin:

reCAPTCHA (şimdiki değeri) Google hizmeti

reCAPTCHA'yı kullanmaya başlamak için önce WordPress sitenizi kaydetmeniz gerekir. reCAPTCHA bir Google hizmetidir, bu nedenle onu kullanmak için ihtiyacınız olan Google hesabı. kullanarak Google'da oturum açın hesap ve bağlantıyı takip et https://www.google.com/recaptcha/admin. Bunun gibi basit bir kayıt formu göreceksiniz:

Bir WordPress sitesine kaydolun. Goodle reCAPTCHA

Bir ad belirtin. reCAPTCHA v3'ü seçin (reCAPTCHA v3, CAPTCHA widget'ını gerektirmez ("Ben robot değilim" onay kutusu reCAPTCHA v2'de kullanılır) ve Etki Alanları alanına sitenin etki alanını girin. Bir siteyi kaydettikten sonra, bir site anahtarı ve bir gizli anahtar alacaksınız. Bunları girin (yukarıdaki ekran görüntüsü) ve ayarları kaydedin. Bu kadar. İletişim formunuz artık mesajın bir insandan mı yoksa bir spam botundan mı gönderildiğini kontrol etmek için reCAPTCHA puanını kullanıyor.

Contact Form 7'yi yüklemeye karar verirseniz, buna ek olarak Contact Form 7 Style eklentisini yüklemenizi öneririm. Formunuzun görünümünü düzenlemenize olanak tanır. Hazır şablonlardan sadece birini seçmekle kalmaz, kendi benzersiz tasarımınızı da oluşturabilirsiniz. Görünümünüzü değiştirmek ister misiniz? O zaman devamı özellikle sizin için, güzellik uzmanları.

İletişim Formu Görünümü - İletişim Formu 7 Stili

İletişim formları için stiller 7

Contact Form 7 Style Plugin, WordPress sitenize yüklenmesi gereken Contact Form 7 için bir eklentidir. Yönetici paneli aracılığıyla kolayca yönetilebilen özel stilleri destekler. Ayrıca iletişim formu ayarlarında etkinleştirilebilecek önceden tanımlanmış şablonlar vardır 7. Ana eklentinin ayarlarında görünecektir. yeni ek- İletişim Formu 7 Stil Şablonu. Görünüm özelleştirme:

Form için hazır şablonlar

Örnek, bu güzel olana harici standardı değiştirdim:

İletişim formunun görünümü

Kendi özel stil seçeneklerinizi ayarlayabileceğinizi unutmayın:

Eklenti, yönetici paneli aracılığıyla yönetilebilen özel stilleri destekler

Sonuç olarak:

İletişim Formu 7'den e-posta göndermek çoğu insan için sorunsuz çalışır. Ama herkes için değil çıkıyor. Eklenti her gün milyonlarca e-postayı başarıyla gönderse de, geciktirebilecek veya durdurabilecek birçok sorun var. e-postalar, tipik bir e-postanın hem gönderen hem de alan tarafında.

İletişim Formu 7 neden çalışmıyor (e-posta göndermiyor)?

  1. Barındırma sorunlarınız E-posta gönderip almanın büyük ölçüde WordPress sitenizi barındıran sunucuya bağlı olduğunu unutmamak önemlidir;
  2. Doğru iade e-posta adresini kullandığınızdan emin olun;
  3. E-postanız spam olarak kabul edilebilir;
  4. Eklentiler veya tema, İletişim Formu 7 ile çakışıyor;
  5. Javascript çakışmaları.

Bu eklentiden e-posta gönderemiyorsanız, genel olarak WordPress'ten e-posta gönderemezsiniz. Bu durumda beyler eklentinin çalışması ile ilgili sıkça sorulan sorulara sayfadan ulaşabilirsiniz. https://contactform7.com/faq/.

Veya destek forumundahttps://wordpress.org/support/plugin/contact-form-7/. ingilizce diliönemli değil, favori tarayıcınızın çevirisiyle her şey netleşecek.

Benim için hepsi bu. Görünüşe göre hiçbir şey unutmamış. Herşey gönlünce olsun. İyi şanslar arkadaşlar.

not Eski gönderileri düzenlemenin (okuyuculara yönelik bilgiler her zaman güncel olmalıdır) yazmak kadar zaman aldığı ortaya çıktı. yeni talimat. Korku!

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render((blockId: "RA) -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); ))(bu , this.document, "yandexContextAsyncCallbacks");

Bir iletişim formu, çoğu sitenin önemli bir özelliğidir. Bu yüzden WordPress dizininde bu kadar çok eklenti var. iletişim formları. En popüler olanlardan biri İletişim Formu 7'dir. Eklenti, her türden form oluşturmanıza olanak tanır; çok esnek ve kurulumu kolay; uzun yıllardır gelişmektedir ve birçok gelişmeyi içinde barındırmaktadır.

İletişim formları oluşturma ve görüntüleme

Yöneticide form oluşturma

Eklentiyi kurduktan sonra, formlar oluşturabileceğiniz ve silebileceğiniz "İletişim Formu 7" menü öğesi görünecektir.

Eklenti etkinleştirildiğinde resimdeki form otomatik olarak oluşturulmuştur.

Varsayılan formu kullanıyoruz, bunun için bir "Bana ulaşın" sayfası oluşturacağız ve formun kısa kodunu buraya ekleyeceğiz.

sitenin önü

Şimdi makaleyi kaydedelim ve formumuzun nasıl göründüğüne bakalım (Yirmi Onaltı temasını kullanarak):

Resim, gönderilen mektuptan sonraki formu göstermektedir (bu, formun altındaki bildirimde belirtilmiştir).

Form özelleştirme (karmaşık formlar oluşturma)

Yukarıdaki örnek, hazır ve çok basit biçim kişiler. Şimdi daha zor bir formun nasıl oluşturulacağına bakalım. Bunu yapmak için yönetici paneline, form yöneticisine döneceğiz ve varsayılan formu düzenlemeye gideceğiz.

Üst alanda - formun adı (yalnızca yönetici panelinde görünür), sizin için net olan bir adı belirtin, örneğin: "Site hakkında geri bildirim", "İş başvuru formu", "Geri bildirim formu" , vb.

Başlığın altında bir kısa kod var. Formu görüntülemek için kayıtlarda kullanırız.

Ve aşağıda dört sekme var:

  1. Form Şablonu
  2. Mektup
  3. Ek ayarlar

Her sekmeyi ayrı ayrı ele alalım.

Form Şablonu

Bu sekmede, formun alanlarını ve görünümünü özelleştirebilirsiniz. çalışma alanı HTML düzenleyici WP. Sadece normal butonlar yerine farklı form alanları eklemek için butonlar görüyoruz.

Form düzeni

Düzen için html etiketlerini ve eklenti kısa kodlarını kullanabilirsiniz. Kısa kodlar, form alanları ekler ve html etiketleri, keyfi bir HTML yapısı oluşturmanıza olanak tanır. Örneğin, varsayılan formumuz şöyle görünür:

Ve bir gönderide görüntülendiğinde, bu HTML'ye dönüşecektir:

Kısa kod sözdizimi

"Metin" butonuna tıklayalım. Metin alanı için nitelikler belirleyebileceğimiz bir pencere açılır. "Etiket ekle"yi belirtin ve tıklayın.

Etiket daha sonra html koduyla bir metin alanına dönüştürülecektir:

Kısa kodlar, kısa kod oluşturucu kullanılarak kolayca oluşturulabilir.

Ancak yapıcı, kısa kodu değiştirmenize izin vermez (orada yalnızca bir kısa kod oluşturabilirsiniz). Kısa kodu değiştirmenin iki yolu vardır:

  1. yapıcıyı kullanarak silin ve yeni bir tane oluşturun.
  2. sözdizimini inceleyin ve alan kısa kodunu manuel olarak düzeltin.

Tasarımcı ile kendin anlayacaksın.

Ve burada kısa kodun sözdizimini analiz edeceğiz.


Örneğin, etiketi düşünün Metin alanı ek seçeneklerle:

Metin (gereklidir) Alan türü: metin, seçim, parola, sayı vb. (v bu durum Metin alanı). Etiketimizin hangi form öğesine dönüştürüleceğini, yani ne tür verileri kabul edeceğini belirler. * Yıldız işareti, alanı zorunlu kılar (form gönderilmeyecek ve alanın doldurulması gerektiğine dair bir bildirim görüntülenecektir). Müşteri Adı (gereklidir) Alanın adı, girişte name niteliği olarak kullanılır ve ayrıca gönderilen mektubun şablonu oluşturulurken kullanılır. id:my-id, my-id değerine sahip girişteki id özelliği. Dekorasyon için kullanılır. class:my-class my-class değerine sahip girdi üzerindeki class niteliği. Dekorasyon için kullanılır. yer tutucu "(!LANG:Bir ad girin" Использовать текст "Введите имя" как placeholder. !}

Etiket özniteliklerinin sırasını izleyin: önce alan türü, ardından adı ve ancak daha sonra ek seçenekler gelir.

Alan türleri

  • Metin alanları: metin, e-posta, tel, url, textarea
  • Sayısal alanlar: sayı , aralık
  • Tarih alanları: tarih
  • Onay kutuları, radyolar, listeler: onay kutusu , radyo , seçin
  • Dosya yükleme alanı: dosya
  • CAPTCHA: captchac ve captchar
  • Anketler: bilgi yarışması
  • "Kabul et" alanı: kabul
  • Gönder düğmesi: gönder
  • Özel alan türü

Mektup şablonu

İkinci sekmede, gönderilen mektubun şablonuna (düzenine) ve özelliklerine ince ayar yapabilirsiniz. Bu sekmenin alanlarında özel form alanı etiketleri kullanabilirsiniz - bu, formda belirtilen verileri mektupta göndermeyi mümkün kılar.

Etiketler, form şablonundaki alan adlarından oluşur. Örneğin, adında bir metin alanı oluşturduk: . Artık etiketi e-posta şablonunuzda kullanabilirsiniz. Harfte bu etiket yerine kullanıcı tarafından girilen alanın değeri (tam isim) değiştirilecektir.

E-posta başlıkları:

    Kime - e-posta kutusu e-postanın gönderileceği yer. Virgülle ayırarak istediğiniz kadar kutu belirleyebilirsiniz.

    Kimden - mektubun geldiği isim ve e-posta. Genellikle sunucu postası burada belirtilir (örneğin [e-posta korumalı]).

    Herhangi bir posta belirtebilirsiniz, ancak posta etki alanı site etki alanından farklıysa, form test edilecek ve bu parametrede “küfür” edecek, ancak mektuplar gönderilmeye devam edecektir.

    Konu - E-postanın başlığı. Verilerin hangi formdan gönderildiği açık olacaktır. Örneğin, mektubun konusu "Sitede hata", "Geri arama sırası" vb. Alınan harflerle çalışmayı kolaylaştırmak için bir başlık seçin.

  • Ek başlıklar - Yanıtla: varsayılan olarak buraya yazılır. Yanıtla başlığı, bu e-postanın aşağıdaki "Yanıtla" düğmesine tıklanarak yanıtlanabileceğini söyler. posta programı, ve form etiketi, şablondaki alanın adıdır. Bu etiket yerine kullanıcı tarafından belirlenen e-posta eklenecektir. Yanıtla gibi bir şey alırsınız: [e-posta korumalı].
mektup gövdesi

sıradaki Ana bölüm bu sekme. İşte mektubun metni. Metinde aynı form etiketlerini kullanıyoruz (form şablonundaki alan adları).

Varsayılan harfi analiz edelim:

İtibaren:<>Konu: Mesaj: -- İletişim Formu 7 Eklentisini Keşfetme sitesinden gönderildi (http://test-wp.ru)

Kullanıcının doldurduğu 4 alanımız vardı. E-postayı gönderdikten sonra etiketler değerlere dönüşecek ve şöyle bir e-posta alacağız:

Gönderen: Dmitry Konu: İletişim Formu 7 İle İlgili Soru: Merhaba! Contact Form 7 eklentisi hakkında bir sorum var, nasıl kurarım? -- İletişim Formu 7 Eklentisini Keşfetme sitesinden (http://test-wp.ru) gönderildi

E-postanın gövdesindeki isteğe bağlı alanlar

Kullanıcı alanı doldurmaz, ancak harfin gövdesinde kullanılırsa, mektubun gövdesi eksik olacaktır. Örneğin, vücut Şehirden Adam diyor, ancak kullanıcı alanı doldurmadı, bu da mektupta şehirden Adam alacağımız anlamına geliyor... Mektupta böyle bir satır gereksiz. Bu satırı e-postadan kaldırmak için "Boş mesaj etiketli satırların çıktısını hariç tut" kutusunu işaretleyin. Bunun yalnızca alan metni ve kısa kod aynı satırda olduğunda çalışacağını unutmayın.

Seçenek "Mektubun HTML biçimini kullan". E-postanın gövdesinde HTML etiketlerini kullanmanıza olanak tanır. Bu durumda, sınırlı bir liste kullanabilirsiniz. HTML etiketleriçünkü hepsi değil posta istemcileri veya hizmetler karmaşık HTML işaretlemesini doğru şekilde işleyebilir. Şunları kullanabilirsiniz: tablolar, madde işaretli listeler, cesaret, paragraflar vb. Daha fazla ayrıntı için web'de arama yapın.

İletişim Formu 7, iki adrese mektup göndermenizi sağlar ve her harf için ayarlar farklıdır. Bu, site yöneticisine tam bilgi içeren bir mektup ve yöneticiye yalnızca sipariş verilerini içeren bir kopyasını göndermeniz gerektiğinde yararlı olabilir.

Form gönderme bildirimleri

Bu sekmede, belirli bir durumda formun görüntülediği mesajları düzenleyebilirsiniz: başarılı veya başarısız bir mektup gönderirken veya hatalar meydana geldiğinde.

Harf şablon etiketleri bu alanlarda çalışmaz.

Ek ayarlar

Bu sekme ileri düzey kullanıcılar için tasarlanmıştır ve formun olanaklarını genişletmek için JS kodunun kullanılmasına izin verir. Örneğin, analitik için olayları askıya alın.

Bu işlevin kullanımından ayrı bir yazıda bahsedeceğim.

İletişim Formu 7 eklentisi, sitenizle ilgili geri bildirimleri düzenlemenize yardımcı olacaktır.

Contact Form 7 eklentisini resmi WordPress web sitesinden indirebilirsiniz.

Gerçekten Basit CAPTCHA eklentisini resmi WordPress web sitesinden indirebilirsiniz.

Bu eklentinin nasıl kurulacağını ve bağlanacağını "" dersinde ele aldık, şimdi ele alacağız Ek özellikler Eklenti İletişim Formu 7. Form, monitörlerde, tabletlerde, telefonlarda ve dizüstü bilgisayarlarda düzgün çalışır. Bu arada, dizüstü bilgisayarınız bozulduysa, HP dizüstü bilgisayarların tamir edildiği bir servis var.

Eklentiyi indirip etkinleştirdikten sonra şuraya giderek eklenti ayarlarına gidin: yeni Kısım kontrol paneli "Kişiler".

Farenizi formun adının üzerine getirin ve "Düzenle"yi seçin

Form parametrelerini değiştirmek için bir pencere açılacaktır.

Site bir değil, birkaç form kullanabildiğinden (mesaj gönderme formu, arama sipariş formu, kişisel veriler içeren form), böylece hangi formun neyin sorumlu olduğu konusunda kafa karışıklığı olmaması için adı değiştirmeniz gerekir. şeklinde. Bunu yapmak için, formun adını tıklayın 1 .

Blok No. 2, formda sayfada ne görüntüleneceğini gösterir. Bu alanın kodundan sonra önce metin yani alan adı gelir. Metni istediğiniz gibi değiştirebilirsiniz.

Forma yeni alanlar eklemek için, 3 Numaralı - "Etiket oluştur" açılır listesine tıklayın ve açılır listeden gerekli öğeyi seçin.

  • Metin alanı
  • E-posta
  • Telefon numarası
  • Sayı (döndürme kutusu)
  • Sayı (kaydırıcı)
  • Metin alanı
  • Aşağıya doğru açılan menü
  • onay kutuları
  • radyo düğmeleri
  • Kabul
  • Soru
  • CAPTCHA
  • dosya gönderme
  • gönder düğmesi

İpuçları ve form alanları varsayılan olarak şu şekilde düzenlenmiştir: üstte bir ipucu, altta bir öğedir. Açıklamayı ve öğeyi bir satıra yerleştirmek istiyorsanız, metinden sonra etiketi kaldırın.

. Açıklamaları ve öğeleri içeren bloğun tamamı bir satırda olmalı ve etiketin içinde olmalıdır

Metin alanı

Açılır listeden "Metin alanı" öğesini seçin

Ekleyeceğiniz herhangi bir özellik isteniyorsa 1 nolu kutucuğu işaretleyiniz ve açıklama kısmına yazmayı unutmayınız.

Giriş alanına ekleyebilirsiniz Ek bilgi Formu doldurmayı kolaylaştırmak için. Onay kutusu 2 "Yer tutucu olarak kullanılsın mı?" ve yanındaki alana bir ipucu girin. Formda bu alanı doldurduğunuzda araç ipucu metni kaybolacaktır. Ardından eklenti istemlerini izleyin. Sonuç, bitmiş formda şöyle bir alandır:

Kodu mektup şablonuna eklediğinizden emin olun, aksi takdirde bu alandaki veriler postaya gönderilmeyecektir! Bu, yalnızca metin alanları için değil, diğer öğeler için de geçerlidir.

E-posta

Adres formuna geçmek için kullanılır posta kutusu gönderen

URL

Forma bir web sitesi adresi eklemenizi sağlar.

Telefon numarası

Bu alana sadece sayılar girilebilir.

Sayı (döndürme kutusu)

Ürün gibi bir şeyin miktarını ayarlayabileceğiniz bir alan. Miktar yukarı/aşağı oklarla ayarlanır.

tarih

Bir tarih seçme seçeneği ile forma bir takvim ekler. Örneğin, bir otelde oda ayırtmak için kullanılır. Varış tarihi, çıkış tarihi.

Metin alanı

Evet şaşırmayın 🙂 Başka bir metin alanı. Bu sefer, bu kutuda büyük bedenler ve içine çok fazla metin yazmanıza izin verir. Örneğin incelemeler, yorumlar.

Aşağıya doğru açılan menü

Bir şey için birçok seçenek olduğunda ve büyük bir listeden bir öğe seçmeniz gerektiğinde, örneğin şehirler, sokaklar, mallar listesi.

Liste, her öğe yeni bir satırda olacak şekilde Seçim alanına yerleştirilmelidir.

onay kutuları

Geliştirici jargonunda bir onay kutusu veya onay kutusu, bir onay kutusu oluşturan bir öğedir. Bu alanın iki durumu vardır - kontrol edilmiş veya edilmemiş. Çoklu seçim mümkündür. "Onay kutularını birbirini dışlasın mı?" kutusunu işaretlerseniz, yalnızca arka arkaya bulunurlar. o zaman sadece bir seçenek seçilebilir.

radyo düğmeleri

Anahtarlar (argo. radyo düğmeleri), önerilen birkaç seçenek arasından tek bir seçenek seçmeniz gerektiğinde kullanılır. "Önce etiketi yerleştir, sonra onay kutusu?" kutusunu işaretleyerek. etiketin konumu ve seçim alanı, varsayılan olarak önce seçimi, ardından etiketi değiştirir.

Kabul

bir şeyin onaylanması. Yukarıda açıklanan koşulları kabul ettiğinizi varsayalım.

Soru

Bu, en temel olan spam'e karşı ilk savunma hattıdır. Ayarda, bir tür soru yazın, sayıları kullanabilirsiniz, harfleri veya her ikisini birden kullanabilir ve doğru cevabı belirtebilirsiniz. Formu doldururken cevap doğruysa, form gönderilecektir. Yeşil, cevap giriş alanının önündeki sitede bu formülün hangi kısmının görüntüleneceğini, kırmızı ise cevabı belirtir. Formüldeki doğru cevap | işaretinden sonra yazılır. (dikey çubuk)

Forma spam koruması ekler.

Bu özelliğin çalışması için başka bir eklenti gereklidir. Eklentiyi indirin, kurun, etkinleştirin.

Ayarları değiştiremezsiniz, gönder butonundan 2 satır önce kopyalayıp yapıştıramazsınız.

dosya gönderme

Mesaj göndermek için forma dosya ekleyebilirsiniz. Ayarlarda, bayt cinsinden maksimum boyutu ve yükleme için izin verilen biçimleri belirtebilirsiniz, örneğin.jpg .tiff .doc

gönder düğmesi

Formu gönderme. "Kısayol" bölümündeki ayarlarda - düğmenin adını verebilirsiniz (Gönder, cevapla, gönder 🙂)

İletişim Formu 7'nin Görünümünü Özelleştirme

Eklentiler güncelleme özelliklerine sahip olduğundan, site tema stili dosyası style.css'de formun görünümünde değişiklikler yapacağız.

Kod, formun, alanlarının ve diğer öğelerin görüntülenmesinden sorumludur:

Wpcf7 ( background-color:#ddd; ) /*form background color */ .wpcf7 girişi, .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial, Helvetica, sans-serif; font-size: 16 piksel; satır yüksekliği: 20 piksel; kenarlık: 1 piksel katı #C7C7C7; kutu gölgesi: iç metin 2 piksel 2 piksel 8 piksel #F9F9F9; -webkit-geçişi: tümü 0,2 saniyelik kolaylık; -moz geçişi: tümü 0,2 saniyelik kolaylık; -o-geçişi : tüm 0,2 saniyelik hareket hızı; geçiş: tümü 0,2 saniyelik kolaylık; ) .wpcf7 .wpcf7-list-item( dolgu-sol: 0; kenar-sol: 0; sağ kenar: 25px; ) .wpcf7 .wpcf7-list-item input( border: yok; padding-left: 0; margin-left: 0; ) .wpcf7 select( anahat: yok; yazı tipi boyutu:16px; yazı tipi ailesi:Arial, Helvetica, sans-serif; ) .wpcf7 girdi: üzerine gelin, .wpcf7 giriş:odak, .wpcf7 giriş:etkin, .wpcf7 textarea:hover, .wpcf7 textarea:odak, .wpcf7 textarea:etkin ( arka plan: #FDFDFD; anahat: yok; )

Burada ne var.

.wpcf7 girişi, .wpcf7 metin alanı - giriş alanı stili (metin alanı)

  1. dolgu malzemesi- içerikten öğenin sınırına kadar olan girintiyi ayarlar. Burada - alana girilen metinden alanın sınırına kadar olan girinti. Değer, piksel cinsinden Xpx'e ayarlanır; burada X, piksel sayısıdır. Örnek: dolgu: 5px 3px 6px 8px;
  2. renk- metin rengi.
  3. font ailesi- giriş alanları yazı tipi.
  4. yazı Boyutu- yazı Boyutu
  5. satır yüksekliği- satır yüksekliği
  6. sınır- giriş alanının etrafındaki çerçeve
  7. kutu gölgesi blok gölge. iç metin gölgenin dahili olduğunu gösterir. Bir dış gölge istiyorsanız, bu değeri atlayın. 2px 2px'in ikinci ve üçüncü değerleri, sırasıyla gölgenin yatay ve dikey karışımını gösterir. Dördüncü değer olan 8px, gölge için bulanıklık yarıçapını belirtir. Beşinci - #F9F9F9 - gölgenin rengi.

İletişim Formu 7 Düğmesini Özelleştirme

.buttons_form ( dolgu: 0px; yükseklik: 30px; genişlik: 150px !important; kenarlık: yok !important; imleç: işaretçi; renk: #fff; -webkit-border-radius: .5em; -moz-border-radius: . 5em; border-radius: .5em; color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(lineer, sol üst, sol alt, from(#ed1c24), to(# aa1317)); arka plan: -moz-linear-gradient(top, #ed1c24, #aa1317); filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

İletişim Formu 7 Bildirim Tarzı

Hataları veya başarılı gönderimleri bildirmekten sorumludur.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:# 349622; margin:0; padding:20px; ; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; background-color) :#349622; padding:5px; padding- sol: 5px; padding-sağ: 5px; border-radius:10px; width: 290px; color: beyaz; /* Alt gölge */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3) ; -moz-kutu-gölge: 3px 3px 3px rgba(0,0,0,0.3); kutu-gölge: 3px 3px 3px rgba(0,0,0,0.3); )

Ve şimdi, kolaylık olması için, kodun tamamı yorumlarla birlikte:

Wpcf7 ( background-color:#ddd; ) /*form background color */ .wpcf7 girişi, .wpcf7 textarea( /* Kodun bu kısmı giriş alanlarının, metin alanlarının stilinden sorumludur */ padding:5px; /* İçeriğinden önceki alanlar öğesinden dolguyu ayarlar, herhangi bir değer koyabilirsiniz, örneğin 10px */ color:#1D1D1D; /* Giriş alanlarında metin rengi */ font-family:Arial, Helvetica, sans-serif; /* Giriş alanlarındaki metin fontu */ font -size:16px; /* Giriş alanlarındaki metin boyutu */ line-height: 20px; /* Giriş alanlarındaki line-height */ border: 1px katı #C7C7C7; /* Border alanların etrafında.İlk değer piksel cinsinden genişlik, ikinci - kutu stili, üçüncü - rengi */ kutu gölgesi: inset 2px 2px 8px #F9F9F9; /* Kutu gölgesi 2px - x offset, 2px - y offset, 8px - gölge bulanıklığı yarıçapı, #F9F9F9 - gölge rengi */ -webkit-geçişi: tümü 0,2 sn hız; -moz geçişi: tümü 0,2 sn hız; -o-geçiş: tümü 0,2 sn hız; geçiş: tümü 0,2 sn hız; ) .wpcf7 .wpcf7-list-öğesi( sol dolgu: 0; sol kenar boşluğu: 0; sağ kenar boşluğu: 25 piksel; ) .w pcf7 .wpcf7-list-item girişi( sınır: yok; dolgu-sol: 0; sol kenar boşluğu: 0; ) .wpcf7 seçimi ( anahat: yok; yazı tipi boyutu: 16 piksel; yazı tipi ailesi: Arial, Helvetica, sans-serif; ) .wpcf7 girişi: fareyle üzerine gelin, .wpcf7 girişi: odak, .wpcf7 girişi: etkin, .wpcf7 metin alanı: hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* Bu bölüm, fare işaretçisi ile üzerlerine gelindiğinde giriş alanlarının stilinden sorumludur */ background: #FDFDFD; /* Giriş alanının arka planı fare imlecini bunun üzerine getirdiğinizde */ anahat : yok; /* Metin giriş alanının dış sınırı */ ) o-geçiş: 0; geçiş: 0; kenarlık: yok; /* Düğmenin etrafındaki kenarlık */ konum: göreceli ; color: #fff; /* Metin rengi */ text-transform: büyük harf; /* Metin dönüştürme (büyük harf, düğmedeki metnin görüntüleneceği anlamına gelir büyük harfler) */ /* Düğmenin köşelerini yuvarlayın. Aşağıdaki üç özelliğin değerleri farklı tarayıcılar için aynı olduğundan aynı olmalıdır */ -webkit-border-radius: 6px; /* Chrome için yuvarlak köşeler */ -moz-border-radius: 6px; /* Mozilla FireFox için yuvarlak köşeler */ border-radius: 6px; /* Mobil dahil tüm diğer tarayıcılar için yuvarlak köşeler */ font-size: 14px; /* Düğme metin boyutu */ yazı tipi ağırlığı: kalın; /* Metin stili (kalın, kalın anlamına gelir) */ padding-top: 11px; /* Öğenin kenarından içeriğine üst dolgu */ padding-bottom: 10px; /* Öğenin altından içeriğine dolgu */ padding-left: 35px; /* İçeriğine göre öğenin kenarının solundaki dolgu */ sağdaki dolgu: 35px; /* Öğenin kenarından içeriğine kadar sağdaki dolgu */ /* gradyan arka planı - Degrade düğmesi arka planı */ arka plan rengi: #000000; /* Gradyan tarayıcı tarafından desteklenmiyorsa butonun arka plan rengi */ /* Aşağıdaki özelliklerde renkler aynı olduğu için sadece farklı tarayıcılar için aynı şekilde belirtilmelidir. İlk özelliğe bir göz atalım. from(#676767), to(#3B3B3B) kısmı, bir degrade görüntülememiz gerektiği anlamına gelir, burada renk #676767'den #3B3B3B rengine geçiş vardır */ background: -webkit-gradient(linear, left top, sol alt, (#676767), ile(#3B3B3B)); arka plan: -moz-doğrusal-gradyan(üst, #349622, #246416); filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Alt Gölge - Düğmenin gölgesi. RGBA'da belirtilen gölge rengi */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3); kutu gölgesi: 0 2px 5px rgba(0,0,0,0.3); ) /* Üzerine gelindiğinde - Fare işaretçisini gezdirirken düğmenin stilini belirleyin. Her şey bir önceki bloktakiyle neredeyse aynı */ .wpcf7 input.wpcf7-submit:hover( imleç: işaretçi; metin-dekorasyon: yok; arka plan rengi: #000000; arka plan: -webkit-gradient(doğrusal, sol üst , sol alt, from(#246416), to(#349622)); arka plan: -moz-linear-gradient(üst, #246416, #349622); filtre: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* Tıklandığında - tıklandığında neredeyse buton stili önceki bloktakiyle aynı */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* Tıklandığında düğme metin rengi */ background-color: #000000; background : -webkit-gradient( doğrusal, sol üst, sol alt, from(#FF0000), to(#246416)); arka plan: -moz-linear-gradient(üst, #FF0000, #246416); filtre: progid:DXImageTransform .Microsoft.gradient(startColorstr ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: yok; -moz-box-shadow: yok; kutu gölgesi: yok ) /* CF7 Mesajları - Başarılı gönderme, hatalar vb. hakkındaki mesajların stili. */ .wpcf7 .wpcf7-validation-errors( /* Doğrulama hataları için mesaj stili */ border:none; /* Mesaj bloğu border */ background-color:#246416; /* Background */ color:#fff; /* Metin rengi */ kenar boşluğu:0; /* Dış dolgu */ dolgu:20px; /* İç dolgu */ /* Tarayıcılar arası köşe yuvarlama - aşağıdaki 3 özellik */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* Başarılı mesaj stili */ border:none; /* Mesaj bloğu kenarlığı */ background-color:#7ad33f; / * Arka plan */ kenar boşluğu:0; /* Dış dolgu */ dolgu:20px; /* İç dolgu */ /* Tarayıcılar arası köşe yuvarlama - aşağıdaki 3 özellik */ -webkit-border-radius: 10px; -moz- border-radius: 10px; border-radius: 10px; ).wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; dolgu:5 piksel; sol dolgu: 5px dolgu-sağ: 5px; sınır yarıçapı:10px; genişlik: 290 piksel Beyaz renk; /* Alt gölge */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3); kutu gölgesi: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( kayan nokta: sol; ) .wpcf7-form .mright20( sağ kenar boşluğu: 20px; ) .wpcf7-form .mright40( sağ kenar boşluğu: 40px; ) .wpcf7-form .clear( temizle: İkisi de; )

Bir WordPress sitesi için geri bildirim formu eklentisini yüklemek, yapılandırmak ve kullanmak için ayrıntılı talimatlar. Eklenti İletişim Formu 7 açık şu an kategorisinde en iyisidir.

Ücretli eklentiler arasında bile bariz bir alternatif olmaması, Contact Form 7 eklentisinin ne sıklıkta kullanıldığına göre değerlendirilebilir.Bu yazı yazılırken, bu eklenti yalnızca resmi WordPress sitesinden 28.800.000'den fazla indirildi, ve ortalama puan 5 üzerinden 4,5! Bu gerçekten büyük bir başarının işaretidir. Ek olarak, en çok satan premium WP temalarına bakarsanız, hemen hemen her birinde, önerilen veya varsayılan olarak yüklenmiş olan Contact Form 7 eklentisini bulacaksınız.

İletişim Formu 7 eklentisi, yazar tarafından her biri ile güncellenen “canlıdır”. Yeni sürüm WordPress. Hatalar ve hatalar derhal düzeltilir. En yaygın olarak kullanılan eklentilerle belirgin bir çakışma yoktur.
Eklenti İletişim Formu 7 dahil olmak üzere tamamen ücretsizdir. için ticari kullanım. Eklentiyi ayarlar panelinde kurduktan sonra, yazarın "bağış" talebini bulacaksınız.

İletişim Formu 7 Eklentisini Yükleme

Contact Form 7 eklentisini resmi WordPress sitesinden (yukarıdaki bağlantı) veya doğrudan sekmeden indirebilirsiniz. "Eklentiler" > "Yeni Ekle" > "Eklentiler ara" satırı > "İletişim Formu 7"de sürücü. Başlamadan önce eklentiyi etkinleştirmeyi unutmayın: "Eklentiler" > "Yüklü" > İletişim Formu 7 eklentisini bulun > "Etkinleştir"e tıklayın. Sitenizin yan yönetim panelinde yeni bir “İletişim Formu 7” öğesi görünecektir.

İletişim Formu 7 Eklentisini Yapılandırma

Ne güzel, varsayılan olarak, Contact Form 7 eklentisi çok dilliliği destekler. WordPress sürümünüz Rusça ise, herhangi bir dilde bir geri bildirim formu oluşturabilmeniz için eklenti tamamen Rusça olacaktır. Formun dili, her formun oluşturulması sırasında belirtilir. Ayarlar için ayrı bir bölüm yoktur, tüm ayarlar her bir form için ayrıdır.

Geri bildirim formu ekleme örneği

1. Yönetim panelinde seçin “İletişim Formu 7” > “Formlar” > “Yeni Ekle” sayfasındaki butonu.

2. Form için bir dil seçmeniz istenecektir. Varsayılan "Rusça"dır. "Yeni Ekle" düğmesini tıklayın
3. Önünüze kendi ayarlarınızla kendi formunuzu oluşturabileceğiniz bir pencere açıldı.

Olasılıklar geniş, ancak hemen birkaç özelliği belirtmek istiyorum. Açılan pencere birkaç sekme içerir: “Form şablonu”, “Mektup”, “Formu gönderirken bildirimler”, “Ek ayarlar”. Son sekme buna ihtiyacınız yok, daha çok ileri düzey kullanıcılar ve programcılar için bir özelleştirme. Geri kalanına daha yakından bakalım.

“Form Gönderme Bildirimleri”- bunlar, sitenize gelen bir ziyaretçinin formu gönderirken göreceği mesajlardır. Hem başarılı gönderme hem de hata ve başarısızlık içeren iletiler için seçenekler içerir. Bu sistem mesajlarını dilediğiniz gibi değiştirebilirsiniz.

“Form Şablonu”- bu bölümde, formda gerekli alanların bulunmasından sorumlu olan Etiketler oluşturacaksınız.

"Mektup"- Ziyaretçi formu doldurduktan sonra alacağınız mektubun görünümü ve içeriğidir.

DİKKAT:Şimdi etiketlerin ne olduğunu ve hangi alanları oluşturduklarını analiz edeceğiz. Tüm bu etiketler “Form şablonu” sekmesinde girilir, ancak “yanıt etiketleri”ni manuel olarak (!) “Mektup” sekmesinde girmezseniz, doldurulan formlar tamamlanmayacaktır.

4. Form Şablonu sekmesindeki etiket seçenekleri.

-Metin: bir metin alanı ekler (kısa).
- e-posta: e-posta için alan.
- url: sitenin veya herhangi bir bağlantının adresini belirtmek için bir alan.
- tel: iletişim telefon alanı
-numara: yalnızca sayısal bir değer girebileceğiniz bir alan
tarih: tarih biçimi alanı
- metin alanı: bir metin alanı (uzun) ekler.
- Aşağıya doğru açılan menü: açılır liste. alan vardır ek ayarlar. Çıkacak liste “Seçenekler” alanında belirtilir. Ve listenin bir elemanı bir satırda (virgülle ayrılmamış!). “Birden çok seçime izin ver” işaretliyse, kullanıcı listenizden birden fazla seçenek seçebilecektir. "İlk seçenek olarak boş bir öğe ekle" işaretliyse, varsayılan olarak üst kısma kullanıcı tarafından da seçilebilen boş bir alan eklenir.


- onay kutuları: Onay kutusu (onay işaretleri). Alanın birkaç ayarı vardır. Onay kutularının listesi “Seçenekler” alanında belirtilir. Ve bir satırda bir onay kutusu (virgülle ayrılmamış!). "Önce bir etiket koy, en son onay kutusu" işaretliyse, varsayılan olarak ilk onay kutusu işaretlenir. "Onay kutularını özel yap" öğesi işaretlenirse, kullanıcı onay kutularından yalnızca birini işaretleyebilir.

radyo düğmeleri: radyo düğmeleri. Radyo düğmeleri, listeden her zaman yalnızca bir öğe seçmenize olanak tanır. Liste girmek, bir sütundaki onay kutularına benzer. Ayarlardan, “Önce bir etiket koy, en sona bir onay kutusu koy” seçeneğini etkinleştirebilirsiniz, ardından listedeki ilk radyo düğmesi varsayılan olarak seçilecektir.

- kabul: onay kutusu alanı, mesajın gönderilmeyeceği kutuyu işaretlemeden. Aslında bu, kullanıcının koşulsuz rızasını bir şeye almak için bir fırsattır, aksi takdirde mektup gönderilmeyecektir. Örneğin, "Sağladığınız bilgilerin operatörlerimiz tarafından işleneceğini kabul ediyorsunuz."

- sınav: eklenti yenilik. Bu alan, bir soru ve buna bir cevap oluşturmanıza olanak tanır. Spam koruması olarak kullanmak için idealdir. Etiket oluşturma formundaki soru ve yanıtın biçimine bakın.


Doldurmak için herhangi bir alan zorunlu hale getirilebilir (genellikle bu tür alanlar * ile işaretlenir), bunun için kutuyu işaretlemeniz gerekir. Alan türü > Gerekli alan. Dikkat! Alanın doldurulması zorunlu olduğunu kullanıcılara metinde belirtmeyi unutmayın!

- CAPTCHA: captcha yalnızca ek bir eklenti olarak yüklenir. Ancak prensipte, test etiketinin varlığı ile bir damla ihtiyacı çok daha azdır.

-dosya: alanı, kullanıcının mesaja dosya eklemesine izin veren bir etiket oluşturur. Etiket ayarlarında “Dosya boyutu sınırı (bayt)”, eklenen dosyanın maksimum boyutu, izin verilen dosya türleri (virgülle ayrılmış uzantılar) belirtebilirsiniz. Dikkat, ekli dosyanın maksimum boyutunu belirtmezseniz, varsayılan olarak sunucunuzun yeteneklerine göre belirlenir. Kısıtlamalar hakkında kesin bilgileri size hosting sağlayan firmadan öğrenebilirsiniz. Genellikle maksimum boyut 10 MB ile sınırlıdır.

submint: etiket bir “Gönder” düğmesi ekler (ad değiştirilebilir).
Bu, oluşturduğum tüm etiketlerin bulunduğu bir ekran ve aşağıda sitedeki formun bir ekranı. Lütfen "Form Şablonu"nun HTML etiketlerini desteklediğini unutmayın, bu yüzden kullanan kullanıcılar için açıklamalar yapıyorum. HTML kullanarak etiketler.



5. "Harf" sekmesi.

Şimdi size gönderilecek bir mektup oluşturma formuna geçelim ve “form şablonunda” kullandığımız etiketleri ekleyelim. Ekrana dikkat edin. Mektubun gövdesinde yer almayan alanlar sekmenin en üstüne siyah, harfin gövdesinde bulunanlar ise gri renkle yerleştirilmiştir.

Bunları mektubun gövdesine getiriyoruz (“Mesaj Gövdesi” alanı): siyahla vurgulanan etiketleri kopyalayıp mektubun gövdesi biçimine yapıştırmanız yeterlidir. Lütfen etiketlerde belirtilen sayıların, form şablonuna eklediğiniz alanların benzersiz sayılarıyla eşleştiğine dikkat edin. Böylece hangi alanın neye ait olduğunu tespit edebilir ve daha sonra kafanız karışmaması için doğrudan mektubun gövdesine imzalayabilirsiniz.
Değişiklikleri kaydediyoruz.

6. Formu siteye yükleme.

Form oluşturma sayfasından kıyı kodunu kopyalayın (genellikle mavi veya kahverengi ile vurgulanır) ve herhangi bir sayfaya veya gönderiye yapıştırın.

Kısaca artıları ve eksileri

profesyoneller
+ çok sayıda alan türleri
+ çok dilli destek
+ kullanım kolaylığı
+ ücretsiz
+ güvenilir
+ diğer eklentilerle çakışmaz
+ İletişim Formu 7 eklentisi geliştirme aşamasındadır

eksileri:
- oluşturulan mektuba ek etiketler eklemeyi unutmayın
– form ve harf tasarımı minimum HTML bilgisi gerektirir

Çözüm: En iyisi olmasa da kesinlikle harika bir editör! Esneklik, güvenilirlik ve istikrardan memnun. Ödenmiş olsaydı, yine de satın alırlardı çünkü. kalite olarak ona yakın kimse yok. Contact Form 7 eklentisini öneririm.