Kalıcı pencerede geri bildirim formu. Kalıcı bir pencerede Ajax geri bildirim formu Kalıcı bir pencereyle bir formu çağırma

Sitede bir kez ve belirli bir süre sonra gösterilen bir açılır pencere nasıl oluşturabileceğinizi anlattım. Böylece, bu pencerede bir seçenek olarak bir form ekleyebilirsiniz. Bir abonelik formu veya bir iletişim formu, genel olarak herhangi bir şey olabilir. Açılır pencerelerde, sayfa yeniden yüklenmeden verilerin gönderilebilmesi için ajax formlarının görüntülenmesi daha iyidir.

Makale yapısı

Joomla veya WordPress gibi bir motorda site yapıyorsanız, o zaman elbette kurucular da dahil olmak üzere formlar için çeşitli hazır çözümler kullanabilirsiniz. Ancak, yalnızca saf HTML'de oluşturuyorsanız ve müşteri formları çalışacak şekilde "canlandırmak" isterse ne olur? Bu formun kullanışlı olduğu yer burasıdır.

güncelleme 02.08.2018
Makale, formun GitHub'da yayınlanmış olduğu dikkate alınarak yeniden yazılmıştır.

Öyleyse başlayalım. Her şeyden önce, form kaynaklarını Github depomdan indirin.

Bu montajı Gulp görev yöneticisini kullanarak topladım. Onunla nasıl çalışacağımı yazdım, mutlaka okuyun.

Formu siteye bağlama

Arşivi formla paketinden çıkarın. Ardından, dist klasöründeki tüm içeriği site şablonunuzdaki form klasörüne (örneğin, ajax-form) kopyalayın. Ardından, kaynakları - stilleri ve komut dosyalarını - bağlarız. Css ve js klasörlerinde sıkıştırılmış ve düzenli 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 eklemek daha iyidir.

JQuery kitaplığı sitenizde zaten varsa, ekleyemezsiniz. Dikkat et .

Form başlatma

Alan doğrulamanın HTML5 araçları kullanılarak düzenlendiğini hemen not edeceğim.

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

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

#idForm yerine form kimliğini belirtiyoruz. Genel olarak, form başlatma kodunu scripts.js dosyasında bulabilirsiniz. Eklenti çağrı kodu buradan kesilebilir ve . jQuery.(document).ready() hakkında unutma.

Form bazı seçenekleri kabul edebilir.

Seçenekler

SuccessTitle (string) - Form gönderildiğinde teşekkür mesajının başlığı. Varsayılan "Bizi seçtiğiniz için teşekkür ederiz!"
SuccessText (string) - Teşekkür mesajı başlığının altındaki metin. Varsayılan "Sizinle en 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önderilemedi!" şeklindedir.
errorSubmit (string) - Form gönderme hata mesajının metni. Varsayılan "Form gönderilirken hata oluştu!" şeklindedir.
errorNocaptcha (string) — güvenlik kodu doldurulmamışsa hata metni.
errorCaptcha (dize) — 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ünde değilse tam yolu değiştirip belirtmelisiniz.
autoClose (boolean) - Başarılı bir form gönderiminden sonra pencereyi otomatik olarak kapatır (kalıcı bir penceredeki formlar için). Form penceresi, 5 saniye sonra bir teşekkür mesajı göstererek kapanır. Bu sefer geçersiz kılınabilir.
autoCloseDelay (sayı) - Kapattıktan sonra teşekkür mesajının gösterilme süresi (milisaniye olarak). Varsayılan değer 5000'dir (5 sn).
hata ayıklama (boolean) — varsayılan olarak yanlış. Formla ilgili sorunlar varsa hata ayıklamayı etkinleştirin. Konsoldaki hata mesajlarına bakın.
captcha (boolean) - varsayılan olarak yanlış. Recaptcha 2.0 captcha'yı etkinleştirin veya devre dışı bırakın.
captchaPublicKey (string) — recaptcha'nın genel anahtarı.

Kalıcı bir pencerede form

Formumuz ayrıca kalıcı bir pencerede gösterilebilir. Kütüphane modalın çıktısını verecektir.

HTML Kodu

Düğme Kodu

arama iste

Form Kodu

Kalıcı pencereyi ve formu başlatıyoruz. 3 saniye sonra pencerenin otomatik olarak kapanmasını sağlayalım. başarılı form gönderiminden sonra. Magnific Popup'ı çağırma kodunu scripts.js dosyasında da bulabilirsiniz.

Kalıcı pencereli bir form çağırma // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", FixedContentPos: false, FixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, uninstallDelay: 300, mainClass: "mfp-top-up" )); // ===== Modal formu başlat ==== $("#idForm").simpleSendForm (( SuccessTitle: "Başvurunuz kabul edildi!", SuccessText: "Çalışanımız en kısa sürede sizinle iletişime geçecektir." , autoClose : true, autoCloseDelay: 3000 )); Recaptcha nasıl etkinleştirilir?

Recaptcha'yı forma dahil etmek istiyorsanız, formun html kodunda görüntülenmesini istediğiniz yere recaptcha sınıfıyla boş bir blok eklemeniz gerekir. Ardından, form eklentisini çağırma kodunda, captcha seçeneğini true değeriyle iletiyoruz ve captchaPublicKey seçenekleri, genel recaptcha anahtarınızı iletiyor. Genel ve özel anahtarları alabilirsiniz.

// ===== Captcha'yı şu şekilde başlat ==== $("#idForm").simpleSendForm(( SuccessTitle: "Başvurunuz kabul edildi!", SuccessText: "Ekibimiz en kısa sürede sizinle iletişime geçecektir. ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Ardından, form-gönderme dizininden send.php form işleyici dosyasını açın. recaptchaOn değişkenini (yaklaşık 7. satır) arıyoruz ve true olarak ayarlıyoruz. Ardından, $secret değişkenini (yaklaşık 89. satır) ararız ve özel anahtarı kendi anahtarımızla değiştiririz.

Temelde her şey. Bu manipülasyonlardan sonra bir captcha'nız olmalıdır.

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

Şimdi form işleyici dosyasına (submit.php) bir göz atalım ve ana kod parçalarını gözden geçirelim. İşleyici php'de çalışır, bu nedenle formu test etmek istiyorsanız .

Olası hatalar Formdan mesaj gönderilmez, sadece ön yükleyici çalışır ve hepsi bu. Sorun nedir?

İşleyici dosyasına giden yolun form başlatmada doğru bir şekilde belirtilip belirtilmediğini kontrol edin:

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

Ayrıca recaptcha'nın doğru eklendiğ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.

Google Recaptcha formda görünmüyor

recaptcha (recaptcha çağrısı) ve $recaptchaOn (işleyici dosyası) değerlerinin geçip geçmediğini kontrol edin — doğru. Ayrıca, genel ve özel anahtarları doğru belirtip belirtmediğinizi de kontrol edin.

Her şeyi talimatlara göre yaptım ama form çalışmıyor, hatayı nerede arayabilirim?

Her şeyden önce, tarayıcı konsoluna bakmanızı ve hata olup olmadığını kontrol etmenizi tavsiye ederim. Ayrıca jQuery kitaplığının dahil olup olmadığını da kontrol edin. scripts.js dosyasının doğru eklenip eklenmediğini kontrol edin. Her şey yolundaysa, debug: true seçeneğiyle hata ayıklamayı etkinleştirmeyi deneyin. Açtıktan sonra, konsolda hata olup olmadığını kontrol edin.

İşte böyle bir form. Sitenizde kullanın, umarım işinize yarar. Söylenecek başka ne var? Şimdi konuşalım - yorumlarda. Net olmayan bir şey olup olmadığını sorun. Ayrıca bir hata bulursanız lütfen hemen bildirin, düzeltelim...

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

Merhaba sevgili okuyucular a! Bu eğitimde, size JQuery doğrulaması ile nasıl bir HTML5 e-posta abonelik formu yapabileceğimizi göstereceğim. Kontrol etmek için normal ifadeler kullanacağız ve girilen adresi MySQL veritabanına kaydedeceğiz. Böylece kaydederken AJAX kullanılacaktır (yani sayfayı yeniden yüklemeden PHP betiğini çağıracağız). Sonucu demo sayfasında görebileceğiniz gibi kaynak kodunu da indirebilirsiniz. Başlayalım!

Temel işaretleme

Yeni bir index.html dosyası oluşturarak başlayalım. Ve HTML5'e bağlı kalarak basit bir döküman yapısı yapacağız. Ayrıca CSS stillerini ve kitaplığı hemen bağlayacağız, girilen e-postayı kontrol ederken buna ihtiyacımız olacak:

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

Doğrulayıcı ile jQuery E-posta Abonelik Formu

Artık formu oluşturmak için her şey hazır!

E-posta Abonelik Formu

Formumuzun amacı, ziyaretçinin girdiği e-posta adresini doğrulamak ve bir şekilde abone listesine kaydetmektir. Bunu yapmak için, adresin işlendiği ve veritabanında veya bir dosyada saklandığı, herkesin uygun olduğu şekilde, bir düğme ile normal bir form oluşturuyoruz. Derste, verileri ara belleğe kaydetmeyi ele alacağız. Böylece daha anlaşılır olacak, girilen adresin doğruluğunu kontrol etmeye odaklanacağız. Abonelik formu şu şekilde görünür:

1
2
3
4
5
6
7
8
9

Abone

Adresi kaydettikten sonra formun daraltılabilmesi için formu bir div #completeform bloğuna sarın.

Giriş alanında birkaç yeni özellik de kullanıyoruz. Mobil tarayıcıların uygun klavyeyi görüntüleyebilmesi için alan türü "e-posta" olarak ayarlanmıştır. Chrome ve bazı WebKit tarayıcıları, kullanıcının bir adres girip girmediğini kontrol etmek için bunu kullanır. Otomatik düzeltme ve otomatik büyük harf yapma özellikleri özellikle mobil tarayıcılar için tasarlanmıştır.

Span with id hatası başlangıçta gizlenir, bu, display özelliğinin sorumluluğu olan none değerindedir, bu, stil dosyamızda biraz sonra yazılır. Ancak kullanıcı, alana geçersiz bir e-posta adresi girer girmez bir uyarı mesajı görüntülenir.

jQuery doğrulayıcı ve AJAX isteği

Basit bir e-posta adresi doğrulama özelliği ile başlayalım. Metin dizesinin standart e-posta sözdizimiyle eşleşip eşleşmediğini kontrol etmek için bir normal ifade dizesi kullanırız, ardından bir boole true aksi takdirde false döndürürüz.

CompleteInviteForm() işlevine bir göz atalım. Adres giriş formunun karışmaması için 400 milisaniye fadeOut yapalım. Ve geri arama olarak $.ajax() fonksiyonuna dönelim, onu kullanarak save.php dosyasını çağıralım ve girilen adresi veri tabanına kaydedelim. Save.php dosyasının kaynak kodunu biraz aşağıda vereceğim ama şimdilik $.ajax() fonksiyonu ile ilgilenelim.

$.ajax - Bir HTTP isteği kullanarak uzak bir sayfa yükler. $.ajax() işlevinin argümanı, isteği başlatmak ve yönetmek için kullanılan anahtar/değer çiftlerinden oluşan bir nesnedir. Bizim durumumuzda, aşağıdaki nesneleri kullanacağız:

type:'POST' - dosyaya istek türünü seçin, varsayılan olarak GET , POST ve GET arasındaki fark çok büyük değildir, yalnızca bir GET isteğinde, veriler başlıkta ve POST'ta iletilir. istek gövdesi, bu nedenle POST kullanarak daha fazla bilgi aktarabilirsiniz;
url:'save.php' - yürütülebilir dosyanın yolu;
data:'email='+$("#email").val() - sunucuya gönderilen veriler. #email CSS seçiciyi kullanarak, id="email" ile öğeye başvuracağız ve değer özniteliğinin içeriğini, yani kullanıcı tarafından girilen e-postaları alacağız. Ve bu içeriği save.php dosyasında kullanacağımız email değişkenine atayın;
başarı: function()( $('#completeform').before('Her şey hazır! Posta listesine eklendiniz. ');) - ajax isteği başarıyla tamamlandığında başarı işlevi çağrılır. İşlev aşağıdakileri yapar. #completeform div'den önce, kullanıcıya e-postalarının posta listesine eklendiğini bildirmek için içerik ekleyin.

1
2
3
4
5
6
7
8
9
10
11
12

işlev tamamlamaInviteForm() (
setTimeout(işlev () ( $("#completeform" ) .fadeOut (400 , işlev () ()
$.ajax((
yazın: "POSTA" ,
url: "save.php" ,
veri: "email=" + $("#email" ) .val () ,
başarı: işlev()(
$("#completeform" ) .before ("Bitirdiniz! Posta listesine eklendiniz." ) ; )
} ) ;
} ) ;
} , 1100 ) ;
}

SetTimeout yöntemi ile de formun gizlenmesi ve ajax isteğinin çalıştırılması 1100 milisaniyelik bir gecikme ile asenkron olarak gerçekleşir.

form işleme

Sayfa öğelerine erişme kolaylığı için, #error ve #btnwrap seçicileriyle birkaç değişken oluşturalım.

var erdiv = $("#hata" ) ;
var btnwrap = $("#btnwrap" ) ;

Canlı olay işleyiciyi kullanarak, id="sendbtn" ile "Abone Ol" düğmesinin tıklanmasını izliyoruz. e.preventDefault() yöntemi; eylemde tarayıcının standart davranışını iptal eder (düğmeye tıklayarak), yani sayfa yenilemeyi ve URL değişikliğini iptal ederiz. Girilen e-postayı emailval değişkenine atıyoruz ve bu değişkeni işlemeye başlayabiliriz.

İlk if(!isEmail(emailval)) if(!isEmail(emailval)) isEmail işlevinin false (false) döndürüp döndürmediğini kontrol eder, bu, kullanıcı tarafından girilen e-posta adresinin normal ifadeyle eşleşmediği, yani doğru olmadığı anlamına gelir, bildireceğiz kullanıcı hata bloğunda bununla ilgili ve mesajı görüntüleyin (Doğru e-posta adresini girmediniz).

Şimdi ikinci if, yalnızca kullanıcı geçerli bir e-posta adresi girdiyse yürütülür. Ardından adresi kaydetme işlemine başlayabiliriz.

İşlemi görsel hale getirmek için hata bloğuna uygun metni, "Abone Ol" butonunun bulunduğu bloğa ise GIF görseli koyuyoruz. Ve yukarıda tartıştığımız completeInviteForm() işlevini çağırıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

if (! isEmail(emailval) ) (
erdiv.html("Geçerli bir mail adresi girmediniz" ) ;
erdiv.css("göster" , "engelle" ) ;
}
if (isEmail(emailval) ) (
erdiv.css ("renk" , "#719dc8" ) ;
erdiv.html ("işleniyor..." ) ;
(completeInviteForm() , 900 ) ;
}
} ) ;
} ) ;

Veri tabanı

Girilen adresi veritabanına kaydetme yöntemini seçtiğim için kısaca veritabanının kendisini ve tabloyu oluşturmaktan ve ayrıca söz verdiğim gibi MySql veritabanı ile çalışan save.php dosya kodundan bahsedeceğim.

Bunun için yerel bir sunucuya ihtiyacımız var, ben Denwer kullanıyorum. Eminim birçok kişi kullanır, bu yüzden ayrıntılara girmeyeceğim. phpMyAdmin'e gidin ve e-posta veritabanını oluşturun:

Abone adreslerini saklamak için iki alanlı bir tabloya ihtiyacımız var, buna adres diyelim:

Alanlar aşağıdaki gibi olacaktır:

id - e-posta adresi tanımlayıcısı (birincil anahtar olarak da bilinir);
adres - e-posta adresinin kendisi.

save.php dosyası

Oluşturulan aboneliğin son öğesi olan save.php dosyası hakkında konuşmanın zamanı geldi. Bir e-posta adresini bir veritabanına kaydetmek için bir PHP betiği içerir.

1
2
3
4
5
6

İlk olarak, global POST dizisinde e-posta değişkeninin var olup olmadığını kontrol ederiz ve eğer öyleyse, değerini $email yerel değişkenine atarız. Ardından, sunucuya mysql_connect () kök kullanıcıyla bir bağlantı kuruyoruz, şifre yok. E-posta veritabanını seçiyoruz ve bir veritabanı sorgusu yürütüyoruz, adres tablosuna $email değişkeninin değerinin adres alanlarına ekleneceği yeni bir kayıt ekliyoruz. Bu kadar!

Bu ders biter. Bu aboneliğin yalnızca sunucuda çalıştığını hatırlatmak isterim (çünkü biz tabanı kullanıyoruz ve ).

Merhaba. Bu derste tam teşekküllü bir geri bildirim formu yapacağız ve sayfadaki bir düğmeye tıklandığında kalıcı bir pencerede görünecektir. Bu dersi sıfırdan, yalnızca jQuery çerçevesini ve küçük bir JavaScript "th" kullanarak kendim yaptım. Ders çok ilginç, bu yüzden lütfen atlamayın! Aşağıda, aldığım formun bir tanıtımını görebilir ve ayrıca iş için gerekli dosyalar:

Adım 1. Geri bildirim formunun genel açıklaması ve işleyişi:

İlk olarak, size hangi dosyalara ihtiyacımız olacağını ve aslında neden ihtiyaç duyulduğunu söyleyeceğim:

resimler - formumuzun tüm resimlerinin saklandığı klasör;
index.html - geri bildirim formunu çağırmak için düğmeyi içerecek olan ana "dizin" dosyası;
contact.html - formun kendisini içeren dosya. Kalıcı pencereye bağlanacak olan bu dosyadır;
send.php - mesaj gönderen işleyici dosyası;
jquery.js - temel jQuery çerçevesi;
style.css, formumuz için basamaklı stil sayfası dosyasıdır.

O halde daha ileri ve sırayla gidelim... Formun çalışması şu şekilde olacaktır: Kullanıcı modal pencereyi çağırmak için butonun bulunduğu sayfaya girer, tıklar ve ardından ziyaretçinin gireceği bir form gelir. mesajın tüm verilerini ve metnini girer ve gönderir, ardından mektubun başarılı veya başarısız gönderilmesi hakkında bir mesaj içeren bir 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 buna zorlamamız gerekiyor. Bunun için sayfaya sıradan bir buton 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

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

Şimdi geri bildirim formumuzu nerede bulacağımızı bulalım. Ve zaten dersin kaynak kodunda bulunan contact.html dosyasında olacaktır. Bu form oldukça küçük, bu yüzden kodunu aşağıya koyacağım:

Yönetime Mesaj Göndermek:

*İsim: *E-posta: Ders: *İleti:

Gördüğünüz gibi, çıplak gözle bile kodda dolaşırken, formun daha iyi görüntülenmesi için tablo düzeni kullandığımı görebilirsiniz. Formun tüm alanlarını eşitlemek benim için çok faydalı oldu.

Adım 4. E-posta göndermekten sorumlu işleyici

Burada size e-posta göndermek için ana işleyiciden hızlıca bahsedeceğim. Kaynak kodunda olduğu için burada kodunu vermeyeceğim. İçeriğini indirin ve görüntüleyin. Eğer php'yi benim gibi orta düzeyde bir yerde biliyorsanız, bu işleyicinin tüm kodunu kendiniz kolayca sökebilirsiniz. Her şey hazırsa, devam edin ...

5. Adım: Core jQuery Çerçevesinde İnce Ayar Yapma

Şimdi, herhangi bir jQuery eğitiminde olduğu gibi, çekirdek jQuery çerçevesini "vidalamamız" gerekiyor. Bunun için biraz geriye giderek butonumuzun bulunduğu yere ve etiketlerin arasına aşağıdaki kodu yapıştıralım:

Adım 6 Formu Şekillendirme

Gördüğünüz gibi, formumuz için stiller, style.css dosyasında ayrı ayrı yerleştirilmiştir, çünkü bu stiller çok fazla yer kaplar. Sadece aşağıdaki kodu indeks dosyamıza bağlamamız gerekiyor:

Adım 7. jQuery İyileştirmeleri

Şimdi, form modunun tam olarak çalışması için aşağıdaki jQuery kodunu eklememiz gerekiyor:

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

Çözüm.

Böylece ilginç geri bildirim formumuz hazır. Yol uzun ve zordu, bu yüzden birisi bir şeyi anlamadıysa, bu dersin yorumlarında sorularınızı dinleyeceğim. Tekrar görüşene kadar benim için hepsi bu kadar arkadaşlar!

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

Kişileri, kullanıcılardan geri bildirim almak için ayrı, özel olarak oluşturulmuş sayfalarda görmeye hepimiz alışkınız. Kural olarak, bu tür sayfalarda, iletişim formlarına ek olarak, etkileşim ve iletişim için birçok başka bilgi yerleştirilir. Mekanizma hata ayıklandı, yıllar boyunca test edildi ve mükemmel çalışıyor. Ancak bazı durumlarda, kullanıcıları başka sayfalara yönlendirmeden ayrı bir iletişim formunu açılır pencere olarak görüntülemek gerekli hale gelir.
Bir ara jQuery üzerinde çalışmayı düşündük. Bugün, site için ayrı, orijinal olarak tasarlanmış, açılan bir iletişim formu oluşturmak için ilginç bir çözüm sunmak istiyorum.

Bence, kullanıcılarla etkileşim araçlarının harika bir örneği.

Bir örneğe baktı. Şimdi, Html'de genel yapıyı oluşturmaktan CSS ile mizanpajı şekillendirmeye kadar bu formu parçalara ayıralım.

Form HTML kodu

Doğaüstü bir şey yok, yalnızca normal bir iletişim formunun mümkün olan en basit iskeleti, belirli bir kimliğe ve sınıfa sahip bir blok div öğesine yerleştirilmiş, formun css'deki görünümünü daha da şekillendirmek ve etkinleştirmemiz ve kapatmamız gereken küçük javascript ile etkileşim kurmamız gerekiyor. açılır form.

kapalı Bize mesaj gönder

kapalı Bize mesaj gönderin Lütfen mesajınızı buraya giriniz..

Ayrıca pop-up form aktif edildiğinde genel arka planı karartmak için bir katman oluşturmamız gerekiyor. Bu görev farklı şekillerde yapılabilir, ancak çok akıllı olmayacağız ve ona bir tanımlayıcı vererek başka bir div eklemeyeceğiz: id="fade" ve bir class: class="black-overlay". Gerekirse uzun süre aramamak için formun yanına yerleştirebilirsiniz.

Geri bildirim

Muhtemelen kapat düğmesinin iletişim formu bloğunda, başlığın hemen önüne yazıldığını fark etmişsinizdir ve bu mantıklıdır, ancak başka nerede olursa olsun, düğmenin formla birlikte görünmesi ve kaybolması gerekir. Kapat düğmesinin görünümünü ve konumunu CSS'de daha fazla oluşturacağız.

Hepsi bu kadar, şimdi açılır geri bildirim formunu içeren sayfanın tam Html koduna bakalım:

Açılır iletişim formu kapalı Bize mesaj gönderin Lütfen mesajınızı buraya giriniz..

İletişim formumuzu CSS ile şekillendiren eğlenceli kısma geçmeden önce, bir adım geriye gidelim. En dikkatli olanlar muhtemelen formu açma ve kapatma düğmelerinin bir susturucu href="javascript:void(0)" ile bağlantılar olarak uygulandığını fark ettiler. Bu iyi mi kötü mü kendim için kesin bir cevap bulamadım, bu yöntemi alışkanlıktan kullanıyorum. Komut dosyası tarafından onclick olayının işlendiği öğeler için, veya kullanılmasının daha mantıklı ve doğru olduğunu düşünüyorum. Dilerseniz bu örnekteki butonlar ile bunu her zaman yapabilirsiniz.

CSS Büyüsü

Bu geri bildirim formu, bazı tasarım ince ayarlarıyla orijinal tarzda yapılmıştır, bu nedenle, yalnızca modern CSS3 standartlarını kullanan düzen seçeneği oldukça sorunludur.
Tüm tasarımın temeli, iletişim formunun arka planı, zarfın basit bir resmi olacak ve kullanıcıyı önünde ne açıldığına dair hiçbir şüphe bırakmayacak)))) Kapat düğmesinde ayrıca bir çift kullanıyoruz küçük resimlerin fareyle üzerine gelindiğinde değişmesi için. Tüm bu resimleri kolayca kendinize ve genel olarak butonlara dönüştürebilirsiniz, cesaretiniz varsa CSS3 kullanmaya başlayabilirsiniz.

Ve burada, doğrudan CSS kodunun kendisi, harika formumuz, netlik sağlamak ve gereksiz sorulardan kaçınmak için birkaç yorumla birlikte:

Kodun oldukça hacimli olduğu ortaya çıktı, peki, ne yapabilirsiniz, CSS3 standardının yeni özelliklerini ve işlevlerini denemenin ve uygulamaya koymanın elbette izin verildiği ve haklı olduğu zevki kendime inkar edemem. Bu sayede ilginç ve taze yerleşim çözümleri ortaya çıkıyor. Hatasız ve şüphesiz değil ama bu gerçek bir hareket ve aynı zamanda faydalı bir uygulama.

Tüm! Az önce, sizinle birlikte, kullanıcılarla etkileşime geçmek için harika bir araç, site için açılır bir iletişim formu oluşturduk. Sadece canlı bir örneğe bakmanız, dilerseniz kaynak kodunu indirmeniz ve php işleyicinizi forma eklemeniz yeterli.

Kaynak arşivde, ihtiyacınız olan her şeyi ve form için arka plan resimleri için birkaç seçenek daha bulacaksınız.

05/21/2017 tarihinden itibaren güncelleme
Form için en basit php işleyicisini ve özelleştirme için yapılandırma dosyasını bulacağınız “posta” klasörünü kaynak arşive ekledim. İşleyici bu forma bağlıdır, küçük bir talimat ve doğrudan işleyici dosyalarının koduna yazılan yorumlar, umarım neyin, nerede ve neden olduğunu anlamanıza yardımcı olur.

Tüm saygımla, Andrew

Herkese selam. Bir düğmeye tıkladıktan sonra kalıcı bir pencerede görünen bir formun nasıl uygulanacağına dair sorularla bombardımana tutulduk ve gönderdikten sonra bir başarılı veya başarısız mesajı görüntülenecekti.

Bence internette zaten çok şey var ama insanlar sorduğu için yapmaya karar verdim. Ayrıca, bir geri arama düğmesi uygulamak için hemen hemen her açılış sayfasında bu tür işlevsellik bulunmalıdır. Gerçekten de, açık formların kalıcı bir pencerede gizlenen ve bir düğmeye bastıktan sonra açılanlardan daha kötü çalıştığını söyleyen AB testinin giderek daha fazla sonucu var.

Bazıları bunun, insanların yavaş yavaş "bağışıklık geliştirmesinden" kaynaklandığını ve açık formun agresif bir satış olduğunu iddia ediyor. İddiaya göre, şimdi kullanıcının açık bir form görünce kendisine bir şey "satmaya" çalıştıklarına inandığı zamandır. Bu teoriye tam olarak katılmıyorum, ancak bir doğruluk payı var. Bazı iş türlerinde doğru olabilir. Şimdi formu uygulamaya geçelim.

Not! Her eylemi ayrıntılı olarak açıklamayacağım, ancak size kaynak kodunda hazır bir sürüm sunuyorum. Herhangi bir sorunuz varsa - yorumları yazın. çözeceğiz :)

Bugün jQuery ile değil, button ve form layout ile başlayacağız. Tüm komut dosyalarını sayfanın sonunda birleştireceğiz.

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

Başvurunuzu gönderin

Herhangi bir sınıfı ayarlayabilirsiniz, ancak href'e #modal yazın - bu, gölgelemeli kabın kimliği ve iletişim formu 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çecektir Bu formu web sitemde istiyorum

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

Kalıcı bir pencere oluşturmak için Remodal kitaplığı kullanıldı. Bu, yalnızca animasyonlu kalıcı pencereler oluşturmak için bir dizi css ve js dosyasıdır. Bağlantıdan veya zaten makalenin sonundaki düzenlemelerimle indirebilirsiniz.

Head etiketleri arasına stiller ekleyin:

Kapanış gövdesi etiketinden önce komut dosyaları ekleyin:

Script.js bir form işleme betiğidir. Sayfayı yeniden yüklemeden tüm prosedürü gerçekleştirmemize izin veren aynı Ajax:

$(document).ready(function () ( $("form").submit(function () ( // Form ID'sini alın var formID = $(this).attr("id"); // Bir karma ekleyin isme ID var formNm = $("#" + formID); $.ajax(( type: "POST", url: "mail.php", data: formNm.serialize(), basari: function (data) ( // Çıkış gönderme sonucu metni $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Gönderme hata metnini göster $(formNm).html(error); ) )); yanlış döndür; ) ); ));

Modal pencere ve formdan sorumlu dosyalardan css ve js kaynak kodlarını 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 diyebilirsem):

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

İşte 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ş sonucu vermek istedim ve tüm animasyonları, görünümleri açıklamanın bir anlamı yok. Kaynağı indirin ve sitenize yerleştirin. Ve bugünlük, hepsi bu. Hepinize iyi şanslar!

Beyler, 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.

İndeks dosyasını tarayıcınızda açtıysanız ve "Gönder" düğmesini tıkladıysanız, posta kutunuzda bir mektup beklemeyin. Php sunucu taraflı bir dildir!

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

Makalenin güncellenmiş bir versiyonu