İletişim formu başlığı. PHP'de bir geri bildirim formu oluşturuyoruz. Form verilerini postaya gönderdikten sonra alanları temizleme

1. "jFormer" çevrimiçi formları oluşturmak için eklenti

İletişim formları oluşturun: geri bildirim, yorum yapma, giriş formu, kayıt formu ile girilen bilgilerin doğruluğunu kontrol etme.

2. jQuery kullanarak adım adım kayıt formu

Adım adım doldurma ile temiz bir form. Aşağıda bir form doldurma göstergesi bulunmaktadır.

3. Adım adım form

Formu birkaç adımda doldurmak ve doldurmanın doğruluğunu kontrol etmek.

4. Site için iletişim formu

Bilgi girişinin doğruluğunun doğrulanması, javascript kullanılarak mesaj gönderilmeden önce "anında" gerçekleştirilir.

5. jQuery kullanarak formlar arasında animasyonlu geçiş

Animasyonlu jQuery, site oturum açma, kayıt ve şifre kurtarma alanları arasında geçiş yapar. Demo sayfasında, efekti görmek için sarı bağlantıya tıklayın.

6. PHP ödeme formu

Bir ziyaretçiye herhangi bir sayfadan site sahibiyle hızlı bir şekilde iletişim kurma yeteneği vermek için benzer bir çözüm kullanılabilir. Demo sayfasında, formu dışarı kaydırmak için aşağıdaki oka tıklayın.

7. jQuery ve CSS3 kullanarak PHP kayıt formu

Bilgi girişinin doğruluğunu teyit eden form.

8. PHP Facebook tarzı kayıt formu

CSS, PHP ve jQuery ile uygulanan güzel kayıt formu.

9. jQuery "SheepIt" İletişim Formu

Mesaj göndermeden önce yeni alanlar ekleme özelliği uygulandı.

10. İletişim formu "Fantezi AJAX İletişim Formu"

Girilen bilgilerin doğrulanması ile güzel temiz PHP geri bildirim formu. Teknolojiler: CSS, PHP, jQuery.

11. Sitede yetkilendirme / kayıt sistemi

12. Veri gönderme formu

Doldurmanın doğruluğunu kontrol etmek.

13. jQuery "İletişim kurulabilir" eklentisi

Hızlı bir şekilde mesaj göndermek için bir ödeme formu uygulamak.

Uygulamada en sık yapılan görevlerden biri geri bildirim formunun uygulanmasıdır. HTML kodunu yazarsınız, CSS ile süslersiniz, kullanıcıdan gelen verileri işleyecek ve mailimize gönderecek bir PHP betiği yaratırsınız, giriş verilerinin yeterliliğini kontrol edecek bir JS betiği yazarsınız, bizi korursunuz. spam'den beyin fırtınası, böylece posta kutumuz bot saldırılarından çökmedi.

Yukarıdaki noktaların tümü incelememizde dikkate alınacak ve ayrıntılı olarak yorumlanacaktır.

Öyleyse bir geri bildirim formu oluşturmaya başlayalım:

HTML

Öncelikle HTML kodu yazıyoruz, kullanıcının dolduracağı alanları belirliyoruz. Ayrıca gelecekte resmiyet kazanacaklar. Form kodu şöyle görünür:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >İsim: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Telefon: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-posta: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >İleti: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "göndermek" />

Ve görsel olarak şimdi şöyle görünüyor:

Katılıyorum, şimdiye kadar her şey çirkin ve hiçbir şey net değil, ama daha yeni başladık.

Yukarıdaki kodu ayrıntılı olarak düşünün:

• < form method= "post" action= "mail.php" > …

  
  form oluşturmak için form etiketini kullanmanız gerekir. Kod yorumlayıcısı için formun başlangıcını ve sonunu belirleyen kişidir. Herhangi bir etiket gibi, bir dizi özniteliğe sahiptir, ancak formun çalışması için yalnızca iki tane gereklidir, bunlar yöntem (sunucuya istek gönderme yöntemi, formları standart olarak kullandıkları için) ve eylem ( formun dosya işleyicisinin yolunu belirtir, tam olarak bu dosyada PHP'de bir komut dosyası içerecek ve daha sonra kullanıcı tarafından girilen değerleri postamıza gönderecek, bizim durumumuzda bu dosyanın posta olarak adlandırıldığını görüyoruz. .php ve düşündüğümüz sayfayla sitenin aynı dizininde bulunuyor).

• < input maxlength= "30" type= "text" name= "name" />

  
  Ardından, girdilerimiz var. Bunlar, kullanıcıların ihtiyacımız olan bilgileri gireceği asıl form alanlarıdır (type = "text" bunun metin olacağını belirtir). maxlength niteliği, bir kullanıcının belirli bir form alanına kaç karakter girebileceğini belirtir. En önemli özellik isimdir - belirli bir alanın adını belirtir. PHP betiği gelecekte bu isimlerle girilen bilgileri işleyecektir. İsterseniz, imleç içine yerleştirildiğinde kaybolan alanın içindeki metni görüntüleyen yer tutucu niteliğini de ayarlayabilirsiniz. Yer tutucuyla ilgili sorunlardan biri, bazı eski tarayıcılar tarafından desteklenmemesidir.

• < label for = "name" >İsim:

  
  Yer tutucuları terk etmemiz durumunda kullanılır. Bir alanın olağan imzası olan for özelliği, bu imzanın hangi alana ait olduğunu söyler. Değer, ilgilenilen alanın adını belirtir.

• < textarea rows= "7" cols= "50" name= "message" >

  
  Tıpkı girişin kullanıcının bilgi girmesine yönelik olması gibi, ancak bu sefer uzun mesajlar için alan keskinleştirilmiştir. Satırlar, satırlardaki alanın boyutunu, sütunlar ise karakter cinsinden gösterir. Genelde kutumuzun yüksekliğini ve genişliğini onlar belirler.

• < input type= "submit" value= "göndermek" />

  
  Type = "submit" bize bunun bir form göndermek için bir düğme olduğunu söyler ve value bu düğmenin içinde olacak metni belirler.

• < div class = "right" >

  
  sadece formun daha fazla görsel tasarımı için kullanılır.

CSS

Geri bildirim formumuzun prezentabl görünmesi için düzenlemeniz gerekir. Aşağıdaki sonucu elde etmek için:

Bu kodu kullandık:

form (arka plan: # f4f5f7; dolgu: 20px;) form. sol, biçim. sağ (ekran: satır içi blok; dikey hizalama: üst; genişlik: 458 piksel;) form. sağ (dolgu- sol: 20 piksel;) etiket (ekran: blok; yazı tipi boyutu: 18 piksel; metin hizalama: merkez; kenar boşluğu: 10 piksel 0 piksel 0 piksel 0 piksel;) giriş, metin alanı (kenarlık: 1 piksel katı # 82858D; dolgu: 10 piksel; yazı tipi boyutu: 16 piksel; genişlik: 436 piksel;) metin alanı (yükseklik: 98 piksel; kenar boşluğu- alt: 32 piksel;) giriş [tür = "gönder"] (genişlik: 200 piksel; kayan nokta: sağ; kenarlık: yok; arka plan: # 595B5F; renk: #fff; metin- dönüştürme: büyük harf;)

CSS'yi ayrıntılı olarak tanımlamanın bir anlamı yok, dikkatinizi sadece kilit noktalara çekeceğim:

1. Formdaki her etiket için bir tasarım yazmamalısınız. Seçicilerinizi, ihtiyacınız olan tüm öğeleri birkaç satır kodla biçimlendirebilecek şekilde oluşturmaya çalışın.
2. Satır sonları ve girintiler için türe göre fazladan etiket kullanmayın < br>, < p> ve benzeri, CSS, display:block özelliği ve dolgulu kenar boşluğu ile harika bir iş çıkarır. Neden kullanmama konusunda daha fazla < br> düzende, genellikle makaledeki br etiketini okuyabilirsiniz, ancak gerçekten gerekli mi? ...
3. Tablo biçimindeki düzenleri kullanmayın. Bu, bu etiketin semantiğine aykırıdır ve arama motorları semantik kodu sever. Belgenin görsel yapısını oluşturmak için sadece div etiketlerine ve bunlar tarafından ayarlanan display: inline-block (blokları arka arkaya düzenler) ve vertical-align: top (bunların ekrana dağılmasını engeller) özelliklerine ihtiyacımız var. CSS'de, onlara gerekli yüksekliği ve voila'yı ayarlayın, gereksiz bir şey yok ve her şey ihtiyacımız olan şekilde yerleştirilmiş.

Web sitesi tasarımında zaman kazanmak isteyenler için web siteleri oluştururken özellikle de kendi yazdığım sitelerde CSS çerçevelerini kullanmalarını tavsiye edebilirim. Bu plan için tercihim Twitter Bootstrap. Bunu kullanarak form tasarlama hakkında bir ders izleyebilirsiniz.

PHP

Pekala, şimdi formumuzu çalışır hale getirme zamanı.

Sitemizin kök dizinine gidiyoruz ve orada daha önce form etiketinin action özelliğinde yolu belirttiğimiz bir mail.php dosyası oluşturuyoruz.

Sonuçta, kodu şöyle görünecek:

\ "javascript: history.back () \"> Geri dön

Bu belgenin HTML ve CSS bölümünün tartışması atlanabilir. Özünde, bu, sitenin istediğiniz ve ihtiyacınıza göre tasarlayabileceğiniz sıradan bir sayfasıdır. En önemli kısmını ele alalım - formu işlemek için PHP betiği:

$ geri = "

\ "javascript: history.back () \"> Geri dön

Bu satır ile bir önceki sayfaya dönmek için bir link oluşturuyoruz. Kullanıcının bu sayfaya hangi sayfadan ulaşacağını önceden bilmediğimiz için bu işlem küçük bir JS işlevi kullanılarak yapılır. Gelecekte, ihtiyacımız olan yerlerde görüntülemek için bu değişkene başvuracağız.

if (! boş ($ _POST ["isim"]) ve! boş ($ _POST ["telefon"]) ve! boş ($ _POST ["posta"]) ve! boş ($ _POST ["mesaj"])) ( // işleyicinin iç kısmı) başka (yankı "Mesajınızı göndermek için lütfen tüm alanları doldurunuz! $ Geri"; çıkış; )

Burada, alanların doluluğu için formun kontrolünü ekliyoruz. Tahmin edebileceğiniz gibi $ _POST ["name"] kısmında, girdilerimizin name özniteliğinin değerini tırnak içinde yazıyoruz.

Tüm alanlar doldurulursa, kod kendi iç kısmındaki verileri işlemeye başlar, en az bir alan doldurulmamışsa, kullanıcının ekranında tüm alanları doldurma isteği ile bir mesaj görüntülenir. formun yankısı "Mesaj göndermek için tüm alanları doldurun! $ Geri" ve ilk satırda oluşturduğumuz önceki sayfaya dönmek için bir bağlantı.

Ardından form işleyicisinin iç kısmına şunu ekleriz:

$ isim = trim (strip_tags ($ _POST ["isim"])); $ telefon = trim (strip_tags ($ _POST ["telefon"])); $ mail = trim (strip_tags ($ _POST ["mail"])); $ mesaj = trim (strip_tags ($ _POST ["mesaj"]));

Böylece kullanıcı girişini html etiketlerinden ve fazladan boşluklardan temizledik. Bu, bize gönderilen mesajlarda kötü niyetli kodlar almaktan kendimizi korumamızı sağlar.

Kontroller karmaşık olabilir, ancak bu zaten sizin isteğinize bağlıdır. Sunucu tarafında zaten minimum korumayı kurduk. Ayrıca istemci tarafında JS kullanarak yapacağız.

Sunucu tarafında form korumasının JS lehine tamamen terk edilmesini önermiyorum, çünkü son derece nadir olmasına rağmen, tarayıcıda JS'nin devre dışı bırakıldığı benzersiz olanlar var.

Etiketleri temizledikten sonra bir mesaj göndererek ekleyin:

posta ( "[email protected]", "site_adresinizden gelen mektup", "Sana yazdım:" $ adı. "
Numarası ".$ Telefon."
Maili: ".$ Mail. "
Mesajı: "... $ mesajı, "İçerik türü: metin / html; karakter kümesi = windows-1251") ;

Bize bir mesajın oluşumu ve gönderilmesiyle uğraşan bu çizgidir. Aşağıdaki gibi doldurulur:

1. "[email protected]" - postanızı buraya tırnak işaretleri arasına ekleyin
2. "Site_adresinizden gelen mektup" maile gelecek olan mesajın konusudur. Buraya her şeyi yazabilirsiniz.
3. "Sana yazdım:". $ İsim. " < br /> Numarası ".$ Telefon." < br /> Postası: ".$ Posta." < br /> Mesajı: ". $ Mesaj - mesajın metnini biz oluşturuyoruz. $ İsim - kullanıcı tarafından doldurulan bilgileri önceki adımdaki alanlara atıfta bulunarak giriyoruz, tırnak işaretleri içinde bu alanın ne anlama geldiğini açıklıyoruz, etiket < br /> mesajın bir bütün olarak okunabilmesi için bir satır sonu yaparız.
4. İçerik türü: metin / html; karakter kümesi = windows-1251 - sonunda mesajda iletilen veri türünün ve kodlamasının açık bir göstergesi vardır.

ÖNEMLİ!

Belgenin "başlığında" belirtilen kodlama ( < meta http- equiv= "Content-Type" content= "metin / html; karakter kümesi = windows-1251" /> ), Content-type: text / html; charset = windows-1251 mesajından gelen kodlama ve genel olarak PHP dosyasının kodlaması eşleşmelidir, aksi takdirde posta ile alınan mesajlar Rusça veya İngilizce yerine "krakozyabry" görüntüleyecektir. Edebiyat.

Birçoğu, gönderilen mesajın kodlamasını açıkça belirtmez, ancak bazı posta istemcilerinde bu, gelecekte sorunlara neden olabilir (postaya okunamayan mektuplar gelir), bu yüzden hepsini aynı şekilde belirtmenizi öneririm.

Girilen verilerin yeterliliği için formun kontrol edilmesi

Kullanıcıların dikkatsizce alanları kaçırmaması ve her şeyi doğru doldurması için girilen verileri kontrol etmeye değer.

Bu hem sunucu tarafında PHP'de hem de istemci tarafında JS'de yapılabilir. İkinci seçeneği kullanıyorum, çünkü bu şekilde bir kişi yanlış yaptığını hemen bulabilir ve sayfalar arasında ek geçişler yapmadan hatayı düzeltebilir.

Komut dosyası kodunu, formun HTML bölümünün bulunduğu dosyaya ekleyin. Bizim durumumuz için şöyle görünecek:

< script>function checkForm (form) (var adı = form. ad. değer; var n = ad. eşleşme (/ ^ [A- Za- zA- Ya- z] * [A- Za- zA- Ya- z]] + $ / ); if (! n) (uyarı ( "İsim yanlış girildi, lütfen hatayı düzeltin."); yanlış döndür; ) var phone = form. telefon. değer; var p = telefon. eşleşme (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); if (! p) (uyarı ( "Telefon yanlış girildi"); yanlış döndür; ) var mail = form. posta. değer; var m = posta. maç (/ ^ [A- Za- z0- 9] [A- Za- z0- 9 \. _-] * [A- Za- z0- 9 _] * @ ([A- Za- z0- 9] + ([A- Za- z0- 9 -] * [A- Za- z0- 9] +) * \.) + [A- Za- z] + $ /); if (! m) (uyarı ( "E-posta yanlış girildi, lütfen hatayı düzeltin"); yanlış döndür; ) true döndür; )

Eh, şimdi olağan ayrıştırma:

İçin, böylece formun gönder düğmesine tıkladığınızda, kontrol ettik betiğimizin lansmanını form etiketine asıyoruz:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Şimdi, nokta nokta, çekin kompozisyonunu alıyoruz:

Görüldüğü gibi her bir alanımız için böyle bir mini çek yazılıyor. Ekran görüntüsünde bir alan için kontrolü kırmızı bir kare ile vurguladım, diğer alanlar için benzer bir yapıya sahip ve bir alan eklemeniz veya çıkarmanız gerekiyorsa artık kolayca yapabilirsiniz.

Geri bildirim formu veya başka bir deyişle, herhangi bir sitenin en önemli unsurlarından biridir. Ve elbette, kullanıcı arayüzünün diğer tüm öğeleri gibi, kullanıcıların dikkatini çekmek ve iletişimi teşvik etmek için iletişim bir şekilde harici olarak tasarlanmalı ve dekore edilmelidir.
Tasarımda ek resimler kullanmadan, yalnızca 3 aracılığıyla geri bildirim formlarının stilleri için birkaç seçenek sunuyorum. Daha fazlası değil, sadece açık ve koyu renklerde yapılan iletişim formları için kısa kod parçacıkları (parçacıklar).

1. Koyu renklerde iletişim formu

Sayfanın ana arka planının rengine bağlı olarak, formun arka planının temel rengi görsel olarak değişecektir. Formun boyutu, formun yerleştirileceği kabın boyutuna bağlıdır.

Html form çerçevesi standarttır, gerekli giriş alanları ve CSS ile bağlantı kurmak için "Gönder" düğmesi, formun her bir öğesine belirli bir sınıf atanır, karmaşık bir şey yoktur, anlaşılması zor olmayacaktır.

CSS

Özellikle stiller açısından hiçbir şey boyamayacağım, sadece bir şeyi not edeceğim, tasarımda bazı CSS3 özellikleri, doğrusal bir gradyan, bir gölge efekti, biraz yuvarlatılmış köşeler vb. Kullandım, biraz çapraz tarayıcı elde etmeye çalıştım. bu özellikler için uyumluluk, ancak tarayıcıların eski sürümlerinde, form biraz farklı görünecektir ((.

/ * Formun temel stili * / form (kenar boşluğu: 0 otomatik; maksimum genişlik: %95; dolgu: 30px 30px 6px 30px; kenarlık: 1px katı rgba (0,0,0, .2); -moz-border -yarıçap: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; arka plan: rgba ( 0, 0, 0, 0.5); -moz-box-shadow: 0 0 13px 3px rgba (0,0,0, .5); -webkit-box-shadow: 0 0 13px 3px rgba (0,0 ,0, .5)); kutu gölgesi: 0 0 13px 3px rgba (0,0,0, .5); taşma: gizli;) / * Mesaj alanı * / textarea (arka plan: rgba (255, 255, 255, 0.4); genişlik: %100; yükseklik: 110 piksel; kenarlık: 1 piksel katı rgba (255,255,255, .6); -moz-border-yarıçapı: 4 piksel; -webkit-border-yarıçapı: 4 piksel; sınır yarıçapı: 4 piksel; -moz -arka plan -klip: dolgu; -webkit-arka plan-klip: dolgu kutusu; arka plan klibi: dolgu kutusu; ekran: blok; yazı tipi ailesi: "Açık Sans", sans-serif; yazı tipi boyutu: 18 piksel; yazı tipi -ağırlık : 300; renk: #fff; sol dolgu: 25 piksel; sağ dolgu: 20 piksel; üst dolgu: 12 piksel; kenar boşluğu : 20 piksel; taşma: gizli; ) / * Giriş alanları * / giriş (genişlik: %100; yükseklik: 48 piksel; kenarlık: 1 piksel katı rgba (255,255,255, .4); -moz-border-yarıçap: 4 piksel; -webkit-border-yarıçap: 4 piksel; border- yarıçap: 4 piksel; -moz-arka plan-klip: dolgu; -webkit-arka plan-klip: dolgu kutusu; arka plan klibi: dolgu kutusu; ekran: blok; yazı tipi ailesi: "Açık Sans", sans-serif; yazı tipi -size: 18px; yazı tipi-ağırlığı: 300; color: #fff; sol dolgu: 20px; sağ dolgu: 20px; kenar boşluğu: 20px;) girdi (imleç: işaretçi;) girdi.adı (arka plan: rgba ( 255, 255, 255, 0.4); sol doldurma: 25 piksel;) input.email (arka plan: rgba (255, 255, 255, 0.4); sol doldurma: 25 piksel;) input.message (arka plan: rgba (255, 255, 255, 0.4); sol dolgu: 25px;) :: - webkit-input-yer tutucu (renk: #fff;): -moz-yer tutucu (renk: #fff;) :: - moz-yer tutucu (renk: #fff;): -ms-input-yer tutucu (renk: #fff;) giriş: odak, metin alanı: odak (arka plan rengi: rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 0 5px 1px rgba (255,255,255, .5); -webkit-box-shadow: 0 0 5px 1px rgba (255,255,255, .5); kutu gölgesi: 0 0 5px 1px rgba (255,255,255, .5); taşma: gizli; ) / * Gönder düğmesi için stiller * / .btn (genişlik: 138 piksel; yükseklik: 44 piksel; -moz-border-yarıçapı: 4 piksel; -webkit-border-yarıçapı: 4 piksel; kenarlık yarıçapı: 4 piksel; kayan nokta: sağ; kenarlık : 1 piksel katı # 253737; arka plan: # 416b68; arka plan: -webkit-gradient (doğrusal, sol üst, sol alt, (# 6da5a3) ile (# 416b68) arası); arka plan: -webkit-doğrusal-gradyan (üst, # 6da5a3, # 416b68); arka plan: -moz-doğrusal-gradyan (üst, # 6da5a3, # 416b68); arka plan: -ms-doğrusal-gradyan (üst, # 6da5a3, # 416b68); arka plan: -o-doğrusal- gradyan (üst, # 6da5a3, # 416b68); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, # 6da5a3 %0, # 416b68 %100); dolgu: 10. 5 piksel 21 piksel; -webkit-border-radius: 6px; -moz-border-radius: 6px; sınır yarıçapı: 6 piksel; -webkit-box-shadow: rgba (255,255,255,0.1) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba (255,255,255,0.1) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; kutu gölgesi: rgba (255,255,255,0.1) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; metin gölgesi: # 333333 0 1px 0; renk: # e1e1e1; ) .btn: vurgulu (kenarlık: 1 piksel katı # 253737; metin gölgesi: # 333333 0 1 piksel 0; arka plan: # 416b68; arka plan: -webkit-gradyan (doğrusal, sol üst, sol alt, (# 77b2b0) ile (# 416b68)); arka plan: -webkit-doğrusal-gradyan (üst, # 77b2b0, # 416b68); arka plan: -moz-doğrusal-gradyan (üst, # 77b2b0, # 416b68); arka plan: -ms-doğrusal-gradyan (üst, # 77b2b0, # 416b68); arka plan: -o-doğrusal-gradyan (üst, # 77b2b0, # 416b68); arka plan görüntüsü: -ms-doğrusal-gradyan (üst, # 77b2b0 %0, # 416b68 %100 ); color: #fff;) .btn: etkin (kenar boşluğu: 1 piksel; metin gölgesi: # 333333 0 -1 piksel 0; kenarlık: 1 piksel katı # 333333; arka plan: # ffCC00; arka plan: -webkit-gradyan (doğrusal) , sol üst, sol alt, (# ffCC00) ile (# ff6600) arası); arka plan: -webkit-doğrusal-gradyan (üst, # ffcc00, # ff6600); arka plan: -moz-doğrusal-gradyan (üst, # ffcc00, # ff6600); arka plan: -ms-doğrusal-gradyan (üst, # ffcc00, # ff6600); arka plan: -o-doğrusal-gradyan (üst, # ffcc00, # ff6600); arka plan görüntüsü: -ms-doğrusal -gradyan (üst, # ffcc00 %0, #ff 6600 %100); renk: #fff; -webkit-box-shadow: rgba (255,255,255,0) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; -moz-box-shadow: rgba (255,255,255,0) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; kutu gölgesi: rgba (255,255,255,0) 0 1px 0, ek rgba (255,255,255,0.7) 0 1px 0; anahat: yok; )

Belki bu ilginizi çeker:

2. Açık renklerde iletişim formu

Geri bildirim formunun tasarımının ikinci versiyonu açık renklerde sunulur, formun boyutları (genişlik, yükseklik) ilk versiyonda olduğu gibi sabit değildir ve bu formun bulunduğu kabın boyutlarına kolayca sığacaktır. yer alacak.

HTML

İlk versiyonda olduğu gibi, iletişim formunun Html yapısı standarttır, CSS'deki sınıflara karşılık gelen belirli sınıflara sahip form elemanları.

CSS

Formların ve iç elemanların temel boyutlarını oluştururken, formun yerleştirileceği kabın boyutuna kolayca uyum sağlaması nedeniyle genişlik için yüzde değerleri kullandım. "Gönder" düğmesinin renk şeması, boyutu ve konumu kolayca değiştirilebilir, belirli değerlerle deneme yapmak yeterlidir.

/ * Temel form stilleri * / form (kenar boşluğu: 0 otomatik; maksimum genişlik: %95; kutu boyutlandırma: kenarlık kutusu; dolgu: 40 piksel; kenarlık yarıçapı: 5 piksel; arka plan: RGBA (255,255,255,1); -webkit -box-shadow: 0px 0px 15px 0px rgba (0, 0, 0, .45); box-shadow: 0px 0px 15px 0px rgba (0, 0, 0, .45);) / * Giriş alanı stilleri * /. metin kutusu (yükseklik: 50 piksel; genişlik: %100; sınır yarıçapı: 3 piksel; kenarlık: rgba (0,0,0, .3) 2 piksel katı; kutu boyutlandırma: kenar kutusu; yazı tipi ailesi: "Açık Sans", sans-serif; yazı tipi boyutu: 18 piksel; dolgu: 10 piksel; kenar boşluğu: 30 piksel;) .message: odak, .textbox: odak (anahat: yok; kenarlık: rgba (24,149,215,1) 2 piksel düz; renk: rgba ( 24,149,215,1));) / * Metin kutusu stilleri * / .message (arka plan: rgba (255, 255, 255, 0.4); genişlik: %100; yükseklik: 120 piksel; kenarlık: rgba (0,0,0, .3) 2 piksel katı; kutu boyutu: sınır kutusu; -moz-border-yarıçapı: 3 piksel; yazı tipi boyutu: 18 piksel; yazı tipi ailesi: "Açık Sans", sans-serif; -webkit-border-yarıçapı: 3 piksel; sınır - yarıçap: 3 piksel; görüntü: blok; dolgu: 10 piksel; kenar boşluğu: 30 piksel; taşma: gizli;) / * Temel kitap stilleri opki * / .düğmesi (yükseklik: 50 piksel; genişlik: %100; sınır yarıçapı: 3 piksel; kenarlık: rgba (0,0,0, .3) 0 piksel katı; kutu boyutlandırma: kenarlık kutusu; dolgu: 10 piksel; arka plan: # 90c843; renk: #FFF; yazı tipi ailesi: "Açık Sans", sans-serif; yazı tipi ağırlığı: 400; yazı tipi boyutu: 16pt; geçiş: arka plan .4s; imleç: işaretçi; ) / * Üzerine gelindiğinde düğmenin arka planını değiştirin * / .button: üzerine gelin (arka plan: # 80b438;)

İletişim formları için birçok tasarım seçeneği var, asıl şey biraz hayal gücü ve temel CSS bilgisine sahip olmaktır. Blogumun sayfalarında, diğerlerini ve geri bildirim formlarının stilinin örneklerini bulabilirsiniz.
Özellikle dikkatsiz olanlar için, on beşinci kez açıklığa kavuşturmak istiyorum: makalede sunulan formlar yalnızca bir dış kabuktur, böylece formlar gerçekten işlevlerini yerine getirir, onlara bir komut dosyası işleyicisi eklemeniz gerekir. İnternete dağılmış, bu yüzden ikna edici lütfen formların çalışmadığı vb. Yorumları yazmayın, her şey yolunda gidiyor, sadece neyi, nerede ve neden anlamanız gerekiyor))).

Tüm saygımla, Andrew.

Yazardan: sizi selamlıyorum arkadaşlar. Bu makale, sayfayı yeniden yüklemeden sunucuya form verisi göndermeyi uyguladığımız bir devamı olacaktır. Burada bu konuya devam edeceğiz ve sunucudaki verileri nasıl kabul edeceğimizi ve formu e-postaya (e-posta) göndermeyi nasıl uygulayacağımızı öğreneceğiz. Öyleyse geri bildirim formunu özelleştirelim ve e-postaya gönderme özelliğini ekleyelim.

Güncel makalenin kaynak dosyalarını adresinden indirebilirsiniz.

Bu derste her şeyi olabildiğince basit ve kendi başımıza yapacağız. Özellikle, e-posta göndermek için, geçmişte e-posta göndermek için sıklıkla kullanılan mail () adlı özel bir PHP işlevi kullanacağız.

Posta işlevinin sözdizimi ile başlayalım. Bu işlevin üç gerekli parametresi ve iki isteğe bağlı (isteğe bağlı) parametresi vardır. Gerekli parametreler:

alıcının e-posta adresi (virgülle ayırarak listeleyerek birkaç adres de belirtebilirsiniz);

konu - mektubun konusu;

mesaj - mektubun metni.

İsteğe bağlı parametrelerden, mesaj başlıklarından sorumlu olan hemen hemen her zaman yalnızca ilki kullanılır: kodlama, gönderen, mesaj türü vb.

Bu işlevi kullanarak bir e-posta göndermeyi deneyelim. Bunu formdan veri aldığımız mail.php dosyasında yapacağız. Bu dosyanın yeni kodu şu şekilde olacaktır:

Mesajınız gönderildi

Hata!

Bu, zaten göndermek için bir mesaj oluşturmanıza izin verecek minimum koddur. Nasıl çalıştığını kontrol edelim:

Gördüğünüz gibi, kod çalışıyor, yanıt olarak mektubun gönderildiğine dair bir mesaj alıyoruz. Yerel bir sunucu üzerinde çalıştığımız için burada mektuplar aslında mail() işlevi tarafından gönderilmez, metin dosyası olarak özel bir klasöre kaydedilir. Open Server'da bu, \ userdata \ temp \ email \ klasörüdür. Bu klasörü açalım ve mektubun orada olduğundan emin olalım, bunun gibi bir şey görünecek:

İyi! JS betiğinde düzeltilmesinden zarar görmemesi gereken birkaç şey kaldı. Örneğin, bir mesajı düz metin olarak değil, HTML kodunda görüntülemeniz ve ayrıca mesajı gönderdikten sonra form alanlarını temizlemeniz gerekir. Ortaya çıkan JS kodu şöyle olacaktır:

$ (işlev () ($ ("# geri çağırma"). gönder (işlev (e) (e.preventDefault (); var data = $ (bu) .serialize (); $ .ajax ((url: "mail.php) ", yazın:" POST ", veri: veri, önceGönder: işlev () ($ (" # gönder "). sonraki (). metin (" Gönderiliyor ... ");), başarı: işlev (res) ($ ("#recall"). find ("giriş"). val (""); $ ("# gönder"). sonraki (). html (res);), hata: işlev () (uyarı ("Hata! ");)));)));)));