Geribildirim Modx Revo Jeneratörünün Formu. MODX - Geri Bildirim Formu (formit)

ModX'te ilginç bir fırsat var - değiştirebilirsiniz görünüm Kaynak düzenleme formları, istediğiniz gibi pratik olarak. Ayrıca, farklı kullanıcı grupları için farklı formlar oluşturabilir ve hatta farklı kaynaklar için yapabilirsiniz. İçin farklı form profillerini seçebilirsiniz. bu kaynağın Şablonuna, ebeveynine veya diğer özelliklerine bağlı olarak.

Ve bunun için tek bir kod satırı yazmak zorunda değiliz!

Bakalım, örneğin, formlarla yapabilirsiniz:

İlk önce, gereksiz üst menü öğelerini bir genel öğeye - "Geliştirici" olarak kaldırın. Bunu yapmak için, "Sistem" bölümüne gidin -\u003e "Eylemler" bölümüne gidin, kökte yeni bir menü öğesi oluşturun ve tüm gereksiz noktaları orada sürükleyin:

Sonraki "Güvenlik" -\u003e "ayar formları" bölümüne gidin ve "Content Manager" için yeni bir profil oluşturun. Ardından sağ fare düğmesiyle basın ve "Düzenle" yi seçin, "Kullanıcı Grupları" sekmesine gidin ve yeni kuralların uygulanacağı bir grup ekleyin.

Daha sonra, yeni bir kurallar kümesi oluştururuz. İki tipleri, kaynak oluşturma formu için, ikincisi - düzenleme ve güncelleme formu için (sırasıyla oluştur ve güncelleme). Bu kurallar biraz - en azından her kaynak için kural ile olabilir.

Kural oluşturulduktan sonra, ayarlar sayfasını göreceksiniz - üç sekme vardır: kurallar, bölgeler, ek alanlar kümesi hakkında bilgi.

İlk sekme, standart kaynak alanlarını listeler. Kapatılabilir veya yeniden adlandırılabilirler. Bölgeler kaynaktaki sekmelerdir. Yeni bir bölge oluşturabilir ve orada bazı TV parametreleri koyabilirsiniz, sonra "Ek alanlar" sekmesinde ve belirttiğiniz yeni katkılarda bir kaynağa sahip olacaklar. Burada "Kaynak Grupları" gibi standart sekmeleri devre dışı bırakabilirsiniz.

Üçüncü sekmesinde, bir TV parametresinin konumunu belirtirsiniz.

Standart bölgelerde küçük bir beşik yaptım:



Öyleyse, önce kullanıcı için hemen tüm sekmeleri kaldıralım. Keneleri bölgelerden kaldırıyoruz: MODX-PAGE-AYARLAR, MODX-Panel-Kaynak-TV, MODX-Kaynak-Erişim İzinleri. Dahası - Standart alanlardan sadece pagetitle ve diğer ad çıkacak. Onay kutularının geri kalanı temizlenir. Pagetteitle alanı için yeni bir isim belirtin: "Haber Başlığı" ve Alias: "Sayfa Adresi".

Bundan sonra, "Ek alanlar" sekmesine gidin ve TV parametrelerinin bir veya başka bir form alanında (beşik göre) olması gerektiğini belirtin.

Belirtilecek, bu kuralın hangi kaynakların geçerli olduğu için geçerlidir - Desen Paragrafı noktasında, kuralı uygulayacak olan kaynakları belirtiyoruz. Kural tüm şablonlar için ise, hiçbir şey belirtmiyorum. Ve iki madde var: "Sınırlama alanı" ve "sınırlayıcı anlamı". Burada alanların geri kalanını belirleyebilirsiniz.

Bu kuralın "Haberler" bölümündeki kaynakları ifade ettiğini belirtelim - "Sınırlama Alanı" paragrafı ebeveyn.ve kaynak "Haber" nin "Sınırlama Değeri" kimliğinde, örneğin, 22 .

Bir pakette formit üzerinde formlar oluşturmak için zaten birkaç dersim var C - Bu paket avantajlar olarak: yeniden başlatmadan form gönderme, mesajın gönderileceği bir yüzme penceresi var. Peki, buna göre, eksi: JS ve kod koda eklenir. cSS dosyası. - Hıza eksi ne verir ve JS'nin çıktısına, aramanın içindeki gerekli tip değildir, bu nedenle doğrulamada bir uyarı görünür - HTML 5'te belirtilmesi gerekmez.

Bu nedenle, saf biçiminde formlar vermeye karar verdim, bugün bu ve bir ders oldu.

HTML Formu Markup şimdi aşağıdaki kodu var:

Özel bir şey yok, böylece bootstrap'ın düzeniyle standart olarak konuşabilmek için 4., sözdizimini dikkate alarak, gereksiz, rusify, spam'e karşı koruma eklediğimiz için tekrar yapacağım:

[[! Formit? & Hooks \u003d `spam, e-posta` & Emailtpl \u003d` e-posta-tpl` & e-posta adresinden \u003d `[[++ eailesender]]` & emailsubject \u003d `Siteden [[++ site_url]]` & validate \u003d `WorkEmail: Boş, Adı: Gerekli, E-posta: E-posta: Gerekli, Mesaj: Gerekli: Striptag, Telefon: Gerekli` ve SuccessMessage \u003d `

Teşekkürler, çekiciliğin gönderildi.

`]] [[! + Fi.SuccessMessage: Varsayılan \u003d` `]]
[[! + fi.error.name]]
[[! + Fi.rror.phone]]
[[! + fi.error.email]]
[[! + fi.error.message]]

Kod analizi, yukarıdan aşağıya gidiyoruz:

& Kancalar - Kendi kendine ins dahil olmak üzere farklı kancalar eklenir: bizim durumumuzda 2 standart: SPAM - SPAM ve e-postaya karşı basit koruma - Verileri göndermek için posta kutusu. Kancaların geri kalanı hakkında videoda bir ayrıntı söylüyorum.

& EmailTPL - Bir harf tasarımı ile CHANC aşağıdaki kodu var:

Kimden: [[+ İsim]]

Telefon: [[+ telefon]]

E-posta: [[+ e-posta]]

Mesaj: [[+ mesaj]]

& Emailto - adres e-posta formların gönderildiği yerde bu durum belirtildi sistem ayarı (anahtar) ++ e-posta

& EmailSubject - Gönderilen mektubun konusu

& Doğrulama - SPAM'a karşı korumak için doldurma ve sık alan için gerekli alanları reçete ediyoruz

& SuccessMessage - Başarılı bir sevkiyat sonrası mesaj

Videoyu izlemekle ilgilenen ve belgeleri okumakla ilgilenen kod kodunu sökmeyeceğim: docs.modx.com/extras/revo/formit

Form'a Dosyaları Takma

Ekleri ekleyebilmek ve gönderebilmek için, kalıp etiketine kaydolmak gerekir.

Enctype \u003d "Multipart / Form-Data"

ve sırasıyla bir dosya eklemek için alan ekleyin

[[! + fi.error.upload]]

Chekboker ve seçenek işleme

Bir sayfada birden fazla form

Sadece her formun aramalarında, yaz

& subildvar \u003d `İngilizce olarak form adı

her formun kendi adı vardır.

SPAM Mücadelesi

Nasıl bükülmemeli, ama kesinlikle spam ile karşılaşacaksınız - en çok etkili yöntem Savaşmak için - ayrıca deneyebilirsiniz.

İyi günler! Bugün, Şef'in sıradışı bir kapatılacak olan MODX Devrimi için bir geri bildirim formu oluşturmanızı sağlayacağım (Googlovsk Qaptcha çok karmaşık ve hantal). Yapmak geri bildirim Formit eklentisi kullanacağız. Onu yükleyebilirsiniz, muhtemelen kendiniz, nasıl yapacağınızı bilmeyenler için, hala baştan sona bir dersi keserim. Başla!

Kurulumla ilgili tüm anları özlüyorum Modx devrimi, sistem kurulumu, site tasarımını gömme. Formit paketinin kurulumuyla başlayalım.

1. Sisteme Git - Paket Yönetimi

2. "Topları Yükle" ı tıklayın.

3. Formit listesinden seçin

"İndir" i tıklayın. Formit'i yükledikten sonra, indirilen paketlerde görünürseniz, Yükle düğmesini tıklatın. Formit yüklü!

4. Sonra, yeni bir chank oluşturun

"Form" diyelim ve aşağıdaki kodu ekleyelim:

[[! QAPTCHA]] [[! Formit? & Hooks \u003d `Spam, e-posta, yönlendirme` ve EmailTpl \u003d` Senmailtpl` & emailsubject \u003d `Callback Application` & Emailto \u003d` E-posta adresiniz` & redirectto \u003d `Sayfa kimliği" harfi Başarıyla gönderildi "` & validate \u003d `contact_name: gerekli, contact_phone_na_format: Gerekli` ve customValidators \u003d` qaptcha.slider`]]

[[+ qaptcha.slider]]

Burada, aşağıdaki maddelerde çalışmaya zorlayacağımız snippet formit, şekli ve captcha'nın zorluğu. Parametreyi unutma e-posta. Mektubun gelmesi gereken posta kutusunu belirtin ve redirtto.sayfa kimliğinin "harfini başarıyla gönderildi" koymanız gerekir.

5. CHANK SENTEMAILTPL oluşturun

Konuşacak, postaya hangi bilgileri gönderecek ve kodu oraya ekleyecek:

Adı: [[+ contact_name]]
E-posta: [[+ contact_email]]
Telefon: [[+ contact_phone_na_format]]
Not: [[+ contact_message]]

6. "Başarıyla gönderilen mektup gönderildi" adlı yeni bir belge oluşturun

Kaynağın içeriğinde metin türünü ekleyebilirsiniz: Mektubunuzu aldık! Şirketimizi seçtiğiniz için teşekkür ederiz. Mümkün olan en kısa sürede müdürümüz, uygulamada bıraktığınız iletişim telefonunda sizinle irtibata geçecektir!

7. Şimdi kapasit ile ilgileneceğiz

JQuery Bibilot sayfasını bağlıyoruz:

8. Kataloglar oluşturun varlıklar / Bileşenler / QAPTCHA / ve Çekirdek / Bileşenler / QAPTCHA /

Katalogda varlıklar / Bileşenler / QAPTCHA /görüntü ve JQuery klasörünü içeriğe ve içeri girdik. Çekirdek / Bileşenler / QAPTCHA / -qaptcha.jquery dosyası ile php klasörü

9. Snippet QAPTCHA oluşturun

ve aşağıdaki kodu oraya koyun:

rEGCLIENTCSS (MODX_SITE_URL. "Varlıklar / Bileşenler / QAPTCHA / JQUERY / QAPTCHA.JQUERY.CSS"); $ MODX-\u003e RegClientscript (MODX_SITE_URL. "Varlıklar / Bileşenler / QAPTCHA / JQUERY / JQUERY-UI.JS"); $ MODX-\u003e RegClientscript (MODX_SITE_URL. "Varlıklar / Bileşenler / Qaptha / JQuery / JQuery.ui.touch.js"); $ MODX-\u003e RegClientscript (MODX_SITE_URL. "Varlıklar / Bileşenler / QAPTCHA / JQUERY / QAPTCHA.JQUERY.JS"); $ MODX-\u003e SETPLAYTER ("QAPTCHA.SLIDER", "

"); $ paramqaptcha \u003d dizi (); $ MODX-\u003e GetService (" Lexicon "," modlexicon "); $ MODX-\u003e Lexicon-\u003e Yük (" QAPTCHA: Varsayılan "); $ TXTLock \u003d $ MODX-\u003e Lexicon ( "Yükleyiciyi kilidini açmak için sağa doğru hareket ettirin"); $ txtunlock \u003d $ MODX-\u003e Lexicon ("Gönder" düğmesini tıklayabilirsiniz); eğer (! Boş ($ DisabledSubmit)) $ paramqaptcha \u003d "DisabledSubmit:" $ DisabledSubmit ; $ paramqaptcha \u003d "phpfile: \\" ". Modx_site_url. "Çekirdek / bileşenler / qaptcha / php / qaptcha.jquery.php \\" "; $ paramqaptcha \u003d" txtlock: \\ "". $ Txtlock. "\\" ", $ Paramqaptcha \u003d" txtunlock: \\ "". $ Txtunlock. " \\ "" $ paramqaptcha \u003d impled (",", $ paramqaptcha); $ MODX-\u003e RegclienthtmlLock ("");

Tüm komut dosyaları ve CSS dosyaları hemen ondan bağlanır ve playtyholder denir qaptcha.slider.

10. Capch'i (ve dikkatini gösterme: jquery kütüphanesinin bağlı olduğu, kütüphane olmadan çalışmayacak) ve seviniriz :))

Tüm başarılı işler ve iyi hafta sonu ruh hali!

P.S. Harika bir fikrim var))) "Demo" daki postamı ve betiğin çalışmalarını kontrol etmek için göndereceğin tüm harfleri bana gelecek)) Teşekkürler olarak anekdotları ve komik küçük hikayeleri bekliyorum. senden))

Neredeyse tüm ticari siteler, iletişim formunun, kullanıcıların site yönetimlerinin yazabileceği bir temas noktasına sahiptir. Bugün bir iletişim formu ne kadar hızlı bir şekilde oluşturduğuna bakacağız. Bir paket kullanarak geri bildirim formunu uygulayacağız Formit. Paketi olan bir pakette Ajaxform, Yüklenmemişse onları yükleyin.

MODX REVO'da, 27 Temmuz 2006 tarihli "Kişisel Verilerdeki" Kişisel Verilerde "152-FZ" Kanununa uygun olarak kişisel verilerin işlenmesi için bir izinle bir geri bildirim formu oluşturma.

Formun kendisinin kaydedileceği ilk şey, "KONTACT-FORM" KABUL EDİLDİ, BOTCHTRAP'u kullanarak temel olarak web siteleri yapıyorum, bu yüzden bootstrap kullanarak web siteleri yapıyorum, bu yüzden bir standart alacağım boş bir şekilde dönüştürülmüş, statik kodu öyle olacak:

Kullanıcı Sözleşmesi

Görünüşünüz farklı olacaktır, çünkü formum proje kapsamında stilize edildiğinden, CSS stilleri anlamı görmez.

Burada başka formları görebilirsiniz. getbootstrap.com/css/#forms.

Ve şimdi kodu sözdizimini dikkate alarak dinamiğe dönüştüreceğim Formit. ve Ajaxform, Aşağıdakileri alıyorum.

[[+ fi.error.name]]
[[+ fi.error.email]]
[[+ fi.error.pfone]]
[[+ fi.error.message]]

Bir işaret koyarak, kişisel verilerimin işlenmemesine, 27 Temmuz 2006'daki 152-fz sayılı Kanun uyarınca işlenmemize ve Kullanıcı Sözleşmesinin şartlarını kabul ediyorum.

[[+ Fi.success: \u003d `1 ': o zaman \u003d`
[[+ fi.successMessage]]
`]] [[+ fi.validation_error: \u003d` 1`: o zaman \u003d `
[[+ Fi.validation_error_message]]
`]]

Şimdi bir mektup oluşturacak başka bir chank oluşturuyoruz, aşağıdaki içeriklerle TPL-görevli formu arayalım:

Adı: [[+ İsim]]

E-posta: [[+ e-posta]]

Telefon: [[+ pfone]]

Mesaj: [[+ mesaj]]

İyi, doğru yerde sonuçlandı:

[[[! Ajaxform? & SNIPPET \u003d `Formit` & Form \u003d` KONTACT-FORM "& EMAOCALTPL \u003d` TPL-KONTACT-Form` & HOODS \u003d `Spam, E-posta` & EmailSubject \u003d` Siteden Mesaj [[++ sitesi_url]] `& Emailto \u003d ` [E-posta Korumalı]`& Validate \u003d` İsim: Gerekli, E-posta: Gerekli` ve ValidationErrormessage \u003d `Formda Hatalar Var! & SuccessMessage \u003d` Mesaj başarıyla gönderildi!]]

Değeri değiştirmeyi unutmayın e-posta. postalarında.

Bileşenler Belgeleri:

  1. Formit.docs.modx.com/extras/revo/formit.
  2. Ajaxformdocs.modx.pro/components/ajaxform

Bu temelde!

Spam olmadan MODX'te bir form oluşturmak için, ek görünmeyen alanlarla oluşturmak gerekir:

1. AjaxForm ve Formit bileşenlerini indirin ve yükleyin

2. Form çok basit olarak adlandırılır, çözmelisiniz

[[[! Ajaxform? & snippet \u003d `formit` & form \u003d` tpl.ajaxform..ru `& e-posta ile \u003d` [E-posta Korumalı]site` & validate \u003d `İsim: Gerekli, E-posta: Gerekli, Mesaj: Gerekli, İş-E-posta: Blank` & ValidationErrormessage \u003d` Form Hatalar İçeriyor! 'Ve SuccessMessage \u003d `Uygulama için teşekkürler! Yakın gelecekte sizinle iletişim kuracağız. & EmailTPL \u003d `mafterpl`]

Veya Fenom Shablanizer aracılığıyla, şöyle:

($ _Modx-\u003e RunSnippet ("! " [E-posta Korumalı]"," Emailsubject "\u003d\u003e" Siteden Uygulama Daruse.ru "," Emailto "\u003d\u003e" [E-posta Korumalı]"," Doğrula "\u003d\u003e" Adı: Gerekli, E-posta: Gerekli, Mesaj: Gerekli, İş-E-posta: Boş "," ValidationErtEssage "\u003d\u003e" Formda Hatalar Var! "," SuccessMessage "\u003d\u003e" için teşekkürler uygulama! Yakın gelecekte sizinle irtibata geçeceğiz. "," Emailtpl "\u003d\u003e" MailTpl ",]))

Parametrelerin açıklaması:

  • snippet - Ajaxform işlemek için snippets, formit ayarla - sadece harfleri gönderir
  • form - Chanka Form Tasarımı, varsayılan olandır.
  • kancalar - Spam'a karşı korumak için kancalar
  • e-postaFROM - Mektubun geldiği adres
  • email - mektubun geldiği adres
  • doğrulama - Doğrulama, burada iki görünmez alan da
  • validationErrormessage - Alanların başarılı bir şekilde girilmesiyle çıktı olacak bir mesaj
  • successMessage - Başarılı bir mektup gönderirken görüntülenecek bir mesaj
  • mailTPL - Posta üzerindeki gelen harfin şablonunun saklandığı chank (aşağıda okunur)

3. Bundan sonra, bizim şekil tasarım krizimize gidiyoruz, bu durumda tpl.ajaxform.example ve aşağıdaki iki alan olan form etiketinden sonra ekleyin.

...

Şimdi, iki yeni alan nedeniyle formunuz spam olmamalıdır.

4. Harici gelen harf türü

Varsayılan olarak, harf, çok okunamayan bir formatta herhangi bir biçimlendirme olmadan postaya gelir. Bu nedenle, örnekte küçük bir mektubumuzu birleştirelim.

Mektup şablonu, parametrede belirttiğimiz basit bir chank. emailTplHer şey çok basit, kayıt örneği yazacağım. Sorularsanız, yorumları yazın.

mailtpl:

İnternet üzerinden [[++ Site_URL]] bir uygulama bıraktı.

[[+ Adı: NOTEMBTY \u003d `

Adı: [[+ İsim]]

`]] [[+ e-posta: nispmenty \u003d`

Posta: [[+ e-posta]]

`]] [[+ Mesaj: NOTEMBEMBY \u003d`

Mesaj: [[+ mesaj]]

`]]

Lütfen yakın gelecekte onla iletişime geçin.

Otomatik olduğu için bu mektuba cevap vermeyin.

Yaratmayı ve spam koruması hakkında oku.