Kalıcı bir pencerede bir geri bildirim formu için bir komut dosyası. Basit Ajax İletişim Formu

Herkese merhaba. Görünen formun nasıl uygulanacağına dair sorularla bombalandılar. kalıcı pencere butona tıkladıktan sonra ve gönderdikten sonra bir başarı veya başarısızlık mesajı görüntülenecektir.

Sanırım internette bunlardan çok var ama insanlar sorduğu için yapmaya karar verdim. Ayrıca, bir geri arama düğmesi uygulamak için bu tür işlevler hemen hemen her açılış sayfasında bulunmalıdır. Gerçekten de, şimdi, açık formların, modsal bir pencerede gizlenen ve düğmeye tıkladıktan sonra açılanlardan daha kötü çalıştığını söyleyen daha fazla AB testi sonucu ortaya çıkıyor.

Bazıları bunun, insanların yavaş yavaş "bağışıklık geliştirmesi" ve açık formun agresif bir satış olmasından kaynaklandığını iddia ediyor. Güya şimdi, kullanıcının açık bir form gördüğünde, kendisine bir şey "satmaya" çalıştığını düşünmesinin zamanı geldi. Bu teoriye pek katılmıyorum, ancak bir miktar gerçek var. Belki bazı iş türlerinde bu doğrudur. Şimdilik formun uygulanmasına geçelim.

Not! Her bir eylemi detaylı olarak anlatmayacağım ama size kaynakta hazır bir versiyonunu sunuyorum. Herhangi bir sorunuz varsa, yorumlara yazın. çözeceğiz :)

Bugün jQuery ile değil, buton ve formun düzeni ile başlayacağız. Tüm komut dosyaları sayfanın sonunda yer almaktadır.

Kalıcı pencerenin açılacağı düğme:

Başvurunuzu gönderin

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

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

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


Kalıcı bir pencere oluşturmak için Remodal kitaplığı kullanıldı. Bu, yalnızca hareketli modal 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:

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

Script.js, bir formu işlemek için bir komut dosyasıdır. Sayfayı yeniden yüklemeden tüm prosedürü gerçekleştirmemizi sağlayan aynı Ajax:

$ (belge) .ready (işlev () ($ ("form").gönder (işlev ()) (// Form kimliğini al var formID = $ (bu) .attr ("id"); // Bir karma ekleyin isim kimliğine var formNm = $ ("#" + formID); $ .ajax ((tür: "POST", url: "mail.php", veri: formNm.serialize (), başarı: işlev (veri)) ( // Gönderme sonucunun çıktı metni $ (formNm) .html (veri);), hata: fonksiyon (jqXHR, metin, hata) (// Gönderme hatası metninin çıktısı $ (formNm) .html (hata);) )); yanlış döndür;) );));

orjinalini vermeyeceğim css kodu ve oldukça büyük oldukları için kalıcı pencereden ve formdan sorumlu dosyalardan js. Varsa kaynağına bakın. Ancak php işleyicisi büyük ölçüde standarttır (eğer söyleyebilirsem):

Gönderenin adı:$ isim Telefon:$ phone "; $ gönder = mail ($ to, $ konu, $ mesaj, $ üstbilgileri); if ($ send ==" true ") (echo"

Mesajınızı gönderdiğiniz için teşekkürler!
";) başka (yankı"
Hata. Mesaj gönderilemedi!
";)) else (http_response_code (403)); echo" Tekrar deneyin ";)?>

Lütfen, adresleri değiştirmeyi unutmayın E-posta kendi başlarına.

İşte bir ajax formu. Her bir öğenin nasıl yapıldığını ayrıntılı olarak açıklamaya çalışmadığım için üzgünüm. Sadece bitmiş bir sonuç vermek istedim ama tüm animasyonları, görünüşleri anlatmanın bir anlamı yok. Kaynağı indirin ve sitenize yerleştirin. Ve bugünlük bu kadar. Hepinize iyi şanslar!

Beyler, sizden formu gerçek veya sanal sunucu(barındırma). Lütfen sunucunuzun php desteklediğinden emin olun, deneme süresi değil ücretli bir planınız var. 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, posta kutunuzdaki mektubu beklemeyin. Php sunucu taraflı bir dildir!

Eğer çözemeyecek ve formu kendiniz oluşturamayacak kadar tembelseniz, o zaman dikkat etmenizi tavsiye ederim.

Güncellenmiş versiyon makale

Merhaba sevgili okuyucular a! Bu eğitimde, bir HTML5 e-posta kayıt formunun JQuery ile girilen URL'yi doğrulamasını nasıl sağlayabileceğimizi göstereceğim. Doğrulama için normal ifadeler kullanacağız ve girilen adresi MySql veritabanına kaydedeceğiz. Böylece, kaydederken kullanacak AJAX(yani, sayfayı yeniden yüklemeden PHP betiğini çağırın). Sonuç, demo sayfasında görüntülenebilir ve kaynağı indirilebilir. Başlayalım!

Temel işaretleme

Yeni bir index.html dosyası oluşturarak başlayalım. Ve HTML5'e bağlı basit bir belge yapısı yapalım. Ayrıca CSS stillerini ve kütüphaneyi de hemen ekleyeceğiz, 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


<html lang = "ru">
<kafa>
<meta karakter kümesi = "utf-8">
<başlık> jQuery doğrulayıcı ile e-posta kayıt formu</ başlık>

<link rel = "stil sayfası" tipi = "metin / css" href = "style.css">

<komut dosyası türü = "metin / javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</ kafa>

<vücut>

</ vücut>
</ html>

Artık formunuzu oluşturmaya hazırsınız!

Abonelik e-posta formu

Formumuzun amacı, girilen ziyaretçinin e-posta adresini doğrulamak ve bir şekilde abone listesine kaydetmektir. Bunun için yapıyoruz normal form bir buton ile, hangi adrese tıklanarak işlenir ve veritabanına veya bir dosyaya herkes için uygun olacak şekilde kaydedilir. Derste, verileri buzda kaydetmeyi ele alacağız. Bu daha net hale getirecek, 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



"E-postanızı giriniz" otomatik tamamlama = "kapalı" otomatik düzeltme = "kapalı" autocapitalize = "kapalı">

Formu #completeform div bloğuna saralım ki adresi kaydettikten sonra form daraltılabilsin.

Ayrıca giriş alanında birkaç yeni özellik kullanıyoruz. Mobil tarayıcıların uygun klavyeyi gösterebilmesi 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 kullanma özellikleri, özellikle mobil tarayıcılar için tasarlanmıştır.

id ile yayılma hata Başlangıçta, display özelliğinin none değerinden sorumlu olduğu gizli, bu, dosyaya stillerle birlikte, biraz sonra yazılır. Ancak kullanıcı, aralıkta 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 doğrulama işleviyle başlayalım. Metin dizesinin standart e-posta sözdizimiyle eşleşip eşleşmediğini test etmek için normal bir ifade dizesi kullanırız, ardından bir boole değeri true, aksi halde false döndürür.

CompleteInviteForm() işlevine bir göz atalım. Adres giriş formunu karıştırmamak için fadeOut efektini 400 milisaniyeliğine daraltacağız. Ve bir callback olarak $ .ajax() fonksiyonuna döneceğiz, onun yardımıyla save.php dosyasını çağıracağız ve girilen adresi veritabanına kaydedeceğiz. Aşağıda save.php dosyasının kaynak kodunu vereceğim ama şimdilik $ .ajax() fonksiyonu ile çözelim.

$ .ajax- kullanarak uzak sayfayı yükler HTTP isteği... $ .ajax() işlevine bir argüman olarak, isteği başlatmak ve işlemek için kullanılan anahtar/değer çiftlerinden oluşan bir nesne iletilir. Bizim durumumuzda, aşağıdaki nesneleri kullanacağız:

  • type: 'POST' - varsayılan olarak dosyaya yönelik istek türünü seçin ELDE ETMEK, POST ve GET arasındaki fark çok büyük değil, sadece bir GET isteğiyle, veriler başlıkta ve POST ile isteğin gövdesinde aktarılır, bu nedenle POST kullanarak daha fazla bilgi aktarabilirsiniz;
  • url: 'save.php' - yürütülebilir dosyanın yolu;
  • veri: 'e-posta =' + $ ("# e-posta"). val ()- sunucuya gönderilen veriler. İLE BİRLİKTE CSS kullanarak seçici #email ile öğeye bakın kimlik = "e-posta" ve value niteliğinin içeriğini, yani kullanıcı tarafından girilen e-postayı alın. Ve bu içeriği bir değişkene atayın e-posta save.php dosyasında kullanacağımız;
  • başarı: işlev () ($ ('# tam form'). önce (' Her şey hazır! Mail listesine eklendiniz.‘);} - başarı fonksiyonu başarı üzerine çağrılır ajax isteği... İşlev aşağıdaki eylemi gerçekleştirir. #completeform div'in önüne, kullanıcıya e-postasının posta listesine eklendiğini bildiren bir içerik ekliyoruz.

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

işlev tamamlamaInviteForm () (
setTimeout (işlev () ($ ("# tam form") .fadeOut (400, işlev () (
$ .ajax ((
tür: "POST",
url: "save.php",
veri: "e-posta =" + $ ("# e-posta") .val (),
başarı: işlev () (
$ ("# tam form") .before ( "Her şey hazır! Mail listesine eklendiniz." ) ; }
} ) ;
} ) ;
} , 1100 ) ;
}

Ve setTimeout yöntemini kullanarak, form gizlenir ve ajax isteği 1100 milisaniyelik bir gecikmeyle eşzamansız olarak yürütülür.

Form işleme

Sayfa öğelerine başvurmanın rahatlığı için, #error ve #btnwrap seçicileriyle birkaç değişken oluşturalım.

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

Bir olay işleyicisi kullanma canlı olarak"Abone ol" düğmesine tıklamayı izleyin, kimliği = "sendbtn". E.preventDefault() yöntemi; bir eylem için tarayıcının standart davranışını iptal eder (bir düğmeye tıklayarak), yani sayfa yenilemeyi ve URL değişikliğini iptal ederiz. Girilen emaili emailval değişkenine atarız ve bu değişkeni işlemeye başlayabiliriz.

Öncelikle Eğer(! isEmail (emailval)) isEmail işlevinin false döndürüp döndürmediğini kontrol ederse, bu, kullanıcı tarafından girilen e-posta adresinin normal ifadeyle eşleşmediği, yani doğru olmadığı anlamına gelir, bu durumda kullanıcıyı bu konuda bilgilendireceğiz. hata engelleyin ve mesajı görüntüleyin (Yanlış E-posta adresi girdiniz).

şimdi ikinci Eğer yalnızca kullanıcı geçerli bir e-posta adresi girdiğinde yürütülür. Ardından adresi kaydetme işlemine başlayabiliriz.

İşlemi netleştirmek için, uygun metni hata bloğuna ekleyin ve "Abone Ol" düğmesinin bulunduğu bloğa bir GIF resmi yerleştirin. Ve yukarıda bahsettiğimiz completeInviteForm() fonksiyonunu çağırıyoruz.

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

if (! isEmail (emailval)) (
erdiv.html ( "Doğru e-posta adresini girmediniz") ;
erdiv.css ("ekran", "blok");
}
if (isEmail (emailval)) (
erdiv.css ("renk", "# 719dc8");
erdiv.html ("işleniyor ...");
(tam Davet Formu (), 900);
}
} ) ;
} ) ;

Veri tabanı

Girilen adresi veritabanına kaydetme yöntemini seçtiğim için kısaca veritabanının oluşturulmasından ve tablonun kendisinden ve ayrıca söz verilen save.php dosyasının MySql veritabanı ile çalışan kodundan bahsedeceğim.

Bunun için ihtiyacımız var Yerel sunucu, Denwer kullanıyorum. Elbette birçok kişi kullanıyor, bu yüzden ayrıntılara girmeyeceğim. geçiyoruz phpMyAdmin ve bir veritabanı oluşturun e-posta:

Abonelerin adreslerini kaydetmek için iki alanlı bir tabloya ihtiyacımız var, hadi diyelim adres:

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

  • İD- tanımlayıcı e(birincil anahtar olarak da bilinir);
  • adres- doğrudan e-posta adresinin kendisi.

Save.php dosyası

Şimdi hakkında konuşma zamanı son eleman oluşturulan aboneliğin save.php dosyası hakkında. E-posta adresini veritabanına kaydetmek için PHP betiğini içerir.

1
2
3
4
5
6

if (isset ($ _POST ["email"])) ($ email = $ _POST ["email"];)
$ db = mysql_connect ("localhost", "root", "");
mysql_select_db ("e-posta", $ db);
mysql_query ( "INSERT INTO adres (adres) DEĞERLER (" $ email ")", $db);
?>

İlk olarak global POST dizisinde email değişkeninin var olup olmadığını kontrol ederiz, varsa değerini yerel değişken $ email'e atarız. Ardından mysql_connect() sunucusuna bağlantı kuruyoruz, kullanıcı root, şifre yok. Veritabanı seçimi e-posta ve veritabanına bir sorgu yürütün, adres tablosuna $ email değişkeninin değerinin adres alanlarına ekleneceği yeni bir kayıt ekleyin. Bu kadar!

Bu, dersi sonlandırıyor. Bu aboneliğin sadece sunucu üzerinde çalıştığını hatırlatmak isterim (çünkü baz ve ve) kullanıyoruz.

Merhaba. Bu derste tam bir şekil yapacağız. geri bildirim, ve sayfadaki butona tıklandığında modal penceresinde görünecektir. Bu dersi kendim, sıfırdan, sadece jQuery çerçevesi ve küçük bir JavaScript kullanarak yaptım.Ders çok ilginç, bu yüzden lütfen kaçırmayın! iş için gerekli dosyalar:

Aşama 1. Genel açıklama ve geri bildirim formunun nasıl çalıştığı:

İlk olarak, size hangi dosyalara ihtiyacımız olacağını ve aslında neden gerekli olduklarını anlatacağım:

  • Görüntüler- formumuza ait tüm resimlerin saklandığı klasör;
  • index.html- geri bildirim formunu çağırma düğmesinin yerleştirileceği ana "dizin" dosyası;
  • iletişim.html- formun kendisini içeren dosya. Kalıcı pencereye bağlanacak olan bu dosyadır;
  • send.php- mektubu göndermekten sorumlu dosya işleyicisi;
  • jquery.js- ana jQuery çerçevesi;
  • stil.css- formumuz için basamaklı stil sayfaları içeren dosya.

Öyleyse daha ileri gidelim ve sırayla ... Formun çalışması aşağıdaki gibi olacaktır: Kullanıcı, modal pencereyi çağırma düğmesinin bulunduğu sayfaya girer, tıklar, ardından form görünür, içinde ziyaretçi mesajın tüm verilerini ve metnini girer ve gönderir, ardından mektubun başarılı veya başarısız gönderildiğine dair bir mesajla sayfaya aktarılır. Hepsi bu, şimdi formumuzu dizmeye başlayalım ...

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

Formlu kalıcı penceremizin görünmesi için, bir şekilde onu yapmaya zorlamanız gerekir. Bunu yapmak için, sayfaya sıradan bir düğme yerleştirmemiz yeterlidir. Böyle bir düğmenin kodu, kendisine uygulanan stiller ile birlikte aşağıda gösterilmiştir:

Aşama 3. Formun kendisi + bunun için ayarlar

Şimdi geri bildirim formumuzun nerede bulunacağını bulalım. Ve dosyada olacak iletişim.html, zaten dersin kaynak kodunda bulunur. Bu form oldukça küçük, bu yüzden kodunu aşağıya yerleştireceğim:

Yönetime Mesaj Göndermek:



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

Gördüğünüz gibi, çıplak gözle bile kodu incelerken, formun daha iyi görüntülenmesi için bir tablo düzeni kullandığımı görebilirsiniz. Bu, tüm form alanlarını eşitlemem için çok faydalı oldu.

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

Burada sizi hızlı bir şekilde ana posta işleyicisiyle tanıştıracağım. Kaynak kodunda olduğu için kodunu burada vermeyeceğim. İçeriğini indirin ve görüntüleyin. Benim gibi orta düzeyde bir php biliyorsanız, bu işleyicinin tüm kodunu kendiniz kolayca ayrıştırabilirsiniz. Her şey hazırsa, devam edin ...

Adım 5. Ana jQuery çerçevesini döndürmek

Şimdi, herhangi bir jQuery eğitiminde olduğu gibi, ana jQuery çerçevesini "vidalamamız" gerekiyor. Bunu yapmak için biraz geriye gidelim, butonumuzun bulunduğu yere ve etiketler arasına ve aşağıdaki kodu girin:

Adım 6. Formu şekillendirme

Gördüğünüz gibi, formumuz için stiller dosyada ayrı ayrı işleniyor. stil.cssçünkü bu stiller çok fazla yer kaplıyor. Aşağıdaki kodu dizin dosyamıza bağlamamız yeterli:

Adım 7. jQuery ince ayarları

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

Çözüm.

Yani ilginç geri bildirim formumuz hazır. Yol uzun ve zordu, bu yüzden kimse bir şey anlamadıysa, bu derse yapılan yorumlarda sorularınızı dinleyeceğim. Ve hepsi benim için, tekrar buluşana kadar arkadaşlar!

Saygılarımla jQuery - rehber - M.K.

Kişileri, kullanıcı geri bildirimi için özel olarak oluşturulmuş ayrı sayfalarda görmeye 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 yayınlarlar. Mekanizma hata ayıklanmış, yıllar içinde kanıtlanmış ve mükemmel çalışıyor. Ancak bazı durumlarda ayrı bir ekran görüntüsü vermek gerekli hale gelir. İletişim Formu Kullanıcıları başka sayfalara yönlendirmeden açılır pencere olarak.
Bir zamanlar jQuery ile çalışmayı düşündük. Bugün, site için ayrı, orijinal olarak tasarlanmış, açılır bir iletişim formu oluşturmak için ilginç bir çözümle sizi tanıştırmak istiyorum.

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

Bir örneğe baktık. Şimdi bu şekli oluşturma aşamasından bileşenlerine ayıralım. Genel yapı CSS kullanarak mizanpajın görünümünü şekillendirmeden önce Html'de.

Formun HTML kodu

Doğaüstü bir şey yok, normal bir iletişim formunun en basit çerçevesi, bir blok elemanına yerleştirilmiş div formun görünümünü daha da şekillendirmek için belirli bir tanımlayıcı ve sınıfla css ve açılır formu etkinleştirmek ve kapatmak için ihtiyacımız olan küçük javascript ile etkileşime geçin.

Kapat

Bize mesaj gönder

Kapat

Bize mesaj gönder

Ayrıca, pop-up şeklini etkinleştirirken genel arka plan için bir karartma katmanı oluşturmamız gerekiyor. Bu görevi farklı şekillerde gerçekleştirebilirsiniz, ancak çok akıllı olmayacağız ve bir tane daha eklemeyeceğiz. div ona bir tanımlayıcı atayarak: id = "fade" ve bir class: class = "black-overlay". Gerektiğinde uzun süre arama yapmamak için formun yanına yerleştirebilirsiniz.

Geri bildirim

Muhtemelen kapat düğmesinin iletişim formunun bloğunda, başlığın hemen önünde yazılı olduğunu fark etmişsinizdir ve bu mantıklıdır, ancak başka nerede olması gerekiyorsa, düğmenin formla birlikte görünmesi ve kaybolması gerekir. Dış görünüş ve kapat düğmesinin konumu, CSS'de daha fazla oluşturacağız

Hepsi bu kadar, şimdi açılır geri bildirim formunu içeren sayfanın tam Html koduna bir göz atalım:

Pop-up iletişim formu Geri bildirim
Kapat

Bize mesaj gönder

Pop-up iletişim formu Geri bildirim

Kapat

Bize mesaj gönder

İletişim formumuzu CSS ile şekillendirmenin eğlenceli kısmına geçmeden önce biraz geri adım atacağım. En dikkatli, muhtemelen formu açma ve kapatma düğmelerinin "jammer" href = "javascript: void (0)" ile bağlantılar olarak uygulandığını fark etti. İyi ya da kötü, kendime kesin bir cevap bulamadım, bu yöntemi alışkanlıktan kullanıyorum. Script tarafından onclick olayının işlendiği elementler için olsa da kullanımının daha mantıklı ve doğru olduğunu düşünüyorum.