Ajax Tabanlı HTML5 / CSS3 İletişim Formu Nasıl Oluşturulur

 
 
  
E-postan gönderildi. Hurra!
  

  
Form gönderilirken hata oluştu
  
 
 isim   
  
 
 E-posta   
  
 
 Mesaj <?php if(isset($_POST['comments']))  if(function_exists('stripslashes'))  echo stripslashes($_POST['comments']);  else  echo $_POST['comments'];   ?>  
  
 Bize mail gönder!  
 
  

Başka bir tane olduğunu fark etmiş olabilirsin. koşullu blok doğrudan başlangıç ​​formundan sonra. Bu adlı bir değişkeni kontrol eder. $ hasError ve onaylandıktan sonra bir hata mesajı gösterecektir. Bu geri dönüş yöntemi sadece JavaScript devre dışı bırakılmışsa kullanılır tarayıcıda ve dolayısıyla dinamik hatalar üretemez.

Bütün yol boyunca bulabiliriz bireysel PHP değişkenleri kontrol ediliyor. Form, doldurulmuş olan verilerin yalnızca kısmi miktarlarda sunulup sunulmadığını düzenlemektedir. Bu, daha önce doldurulmuş alanların içeriğini gösteren başka bir geri dönüş sistemidir - uygun kullanıcı deneyimi için güzel bir numara!

Doğrudan formumuzu tamamladıktan sonra birkaç jQuery işlevleri biz yazdık. Bunları ilk olarak konuşacağız, çünkü bunlar pageload'daki varsayılan uygulama. Ancak tarayıcı JavaScript'i kabul etmiyorsa, varsayılan olarak PHP kodumuza güvenebiliriz..

JQuery'ye açılıyor

Bu konuyla ilgili konuşmaya başlamanın en kolay yolu hemen içine dalmak olacaktır. Tek tek satırları satır satır parçalayacağım, böylece komut dosyasının gerçekte neyi kontrol ettiğini görebilirsiniz.

Ancak sadece kaybolursanız proje kodu dosyalarını inceleyin. Tüm bloklar önceden yazılmış ve jQuery web sitesinde iyi belgelenmiştir. Başlamak için kodumuzu diğerlerine benzer şekilde açıyoruz:

Eğer aşina iseniz geri aramaları fark edebilirsiniz Mesaj () fonksiyonun yerleşik bir parametre seti vardır. Geri aramalar, çağrılan daha küçük fonksiyonlardır. başka bir fonksiyondan gelen verilerin tepkisi üzerine.

Mesela ne zaman bizim jQuery.post () fonksiyonu başarıyla bir e-posta çeker, kayan animasyonu görüntülemek için kendi dahili işlevini çağırır. Bu kodun tümü kendi bloğuna yazılabilir ve başka bir yere taşınabilir. Ancak bu eğitimin iyiliği için geri aramayı satır içi işlev olarak yazmak çok daha kolay.

PHP'yi geçmek

Bahsetmek için son engel mantık PHP işlemcimizin arkasında. Bu aslında olacak arka uç sistemi bir posta işlevini çağırın ve mesajı gönder. Aşağıdaki örneklerde kullanılan kodların tümü doğrudan ana bölümümüzün üst kısmında bulunabilir. .php Herhangi bir HTML çıktısından önce dosya.

Sayfayı tazeleyen birkaç iç stil de var. Burada özellikle yeni olan hiçbir şey yok, bu yüzden hiçbir ayrıntıya girmeyeceğiz. Ancak styles.css belge proje koduna dahil edilmiştir ve ilkel CSS3 tekniklerini içerir.

 
Başlamak için PHP yan tümcesini açıp eğer form bile gönderilmişse.  POST değişken “gönderilen” aslında formumuzun sonuna eklenen gizli bir giriş alanıydı. Bu yararlı bir yol Kullanıcının herhangi bir şey gönderdiğini kontrol edin henüz sunucu kaynaklarını israf etmiyoruz.
 
Bundan sonra 3 ayrı var / Else if görmek için kontrol deyimi Her giriş alanı doldurulmuşsa. Her biri mantık bitini eklemeyeceğim çünkü hepsi doğada çok tekrarlı. Bununla birlikte, size kısa bir örnek vermek için, aşağıdaki e-posta doğrulama maddesini ekledim:
 
// geçerli bir e-postaya ihtiyacınız varsa (trim ($ _ POST ['email']) === ") $ emailError = 'E-posta adresinizi girmeyi unuttum.'; $ hasError = true; else eğer (! preg_match ("/^CLICH: alnum: ccINANALİPANİ-z0-9_.- bölge*@Appa-z0-9.-.com+\. _POST ['email']))) $ emailError = 'Geçersiz bir e-posta adresi girdiniz.'; $ HasError = true; else $ email = trim ($ _ POST ['email']); 
 
PHP tüm boşlukları değerden kesecek ve kalan bir şey olup olmadığını kontrol edecek. Eğer öyleyse ayrıntılı Düzenli İfade (Regex) Kullanıcının giriş dizesinin bir e-posta düzeniyle eşleşip eşleşmediğini görmek için.
 
Kesinlikle nasıl olduğunu anlamana gerek yok. preg_match () Bu betiği oluşturmak için çalışır. Bu yararlı bir fonksiyondur başarılı bir veri türü için kuralları ve gereksinimleri belirlemek, fakat ileri düzey programlama bilgisini gerçekten kavramasını sağlar. Bu senaryoda, kullanıcının yalnızca seçili birkaç karakter girmesini sağlıyoruz; @ ardından gelen sembol 2-4 karakter temsil eden Üst düzey alan.
 
Tüm mantık geçtikten ve hiçbir hata döndürmeden sonra mesajımızı gönderme zamanı! Bu kod parçası e-posta mesajımızı kişiselleştirmek ve bazı ayarları ayarlamak için bireysel değişkenleri ayarlayacaktır. posta başlıkları süreç için.
 
// başarısızlık hatası olmadan şimdi e-posta gönderelim! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Gönderilen mesaj'. $ isim; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "İsim: $ isim \ n \ nE-posta: $ email \ n \ nBilgi: $ yorum"; $ headers = 'Kimden:'. ' <'.$emailTo.'>'. "\ r \ n" 'Yanıtla:'. $ Eposta; posta ($ emailTo, $ konu, $ body, $ başlık); // Boole tamamlama değerimizi TRUE $ emailSent = true;  
 
Kodun e-posta adresinizi nasıl çözeceğini merak ediyorsanız, doldurmanız gereken bölüm budur. Kümemizdeki ilk değişken başlıklıdır. $ emailto ve hangisini içermeli mesajı alacak olan e-posta adresi.
 
Bizim içinde $ vücut değişkeni biz \ n Mesaja yeni satırlar eklemek için sınırlayıcıyı kullanın. Bu, için küçük yerleşimler ekler. gönderenin adı, e, ardından bir mola verdim mesaj içeriği. Elbette ekranı güzelleştirmek için zaman harcayabilirsiniz, ancak bu yapı gayet iyi çalışıyor.
 
Sonuç
 
Bu, gelişmiş bir iletişim formu için eğitimimizi kapatır. Elementlerinizi benimkiyle ilişkilendirmek istiyorsanız, örneğime bakabilirsiniz. styles.css proje kodu dahilinde. Ancak, sayfa kendi görünümünüzü kolayca tasarlamanız ve çok kolay hissetmeniz için yeterince iyi yapılandırılmıştır..
 
Kaynak kodu indirmek ve biraz daha yakından ne yaptığımı incelemek için çekinmeyin. Bir öğreticiyi takip etmek iyidir ancak proje kaynağına doğrudan erişimi olması paha biçilmez olabilir. Özelleştirmeleri bir esinti yapmak için kısa bir stil sayfası ekledim, görünümünüz için teşekkürler!