Kalıcı bir pencerede geri bildirim formu. Kalıcı bir pencerede geri bildirim formu için Ajax Komut Dosyasında basit bir iletişim formu

Sitede bir kez ve belirli bir zaman aralığında gösterilen bir açılır pencereyi nasıl oluşturabileceğinize adadım. Yani bir seçenek olarak bu pencereye bir form ekleyebilirsiniz. Bu bir abonelik formu veya iletişim formu veya genel olarak herhangi bir şey olabilir. Verilerin sayfayı yeniden yüklemeden gönderilmesi için Ajax formlarını açılır pencerelerde görüntülemek daha iyidir.

Makale yapısı

Joomla veya WordPress gibi bir motorda bir web sitesi oluşturuyorsanız, elbette tasarımcılar da dahil olmak üzere formlar için çeşitli hazır çözümleri kullanabilirsiniz. Peki ya yalnızca saf HTML ile tasarım yapıyorsanız ve müşteri formların çalışabilmesi için "canlandırılmasını" isterse? Bu formun kullanışlı olduğu yer burasıdır.

GÜNCELLEME. 08/02/2018
Formun GitHub'da yayınlandığı dikkate alınarak makale yeniden yazılmıştır.

Öyleyse başlayalım. Öncelikle form kaynaklarını GitHub depomdan indirin.

Bu montajı Gulp görev yöneticisini kullanarak topladım. Onunla nasıl çalışılacağını yazdım, okuduğunuzdan emin olun.

Arşivi formla birlikte açın. Daha sonra, dist klasöründeki tüm içeriği site şablonunuzdaki formlar klasörüne (örneğin, ajax-form) kopyalayın. Daha sonra kaynakları (stilleri ve komut dosyalarını) birbirine bağlarız. Css ve js klasörlerinde sıkıştırılmış ve normal olmak üzere iki sürüm vardır. Gelecekte kodda değişiklik yapmayı planlıyorsanız sıkıştırılmamış sürümleri bağlamak daha iyidir.

Sitenizde jQuery kitaplığı zaten etkinse onu bağlamanıza gerek yoktur. Dikkat et .

Alan doğrulamanın HTML5 kullanılarak düzenlendiğini hemen belirteyim.

Form .simpleSendForm() yöntemiyle çağrılır, örneğin:

$("#idForm").simpleSendForm();

#idForm yerine form tanımlayıcısını belirtiyoruz. Genel olarak form başlatma kodunu scripts.js dosyasında bulabilirsiniz. Eklenti çağırma kodu oradan kesilebilir ve . jQuery.(document).ready() öğesini unutmayın.

Form bazı seçenekleri kabul edebilir.

• SuccessTitle (string) — Form gönderildiğinde gönderilen teşekkür mesajının başlığı. Varsayılan ayar "Bizi seçtiğiniz için teşekkür ederiz!"
• SuccessText (string) - Teşekkür mesajının başlığının altındaki metin. Varsayılan ayar "Sizinle kısa sürede iletişime geçeceğiz." şeklindedir.
• errorTitle (string) — form gönderme hata mesajının başlığı. Varsayılan "Mesaj gönderilmedi!" şeklindedir.
• errorSubmit (string) — form gönderme hata mesajının metni. Varsayılan "Form gönderilirken hata oluştu!" şeklindedir.
• errorNocaptcha (string) — captcha doldurulmamışsa hata metni.
• errorCaptcha (string) — kontrol başarısız olursa hata metni.
• mailUrl (string) — işleyici dosyasının yolu. Varsayılan "../form-submit/submit.php" şeklindedir. Eğer “form-submit” klasörünüz sitenin kök dizininde değilse tam yolunu değiştirip belirtmelisiniz.
• autoClose (boolean) - Başarılı form gönderiminden sonra pencereyi otomatik olarak kapatır (kalıcı penceredeki formlar için). Form penceresi kapanır ve 5 saniye sonra bir teşekkür mesajı görüntülenir. Bu sefer geçersiz kılınabilir.
• autoCloseDelay (sayı) - teşekkür mesajının görüntülenme süresi (milisaniye cinsinden), ardından kapanacaktır. Varsayılan 5000'dir (5 saniye).
• hata ayıklama (boolean) - varsayılan olarak false. Formda sorun varsa hata ayıklamayı etkinleştirin. Konsoldaki hata mesajlarına bakın.
• captcha (boolean) - varsayılan olarak false. Recaptcha 2.0'ı etkinleştirin veya devre dışı bırakın.
• captchaPublicKey (string) — recaptcha genel anahtarı.

Formumuz kalıcı bir pencerede de gösterilebilir. Modal kütüphane tarafından görüntülenecektir.

Düğme kodu

Form kodu

Kalıcı pencereyi ve formu başlatın. Pencerenin 3 saniye sonra otomatik olarak kapanmasını sağlayalım. Formun başarıyla gönderilmesinden sonra. Magnific Popup çağrı kodunu scripts.js dosyasında da bulabilirsiniz.

Bir formda recaptcha'yı etkinleştirmek istiyorsanız, formun html kodunda, görüntülemek istediğiniz yere recaptcha sınıfının bulunduğu boş bir blok eklemeniz gerekir. Daha sonra form eklentisini çağırma kodunda true değerine sahip captcha seçeneğini aktarıyoruz ve recaptcha genel anahtarınızı captchaPublicKey seçeneğine aktarıyoruz. Genel ve özel anahtarları alabilirsiniz.

Daha sonra form-submit dizininden form işleyicisi submit.php dosyasını açın. recaptchaOn değişkenini arıyoruz (7. satır civarında) ve onu true olarak ayarlıyoruz. Daha sonra $secret değişkenini arayın (yaklaşık 89. satır) ve özel anahtarı kendi anahtarınızla değiştirin.

Temelde her şey. Bu manipülasyonlardan sonra bir captcha görmelisiniz.

Lütfen demo sitesinde, Google'ın test anahtarları belirtildiği için captcha'nın test modunda çalıştığını unutmayın.

Şimdi form işleyici dosyasına (submit.php) bakalım ve ana kod parçalarını inceleyelim. İşleyici PHP'de çalışır, bu nedenle formu test etmek istiyorsanız .

İşleyici dosyasının yolunun form başlatma işleminde doğru şekilde belirtilip belirtilmediğine bakın:

mailUrl: — işleyici dosyasının yolu

Ayrıca recaptcha'nın doğru şekilde etkinleştirildiğini de kontrol edin. Yani devre dışı bırakılırsa, başlatma kodundaki recaptcha seçenekleri ve işleyici dosyasındaki $recptchaOn, recaptcha etkinse false veya true olarak ayarlanmalıdır.

Recaptcha (recaptcha çağrısı) ve $recaptchaOn (işleyici dosyası) değerlerinin iletilip iletilmediğini kontrol edin - doğru. Ayrıca anahtarları doğru şekilde belirleyip belirlemediğinizi de kontrol edin (genel ve özel).

Öncelikle tarayıcı konsoluna bakıp hataları kontrol etmenizi öneririm. Ayrıca jQuery kütüphanesinin etkin olup olmadığını kontrol edin. scripts.js dosyasının doğru şekilde eklendiğini kontrol edin. Her şey yolundaysa, debug: true seçeneğiyle hata ayıklamayı etkinleştirmeyi deneyin. Açtıktan sonra hatalar için konsola bakın.

Bu formdur. Web sitenizde kullanın, umarım işinize yarar. Söylenecek başka ne var? Şimdi yorumlarda konuşalım. Anlaşılmayan bir şey olup olmadığını sorun. Ayrıca bir hata bulursanız lütfen hemen bana bildirin, düzeltelim...

Bu kadar. İlginiz için teşekkür ederiz. Sonraki yazılarda görüşmek üzere!

Merhaba. Bu dersimizde tam teşekküllü bir geri bildirim formu hazırlayacağız ve bu form, sayfadaki bir düğmeye tıkladığınızda kalıcı bir pencerede görünecektir. Bu dersi sıfırdan, yalnızca jQuery çerçevesini ve küçük bir JavaScript'i kullanarak kendim yaptım. Ders çok ilginç, bu yüzden lütfen atlamayın! Aşağıda oluşturduğum formun bir gösterimini görebilir ve indirebilirsiniz. iş için gerekli dosyalar:

Adım 1. Geri bildirim formunun genel tanımı ve işleyişi:

Öncelikle size hangi dosyalara ihtiyacımız olacağını ve aslında bunlara neden ihtiyaç duyulduğunu anlatacağım:

• resimler - formumuzdaki tüm resimlerin saklandığı klasör;
• index.html - geri bildirim formunu çağırma düğmesinin bulunacağı ana "indeks" dosyası;
• contact.html formun kendisini içeren dosyadır. Kalıcı pencereye dahil edilecek olan bu dosyadır;
• send.php - mektupların gönderilmesinden sorumlu bir işleyici dosyası;
• jquery.js - ana jQuery çerçevesi;
• style.css, formumuz için basamaklı stil sayfaları içeren bir dosyadır.

O halde sırayla devam edelim... Form şu şekilde çalışacak: Kullanıcı, kalıcı pencereyi çağırmak için düğmenin bulunduğu sayfaya gider, ona basar, ardından ziyaretçinin tüm bilgileri girdiği form görünür. mesajın verisi ve metni girilip gönderilir, ardından mektubun başarılı veya başarısız gönderildiğine ilişkin mesajın bulunduğu sayfaya yönlendirilir. Hepsi bu kadar, şimdi formumuzu oluşturmaya başlayalım...

Adım 2. Formu çağırmak için düğme.

Bu nedenle, formun bulunduğu kalıcı penceremizin görünmesi için onu bir şekilde bunu yapmaya zorlamamız gerekiyor. Bunu yapmak için sayfaya normal bir düğme yerleştirmemiz yeterli. Böyle bir düğmenin kodu, kendisine uygulanan stillerle birlikte aşağıda gösterilmiştir:

Yöneticiye bir mesaj yazın

3. Adım. Formun kendisi + bunun için ayarlar

Şimdi geri bildirim formumuzu nereye yerleştireceğimizi bulalım. Ve zaten dersin kaynak kodunda bulunan contact.html dosyasında bulunacaktır. Bu form oldukça küçük olduğundan kodunu aşağıya koyacağım:

Yönetime Mesaj Gönderme:

Gördüğünüz gibi kodu incelediğimizde çıplak gözle bile formun daha iyi görüntülenmesi için bir tablo düzeni kullandığımı görebilirsiniz. Tüm form alanlarını eşitlemek açısından bu benim için çok faydalı oldu.

4. Adım. Mektupların gönderilmesinden sorumlu işlemci

Burada size hızlı bir şekilde mektup göndermek için kullanılan ana işlemciyi anlatacağım. Kaynak kodunda olduğu için kodunu burada vermeyeceğim. İçeriğini indirin ve görüntüleyin. Eğer PHP'yi benim gibi orta düzeyde biliyorsanız, bu işleyicinin kodunun tamamını kendiniz kolayca ayrıştırabilirsiniz. Her şey hazırsa devam edelim...

Adım 5. Ana jQuery çerçevesini “vidalamak”

Şimdi, herhangi bir jQuery dersinde olduğu gibi, ana jQuery çerçevesini “vidalamamız” gerekiyor. Bunun için biraz geriye giderek butonumuzun bulunduğu yere ve etiketlerin arasına aşağıdaki kodu ekleyelim:

Adım 6: Formu Şekillendirme

Gördüğünüz gibi formumuza ait stiller style.css dosyasında ayrı ayrı yer alıyor çünkü bu stiller çok fazla yer kaplıyor. Aşağıdaki kodu indeks dosyamıza bağlamamız yeterli:

Adım 7. jQuery iyileştirmeleri

Şimdi form kalıcı penceresinin tam olarak çalışması için aşağıdaki jQuery kodunu eklemeliyiz:

$(function() ( $("a").overlay(function() ( var sarma = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( sarma.load(this.getTrigger().attr("href"));

Çözüm.

İlginç geri bildirim formumuz hazır. Yol uzun ve zordu, bu yüzden herhangi bir şey anlamıyorsa, bu derse yapılan yorumlarda sorularınızı dinleyeceğim. Benim için bu kadar, tekrar görüşmek üzere arkadaşlar!

Saygılarımla, jQuery rehberiniz - M.K.

Herkese selam. Bir düğmeye tıkladıktan sonra kalıcı bir pencerede görünen ve gönderdikten sonra başarı veya başarısızlıkla ilgili bir mesajın görüntüleneceği bir formun nasıl uygulanacağına ilişkin soru bombardımanına tutulduk.

İnternette buna benzer pek çok şey olduğunu düşünüyorum ama insanlar sorduğu için bunu yapmaya karar verdim. Ayrıca, geri arama düğmesinin uygulanabilmesi için bu tür işlevlerin hemen hemen her açılış sayfasında mevcut olması gerekir. Ve aslında, artık açık formların kalıcı bir pencerede gizlenen ve bir düğmeye tıklandıktan sonra açılan formlardan daha kötü çalıştığını gösteren AB testi sonuçlarının sayısı giderek artıyor.

Bazıları bunun, insanların yavaş yavaş "bağışıklık geliştirmesi" ve açık biçimin agresif bir satış olmasından kaynaklandığını öne sürüyor. İddiaya göre artık kullanıcının açık bir form gördüğünde kendisine bir şey "satmaya" çalıştığına inandığı dönem geldi. Bu teoriye tamamen katılmıyorum, ancak bir miktar doğruluk var. Bu bazı iş türlerinde geçerli olabilir. Şimdi formu uygulamaya geçelim.

Not! Her eylemi ayrıntılı olarak anlatmayacağım, ancak kaynak kodunda size hazır bir sürüm sunacağım. Sorularınız varsa yorumlara yazın. çözeceğiz :)

Bugün jQuery ile değil, butonun ve formun düzeniyle başlayacağız. Tüm komut dosyalarını sayfanın sonuna ekleyeceğiz.

Tıklandığında kalıcı bir pencere açacak bir düğme:

Başvurunuzu gönderin

Herhangi bir sınıfı ayarlayabilirsiniz, ancak href'te #modal yazın - bu, gölgeli ve iletişim formlu kabın kimliği olacaktır.

Şimdi formun kodunu ve formun yer alacağı bloğu vereceğim:

İletişim bilgilerinizi bırakın, danışmanımız sizinle iletişime geçsin. Bu formu web sitem için istiyorum.

Stilleri ekledikten sonra şöyle görünüyordu:

Kalıcı bir pencere oluşturmak için Remodal kütüphanesi kullanıldı. Bu, yalnızca animasyonlu modal pencereler oluşturmak için kullanılan bir dizi css ve js dosyasıdır. Bağlantıdan veya yazının sonundaki düzenlemelerimle indirebilirsiniz.

Head etiketlerinin arasına stiller ekliyoruz:

Ve kapanış gövde etiketinden önce komut dosyaları ekleyin:

Script.js, formu işlemeye yönelik bir komut dosyasıdır. Sayfayı yeniden yüklemeden tüm prosedürü gerçekleştirmemize olanak tanıyan aynı Ajax:

$(document).ready(function () ( $("form").submit(function () ( // Form kimliğini alın var formID = $(this).attr("id"); // Bir karma ekleyin isme göre var formNm = $("#" + formID(( type: "POST", url: "mail.php", data: formNm.serialize(), başarı: function (data) ( // Gönderim sonucunun çıktı metni $(formNm).html(data); error: function (jqXHR, text, error) ( // Gönderim hatasının metnini gösteriyor $(formNm).html(error); ) ) ));

Modal pencere ve formdan sorumlu dosyalardan css ve js'nin kaynak kodunu oldukça büyük oldukları için vermeyeceğim. Eğer öyleyse, kaynağa bakın. Ancak PHP işleyicisi büyük ölçüde standarttır (eğer öyle söyleyebilirsem):

Lütfen e-posta adreslerinizi kendi e-posta adresinizle değiştirmeyi unutmayın.

Bu elimizdeki ajax formu. Her bir öğenin nasıl yapıldığını ayrıntılı olarak açıklamaya çalışmadığım için özür dilerim. Sadece bitmiş bir sonuç vermek istedim ama tüm animasyonları ve görünümleri açıklamanın bir anlamı yok. Kaynağı indirin ve web sitenize uygulayın. Ve bugünlük bu kadar. Hepinize iyi şanslar!

Arkadaşlar, formu gerçek veya sanal bir sunucuda (barındırma) test etmenizi öneririm. Lütfen sunucunuzun PHP'yi desteklediğinden, ücretli bir planınız olduğundan ve deneme süreniz olmadığından emin olun. Aksi takdirde vakaların %90'ında form çalışmayacaktır.

Dizin dosyasını tarayıcınızda yeni açtıysanız ve "Gönder" düğmesini tıkladıysanız, gelen kutunuza bir mektup gelmesini beklemeyin. Php sunucu taraflı bir dildir!

Bunu çözemeyecek ve formu kendiniz yapamayacak kadar tembelseniz, dikkat etmenizi öneririm.

Makalenin güncellenmiş hali şu adreste yer almaktadır: