Açılış sayfası için geri bildirim formu. Açılış sayfasını yeniden yüklemeden mektup göndermek için bir form. Formumuz için bir php işleyicisi oluşturun

Merhaba arkadaşlar! Formlardan e-postaya veri göndermek için evrensel bir komut dosyasını dikkatinize sunmak istiyorum. Komut dosyası, Açılış Sayfası, kartvizit siteleri vb. siteler için idealdir. Geribildirim Formları komut dosyamız, sınırsız sayıda formu farklı alanlarla tek bir sayfada bağlama ve birden fazla alıcıya mektup gönderebilme yeteneğiyle İnternet'teki diğer komut dosyaları arasında öne çıkıyor.

Bu yüzden. Başlayalım. Komut dosyasının yetenekleriyle başlayalım.

Sınırsız sayıda formu tek bir sayfaya bağlayın.

Alanların doğru doldurulup doldurulmadığı kontrol ediliyor.

Bildirimleri ayarlama.

Her form için harf kullanma yeteneği.

Harf türü - (html etiketleri kullanılıyorsa)

Sınırsız sayıda adrese gönderim.

Her formun bireysel olarak kişiselleştirilmesi.

Komut dosyası, sayfayı yeniden yüklemeden çalışır.

Spam botlara karşı koruma.

İlk kurulum.
Betik kütüphaneye dayalı olarak çalışıyor, bu yüzden yapmamız gereken ilk şey onu bağlamak. Bunu yapmak için Google Tarafından Barındırılan Kütüphaneleri kullanmanızı öneririm.

Kalan dosyalar hakkında daha ayrıntılı olarak konuşalım:

Feedback.js, AJAX formunun gönderilmesinden sorumlu olan ana komut dosyasıdır.
jquery.arcticmodal.js,
jquery.arcticmodal. - formları kalıcı bir pencerede görüntüleme olanağı sağlar.
jquery.jgrowl.js,
jquery.jgrowl.css - sayfada bildirimleri görüntülemenize olanak tanır (sayfanın üst köşesindeki bloklar).

HTML ve gerekli özellikler.
Tüm form öğeleri için gerekli bir özellik, sonraki form özelleştirmesi için gerekli olan name = "" özelliğidir.
Bir düğme için (type='button'') class='feedback' belirtmeniz gerekir. Ayrıca “feedback” sınıfına sahip herhangi bir HTML etiketinin bir düğme görevi görebileceğine de dikkatinizi çekmek isterim. Kalıcı pencerede form çağırmak Kalıcı pencerede form çağırmak için öncelikle bir eylem tanımlamanız gerekir. herhangi bir etikete tıklamak için, örneğin modal_btn sınıfına sahip bir div
Kalıcı pencerede bir form çağırma $(document).ready(function() ( $(document).on("click", ".modal_btn", function())( $("#small-modal").arcticmodal ();
Formun yalnızca kalıcı pencerede görünmesi gerektiğinden, onu style="display: none;" niteliğiyle bir div'e yerleştirerek gizlenmesi ve ayrıca kalıcı pencereyi biçimlendirmek için birkaç standart div'e sarılması gerekir.
X

Böylece formları E-postaya göndermek için komut dosyamızı bağlamaya yönelik temel ayarları bulduk. Şimdi içeriye bir göz atalım ve alanları, bildirimleri ve diğer her şeyi nasıl yapılandıracağımızı bulalım.

Bir form için ayar örneği Tüm formların ayarları, geribildirim\index.php dosyasında saklanır
$form["form-1"] = array("fields" => array("name" => array("title" => "Name", "validate" => array("preg" => "%% ", "minlength" => "3", "maxlength" => "35",), "mesajlar" => array("preg" => "[ %1$s ] alanı bir hata içerebilir", "minlength " => "Minimum alan uzunluğu [ %1$s ] izin verilenden daha az - %2$s", "maxlength" => "Maksimum alan uzunluğu [ %1$s ] izin verilenden daha büyük - %2$s", ))), "tell " => array("başlık" => "Telefon", "validate" => array("preg" => "/^((8|\+)[\- ]?)?(\ (?\d( 3)\)?[\- ]?)?[\d\- ](5,10)$/", "minimum uzunluk" => "5",), "mesajlar" => dizi( "preg" => "[ %1$s ] alanı bir hata içerebilir", "minlength" => "[ %1$s ] alanının minimum uzunluğu izin verilen uzunluktan - %2$s daha az",) ), "cfg" => array(" charset" => "utf-8", "subject" => "E-postanın konusu", "title" => "E-postanın gövdesindeki başlık", " ajax" => true, "doğrula" => true, "from_email" = > " [e-posta korumalı]", "from_name" => "noreply", "to_email" => " [e-posta korumalı], [e-posta korumalı]", "to_name" => "noreply1, noreply2", "geoip" => true, "referer" => true, "type" => "html", "tpl" => true, "antispam" => "email77 ", "antispamjs" => "address77", "tamam" => "Mesaj gönderildi - tamam", "fuck" => "Mesaj gönderildi - HATA", "spam" => "Spam robotu", "bildir" => "renk-modal-metin kutusu", "usepresuf" => false)); // Sonraki form $form["form-2"] = array("fields" => array(.....
Yeni bir formun ayarlarını eklemek için, yeni bir $form[""] dizisi oluşturmak üzere $form["form-1"] dizisinin örneğini izlemeniz gerekir.

Gerekli name="" özelliği hakkında söylediklerimi hatırlıyor musunuz?

Tüm form öğeleri için gerekli bir özellik, sonraki form özelleştirmesi için gerekli olan name = "" özelliğidir.
Bu yüzden size neden hala ihtiyaç duyulduğunu söylemenin zamanı geldi.
name="" dizinin alfasayısal anahtarıdır, $form[""] dizisi için benzersiz olmalıdır

Anlaşılırlık için örnek html kodu

Şimdi dizileri ve ne için gerekli olduklarını anlayalım.

$form["form-1"] = dizi();
$form["form-2"] = dizi(); vesaire.
Bunlar her yeni form için aşağıdakileri içeren ana dizilerdir:

"alanlar" => dizi(); - Form öğeleri için bir dizi ayar.

• "isim" => dizi(); - Bir dizi ayar içeren form öğesi ayarları dizisi (örneğin giriş adı = "ad" türü = "metin").
  • "title" => "Adınız" - form öğesinin adı, hata durumunda veya şablonda görüntülenecektir
  • "doğrula" => dizi(); - dizi, form öğesi doğrulama kurallarını içerir
    • "preg" => "%%" - normal ifade
    • "minlength" => "3" - minimum alan boyutu
    • "maxlength" => "35" - maksimum alan boyutu
    • "substr" => "35" - her zaman N karaktere kes
  • "mesajlar" => dizi(); - doğrulama mesajlarını içeren bir dizi, yani:
    • "preg" => "Form öğesi normal ifadeyle eşleşmiyor"
    • "minlength" => "[ %1$s ] alanının minimum uzunluğu kabul edilebilir değerden daha az - %2$s" - doğrulama hatası, anahtar (preg) doğrulama anahtarıyla eşleşmiyor
    • "maxlength" => "[ %1$s ] alanının maksimum uzunluğu izin verilen sınırı - %2$s aşıyor" - doğrulama hatası, anahtar (preg) doğrulama anahtarıyla eşleşmiyor

"cfg" => dizi(); - Bir dizi form ayarı.

• "karakter kümesi" => "utf-8" - kodlama
• "konu" => "Mektubun konusu", - Mektubun konusu
• "title" => "Mektubun gövdesinde başlık", - Mektubun gövdesinde başlık
• "ajax" => true, - bu Ajax TODO formudur (gerekmiyorsa false olarak ayarlayın)
• "validate" => true, - (true) sunucudaki formu doğrulamak istiyorsak, js doğrulamasını "ajax" => true ile değiştirir. Kapalıyken (yanlış), doğrulama alanı ayarlarını yapmanız gerekmez. YAPMAK
• "from_email" => "myemail", - gönderen, alan adını belirtin (isim = "myemail") ve kullanıcıdan bir e-postaya ihtiyacınız yoksa, o zaman bir taslak [e-posta korumalı]
• "from_name" => "myname", - gönderen, alan adını belirtin (name=myname") ve bir kullanıcı adına ihtiyacınız yoksa Yanıt yok koçanı
• "to_email" => " [e-posta korumalı]", - alıcının e-postası. Birden fazla adrese göndermek için bunları virgülle ayırarak listeleyin. Örnek ("to_email" => " [e-posta korumalı], [e-posta korumalı], [e-posta korumalı]",)
• "to_name" => "noreply1", - Alıcı adı. Birden fazla adrese gönderirken alıcıların adlarını virgülle ayırarak listeleyin. Örnek ("to_name" => "noreply1, noreply2, noreply3",)
• "geoip" => true, - TODO türünü kullanarak konumu bulun
• "referer" => false, - formun gönderildiği sayfanın URL'sini ekleyin
• "type" => "plain", - letter type - plain, html (html etiketleri kullanılıyorsa)
• "tpl" => false, - bir harf şablonu kullanın. Doğruysa, şablon dosyası klasördeki form adına (isim = "form-1") uygun olarak bağlanacak ve dosya (feedback/tpl/form-1.tpl) işlenecektir, aksi takdirde her şey olduğu gibi gönderilir, her alan yeni bir satırdadır
• "antispam" => "email77", - Anti spam, yöntem gizli (display:none) bir alanı temel alır ve bu alanı yalnızca robot otomatik olarak doldurarak kendini ele verir.
• "antispamjs" => "address77", - Anti spam yöntemi, başlangıçta doldurulmuş, sayfa yüklendiğinde javascript'i otomatik olarak temizleyen gizli (display:none) bir alanı temel alır, akıllı bir robot bile bunu tahmin edemez ve sonra açılır. engellendi.
• "tamam" => "Kullanıcıya mesaj", - Form başarıyla gönderildiyse kullanıcıya mesaj görüntülenir, html etiketlerini kullanabilirsiniz.
• "fuck" => "Kullanıcıya mesaj", - Formu gönderirken bir hata oluştuğunda kullanıcıya gösterilen mesaj, html etiketlerini kullanabilirsiniz.
• "spam" => "Kullanıcıya mesaj", - Kullanıcıya mesaj, eğer bir spam robotundan şüpheleniliyorsa görüntülenir, html etiketlerini kullanabilirsiniz.
• "notify" => "renk-modal", - ne tür bildirimlerin gösterileceği, metin kutusu - sayfanın üst köşesinde bloklar, formda renk - renk vurgulaması, modal - sayfanın ortasında kalıcı pencere, yok - devre dışı bırakmak. Örnek olarak şunları birleştirebilirsiniz: color-modal - alanları vurgulamayla doldurmadaki hatalar ve TODO kalıcı penceresindeki metin gönderme durumu
• "usepresuf" => false - Mektubun konusuna veya başlığına özel bir ekleme kullanılıp kullanılmadığı, küçük bir değişiklik durumunda örneğin %%cfg.title.suffix%% belirtebilirsiniz, bunun için şunun olması gerekir: formda gizli bir alan; daha fazla ayrıntı için bkz. f -qiu presuf()

Mektup şablonlarının ayarlanması Yani. Şimdi mesajlarımızın konusuna bakalım.
Öncelikle formun şablon olarak gönderilebilmesi için form ayarlarında şablon dosyasının kullanımını etkinleştirmeniz gerekir - "tpl" => true,
İkinci olarak, formun ismine (name=”form-1”) uygun olarak klasör içerisinde (feedback/tpl/) *.tpl uzantılı bir şablon dosyası oluşturmanız gerekmektedir.

Örnek: (geribildirim/tpl/form-1.tpl)

E-postanın gövdesindeki başlık
%%isim başlığı%%	%%isim.değer%%
%%tell.title%%	%%tell.value%%

isim, söyle, vb. - Bunlar, kullanıcının doldurduğu alanların özellikleridir (name="").
başlık - Form öğesi ayarları dizisinde ayarlanan form öğesinin adı.
değer - Form öğesinin değeri.

Bugünlük bu kadar, ancak senaryo kesinlikle mükemmel değil, bu nedenle hataların yorumlarını ve açıklamalarını memnuniyetle karşılıyoruz ve gelecek sürümlerde düzeltilecektir.

Not: Senaryo ekip tarafından geliştirildi

Açılış Sayfasının ana unsurları arasında iletişim bilgilerinin ve geri bildirim taleplerinin yer aldığı bloklar bulunur. Bu bloklar büyük önem taşıyor. Her şeyden önce, potansiyel bir tüketicinin genellikle açılış sayfasında sunulan yeterli bilgiye sahip olmadığı anlaşılmalıdır - bazı insanlar, bilgileri metin içeriğini okumaktan ziyade yaşayan bir kişinin sözlerinden daha iyi algılar. Bu nedenle ziyaretçinin kaliteli geri bildirim vermesi gerekiyor. Nasıl yapılır?

Her açılış sayfasında kişileri içeren bir blok bulunmalıdır. Bazı insanlar numaraları ve adresleri en uzak köşeye saklar ancak bu temelde yanlış bir yaklaşımdır. Önemli olan, ziyaretçinin telefon numaralarını ve adresleri tek bir sayfada değil tüm sayfalarda görmesidir. Telefon numarası olmayan bir sayfa kişisel görünmüyor - mağaza yönetiminin kasıtlı olarak tüm temaslardan kaçındığı hissine kapılıyorsunuz. Yalnızca e-posta belirtildiğinde yanlış kişi organizasyonunun tipik bir örneği aşağıda verilmiştir:

Ve bu yanlıştır çünkü ziyaretçinin mağazayla her zaman hızlı bir şekilde iletişim kurabilmesi gerekir. Bunu yapmak için, kişileri açılış sayfasının en görünür kısmına, yani başlığına, logodan çok uzak olmayan bir yere yerleştirmeniz gerekir. 8-800'lü numarayı kiralamak mümkün mü? Bu durumda, izleyicinin daha sadık bir tutumuna güvenebilirsiniz, çünkü birçok tüketici için mağazada böyle bir sayının varlığı ek güven uyandırmaktadır.

Geri bildirim formları açılış sayfalarına nasıl yerleştirilmez?

Açılış sayfalarında geri arama için bir numara bırakmanızı isteyen geri bildirim formlarını kullanmak iyi bir uygulamadır. Yaklaşım iyidir ancak formların çok müdahaleci olmasını istemezsiniz. Bazı açılış sayfaları bunu korkunç bir güçle yapar ve ziyaretçilerin nereye vardıklarını anlamaya çalıştıkları bir aşamada formlar gösterirler. Formun yan/altta bir yerde, ekranı kaplamadan ve ziyaretçilerin dikkatini rahatsız edici sorularla dağıtmadan görünmesi en iyisidir. Mağazada uygun operatör yoksa, neredeyse anında yanıt bekleyeceklerinden ziyaretçilerin bu tür taleplerden korunması gerekir (herkesin hemen burada ve şimdi yardıma ihtiyacı vardır). Geri bildirim formlarında sadece telefon numaralarını değil diğer iletişim bilgilerini de sorabilirsiniz.

İyi düşünülmüş geri bildirimleri düzenlemek için çok sayıda hizmetin widget'larını kullanabilirsiniz. Bunlar geri arama formları, ücretli ve ücretsiz çevrimiçi danışmanlar ve çok daha fazlası olabilir.

Tek bir sayfada, geri bildirimi düzenlemek için çeşitli araçları birleştirebilirsiniz, ancak bu durumda bunlar çok müdahaleci olmamalı ve ziyaretçinin dikkatini aşırı yüklememelidir - çeşitli biçimlerdeki kalıcı pencerelerin baskısı altında, açılış sayfasından ayrılmayı tercih eder. üzerinde bir şey satın alma fırsatı.

Öyleyse başlayalım.

1. jQuery kütüphanesini bağlama

Büyük olasılıkla bunu yine de yapacaksınız, ancak yine de size hatırlatacağım.
Başlığa aşağıdakileri eklemeniz gerekir:

2.javascript'i ekleyin

Formun sayfayı yeniden yüklemeden gönderilebilmesi için ajax teknolojisini kullanmamız gerekecek. Bağlı kütüphaneden sonra aşağıdaki betiği eklemek gerekir:

function AjaxFormRequest(result_id,formMain,url) ( jQuery.ajax(( url: url, type: "POST", dataType: "html", data: jQuery("#"+formMain).serialize(), başarı: function( yanıt) ( document.getElementById(result_id).innerHTML = yanıt; ), hata: function(response) ( document.getElementById(result_id).innerHTML = "

Formu gönderirken bir hata oluştu. tekrar deneyin

"; ) )); $(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr ("seçili");

Alt kısmı

$(":input","#formMain") .not(":button, :submit, :reset, :hidden") .val("") .removeAttr("checked") .removeAttr("selected");

Gönder butonu tıklandıktan sonra alanların boş kalmasının sağlanmasından sorumludur. Belirli bir forma eklerseniz onay kutularını ve radyo düğmelerini de temizleyebilir. İhtiyacınız yoksa kolayca kaldırabilirsiniz.

3.html'yi ekleyin

Aşağıdaki formdaki kodu doğru yere girin

Kişilerinizi bırakın, danışmanımız sizinle iletişime geçsin

Bu formda 2 alan bulunmaktadır: İsim ve telefon. Dolayısıyla yalnızca Landing'te değil, herhangi bir web sitesinde geri arama siparişi vermek için bir form olarak da kullanılabilir. Posta ve adres vb. ile kendi alanlarınızı ekleyebilirsiniz.
Bu arada, son giriş gönder düğmesidir ve div id=messegeResult içine alınır. İşin püf noktası, düğmeye bastıktan sonra verilerin e-postanıza gönderilmesi ve düğmenin kendisinin kaybolması ve bunun yerine "Mesaj başarıyla gönderildi" gibi bir metnin görünmesidir. Yakında sizi geri arayacaklar.
Örneğin, div id=messegeResult'a ikinci bir satır ekleyebilirsiniz - Kişilerinizi bırakın; danışmanımız sizinle iletişime geçecektir, ardından düğmeye tıkladıktan sonra bu metin yukarıda gösterilen metinle değişecektir. Genel olarak, bu div'deki her şey, düğmeye tıkladıktan sonra başarılı gönderimle ilgili bir mesaja dönüşecektir.

4. Formumuz için bir php işleyicisi oluşturun

Öncelikle bir dosya oluşturup onu zakaz.php olarak adlandırmanız gerekir.
Daha sonra, işlemden sorumlu olan aşağıdaki kodu ekleyin.

4 ve 11'de formdaki verilerin gönderileceği e-postayı belirtmeniz gerekir. $message'ın 6. satırı mektubun tüm içeriğiyle başlar. Dolayısıyla, adres ve e-posta vb. için yeni alanlar eklerseniz, mevcut Ad ve Telefon örneğini takip ederek bunları buraya eklemeniz yeterlidir.
15. satır, önceki paragrafta div id=messegeResult'ta görüntülenecek mesajı tam olarak içerir. Böylece kendinize uyacak şekilde değiştirebilirsiniz.

5. Stilleri ayarlayın

Formun daha fazla veya daha az okunabilir görünmesini sağlamak için stilleri ayarlayalım. bunu da dilediğiniz gibi değiştirebilirsiniz.

Form( genişlik:350 piksel; yükseklik:225 piksel; konum:mutlak; üst:50%; sol:%50; sağ:%50; alt:%50; arka plan:#f1f1f1; dolgu: 20px; ) .form p( yazı tipi- boyut:18 piksel; renk:#333; metin hizalama: merkez; ) giriş ( arka plan: #fff; yazı tipi boyutu: 15 piksel; kenarlık: 2 piksel katı #336699; satır yüksekliği: 20 piksel; dolgu: 7 piksel 10 piksel 6 piksel; kenar boşluğu: 10px 0 0; yazı tipi boyutu:15px; kutu gölgesi:iç metin 0 2px 7px rgba(0,0,0,.15); giriş: vurgulu, giriş: odak ( kenarlık rengi: #ff6600; ) giriş color:#ccff33; ) .btn(dikey-align:middle;font-size:18px;color:#fff;font-weight:700;text-align:center; line-height:1,3 !important;padding:5px 10px 5px;margin:10px 0 0;kenarlık:0;imleç:işaretçi;arka plan:#97ca33;) .btn:active( color:rgba(255,255,255,.6); arka plan :#57900f; box-shadow:inset 0 2px 15px rgba(0,0,0,.2);

Her şey doğru yapılırsa bir formunuzun olması gerekir. Hepsi bu, ilginiz için teşekkürler :)

Bu tür mücevher işleri için ödeme yapmanız gerekeceğini anlamalısınız, ancak ödeme buna değer. Yaratılışla ilgili tüm konuların tartışılması gerekir; bu, işin maliyetini ve açılış sayfasını bir bütün olarak etkileyecektir. Yaratırken, güzellikten kullanım kolaylığına kadar insanların dikkatini çekebilecek tüm olası küçük şeyleri hesaba katmanız gerekir. Ayrıca psikolojiyi ve bilinçaltını da unutmamalıyız. Birçok karar bilinçaltında alınır. Ve bir ürün satın almak bir istisna değildir. Bir kişinin sorununa çözüm, bu çözümün tanımını, bu çözümün doğru olduğuna ve ona yardımcı olacağına olan inancı, bu hedefe odaklanmayı, harekete geçmeyi ve eylemin kendisini içerecek doğru mantıksal zinciri kurarsanız, o zaman ziyaretçilerin çoğunu müşteriye dönüştürebileceksiniz. Üstelik sayfanın hedef eyleminin ne olacağı da önemli değil - satış, bültene abone olma, ziyaretçi iletişim bilgilerinin edinilmesi vb.

Müşteri geri bildirim formuna özellikle dikkat edilmelidir. Çünkü bu doğrudan olmasa bile müşteriyle iletişimdir. Müşteri ile iletişim son derece önemlidir, çünkü web sitesi tek başına müşterinin ihtiyaçlarını tam olarak karşılayamayacaktır. İnsanlar bir sorunu çözmek için nadiren standart bir yaklaşım seçtiğinden, yalnızca çok az sayıda olan standart talepleri karşılayabilir. Geri bildirim yoluyla müşteriyle iletişime geçerek yalnızca satış/işlem/abonelik cirosunu değil aynı zamanda şirketin itibarını da artırabilirsiniz.

Çünkü iyi bir itibar geliştirmek için kişisel iletişim ve müşteri memnuniyeti çok önemlidir. Böyle bir formun yaratılmasına her zaman özel önem verilmiştir. Geri bildirimin yüklendiği bir şablonun kullanılması, sayfanın işlevselliğini büyük ölçüde sınırlandırır, bu nedenle bu form, tüm SEO gerekliliklerine uygun olarak her zaman ana koda manuel olarak girilmiştir. Bu formun da özel bir yaklaşımı var: görünür bir yere yerleştirilmeli, sezgisel ve kullanımı kolay olmalı, müşteriden çok fazla gereksiz bilgi istememeli, sadece bir e-posta ve isim istemelidir. Konum, gerekli bilgileri hızlı bir şekilde aramaya ve kullanmaya alışkın olan kişilerin kategorisini etkiler. Bazıları için, bir sayfada birkaç saniye hizmetlerden yararlanıp yararlanmayacaklarını değerlendirmek için yeterlidir. Bu nedenle konum, bu tür kullanıcıların bile teklifle ilgilenmeye ve bağlantılardan ayrılmaya zamanları olacak şekilde olmalıdır.

Sayfanın kolay anlaşılır olması çok önemlidir çünkü tüm İnternet kullanıcıları bu konuda deneyimli değildir. Deneyimi olan ve olmayan bir izleyici kitlesine ulaşmak için, işlemi tamamlamak için yapılacak eylemlerin sırasını sezgisel olarak anlamak gerekir. Ve bilgi miktarı da daha az önemli değil. Bu bilinçaltı güven düzeyini etkiler. Sayfada çok sayıda kişi sorulursa: telefon numarası, e-posta, kart numarası, adres vb. Bu sayfanın dolandırıcılar tarafından açıldığı hissine kapılabilirsiniz. Ve bu, bir bütün olarak sitenin içgüdüsel itibarına güçlü bir darbe. Bu nedenle müşteri ile iletişim kurarak isteklerini netleştirmek ve işlem şartlarını yerine getirmek için yeterli olacak kadar bilgi istemeniz gerekir. Açılış sayfası bir bütün olarak karmaşık bir şekilde oluşturulmuş basit bir sitedir. Kullanıcılar için basit ancak geliştiriciler için oluşturması zordur. Ancak böyle bir çalışma çabaya değer!

Okuyucularıma selamlar, tecrübe kazandım ve sizlere PHP geri bildirim formunun çalışma prensiplerini anlatacağım. Her şeyin nasıl çalıştığını ve giriş formunun kendisi (giriş alanları) ile PHP'de yazılmış işleyici dosyası arasındaki etkileşimin nasıl oluştuğunu anlamanız için size açık örnekler göstereceğim. Ayrıca kaynakları ücretsiz olarak indirebilirsiniz.

Elbette en azından biraz HTML/CSS bilginiz varsa harika olur çünkü... Kodu benzetme yoluyla sayfanıza sürüklemeniz gerekecektir. PHP diline değinmeyeceğiz; kendiniz için yapmanız gereken tüm değişiklikleri size göstereceğim.

GÜNCELLEME: Okuyuculardan gelen yanıtlara göre daha güzel ve işlevsel bir şeye ihtiyacım olduğunu fark ettim, lütfen benimle tanışın, inceleyin ve bir göz atın. Hangisini en çok beğendiğinizi seçin)

GÜNCELLEME2: UTM etiketlerinin iletimi ile Sürüm 3.0 Uyarlanabilir İniş + ajax formu, okuyun ve görün. Hoşuna gidecek

PHP'de kendi başıma bir geri bildirim formu oluşturmaya ilk çalıştığım zamanı hatırladım ve dürüst olmak gerekirse bu çok emek gerektiriyordu, çünkü... Ne olduğunu ve nasıl olduğunu anlamadım. Sabır ve azim arkadaşlar, başaracaksınız.

PHP geri bildirim formu - yapısı

Geri bildirim formunun analizini bir Açılış Sayfası örneğini kullanarak inceleyeceğiz, bu arada hakkında ayrı bir makale var. Aşağıdaki düğmeleri kullanarak bunun nasıl çalıştığını görebilirsiniz, bu tek sayfalık sayfanın kaynaklarını ve ana php işleyici dosyasını ekliyorum (bu dosya işlenecek ve e-postayı gönderecektir)

Kaynakları indirip arşivi açtıktan sonra aşağıdaki dosya yapısını göreceksiniz:

• resim - Açılış Sayfasının kendisi, düğmeler vb. için kullanılan tüm resimler.
• js - örneğin bir sayfada açılır kalıcı pencere ve diğer görsel efektleri sağlayan javascript komut dosyaları
• index.html - tek sayfalık sayfamızın indeks dosyası
• index1.php, formdaki değerlerin aktarıldığı, ardından alınan değişkenlerden bir mektubun üretildiği ve belirtilen e-posta adresine gönderildiği bir işleyici dosyasıdır. Index1.php aynı zamanda otomatik olarak index.html'ye (yani tek sayfalık sayfamıza) geri yönlendirme ile verilerin başarılı bir şekilde gönderilmesi hakkında bir ara bildirim sayfası olarak da görev yapacaktır.

Site dosyalarının bulunduğu hostinginizin PHP işlemeyi desteklemesi önemlidir, aksi halde index1.php dosyası çalıştırılmayacak ve çalışmayacaktır. Bu nüansı açıklığa kavuşturmak için, hostinginizin kayıtlı olduğu kampanyayla iletişime geçin veya sadece test edin - çalışıyor, destek olduğu anlamına geliyor. Değilse, php dil ​​desteği seçeneğini etkinleştirin

Tüm öğelerin nasıl etkileşime girdiğini gösteren şemaya bir göz atın (sayfa, form, işleyici)

Formu ve işleyiciyi çağırmak için kaynak kodu

Geri bildirim formunu içeren kalıcı bir açılır pencere açan düğmelerden birinin nasıl çalıştığına bir göz atalım. Verilen bu kaynak kodu, bir sayfaya bir veya iki kez ekleyebileceğiniz bir şey değildir ve işe yarayacaktır. Onu tasarımınıza ve ihtiyaçlarınıza uyacak şekilde özelleştirmeniz gerekecektir.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Geri arama isteğinde bulun Geri arama isteğinde bulunun

Geri arama isteğinde bulun Geri arama isteğinde bulunun

İndeks1.php işleyicisinin kaynak kodunun tamamı aşağıdadır; posta kutunuza gönderimi ayarlamak için " [e-posta korumalı]"kendi başınıza, geri kalanı prensip olarak değişmeden bırakılabilir

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Sizinle iletişime geçilecek

Sizinle iletişime geçilecektir body ( arka plan: #22BFF7 url(img/zakaz.jpg) üst -%70 merkez tekrarsız; ) setTimeout("location.replace("/index.html")", 3000); /*Geçerli sayfa adresini 3 saniye (3000 milisaniye) sonra değiştir*/

Formun işlevselliğini kontrol etme

Formumuzu test etmek için pencereyi açın ve verileri girin

Barındırma sisteminizin PHP dosyalarının işlenmesini desteklemesi gerektiğini bir kez daha hatırlatmama izin verin, aksi takdirde işleyicimiz yürütülmeyecek ve belirtilen e-posta adresine hiçbir mektup gönderilmeyecektir. Başarıyla doldurulmuş bir geri bildirim formunun sonucu

Benim için bu kadar, senaryonun anlamını ve işleyişini en iyi şekilde aktarmaya çalıştım. Herhangi bir sorunuz varsa yorumlardan veya VK'dan benimle iletişime geçmekten çekinmeyin (iletişim bilgilerine bakın). Kolay ve verimli çalışmalar dilerim.