Telefon geri bildirim formu. PHP'de bir geri bildirim formu oluşturuyoruz. Hatırlanması gereken yedi ipucu

Herhangi bir web sitesinin bir geri bildirim formu olması gerekir, bu nedenle er ya da geç her birimiz bir geri bildirim formu geliştirmeyi düşünürüz. İnternette oldukça fazla seçenek var, bazıları popüler eklentileri kullanıyor, bazıları kendi kişisel geliştirmelerini kullanıyor ancak çoğu hazır çözümler arıyor. Her durumda site için geri bildirim formumuz çalışır durumda ve işlevsel olacaktır, tüm bunları sırasıyla konuşalım.

Öyleyse, her zamanki gibi olağan şablon olan html ile başlayalım. Öncelikle birkaç alanı olan bir forma ihtiyacımız var. Netlik ve tüm formların standardı için 3 alan alacağız. Onlar. bu Ad, E-posta ve Telefon olacaktır.

Her girişin kendine özgü bir adı vardır, daha sonra mesaj göndermek için ona ihtiyacımız olacak. Ayrıca kendi alanlarınızı özgürce ekleyebilir ve yalnızca girişi değil, aynı zamanda textarea'yı da seçebilirsiniz. Her birine, e-postayla bilgi gönderirken kullanacağımız kendi adlarını atamayı unutmayın. Kolaylık sağlamak için, her alana gerekli bir özellik ekledim, bu sayede tarayıcı kullanıcının boş değerler göndermesine izin vermeyecek ve bunları doldurma ihtiyacı konusunda onları bilgilendirecektir.

Form hazır olduğunda onu biraz dönüştürebilirsiniz. Buradaki her şey aynı zamanda ihtiyaçlarınıza ve fantezilerinize de bağlıdır. Netlik sağlamak adına, her şeyin bu kadar düz görünmemesi için her öğe için birkaç stil taslağı hazırladım. Ancak tembelseniz veya nasıl yapılacağını bilmiyorsanız benim seçeneğimi kullanabilirsiniz:

Form( maksimum genişlik: 400 piksel; genişlik: %100; kenar boşluğu: 0 otomatik; ) giriş ( kutu boyutu: kenarlık kutusu; ekran: blok; kenarlık: yok; kutu gölgesi: iç metin 0px 0px 4px 1px rgba(0, 0, 0, 0,11); dolgu: 10 piksel 20 piksel; genişlik: %100; kenar boşluğu: 10 piksel 0; ana hat: yok; ) giriş ( arka plan: kırmızı; kenarlık: yok; kutu gölgesi: 0 piksel 2 piksel 0 1 piksel #C50909; kenarlık- yarıçap: 5 piksel; renk: beyaz; metin dönüşümü: büyük harf; yazı tipi ağırlığı: 600; genişlik: 200 piksel; imleç: işaretçi; geçiş: 0,3 sn; ) giriş: vurgulu ( arka plan: siyah; kutu gölgesi: 0 piksel 2 piksel 0 1 piksel siyah; )

Burada daha ayrıntılı olarak anlamaya değer, daha doğrusu kendiniz için uygun seçeneği seçmelisiniz. E-postayla mesaj göndermek için php dilini kullanmamız gerekecek, yani. tüm bu verileri aktaracağımız ayrı bir dosya oluşturun. Ancak bu yöntemi burada ele almayacağız çünkü her şeyin sayfayı yeniden yüklemeden gerçekleşmesi çok daha güzel. Bu yüzden ajax aracılığıyla veri göndermeye bakacağız.

Her şeyi eski yöntemle yapmak istiyorsanız, üstteki html'de biraz değişiklik yapmanız ve formun yöntem öznitelik değerini (post veya get) ayarlamanız gerekir. Her şey formdan verileri nasıl aktarmak istediğinize bağlıdır. Ayrıca php dosyasının yolunu gösterecek bir eylem yazmayı da unutmayın.

Ve daha gelişmiş bir yöntem kullanıp sayfayı yeniden yüklemeden veri göndereceğiz ve sunucudan yanıt geldiğinde kullanıcıya başarılı bir işlem veya hata mesajı vereceğiz. Ancak aynı zamanda 2 dosyaya da ihtiyacımız olacak, contact.php vecustom.js diyelim.

Öncelikle Jquery kütüphanesini bağlamayı unutmayın, onun yardımıyla kodu birkaç kez azaltacağız ve hazır çözümleri kullanarak herhangi bir işlemi kolayca gerçekleştirebiliriz.

$(".form").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url: "contact.php", data: str, başarı : function(msg) ( if(msg == "tamam") ( warning("Mesaj gönderildi"); ) else ( warning("Hata! Alanları yanlış doldurmuş olabilirsiniz."); ) ) )); return YANLIŞ; ) );

Şimdi eylem planını ve neden tüm bu kütüphanelere ve dosyalara ihtiyacımız olduğunu anlayalım. Kullanıcı gönder butonuna tıkladığında, Custom.js'de yazacağımız ve buna dayanarak formdaki tüm verileri alıp contact.php dosyasına aktaracağımız bir gönder olayımız var. Burada alanlarımızın boş olup olmadığını bir kez daha kontrol ediyoruz (başka bir spam olasılığını önlemek için), e-postayla bir mesaj gönderiyoruz ve kullanıcıya, Custom.js'ye yanıt olarak gönderilen sonuçları bildiriyoruz.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail) "]); $txtphone = trim($_POST["mfbPhone"]); // kimden $fromMail = " [e-posta korumalı]"; // E-posta adresinizi buraya girin $emailTo = " [e-posta korumalı]"; $konu = "Geri Bildirim"; $konu = "=?utf-8?b?". base64_encode($konu) ."?="; $headers = "Gönderen: Örnek form\n"; $headers . = "İçerik türü: metin/düz; charset="utf-8"\r\n"; $headers .= "MIME Sürümü: 1.0\r\n"; $headers .= "Tarih: ".date("D, d M Y h:i:s O") ."\r\n"; // harfin gövdesi $body = "".$site" sitesinden bir mektup alındı." \n\nAd: ".$txtname."\nTelefon: ".$txtphone."\ne-mail: ".$txtemail."\nMesaj: ".$txtmessage; mail($emailTo, $konu, $body, $başlıklar); echo "tamam"; )

Bu, bir iletişim formunun nasıl çalıştığının en temel örneğidir. PHP'de kontrol dosyasını nasıl değiştireceğiniz, kendi sınıflarınızı nasıl oluşturacağınız vb. konusunda birçok seçenek vardır. Ancak bizim görevimiz web sitenizde kullanabileceğiniz basit ve çalışan bir örnek oluşturmaktı.

demo

Dosyalar

Bir WordPress blogunda olduğunuz için, özellikle programlama ve düzen konusunda tam bir acemiyseniz, muhtemelen her türlü eklentiyi kullanmaya hazır ve isteklisinizdir. Ve bunun için sizi suçlamıyorum ve hatta bunlardan birini netlik açısından dikkatinize sunabilirim. Bu paragrafın amacı bir öneri değil, yalnızca bir örnektir, çünkü Contact Form 7 eklentisini birkaç projede kullandım.

Yapılandırması çok kolaydır ve neredeyse her zaman kusursuz çalışır. Kendi benzersiz tasarımınızı yaratmanız gerekiyorsa bunu yapabilirsiniz. Tek yapmanız gereken, yapıcıya gerekli alanları eklemek, hatalar ve başarılı gönderim hakkındaki bildirimleri kendi yönteminizle tercüme etmek ve değiştirmektir ve işlem tamamdır. Daha sonra kısa kodu kopyalayıp formda istediğiniz yere yapıştırın.

Eklentiyle ilgili hiç sorun yaşamadım ve hızlı ve hazır bir çözüme ihtiyacınız varsa işte bu kadar. İşlevsellik ve tasarım açısından form için kendi gereksinimleriniz varsa, bu sektörde bilgi gerektiren ilk seçeneği kullanmak daha iyidir.

Merhaba sevgili arkadaşlar ve blog misafirleri! Web sitesi geri bildirimi, bir blog yazarının ziyaretçileriyle iletişim kurmasını sağlayan en önemli özelliklerden biridir. Ancak bir sorun var; siteye ilişkin geri bildirimleri görüntüleyen eklentiler çok ağır!

Bir süredir blogumu daha hafif hale getirmekle meşguldüm ve ağırlığı nedeniyle bloğumu ağırlaştıran ve sayfaların hızlı yüklenmesini engelleyen gereksiz eklentilerden kurtulmaya karar verdim. Ve her şeyden önce seçimim geri bildirim formuna, daha doğrusu onu web sitem "İletişim Formu 7"de görüntüleyen eklentiye düştü ve aynı zamanda "reCaptcha" captcha'sını görüntüleyen ikinci bir eklentiye de ihtiyacı vardı. Bu şekilde, herhangi bir eklenti gerektirmeyen ve siteye kurulumu kolay bir geri bildirim formu kullanarak oldukça önemli iki eklentiden aynı anda kurtulmaya karar verdim. Şimdi size bundan bahsedeceğim ve tabii ki dosyaları indirmenize de izin vereceğim, böylece sitenize benzer geri bildirimler oluşturabilirsiniz...

Ve sonunda geri bildirim formu oluşturmaya yönelik eklentileri sitemden kaldırdıktan sonra, herhangi bir eklenti kullanmadan, kolay ve güvenilir bir geri bildirim formu oluşturmaya başladım. Ve elde ettiğim şey bu:

Siteye yönelik geri bildirim formumun işlevselliğini “ “ sayfasından görüntüleyebilir ve kontrol edebilirsiniz. Web sitesindeki iletişim formuma yazın, size cevap vereceğim!

Şimdi en önemli şeye geçelim ve herhangi bir eklentiden bağımsız olarak site için kendi geri bildirimimizi oluşturalım...

Bunun için ihtiyacımız olan tek şey: "Site için geri bildirim" başlıklı blog sitem, bir metin editörü ve tabii ki gereksiz ve ağır eklentilerden kurtularak siteyi kolaylaştırmak için kendi iletişim formunuzu oluşturma arzunuz!

Sitenize veya blogunuza herhangi bir yere yapıştırabileceğiniz site geri bildirim formunun HTML kodu, benim için iletişim sayfası:

Geri bildirim formu

Adın ne

E-posta

Mesaj Konusu

Bir mesaj göndermek

Lütfen bu kodda yapmanız gereken bazı önemli şeylere dikkat edin:

Bu dosyayı site motorunun kök klasöründe bulunan hostinginize yüklemelisiniz! Ama önce düzeltip düzeltmediğinizi kontrol edin!

“HOSTING E-POSTA ADRESİNİZ” metninin yazıldığı satırda! “, hostinginizde bulunan E-posta adresinize düzeltmeniz gerekmektedir. Hostinginizde bir e-posta hesabınız yoksa, bir tane oluşturduğunuzdan emin olun. Zor değil!

Artık “site için geri bildirim” sistemimizin doğru çalışması için sitedeki jQuery kütüphanesini bağlayan bir script bağlamanız gerekiyor. Öncelikle web sitenizi kontrol edin, belki bu script zaten yüklüdür, bunu nasıl yapacağınızı bilmiyorsanız hosting sağlayıcınıza bir soru sorun.

İşte senaryo:

Veya bu işlevi WordPress Function.php dosyanıza ekleyebilirsiniz:

İşlev my_jquery() ( wp_deregister_script("jquery"); wp_register_script("jquery", "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"); wp_enqueue_script("jquery" ); )

Komut dosyasının yerini alır ve ayrıca WordPress sitesindeki jQuery kitaplığını da içerir.

Şimdi web sitemize mail.php dosyasıyla birlikte çalışacak bir komut dosyası bağlayarak mektuplarınızı gönderiyoruz. Bunun için contact.js gibi bir js dosyası oluşturup js adı verilen aktif temanızın scriptlerinin bulunduğu klasörde web sitenize göndermemiz gerekiyor. Web sitenizde yoksa oluşturun!

İşte senaryo:

JQuery(document).ready(function($) ( $("#contact").submit(function() ( var str = $(this).serialize(); $.ajax(( type: "POST", url) : "ALANINIZ/wp-content/themes/TEMANINIZ/mail.php", data: str, başarı: function(msg) ( if(msg == "OK") ( result = "Mesaj gönderildi"; $(" #fields").hide(); ) else (sonuç = msg;) $("#note").html(sonuç); ) )); return false; )); ));

Neredeyse bitti! Şimdi stilleri sitenin temasının stillerinden sorumlu olan CSS dosyanıza barındırmamıza yüklememiz gerekiyor. Bu yapılmazsa site için yeni oluşturduğumuz geri bildirimimiz güzel ve tek renkli olmayacaktır.

Sitenin geri bildirim formunun stil kodu:

Form#contact ( border:1px katı #e5e5e5; dolgu:10px; arka plan:#e9ffd0; border-radius:5px; ) #contact label ( font-size: 14px; ) #contact input:required:valid ( box-shadow: 0 0 3px #BCEF89; kenarlık rengi: #BCEF89!important; arka plan: #fff url(images/valid.png) tekrarlanmayan %98 merkez; ) #contact textarea:required:valid ( box-shadow: 0 0 3px #BCEF89; border-color: #BCEF89!important; ) #contact input:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; arka plan: #fff url(images/invalid. png) tekrarlanmayan %98 merkez; ) #contact textarea:focus:invalid ( box-shadow: 0 0 3px #FFDF97; border-color: #FFDF97!important; ) .err ( border: 1px katı #ff8c00; padding: 10 piksel; arka plan: #FFDF97; metin hizalama: sol; kenarlık yarıçapı: 3 piksel; ) .ok ( kenarlık: 1 piksel #BCEF89 katı; kenar boşluğu alt: 15 piksel; dolgu: 10 piksel; arka plan: #f5f9fd; metin hizalama: orta ; border-radius: 3px; ) #author, #email, #url ( genişlik: %30; dolgu: 5px; border-radius: 5px; border: 1px katı #e5e5e5; ) #comment ( dolgu: 5 piksel; kenarlık yarıçapı: 5 piksel; kenarlık: 1 piksel katı #e5e5e5; taşma: otomatik; ) #submit ( yazı tipi ağırlığı: 400; arka plan: #393; yazı tipi boyutu: 15 piksel; renk: #fff ; dolgu: 10 piksel 50 piksel; kenarlık: yok; imleç: işaretçi; )

Bunları kopyalayıp sitedeki aktif temanızın style.css dosyasına göndermeniz yeterli. Daha sonra renkleri ve şekli değiştirmek isterseniz, ancak bu yalnızca ileri düzey kullanıcılar içindir!

Artık siteye yönelik geri bildirimlerimiz tamamen kullanıma hazır. Test edin ve çalışmasının tadını çıkarın!

Bu kadar!

Bu materyali beğendiyseniz? Daha sonra sosyal butonlara tıklayın, blog güncellemelerine abone olun ve yorumunuzu aşağıya yazın!

Merhaba sevgili okuyucu, bugün sizler için Ajax teknolojisi + ziyaretçilerinizi formu kullanmaya motive edecek güçlü bir tetikleyici kullanarak sayfayı yeniden yüklemeden çalışan lezzetli bir html geri bildirim formu hazırladım. Blogumun okuyucuları, Açılış Sayfasındaki önceki makalemi çok aktif bir şekilde tartıştılar, şimdi değerlendiriyoruz ve son halini alan yeni forma bakıyoruz. Hepsi gerekli Kaynak kodu ve demo makaleye eklenmiştir Ayrıca işin ve bağlantının yapısını da analiz edeceğiz.

GÜNCELLEME: Konu satırındaki ad kodlama hatası düzeltildi. Artık her şey doğru şekilde görüntüleniyor. Okuyucuya teşekkür ederiz (Ekaterina Karacheva)

Formun formatı ayrıca PHP'de bir işleyici dosyası içerir; ek olarak, iş için bir jquery kitaplığına ve komut dosyalarına ihtiyacınız olacak, ancak ilk önce onu çok uzun süre yüklemeyeceğim - hadi incelemeye geçelim ve geri bildirimlerimizin analizi.

Formumuz şuna benzer:

Buradaki amaç ne? Sağ tarafta böyle bir form var ama sol tarafta ziyaretçinizi hemen iletişim bilgilerini girmeye teşvik edecek özel bir blok yaptım! İşin sırrı basit: Sol blokta tarih ve saati görüyor musunuz? Bugünün tarihi her zaman görüntülenecek, zamanla bu iki saatin aralığı şu anki saatten hesaplanır, diyelim ki şu anki saatiniz 13:14 ise saat aralığı 12'den 14'e kadar olacaktır. işe yarıyor)))

Ziyaretçi şunu görecektir: vay be, bugün bir indirim var ve tam zamanında geldim, ayrıca bir indirim de var! Hemen almalı! - Bu bizim tetikleyicimiz.

Html geri bildirim formunun kaynak kodunu indirdim, demoya baktım - yeterince oynadığımı düşünüyorum)) Şimdi en önemli şeye, çalışma prensibine gelince:

Giriş formundaki alanlar contact.php işleyici dosyasında kontrol edilir.Aşağıdaki program kodu listesinde, formun kendisinde hatalar ve mektubun başarıyla gönderilmesiyle ilgili bir mesajın göründüğünü görebilirsiniz, bu şekilde görünüyor gönderdikten sonra:

E-postanızı 52. satıra ekleyin, böylece tüm mektuplar belirtilen e-postaya gönderilecektir.