Geri bildirim

Adınız

E-posta:

Mesaj Konusu

Bilgi talebi
Teknik Destek
Teklif

Mesaj metni

Bu kodu girin:

Nerede [+doğrulama mesajı+]- Formu gönderirken doldurma hata mesajlarının görüntülenmesinden sorumludur.
action="[~[*id*]~]- snippet'in çağrıldığı sayfanın form işleyicisi olacağını belirtir. [~[*id*]~] yerine MODx geçerli belgenin URL'sini değiştirecektir.
snippet'i çağırırken belirteceğimiz formun kimliğini belirtir.
etiket erişim anahtarı- kısayol tuşlarını kullanarak form öğelerine erişimi ayarlar.
eform="E-posta adresi:e-posta:1"- posta adresinin girileceği alanı tanımlar, girilecek veri türünü belirtir ve bu alanı zorunlu kılar. Genel olarak, bu parametreyi doldurmak için şablon aşağıdaki gibidir: eform="[alan açıklaması]:[giriş verisi türü]:[gerekli alandır]:[giriş hatası mesajı]:[giriş doğrulama kuralı]" . Ancak sadece üç değere ihtiyacımız var. Bu parametreye benzer şekilde eform="Name::1" doldurulur.
[+verimageurl+] captcha'nın görüntülenmesinden sorumludur.

Ziyaretçiye bir mesajın gönderildiğini bildirmek için bir parça oluşturun

Bir parça oluştur teşekkürler

Web sitemizdeki geri bildirim formunu kullandığınız için teşekkür ederiz.

Mesajınız en kısa sürede değerlendirilecek ve cevap verilmesi gerekiyorsa mutlaka tarafınıza ulaşacaktır.

Gönderilen bilgiler:

• Adınız:[+yazar+]


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


• Mesaj metni:[+metin+]

Gönderilmiş mesaj formuyla yığın oluşturma

Bir parça oluştur rapor-tpl ve aşağıdaki kodu içeriğine ekleyin:

Bu mesaj, [+yazar+] adlı bir ziyaretçi tarafından geri bildirim formu kullanılarak gönderilmiştir.

Öncekinde olduğu gibi bu öbekte de kullanıcı tarafından girilen tüm bilgiler [+yazar+] biçimindeki yer tutucular kullanılarak iletilir. Bu durumda, her bir yer tutucunun adı, yığındaki karşılık gelen alanın "ad" özniteliğinin değeriyle geri bildirim formuyla eşleşir (ad="yazar", ad="email" ad="metin").

Geri bildirim formu çağrısıyla bir öbek oluşturun

Adı olan bir öbek oluşturun biçim ve yapıyı oraya koyun:

[!form? &formid=`Gönder` &tpl=`form-tpl` &kime=` [e-posta korumalı],[e-posta korumalı],[e-posta korumalı]` &mailselector=`otdel` &report=`report-tpl` &thankyou=`thank-tpl` &vericode=`1` &subject=`Sitemden mesaj`!]

Nerede &formid=`Gönder`- form-tpl öbeğinde belirttiğimiz form tanımlayıcısı
&tpl=`form-tpl`- geri bildirim formu için şablon
&to=` [e-posta korumalı],[e-posta korumalı],[e-posta korumalı]` - Bilgi göndermek için e-posta adresi
&mailselector=`departman`- parametrede virgülle (,) ayrılmış adres listesinden tek bir adres seçildiğinde kullanılacak form alanını ayarlar &ile. Bizim durumumuzda, bu bir açılır listedir. form-tpl yığınında, nerede departman ziyaretçinin seçtiği konuya göre 1,2 veya 3 değerlerini alır.
&report=`rapor-tpl`- gönderilen bilgi şablonu
&teşekkür=`teşekkür-tpl`- veri gönderildikten sonra görüntülenen mesaj
&vericode=`1`- doğrulama kodunu içerir. Şablon bir doğrulama alanı ve bir [+vericode+] yer tutucu içermelidir.
&subject=`Web sitemden mesaj`- gönderilecek mesajın konusu

Aramayı şablondaki geri bildirim formuna yerleştirme

Bir parça oluştur temaslı, aşağıdaki kodu yerleştirdiğimiz yer:

Bizim adresimiz

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-posta: ххххх@ххххх.ххх

ek ofis

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX



E-posta: ххххх@ххххх.ххх

((biçim))

Kişiler sayfasında, ilgili yığına bir çağrı yaparız:

((temas etmek))

Stilleri Değiştirme

Düğmelerimizin açıklamasını stil dosyasında buluyoruz:

sol kenar boşluğu: 108 piksel;
dolgu: 5 piksel 10 piksel;
arka plan: #cece;
kenarlık: 1 piksel katı #888888;
}

Gönder ve Sıfırla düğmelerine Rusça etiketler eklediğimiz için hareket ettiler. Ayrıca butonun üzerine geldiğinizde imlecin değişmemesi hoşuma gitmedi, bunu düzeltmek istiyorum. Öncelikle, fareyle üzerine gelindiğinde düğmenin renk değiştirmesini sağlayalım. Pekala, captcha'yı sağa kaydıralım. Bu yüzden yukarıda verdiğim stili tarif etmek yerine şunu ekleyeceğiz:

#contact_form formu .submit_btn (
sol kenar boşluğu: 55 piksel; /*Düğmelerin sol dolgusunu değiştir*/
dolgu: 5 piksel 10 piksel;
arka plan: #cece;
kenarlık: 1 piksel katı #888888;
}
#contact_form formu .submit_btn:hover (
sol kenar boşluğu: 55 piksel;
dolgu: 5 piksel 10 piksel;
arka plan: #505050; /*Vurguluyken düğmenin rengini ayarla*/
kenarlık: 1 piksel katı #888888;
renk: #fff; /*Metin rengini değiştir*/
imleç: işaretçi; /*İmleç türünü değiştir*/
}
#contact_form formu img(
dolgu: 0 0 0 90px; /*Kodlu resmi sağa kaydır*/
}

Her şey doğru yapılırsa, form şöyle görünecektir:

Şimdi formu doldurup bir e-posta göndermeye çalışıyoruz. Yerel bir sunucu kullandığımız için, gelen tüm e-postalar klasörde görüntülenebilir. C:\xampp\tmp\sendmail\ . XAMPP'yi kurarken bu klasörü oluşturduğumuzu hatırlıyor musunuz?

Captcha'da oluşturmak için kendi sözcük listenizi ayarlayabilirsiniz, bu sistem yapılandırma sayfasında yapılır. Araçlar >> Yapılandırma >> Kullanıcılar >> CAPTCHA kodları oluşturmak için kelimeler :

Bu, web sitesi tasarımımızın MODx'e entegrasyonunu tamamlar. Sitemizi bir tür barındırmada düzenlemeye devam ediyor. Bunu bir sonraki derste yapacağız.

Bu ders oluşturulurken siteden materyaller kullanılmıştır.

Halihazırda FormIt'te form oluşturmaya ilişkin birkaç dersim var - bu paketin her iki artısı da var: formları yeniden yüklemeden göndermek, mesajın gönderildiğine dair bir açılır pencere var, vb. Peki ve buna göre eksiler: koda bir js ve css dosyası eklenir - bu da hıza eksi verir ve js çıktısı aramada gerekli türü içermez, bu nedenle doğrulayıcıda bir uyarı görünür - html 5'te belirtilmesi gerekmez.

Bu yüzden saf FormIt üzerinde formlar yapmaya karar verdim, bugünkü ders bununla ilgili.

Form için HTML işaretlemesi artık aşağıdaki koda sahiptir:

Özel bir şey yok, tabiri caizse, önyükleme 4'teki işaretlemeyle standart. Sözdizimini dikkate alarak yeniden yapalım ve aynı zamanda fazlalığı atalım, Russify, spam koruması ekleyelim:

[[!FormIt? &hooks=`spam,email` &emailTpl=`email-tpl` &emailTo=`[[++emailsender]]` &emailSubject=`[[++site_url]]'dan e-posta' &validate=`workemail:blank,name:gerekli, email :email:gerekli,message:gerekli:stripTags,telefon:gerekli` &successMessage=`

Teşekkürler, talebiniz gönderildi.

` ]] [[!+fi.successMessage:default=``]]

Kodu ayrıştırma, yukarıdan aşağıya doğru gidin:

&kancalar - kendi kendine yazılanlar da dahil olmak üzere buraya çeşitli kancalar eklenir: bizim durumumuzda 2 standart kanca: yayılma - basit spam koruması ve e-posta - posta kutusuna veri göndermek için zorunludur. Videoda diğer kancalardan yeterince ayrıntılı olarak bahsediyorum.

&emailTpl - harf tasarımlı yığın, aşağıdaki koda sahiptir:

Gönderen: [[+isim]]

Telefon: [[+telefon]]

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

Mesaj: [[+mesaj]]

&emailTo - formların gönderildiği e-posta adresi, bu durumda sistem ayarı (key) ++emailsender belirtilir

&emailSubject - gönderilen e-postanın konusu

&doğrula - doldurulması gereken alanları ve genellikle spam'a karşı koruma sağlamak için alanları belirleriz

&successMessage - başarılı gönderimden sonra mesaj

Form kodunu sökmeyeceğim, ilgilenenler için videoyu izleyin ve belgeleri okuyun: docs.modx.com/extras/revo/formit

Bir forma dosya ekleme

Ek ekleyebilmek ve ek gönderebilmek için form etiketine kaydolmanız gerekir.

Enctype="multipart/form-data"

ve buna göre dosya eki için alanlar ekleyin

Onay kutularını ve seçenekleri işleme

Bir sayfada birden fazla form

Her formun çağrılarına yazmanız yeterlidir

&submitVar=`İngilizce form adı`

her formun kendi adı vardır.

Spam'e karşı mücadele

Beğenin ya da beğenmeyin, ancak spam ile kesinlikle karşılaşacaksınız - onunla başa çıkmanın en etkili yolu - siz de deneyebilirsiniz.

Hemen hemen tüm ticari sitelerin, kullanıcıların site yönetimine yazabilecekleri bir iletişim formu içeren bir iletişim sayfası vardır. Bugün hızlı bir şekilde nasıl iletişim formu oluşturacağımıza bakacağız. Geri bildirim formunu paketi kullanarak uygulayacağız biçim paket ile ilişkili Ajax Formu, yüklü değilse yükleyin.

27 Temmuz 2006 tarihli ve 152-FZ sayılı "Kişisel Verilere Dair Kanun" uyarınca kişisel verilerin işlenmesine izin veren MODX Revo'da geri bildirim formunun oluşturulması.

Her şeyden önce, formun depolanacağı bir yığın oluşturuyoruz, "kontact-form" parçası olsun ve içine standart formun kodunu koyalım, esas olarak önyükleme kullanarak web siteleri yapıyorum, bu yüzden alacağım standart şablon biraz değiştirilmiş, statik kodu şöyle olacaktır:

Görünüşün farklı olacak, formum proje için tasarlandığından, css stillerini düzenlemenin bir anlamı yok.

Diğer formları burada görebilirsiniz getbootstrap.com/css/#forms

Şimdi sözdizimini dikkate alarak kodu dinamik hale getirelim biçim Ve Ajax Formu, aşağıdakileri elde ederiz.

Şimdi bir harf oluşturacak başka bir yığın oluşturalım, buna aşağıdaki içerikle tpl-kontact-form diyelim:

İsim: [[+isim]]

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

Telefon: [[+pfone]]

Mesaj: [[+mesaj]]

Pekala, doğru yerde bir sonuca varmaya başladı:

[[!AjaxFormu? &snippet=`FormIt` &form=`kontact-form` &emailTpl=`tpl-kontact-form` &hooks=`spam,email` &emailSubject=`[[++site_url]] sitesinden mesaj` &emailTo=` [e-posta korumalı]` &validate=`name:required,email:required` &validationErrorMessage=`Form hatalar içeriyor!` &successMessage=`Mesaj başarıyla gönderildi!` ]]

değeri değiştirmeyi unutmayın e-posta postanıza

Bileşen belgeleri:

1. Biçimlendir — docs.modx.com/extras/revo/formit
2. Ajax Formu — docs.modx.pro/components/ajaxform

Temelde bu!

Modx'te spam içermeyen bir form oluşturmak için, onu ek görünmez alanlarla oluşturmanız gerekir:

1. Ajaxform ve Formit Bileşenlerini İndirme ve Yükleme

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

[[!AjaxFormu? &snippet=`FormIt` &form=`tpl.AjaxForm..ru ` &emailTo=`info@site` &validate=`name:required,email:required,message:required,work-email:blank` &validationErrorMessage=`Form hatalar içeriyor !` &successMessage=`Gönderdiğiniz için teşekkürler! Kısa süre içinde sizinle iletişime geçeceğiz.` &emailTpl=`mailtpl` ]]

Veya Fenom şablon motoru aracılığıyla, bunun gibi:

($_modx->runSnippet("!AjaxForm", [ "snippet" => "FormIt", "form" => "tpl.AjaxForm.example", "hooks" => "email,spam" "emailFrom" => " [e-posta korumalı]", "emailSubject" => "Daruse.ru'dan uygulama", "emailTo" => " [e-posta korumalı]", "validate" => "name:required,email:required,message:required,work-email:blank", "validationErrorMessage" => "Form hatalar içeriyor!", "successMessage" => "Gönderdiğiniz için teşekkürler! En kısa zamanda sizinle iletişime geçeceğiz.", "emailTpl" => "mailtpl", ]))

Parametrelerin açıklaması:

• snippet - AjaxForm'u işlemek için snippet, Formit'i ayarlayın - sadece e-posta gönderir
• form - form tasarım öbeği, varsayılan olarak olandır
• kancalar - spam koruma kancaları
• emailFrom - mektubun geldiği adres
• emailTo - mektubun alındığı adres
• valide - doğrulama, ayrıca iki görünmez alan vardır
• validationErrorMessage - alanlar başarıyla girilmezse görüntülenecek mesaj
• SuccessMessage - mesaj başarıyla gönderildiğinde görüntülenecek mesaj
• emailTpl - postaya gelen bir mektubun şablonunu saklayan bir parça (aşağıda okuyun)

3. Daha sonra form tasarım parçamıza gidiyoruz, bu durumda tpl.AjaxForm.example ve form etiketinden sonra aşağıdaki iki alanı ekliyoruz.

Artık iki yeni alan sayesinde spam formunuzdan geçmemelidir.

4. Gelen mektubun görünümü

Varsayılan olarak, çok okunamayan bir biçimde herhangi bir biçimlendirme olmadan postaya bir mektup gelir. Bu nedenle mektubumuzu bir örnekle biraz süsleyelim.

E-posta şablonu, parametrede belirttiğimiz basit bir öbektir. e-postaTpl, burada her şey çok basit, bir tasarım örneği yazacağım. Sorularınız varsa, yorumlara yazın.

mailpl:

Sitede [[++site_url]] bir uygulama bıraktı.

İsim: [[+isim]]