WordPress geri bildirim formu: hızlı ve verimli bir şekilde oluşturuyoruz. Kalıcı pencerede Ajax geri bildirim formu

Merhaba. Bu derste eksiksiz bir form oluşturacağız. geri bildirim, ve sayfadaki düğmeye tıklandığında kalıcı 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 indirebilirsiniz. gerekli dosyalar iş için:

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 ihtiyaç duyulduğunu söyleyeceğim:

• Görüntüler- formumuzun tüm görüntülerinin saklandığı bir klasör;
• index.html- geri bildirim formunu çağırmak için düğmeyi içerecek olan ana "dizin" dosyası;
• iletişim.html- formun kendisini içeren dosya. Kalıcı pencereye bağlanacak olan bu dosyadır;
• gönder.php- mektup gönderen bir işleyici dosyası;
• jquery.js- temel jQuery çerçevesi;
• stil.css- formumuz için basamaklı stil sayfaları içeren dosya.

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

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

Şimdi geri bildirim formumuzu nerede bulacağımızı 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 koyacağım:

Yönetime Mesaj Göndermek:

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

Adım 5 Ana jQuery çerçevesini "ince ayar"

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

Adım 6 Form Şekillendirme

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

Adım 7 jQuery ince ayarları

Şimdi için tam teşekküllü iş Modal form penceresinde aşağıdaki jQuery kodunu eklememiz gerekiyor:

Çö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.

Selam arkadaşlar. Bugünün öğreticisi, wordpress sitenizin güzel ve işlevsel bir iletişim formu kazanmasına yardımcı olacak. Bunu Contact Form 7 eklentisini kullanarak yapacağız.Bir zamanlar normal bir iletişim formu ve değerli bir alternatif aramak için çok zaman harcadım. bu eklenti asla bulamadım

Eklenti Özellikleri

Bir eklenti ile çalışacağımızı bir kez daha hatırlatmama izin verin, bu nedenle bir eklenti olmadan geri bildirime ihtiyacınız varsa, kurulum orada biraz daha karmaşık, ancak öte yandan, seçenek hakkındaki makaleyi ziyaret etsen iyi olur. daha evrenseldir (her siteye uygundur) ve sunucuyu daha az yükler.

İletişim Formu 7'deki iletişim formunun ana avantajı, özelleştirme kolaylığı, neredeyse sınırsız işlevsellik ve herhangi bir WordPress şablonuna otomatik tasarım ayarıdır. Yardımı ile sadece siteden mesaj göndermek için bir form oluşturamazsınız. Eklenti, bir sipariş düğmesi oluşturmak için kullanılabilir, geri çağırmak veya onay kutuları ve açılır listeler içeren karmaşık bir anket. Ayrıca, aktarım için dosya eklemek de mümkündür.

Tek kelimeyle, eklenti mega işlevseldir.

Hala "bir iletişim formu yapmalı mı yapmamalı mı?" (basit bir iletişim bilgileri yerleşimi ile yapabilirsiniz istenen sayfalar), o zaman kesin olarak söyleyeceğim - yapmaya değer.

İlk olarak, doğrudan siteden mesaj göndermek, siteyi açmaktan daha uygundur. posta programı ve manuel olarak doldurun. Zaman kazanmaktan kimseye zarar gelmez.

İkinci olarak, iletişim formu özelleştirilebilir ve bu, standart bir formun mektuplarını almanızı sağlar - bunlarda gezinmek daha kolay olacaktır. Örneğin "Sipariş" mesajı için standart bir başlık belirleyebilirsiniz ve sipariş sayfasındaki tüm harfler bu başlıkla gelir.

Üçüncüsü, bir iletişim formu kullanmak, e-posta adresinizi gizlemenize ve böylece e-posta kutunuz ücretsiz erişime girdiğinde kaçınılmaz olarak ortaya çıkan olası istenmeyen postalardan kurtulmanıza olanak tanır.

Dördüncüsü, sadece şık ve modern.

Contact form 7 eklentisini yükleme ve yapılandırma

Eklenti ortaktır wordpress veritabanı, yani dosyalarını bir yerde aramanıza, kendinize indirmenize ve ardından barındırmaya yüklemenize gerek yoktur. Her şey daha basit hale getirildi - wordpress yönetici paneli aracılığıyla eklentiler bölümüne girin, arama alanına "İletişim formu 7" yazın ve kurun. Hiç eklenti yüklemediyseniz, o zaman detaylı talimatlar eklenti nasıl kurulur.

Contact form 7 eklentisini yapılandırma

Eklenti kurulumu iki aşamadan oluşur.

Birincisi, belirli bir formu özelleştirmek. farklı şekillerçok olabilir, her biri kendi alan kümesini içerebilir. Tek kelimeyle, sitedeki her görev ve her sayfa için ayrı ayrı bir geri bildirim formu oluşturabilirsiniz, wordpress buna izin verir - listeleri eklenti veritabanında saklanır.

İkinci aşama, formun site sayfalarına eklenmesidir. Eklenti içinde oluşturduğumuz her formun kendine özgü kısa kodu olacaktır. Sayfaya eklemek için sadece onu eklemeniz yeterli olacaktır.

O zaman hadi gidelim.

Öncelikle yönetici panelinin sol menüsünde İletişim formu 7 sekmesini buluyoruz Altında iki öğeli bir menü açılacaktır - "Formlar" ve "Yeni Ekle".

Henüz hazır formlarımız yok, o yüzden "Yeni Ekle" bölümüne geçelim. Bir dil seçmenizi isteyen bir sayfa açılacaktır ve burada varsayılan dil de belirtilmiştir. Sadece mavi "Yeni Ekle" düğmesini tıklayın.

Form kurulumu ayrı bloklara bölünmüştür. Sırasıyla değerlendireceğim.

Form adı bloğu

İlk blok, formunuzun adından sorumludur - imleci "Adsız" yazısının üzerine getirin ve ihtiyacınız olan adı girin. Bu ad yalnızca eklenti iletişim formları listesinde size gösterilecektir, bu nedenle gelecekte tüm çeşitlilikte kafanızın karışmaması için bunu sizin için netleştirin.

Form şablonu bloğu

Başlangıçta, bu blok standart bir alan yapılandırması içerir. Mektubu gönderenin adını, onun e-posta adresi, e-posta konusu, e-posta içeriği ve gönder düğmesi.

Yıldız işaretleri zorunlu alanları işaretler. Bu alan boş bırakılırsa mesaj gönderilmeyecektir.

Alanların düzeni, olağan html işaretlemesi kullanılarak özelleştirilebilir.

Alanları özelleştirmeye gelince, ihtiyacınız olmayanları kaldırabilir ve ihtiyacınız olanları ekleyebilirsiniz. Mektubun konusunun manuel olarak girilmesini istemiyorsanız, ilgili bloğu silmeniz yeterlidir.

Alan eklemek de çok kolaydır. Sağ tarafta bir etiket oluşturmak için bir düğme var, üzerine tıklayarak bu eklentinin desteklediği tüm olası alanların bir listesini göreceksiniz.

İstediğiniz öğeyi seçin ve ayarlarını yapılandırın. Eklenti Rusça olduğundan tüm ayarlar sezgiseldir.

İlk onay kutusu, alanın gerekli mi yoksa isteğe bağlı mı olduğunu gösterir (yıldız işareti ekler).

Alanı ayarladıktan sonra 2 kısa kodunuz olacak:

• "Bu kodu kopyalayın ve soldaki form şablonuna yapıştırın" - bu kod, diğerleri gibi form koduna eklenir;
• "Ve aşağıdaki kodu aşağıdaki harf şablonuna yapıştırın" - sonraki bloktaki harfi tasarlamak için bu koda ihtiyacımız olacak.

Böylece, forma istediğiniz sayıda alan, onay kutusu, açılır liste, dosya eklemek için öğe vb. ekleyebilirsiniz.

Blok "Mektup"

Şimdi görevimiz, alacağımız mektubu ayarlamak. Mektup, geri bildirim formunun performansını hiçbir şekilde etkilemez, sadece forma girilen bilgileri iletmeye yarar.

Görevimiz, mektuba tüm bilgileri dahil etmektir.

İlk paragrafta mesajın gönderileceği e-posta adresini belirtiyoruz (herhangi bir şey olabilir).

İkinci paragraf şunu belirtir: e-posta kutusu e-postanın size gönderileceği yer. Burada hiçbir şeyi değiştirmezdim, varsayılan Posta kutusu blogunuz ve gönderiyi gönderen kişinin adıyla bir etiket eklenmiş.

Ardından, mektubun konusunu belirtiyoruz. Varsayılan olarak konu, formda doldurulan alandan alınır. Ancak bu öğeyi formdan kaldırabilir ve alana her harfte otomatik olarak ayarlanan belirli bir konuyu girebilirsiniz. Bunu hizmet ve reklam sayfalarından gelen geri bildirim formları için yaptım. Oradan gelen mesajlar her zaman aynı konuyla "Sipariş hizmetleri" veya "Reklam siparişi" ile gelir - basit ve anlaşılır.

Ek başlıklar alanı, Yanıtla: etiketini içerir, böylece blogunuzdan gelen bir mektuba yanıt verirken bloga değil, mektubu gönderenin form alanında belirttiği adrese bir mesaj gönderirsiniz. Bu alanı değiştirmenize gerek yoktur.

"Mesaj şablonu" alanı, aldığınız mesajın dahili içeriğinden sorumludur. Varsayılan olarak, alana girilen mesajın göndereni, konusu ve metni hakkında bilgiler içerir.

Sonunda, mektubun gönderildiği site belirtilir.

herhangi bir giriş yaptıysanız İlave Alanlar varsayılan olarak ayarlanmamışsa, e-posta şablonuna uygun etiketi eklemeyi unutmayın. Size ilgili etiketi oluşturduğunuz "Form şablonu" bloğunda verilmiştir ("Aşağıdaki kodu aşağıdaki e-posta şablonuna yapıştırın" alanı).

Herhangi metin bilgisi bu blok (etiketler hariç) beğeninize göre değiştirilebilir. Ayrıca, sizin için uygun olan sıraya yerleştirerek herhangi bir açıklama ekleyebilir ve etiketleri değiştirebilirsiniz.

Blok "Mektup 2"

Size gönderilen mesajı başkasının almasını istiyorsanız bu kutucuğu işaretleyebilirsiniz.

Bu blok öncekine benzer şekilde yapılandırılmıştır. Varsayılan olarak, içindeki tüm alanlar, mektubun formu dolduran kişiye gitmesi için doldurulur (görünüşe göre unutmaması için).

Örneğin yöneticinize veya muhasebecinize bir kopya göndermeyi ayarlayabilirsiniz.

"Form gönderirken bildirimleri" engelle

Bu blokta kullanıcının mesaj gönder butonuna tıkladıktan sonra göreceği mesajları yapılandırabilirsiniz. Bir şeyi değiştirmek istiyorsanız - lütfen, her şeyi olduğu gibi bıraktım.

Form aktivasyonu

Tüm alanları doldurduktan sonra "Form Adı" bloğunun başına dönün ve sağda bulunan "kaydet" düğmesine tıklayın.

Eklenti, oluşturduğunuz formu geçerli olanlar listesine yerleştirecek ve ona aşağıdaki gibi özel bir kod atayacaktır:

Bu kodu sitenizin herhangi bir yerine yapıştırarak, bitmiş form potansiyel müşterilerinizle iletişim kurmak için.

Antispam - Akismet ve Captcha

Spam gönderenler, site sahipleri için çok fazla sorun yaratır ve her biri yeni form bir şeyler yazmanıza izin veren , yalnızca spam botlarının sayısını artırır.

İletişim formu eklentisini temel sürümde bırakırsanız, bir süre sonra birçok boş ve anlamsız mesajın saldırısına uğrayacaksınız.

Spam gönderenlerden kurtulmanın iki yolu vardır:

1. Zorunlu bir captcha koyun (bu, ek bir eklenti olan Really Simple CAPTCHA ile yapılabilir).
2. Akismet - wordpress için anti-spam eklentisini kullanın.

İlk seçenek, ziyaretçileri manuel olarak ek karakterler girmeye zorlaması açısından sakıncalıdır. O kadar zor değil ama bazı insanlar bundan hoşlanmıyor.

Akismet eklentisini kullanmak, giriş verilerini (isimler, e-posta adresi a, bağlantılar) ve birikmiş taban temelinde, mesajın spam veya spam olmayan doğası hakkında sonuçlar çıkarır.

Ek olarak, makalelere yapılan yorumlarda spam'e karşı koruma sağlamak için çoğu wordpress sitesinde akismet kuruludur. Bu, onu kullanırken ek eklentiler kurmanıza ve oluşturmanıza gerek olmadığı anlamına gelir. Ekstra yük web sitesine

Akismet ile spam koruması

1. Kur Akismet eklentisi sitenize ve etkinleştirin - .

2. İletişim formu etiketlerine ek veriler ekleyin:

• yazarın adının bulunduğu alana ekleyin kismet:yazar
• gönderenin e-posta alanında akısmet:yazar_epostası
• site adresi alanında azmet:yazar_url

Bunun gibi çıkmalı:

Kaydedildikten sonra, iletişim formu spam gönderenler tarafından gönderilen tüm mesajları engellemelidir. Filtre çalışmasını "viagra-test-123" özel test adını kullanarak kontrol edebilirsiniz. - girdiğinizde bir hata mesajı görünmelidir.

Doğrulamayı daha basit hale getirmek için, alanların yalnızca bir kısmını doğrulayabilirsiniz, örneğin, ad ve e-posta, ve site adresini işaretlemeden bırakın. Bu durumda, istenmeyen mesajların geçme olasılığı artacak, ancak kaybetme olasılığınız daha düşük olacaktır. istenen mesajlar.

Gerçekten Basit CAPTCHA ile spam koruması

Akismet'in size uygun olmadığını düşünüyorsanız (birçok istenmeyen postayı atlar veya gerekli mesajları engeller), o zaman captcha'yı etkinleştirebilirsiniz. Bunu yapmak için Really Simple CAPTCHA eklentisini kurun.

Düzenlemek için gerekli iletişim formunu açın

Etiketler listesinden Captcha'yı seçin. Etiket ayarlarında, görselin boyutunu sembollerle seçebilirsiniz, aksi takdirde hiçbir şeyi değiştirmemelisiniz. Ayarlar penceresinin altında 2 etiket görünecektir, biri görüntünün görüntülenmesinden sorumludur, ikincisi bu görüntüden veri girmek için alanı görüntüler.

Captcha'nın çalışmaya başlaması için, bu etiketlerin her ikisini de kopyalayıp form şablonunun sol penceresine yapıştırmanız ve ardından değişiklikleri kaydetmeniz gerekir.

Açılır pencereye geri bildirim formu yerleştirme

İletişim formu her zaman sitenin belirli bir bölümünde yer almak zorunda değildir, bazen müşterinin kaynağın her sayfasından ona erişebilmesi gerekir.

Bu gibi durumlarda, tam teşekküllü bir form yerleştirmek her zaman uygun değildir. Dikkat çeken göze çarpan bir yere düğme yerleştirmek çok daha kolaydır. Bu düğmeye basmak, formun açılmasına yol açmalıdır.

Böylece kişi ihtiyacı olan sayfadan çıkmadan siteden mesaj atabilecektir.

Bu, başka bir eklenti olan Easy FancyBox kullanılarak yapılır.

1. Eklenti kurulumu

Her şeyden önce, eklentinin kendisini kurun, eklentilerin genel veritabanında bulunur, bu nedenle eklenti aramada blogunuzun yönetici paneline adını girmeniz yeterlidir. Eklentiyi kurduktan sonra "ayarlar" bölümünde "medya dosyaları" sekmesi görünecektir.

Bu sekmede, bir açılır pencerede görüntülenmesi gereken içerik türlerinin bir listesini bulmanız gerekir. Varsayılan yalnızca Görüntüler'dir, Satır İçi içerik eklemeniz gerekir.

Bu, eklenti kurulumunu tamamlar, geri bildirim düğmesinin kurulumuna geçelim.

2. Kodu siteye yapıştırın

Prensip olarak, normal bir metin bağlantısı kullanabilirsiniz, ancak bir resim düğmesi daha iyi görünür.

Sitenizde, iletişim formu düğmesini görüntülemek istediğiniz yere (üst bilgi, alt bilgi veya kenar çubuğunda) aşağıdaki kodu yapıştırın:

Kodda, geri bildirim düğmesi olarak kullandığınız görüntünün adresini belirtmeniz ve formun kendisinin kısa kodunu düzenlemeniz gerekir - kimliğinizi ve başlığınızı girin.

3. Kenar çubuğundaki kısa kodlarla ilgili kısıtlamayı kaldırın

Kenar çubuğunda bir düğme ayarlamak istiyorsanız bu öğe gereklidir. WordPress'teki kenar çubuğu her zaman kısa kodları çalıştırmanıza izin vermez.

Bu işlevi etkinleştirmek için, function.php dosyasını düzenleme için açmanız (doğrudan wordpress yönetici panelinden) ve aşağıdaki kodu "?>" kapatma parantezinden önce eklemeniz gerekir:

add_filter("widget_text", "do_shortcode");

Kenar çubuğundaki tüm kısa kodları çalıştırmayı mümkün kılacaktır.

Bu güzel açılır formu aldım:

Bir sayfada birkaç farklı açılır form

Bazen siteye birkaç form yerleştirmek gerekli hale gelir. farklı ayarlar ve alanlar.

Örneğin, bir düğme ad ve telefon numarası içeren bir forma yönlendirir ve siteden geri aranma emri verir ve ikincisi, ayrıntılı bir sipariş talebinin (adres, açıklama alanı, dosya ekleme yeteneği vb. ). Contact Form 7 eklentisinin kendisinde sonsuz sayıda form seçeneği oluşturabilirsiniz, ancak bunları aynı sayfadaki farklı düğmelere nasıl sıkıştırırsınız?

Bunu yapmak için, önceki paragraftaki düğme kodunu düzeltmeniz gerekir. İlk düğme yukarıda gösterilen varyantı kullanır. İkincisinde iki değer değişir.

Merhaba sevgili blog okuyucuları İnternet sitesi! Bu yazıda, iki hazır çözümle bir web sitesinde pop-up form oluşturmayı öğreneceksiniz.

Hemen hemen her sitede, iletişim veya geri bildirim formları ve mal veya hizmet siparişi formları gibi "yakalama" formları bulunur. Özellikle tek sayfalık sayfalarda (açılış sayfaları) formlar kullanılır ve ziyaretçi ile etkileşim ve iletişim için gereklidir. Kural olarak, bu formlar, yıllar boyunca test edilen dönüşüm açısından oldukça iyi çalışır. Ancak şeffaf olarak bulunan formların yanı sıra bazı durumlarda pop-up formlar da kullanılmaktadır. Çok kullanışlıdırlar, bir tuşa bastığınızda açıldığı için fazla yer kaplamazlar ve ayrıca ziyaretçileri başka sayfalara yönlendirmezler. Sitenin, bir sayfa çerçevesinde bile, ziyaretçi ile gerekli tüm iletişim işlevlerini yerine getirdiği ortaya çıktı.

Tartışılacak açılır formlar oluşturmakla ilgilidir. Ben size formun olduğu sitelerde bunu nasıl yapacağınızı anlatacağım. html veya bir eklenti ile yapılmış İletişim Formu 7 Açık wordpress.

Bir açılır form oluşturun html.

Örnek olarak bir geri arama formunu ele alalım. Aşağıda, "Arama iste" veya "Geri aramak ister misiniz?" düğmesine tıklandığında açılacak bir form örneği verilmiştir.

Formu açmak için öncelikle gizlenmesi gerekiyor bunu formun bulunduğu divde belirterek yapıyoruz, stil="görüntü: yok;", böylece form gizlenir. Bu divaya anlamlı bir anlam da belirtmek gerekir. İD, çünkü bizim durumumuzda bir geri arama formu kullanıyoruz, buna diyoruz geri çağırmak.

Bir açılır form oluşturun WordPress (İletişim Formu 7).

Sitede bir eklenti yardımı olmadan formlar oluşturduysanız, hemen not edilmelidir. İletişim Formu 7, o zaman yukarıda açıklanan seçenek size uyacaktır.

Yani, ihtiyacimiz var 2 Eklenti: İletişim Formu 7 Ve Kolay FancyBox, birincisi form oluşturmak, ikincisi formu açmak, bunları yükleyin. İhtiyacınız olan form henüz oluşturulmadıysa, oluşturun.
Sadece şuna benzeyen kısa koduna ihtiyacımız var:

Şimdi, formun geçişini yapmak istiyorsanız, bu kodu alt bilgiye ekleyin:

Doğal olarak, kendi kısa kodunuzu ayarlayın, soldaki menüde tıklayarak bulabilirsiniz. İletişim Formu 7, önceden oluşturulmuş formların listesini içeren bir sayfa açılacaktır.
Ve belirli bir sayfa için bir forma ihtiyacınız varsa, kodu sayfadaki yönetici paneli aracılığıyla ekleyin (kodu bir widget'a yerleştirebilirsiniz), ancak görsel düzenleyiciye değil.

Kısa kodunuzu da ayarlayın.

Şimdi eklentiyi yapılandırmamız gerekiyor. Kolay FancyBox. Bunu yapmak için ayarlarına gidin. Soldaki menüde "Ayarlar" ı açın ve "Medya Dosyaları" nı tıklayın ("Medya Dosyaları" olarak da adlandırılan hemen yukarıdaki menü sekmesiyle karıştırmayın). Sitenizde zaten bir pop-up fotoğraf eklentisi yüklüyse, işaretini kaldırın. Görüntüler, ve koy satır içi içerik. Ardından değişiklikleri kaydedin.

Hangi formun açılacağına tıklayarak bir düğme yapmak için kalır. Herhangi bir yere, üstbilgiye, altbilgiye yerleştirilebilir, tarayıcının kenarlarından birine eklenebilir, düğmeyi herhangi bir makaleye veya sayfaya da yerleştirebilirsiniz. Düğmeyi görmek istediğiniz yere bu kodu yapıştırın:

Bize yazın

Düğmeyi ve formu istediğiniz gibi üst üste bindirebilir, istediğiniz stili verebilirsiniz.

Ve hepsi bu. Makaleyi beğendiyseniz, arkadaşlarınıza ve meslektaşlarınıza bundan bahsedin, parmağınızı "Yukarı" koyun ve gruba abone olun (sol kenar çubuğunda) ve ben bunun için sizin için daha da ilginç makaleler yazacağım.

Okurlarıma selamlar, deneyim kazandım ve size geri bildirim formunun ilkelerini anlatacağım. php bağlantıları. Her şeyin nasıl çalıştığını ve giriş formunun kendisi (giriş alanları) ile php ile yazılmış işleyici dosyası arasındaki etkileşimi anlamanız için size açıklayıcı örneklerle göstereceğim. Ek olarak, kaynak kodu ile birlikte ücretsiz olarak indirebilirsiniz.

Elbette, en azından biraz HTML / CSS anlayışınız varsa harika olacaktır. Kodu analoji ile sayfanıza sürüklemeniz gerekecek. PHP dili Etkilemeyeceğiz, kendim için yapılması gereken tüm gerekli düzenlemeleri göstereceğim.

GÜNCELLEME:Okuyuculardan gelen geri bildirimlere göre daha güzel ve işlevsel bir şeye ihtiyaç olduğunu anladım, tanışın, inceleyin ve görün. Hangisini en çok sevdiğinizi seçin)

GÜNCELLEME2: Sürüm 3.0 Duyarlı İniş+ UTM etiketlerini geçen ajax formu, kontrol edin ve görün. hoşuna gidecek

PHP'de kendi geri bildirim formumu ilk kez yapmaya çalıştığımda kendimi hatırladım ve dürüst olmak gerekirse zahmetliydi, çünkü. Ne olduğunu ve nasıl olduğunu anlamadım. Sabır ve sebat arkadaşlar ve başaracaksınız.

php iletişim formu - yapı

Geri bildirim formunun analizini bir örnek kullanarak inceleyeceğiz. Açılış sayfası (Açılış sayfası), bu arada, hakkında ayrı bir makale var. Aşağıdaki düğmeleri kullanarak nasıl çalıştığını görebilirsiniz, bu tek çağrı cihazının kaynak kodlarını ve ana php işleyici dosyasını ekliyorum (bu dosya işlenecek ve e-postaya bir e-posta gönderecek)

Kaynakları indirdikten ve arşivi çıkardı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 sayfada açılır bir kalıcı pencere ve diğer görsel efektler sağlayan javascript komut dosyaları
• index.html - tek çağrı cihazımızın dizin dosyası
• index1.php, formdaki değerlerin iletildiği bir işleyici dosyasıdır, ardından alınan değişkenlerden bir harf oluşturulur ve belirtilen e-posta adresine gönderilir. Ayrıca, index1.php, otomatik olarak index.html'ye (yani tek çağrı cihazımız) yeniden yönlendirme ile başarılı veri gönderiminin bildirimi için bir ara sayfa olarak olacaktı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, barındırma hizmetinizin kayıtlı olduğu kampanyayla iletişime geçin veya sadece test edin - çalışıyor, yani destek var. Değilse, php dil ​​desteği seçeneğini etkinleştirin

Tüm öğelerin (sayfa, form, işleyici) etkileşiminin nasıl çalıştığına bir göz atın

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

Geri bildirim formu içeren kalıcı bir açılır pencereyi çağıran düğmelerden birinin çalışmasına bir göz atalım. verilen verilen kaynak- bu birden fazla, sayfaya iki kez ekledim ve çalışacak, tasarımınıza ve ihtiyaçlarınıza uyacak şekilde özelleştirmeniz gerekecek.

Geri arama isteğinde bulunun

Aşağıda, index1.php işleyicisinin tam kaynak kodu bulunmaktadır, posta kutunuza göndermeyi ayarlamak için " [e-posta korumalı]» kendi başınıza, gerisi prensipte değişmeden bırakılabilir