Zvorotny zv'yazok web'i oluşturun. Web tasarımı ve posta kodu optimizasyonu. Bir zvorotny zv'yazku formunun oluşturulması - html işaretlemesi

Merhaba arkadaşlar! Hangi derste konuşacağız yaratılış, aksi halde insanlara öyle geliyor "İletişim Formu".

Bugün sizinle birlikte bir çaça çaçası için nasıl yaratabileceğinizi çözeceğiz. kolay, garnuі işlevsel sevgili eklentimin yardımı için bir dönüş bağlantısı formu İletişim Formu 7 .

İletişim formu kurulumunun tüm aşamalarını olabildiğince net bir şekilde açıklamaya çalışacağım ve cim ile olan bağlantıda ders uzun bir süre bitmiş olacak 🙂

WordPress'te bir iletişim formu oluşturma

Daha ilk adımda Contact Form 7 eklentisinin Ruslaştırılmış olduğunu ve her gün sorun yaşamayacağınızı belirtmek isterim. Sözlerimin bir kanıtı olarak, bu eklentinin ele geçirilmiş olması 25 MİLYON KEZ FAZLA!!!

Öyleyse başlayalım. Katlama için bir dönüş bağlantısı oluşturun ayakları üzerinde gelişmek gerekir:

1. Contact Form 7 eklentisini kurun ve etkinleştirin. Eklentileri nasıl yükleyebilirsiniz.

2. Aktivasyondan sonra şuraya gidin: İletişim Formu 7 -> Form.

3. Vіknі, scho vіdkrylos satırı kopyala gömme kodudur.

4. Kodun kopyalanması o tarafa eklenir, eğer dönüş linki formu eklemek istersek. Kodu girdikten sonra butona basarak değişikliği kaydetmeyi unutmayınız. "Onoviti".

Bunun gibi eksen sonuç Bir iletişim formu eklemek isteğe bağlıdır:

Hazır!çiş yüklü çalışma formu sitenize geri dönün!

Yak bachite, her şey dekilka khvilin için Sitenize kolayca bir dönüş bağlantı formu ekleyebilirsiniz. Kime bir yer koyabilirsin, ale tim, kime istersen standart forma sahip değilsin oluşturmak yine yeni İletişim Formu diğer alanlar ve olanaklarla Ben tavsiye ediyorum dersi sonuna kadar okuyun.

Yeni bir form oluşturabilmek için içindeki alanlar bizim için gerekli olduğu için koçanın ayırt edilmesi gerekir. Bu derste popo olarak basit küçük bir şey yaratıyorum kapıyı kapatma şekli.

İhtiyacımız olan, formun doldurulması için aşağıdaki alanlara sahip olması için:

  • Ім'я (doldurmak için Obov'yazhkove alanı)
  • ödül
  • Telefon (Doldurmak için sabit dil alanı)
  • Çağrı için manuel saat seçiminin olduğu alan

Bundan sonra, alanlara atandığımız için formun oluşturulmasına geçiyoruz:

1. Git İletişim Formu 7 -> Yeni Ekle.

2. düğmesine basın "Yeni ekle". Gerekirse, aşağıdaki listeden bir dil seçin. arka zamovchuvannyam mov Rus olacak.

3. Butona bastıktan sonra bildiğiniz tarafa gideceksiniz. form düzenleyici.

Tarlanın en tepesinde, bir yakta yazıyoruz isim yeni formlar. İÇİNDE Form şablonu Bachimo standart form alanları, kilidin arkasında oluşturulmuş gibi.

Aşağıda, sitedeki formu düzelttikten sonra postanıza ulaşabilmem için sayfayı düzeltmek istiyorum. Örneğin, sitenizdeki formları doldurmanız gereken bir e-postayı değiştirebilir veya ekleyebilirsiniz. İÇİNDE yaprak deseni bilgi, sayfanın ortasında göründüğü gibi eklenir.

4. Bundan sonra, editörün yapısına aşina olduğumuz için yeni formumuzu oluşturmaya geçelim. Kimin için ihtiyacımız var VILUCHITIşablondan tüm kıvırma düğmeleri satırlarını oluşturur "Tamirat", ve sayfa şablonunda şiddet her şey yolunda . Seni gördükten sonra şöyle gidebilirsin:

5. Şimdi yeni alanlar oluşturmamız gerekiyor: ben(obov'yazkove), ödül, Telefon(obov'yazkove), Çağrının Zruchny saati.

Alanın yaratılmasından başlıyoruz bir isim girmek için, yak doldurmak için buti obov'yazkovym olabilir. Bunun için düğmeye basıyoruz "Etiket oluştur" ve seçilebilir Metin alanı.

Alan doldurmak için obov'azkovym olabileceğinden, sadece bu durumda gerekli olduğu için, yeni bir alanın tamamlanmasında, bir onay işareti koyun. Ardından, sağdaki form şablonunun oluşturulan kodunu kopyalayın ve sonraki kod, sayfa şablonunu kopyalayın. Aşağıdaki resme kısa bir genel bakış için yorumlar ve oklar.

6. İsim girmek için bir alan eklediğimiz için "Etiket oluştur" -> Metin alanı ve benzetme ile bir alan yaratıyoruz ödülі Telefon, kod formu şablonunu ve sayfa şablonunu kopyalayıp yapıştırma. Vіdminnіst, alan için daha az ödül ciltleme dili için kutuyu işaretlemek gerekli değildir .

Ad, Prіzvishche ve Telefon düzenleyicisinin sulanmasını ekledikten sonra, form şöyle görünür:

7. Şimdi alan oluşturuluyor Aramanın iyi bir saati. Kimin için basıyor "Etiket oluştur" ve seçilebilir "Vydropuche menüsü".

Sahada canlı bir seçenek için arka arkaya yazıyoruz, zamanımız iki yılda bir 8-00'den 18-00'e kadar. Kodun çift satırlarının bir kopyasını, form şablonunu ve sayfa şablonunu doldurduktan sonra.

Sonuç olarak, ekseni şöyle görebilirsiniz:

9. Form kodunu kopyalayın ve ihtiyacınız olan formun yanına yapıştırın. Her şeyi doğru yaptığınız için, kapı halkasını kapatmanın aşağıdaki şeklini görebilirsiniz:

Bundan sonra sitenizden nasıl iyi bir arama yapılır, postanıza bir sayfa gelecek bu tür hatırlatmalarla:

HAZIR! Sizin için bir eksen oluşturduk sıfırdan kapı araması yapma şekli.

Bu iyi, her şeyi yapabilenler için korkutucu hale getireceğiz, ancak ilk kez sıfırdan bir iletişim formu oluşturmadan önceki gibi olmayacak 😉

Çoğu durumda, bu aktivasyonun yüklenmesinden hemen sonra eklenti tarafından kapatıldıktan sonra oluşturulan sarhoş edici bağlantının yeterli ve standart bir biçimi vardır.

Eminim bu ders sizin için çok değerlidir ve Contact Form 7 eklentisi ile öğrenmişsinizdir.

Arz şeklinin yaratılması sürecinde nasıl suçlanabilirsiniz, yoksa çamurdan çıkmaz - yorumlara yemek yaz ve koy.

Onu hatırlıyorum sitede dönüş bağlantı formu – iletişim tarafında bağlayıcı özellik.

Merhaba arkadaşlar! Bu okulda, ters bağlantı formunun oluşturulması hakkında konuşacağız, aksi takdirde "iletişim formu" insanlarına görünüyor. Bugün, sevgili Contact Form 7 eklentimin yardımı için kolay, güzel ve işlevsel bir dönüş bağlantısı formu oluşturmak mümkün olduğu için sizin için çözeceğiz.Dosit dovgym :) WordPress iletişim formu oluşturma Açık İlk adım olarak, Contact Form 7 eklentisinin Ruslaştırılmış olduğunu ve her gün onunla herhangi bir sorun yaşamayacağınızı belirtmek isterim. Sözlerimin bir kanıtı olarak, belki de bu eklentinin ...

etrafında seyir

ders için oy verin

100

Değerlendirme

Pod çantası:Şanovni okuyucuları! Oy vermekten ve yorum bırakmaktan çekinmeyin. Bu sayede o yazıların verdiği derslerin zenginliğini anlayabiliyor ve ileride kalitemi arttırabiliyorum. Cehennemin arkasında!

Fonksiyonu kaç yaşında biliyoruz posta(), popo üzerinde PHP'de bir çağrı oluşturun posta üzerinde z uzak nadsilannyam otrimanih danikh.

Kimin için iki dosya oluşturuyoruz - format.phpі mail.php. İlk dosya, kısa veri girmek için alanları olan daha küçük bir forma sahip olacaktır. etiketin içinde form- buton "Tamirat" o nitelik eylem obrobnik'e uygulanan - mail.php, düğmeye basıldığında formdaki veriler bir sonrakine gönderilir "Tamirat". Bizim uygulamamızda bu formlar web tarafında isim altında üst üste bindirilmiştir. "/mail.php". Reçetelerin diğer tarafında, senaryo açık PHP, verilen formu tamamlayan:


Bu formlar yöntemle pekiştirilir. İLETİ(gibi çıkıyor $__POST). $__POST- yöntem aracılığıyla akış komut dosyasına iletilen değişiklik dizisi İLETİ.

Aşağıdan dosyayı indirebilirsiniz format.php, herhangi bir web sitesinde koristuvach'ın kendisi tarafından doldurulması gereken alanlar. Ob'yazkovo Owennі ana özniteliği veri girmek için Usі alanları isim, Anlamlar kendimiz tarafından mantığa dayalı olarak yazılır.




Postaya düzeltme ile PHP iade formu


PHP'de bir geri arama formu







Not bırak:
Adınız:



E-posta:

Telefon numarası:

Notlar:

Metin alanı karakter sayısıyla sınırlandırılamaz ->







Form tarayıcıda görsel olarak bu şekilde görünür.

Dosyanın kodunu yazalım mail.php. Değişiklik için isimlerin kendilerini görüyoruz. İÇİNDE PHP işareti değiştir $ ve sonra yılanın adını hatırlayalım. Değişikliğin metinsel anlamı patinin yanındadır. Yöneticinin e-postasında yapılan değişikliklerin yardımı için, form öğesi yalnızca yay karesine yerleştirilerek formda gönderilir - anlamı isim.

$to=" [e-posta korumalı]// E-posta sahibi veri formu
$tema = "PHP geri arama formu"; // Alınan e-postanın konusu
$message = "Adın: ".$_POST["ad"]."
";//değişiklik değeri ata, formdan kaldır name=name
$message .= "E-posta: ".$_POST["email"]."
// formu geri çek name=email
$message .= "Telefon numarası: ".$_POST["telefon"]."
"; //Otrimane form adı=telefon
$message .= "Bildirim: ".$_POST["mesaj"]."
// isim=mesaj biçimindeki otrimane
$headers = "MIME-Sürüm: 1.0" . "\r\n"; // başlık, biçime ve bir satır kaydırma karakterine uygundur
$headers .= "İçerik türü: metin/html; charset=utf-8" . "\r\n"; // gönderilen içeriğin türünü belirtin
mail($to, $tema, $mesaj, $başlıklar); // E-postadaki değişikliklerin değerini düzenleyin
?>

Diziye böyle bir haraç rütbesi $_POST aşağıdaki değişikliklere devredilecek ve ek işlevler için postaya gönderilecektir posta. Formumuzu kaydedip gönder butonuna basalım. E-postanızı girmeyi unutmayınız. Nadishov mittevo'nun sayfası.

Herkese merhaba! Bu makalede, html ve wordpress siteleri için bir dönüş bağlantısının birleştirilmiş biçimini nasıl oluşturacağınızı biliyorsunuz. Bizim için bu tür formlara çevrimiçi mağazalar, açılış sayfaları ve basit kartvizit siteleri ihtiyaç duyacaktır, bu nedenle bir koristuvach için gerçekten kullanışlıdır.

Örneğin sitenize baktığınızda, gerekli bilgilere göz attıktan sonra malınızı veya hizmetinizi almaya hazırsınız ama başka bir yeri arayıp çok para harcamak istemiyorsunuz. Böyle bir anın ekseni ve serpantin bir bağlantının bir ekleme formunun yardımına gelir.

Html'de bir çağrı formunu oluşturuyoruz

Ayrıca diyelim ki zaten bir web siteniz var ve bir form oluşturmak istiyorsunuz, onu tamamladığınızda sizin için geri dönüş yapabilirsiniz. Çerçevenin kendisi bizim için yaratıldı.

Sitenin isteği üzerine siteye bir sonraki kodu ekliyoruz:

Çevrimiçi uygulama

Bilgi girişi için ek alanlar ekleyebilir veya alanları temizleyebilirsiniz. Captcha'yı benzer formlarda denemenizi kesinlikle tavsiye etmiyorum, aksi halde formları eksiksiz hale getirmek için formları savunmanız gerekecektir.

Kod eklendi, ne mi bachimo?

Form ortaya çıktı, ancak göze vermek gerekiyordu. Kimin için saldırgan stiller ekliyoruz:

/* Başlık şekli */ #inline ( kenar boşluğu-sol:30px; genişlik:80%; kenar boşluğu:0 otomatik; arkaplan:#fff; dolgu:10px 20px; ) .txt ( display:inline-block; color: #676767 genişlik :190px;margin-bottom:10px;border:1px solid #ccc;padding:5px 9px;font-size:15px!important;line-height:1.4em; #676767; width:617px; margin-bottom: 10px; kenarlık :1px katı #ccc; padding:5px 9px; font-size:15px!important; .txtarea:focus ( border-style:solid; border-color:#bababa; color:#444; ) input.error, textarea.error ( border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; ) input.error:focus, textarea.error:focus ( border-color:#973d3d; color:# a35959; ) #send ( color:#FFFFFF; display:block; imleç:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width :210px; 97; ) /* Kafa şekli */

Yani zaten daha zengin. Herhangi bir fikriniz varsa, sitenin tasarımı için formu ayarlamanız gerekecek, o zaman bana meydan okuma hakkınız var.

Şuna benziyor:

Ne dışarı çıkmak için? Alana tıkladığınızda, komut dosyası maskeyi ülke koduyla birlikte hazır olarak gönderir. Elle bitirin.

Bunun için maske komut dosyasını etkinleştirmeniz gerekir. Yogadan, örneğin dış ceketlerden bir kerede istatistiklerden yararlanabilirsiniz.

Kapanan etiketten önce bir komut dosyası ekleyin. Dosyanın yolunu kendi başınıza değiştirmeyi unutmayın. Güzel, dönüş bağlantısının formu oluşturuldu, stiller ayarlandı, şimdi üzerine bir kopya koymak gerekiyor, böylece mesajlar mailinize gelsin.

Hangisi için, kapalı olan etiketten önce aşağıdaki komut dosyasını ekleyin:

Bu komut dosyası nasıl çalışır?

  1. Girilen e-postanın tekrar kontrol edilmesi.
  2. Uygulamaların yapılacağı alanları belirtin.
  3. Doldurma alanlarının kontrol edilmesi. Örneğin, dil alanları belirtilmemiştir - doldurmanız gerekenlerle ilgili bilgileri göreceksiniz.
  4. Obroblyaє bilgileri girdi ve postayla initsiyuє nadsilannya povіdomlennya.
  5. Başvurumun Ajax tarafından yardım için kabul edildiği konusunda bilgilendirildiğini görüyorum.

Artık artık yok - sendmessage.php dosyasını oluşturun ve yeni alt dizine ekleyin php kodu ve sitenizin köküne yoga ekleyin.

Yeni uyarı\r\n"; $msg .= "

İsim:".$kullanıcı adı."

\r\n"; $mesaj .= "

Telefon numarası:".$kullanıcı telefonu."

\r\n"; $mesaj .= "

Postalamak:".$kullanıcı postası."

\r\n"; $mesaj .= "

Notlar:".$içerik."

\r\n"; $msg .= " "; // uyarıyı güçlendir if(@mail($sendto, $subject, $msg, $headers)) ( echo "true"; ) else ( echo "false"; ) ?>

Eksen ve bu kadar, html sitesi için basit bir dönüş bağlantısı formu hazır. sendmessage.php dosyasının e-posta adresini kendinize göre değiştirmeyi unutmayınız.

Siteye çağrının birleşik bir formunu ekliyoruz

Traplyayetsya, çok splivayucha formuna ihtiyacınız varsa, düğmeye basarken scho vіdkrivаєєtsya. Zrobiti її zaten basit. Bir popo gibi, daha önce yarattığımız formu alıyoruz ve onunla çalışacağız.

Koçanı için jqury fantezi kutusunu açmamız gerekiyor, alabileceğiniz bazı istatistikler alabilirsiniz.

Gövde etiketinden önce qi satırları ekleyin, eğri olan nedir, sadece dosyaların yolunu kendi başınıza hatırlayın.

І nadaєmo їy stylіv.

Modalbox ( color:#FFFFFF; display:block; imleç:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; metin -decoration:none;text-align:center;margin:0 auto 20px; ) .modalbox:hover ( background:#979797; )

Saygıyı geri yüklemek için, scho düğmeleri, yak viklikatim merge vikno'ya karşı bastırırken, obov'yazkovo modalbox sınıfına ve href=”#inline” yoluna atanabilir. Bu ekleme formu olmadan sitede görüntülenmez.

Daha önce yarattığımız şey nedeniyle, form, böylece birleşme sırasında kazandı. Kimler için #inline stilleri eskisinden yenilerine değiştirmek gerekiyor.

#inline ( display:none; kenar boşluğu-sol:30 piksel; genişlik: %80; kenar boşluğu:0 otomatik; arka plan:#fff; dolgu:10px 20px; )

Sonuç olarak, böyle bir düğmemiz var.

Yak'a bastırıldığında, dönüş sesiyle parçalanan bir pencere açılır.

Şey, biliyorum, stiller, sulamanın rengi ve elementler ihtiyacınız olacak şekilde değiştirilebilir. Örneğin, siteden bir geri arama için, sadece 2 alanı kaldırmanız yeterli olacaktır - isim o telefondur ve alanları temizlemeniz yeterli olacaktır.

Örneğin, formun çalışması için sitenin, hangi yayınların daha çok olduğu bir özet eklemesi ve sitenin köküne bir dosya eklemesi gerektiğini unutmayın. sendmessage.php.

Wordpress için ağ geçidi formu

Örneğin siteniz Wordpress motorunda çalıştığı için iletişim formu eklemek için özel eklentiler ekleyebilirsiniz. En kısa Contact Form 7 eklentilerinden biri.

Eklentiyi etkinleştirdikten sonra, sol menüde yeni bir sekme görünecektir. Vіdkrivaєte її ve Yeni Ekle'ye basın.

Yeni formun adını girin, formu kullanabilmeniz için alanları seçin. Otomatik olarak ekleyebildiğiniz kadar standart olanı arayın. Formu al.

Kaydettikten sonra, ekranda görüntüleneceği tarafa eklemeniz gereken bir kısa kod görünecektir. İletişim Formu, örneğin, Kişiler tarafında.

Bu kodu kopyalayın, şuraya gidin: bir tarafa ihtiyacım olacak, görsel düzenleyicide "Metin" biçimini seçin, tüm kısa kodu girin ve sayfayı kaydedin.

Formun yanda görünmesi ve düzgün çalışması için tekrar düşünelim. Kimler için sadece yana gitmek yeterli olacak, kodu ekledim. Bunun gibi bir formunuz olabilir:

Artık sitenizin temsilcileri, Wordpress motorunda oluşturulan bir iletişim formu aracılığıyla sizinle iletişime geçebilir.

Robimo, Wordpress için zvorotny zv'azku biçimini ekliyor

Ben kendim bu motora eklenti eklemekten hoşlanmıyorum, çünkü bu robotu destekleyen bir siteyi tahrip etmek kokuyor. Bunun için, muzaffer form için, muzaffer 2 seçeneği çalın.

  1. Birleştirilen form makalede daha fazla açıklanmıştır, basitçe html sitesine değil motora vidalanmıştır.
  2. Contact Form 7 füzyon eklentisi ile oluşturulan formda küçük eklemeler yapılmıştır.

İlk yöntem zaten açıklamalardan daha fazlası, o yüzden bir diğerine geçelim.

Koçanı için body etiketini girdikten sonra sıradaki kodu arka arkaya ekliyoruz.

x

Neyin ne olduğunu anlayalım:

  • Zorla, scho may id="callme-open" yak'a basıldığında formumuz açılacaktır. Saygını yakala, yazman gereken şey açık etiketten sonra değil, o yerde düğmenin olmasını istiyorsun. Arayın її şirketinizin telefonundan sırayla sağ köşeye şapka ekleyin.
  • Birleştirme formu etkinleştirilirse, bg-b bloğu siteyi karartacaktır.
  • callme bloğu, aramanın tam biçiminin yerini alır.
  • X - tse kutka şeklindeki haçımız olacak, yak üzerine basıldığında şekil kıvrılacak.
  • Peki, Contact Form 7 eklentisinin kısa kodunun çalıştırılacağı php kodu.

Kimliğinize sahip olanlara saygı gösterin ve formun adı değiştirilebilir bence. Gönderimlerin yeni kodu, artık tarzınızı belirleyebilirsiniz.

Fg-b ( konum:mutlak; genişlik:%100; yükseklik:%100; sol:0; üst:0; arka plan:rgba(51,51,51,0.55); z-endeksi:1000; ) gövde ( konum: göreceli; ) .callme (konum:sabit; üst %30; sol:50%; genişlik:300 piksel; sol kenar boşluğu:-150 piksel; z-index:1100; arka plan:#fff; yarıçap:4px; ) .callme küçük ( konum:mutlak; sağ:10 piksel; üst:10 piksel; yazı tipi boyutu:15 piksel; imleç: işaretçi; )

Kodu alıp revize ediyoruz. Şimdi biçim suçlu, ama ekranınızın ortasında yırtılmış ve arkasında, uzakta tamamen karartılmış. Her şey yolunda, ancak gerisini eklemek kaldı - düğmelere basıldığında bir tür vіdkrivatime ve hovatime tsyu formu olan bir komut dosyası.

Bu komut dosyası, kapanan gövde etiketinden önce altbilgi dosyasına eklenmelidir.

Kalan vuruşlar gitti ve wordpress'teki form hazır olacak. .callme ve .bg-b sınıflarına display:none stilini verin. Bu, formun sitenin başlangıcında ekranda görünmemesi için gereklidir.

Kapı halkası için bir form oluşturmak için birkaç seçeneğe baktık. Formun sitenize ulaşmasında herhangi bir sorun yaşamadığınıza eminim. Sorunları ve beslenmeyi suçluyorsanız, yorumlardan her zaman tavsiye alabilirsiniz.

GÜNCELLEME 06/06/2018

İÇİNDE diğer versiyonlar WordPress jQuery komut dosyaları, $ karakteriyle іz'yi ayrıştırmaz bu yüzden $'ı kaydetmeli ve jQuery ile değiştirmelisiniz.

Bitirme genellikle böyle bir sorundur, form sitedeyse, iç taraflarda düzeltmeyi durdurur. Gelmeyen bir şey yapmak için, sendmessage.php dosyasına kadar tekrar dosyaya koyun. Örneğin, eksen:

URL: "http://site.ru/sendmessage.php"

Ve ilk iki formun görünüşlerinden yararlanın,

GÜNCELLEME 07/04/2018

Sayısal prohannya'da, zvorotny zv'azok'un formu modernize edildi. Şimdi, veri yönetimi ile ilgili yılın onay kutusunu işaretledik, Rusya Federasyonu 152-ФЗ “Kişisel Veriler Üzerine” mevzuatına göre, ekranların uyarlanabilirliğine ayrıca izin verildi, js ve css dosyaları sıkıştırıldı .

Artık popoya bakabilirsiniz, ayrıca zavantazhit vihіdnіnіnіdnіnіnіnіnіdnіn zvorotnoj zv'yazku i splіvaє şimdi çevrimiçi olarak, istek üzerine.

Site için dönüş bağlantısının formu, size nasıl yapılacağını göstereceğim - Ajax'ın en iyi teknolojisine dayalı. Ama övünmeyin, bilmenize gerek yok, hepiniz hazırsınız, forma girip kendiniz düzeltmeniz gerekmiyor!

Beyler - senaryo uzun süredir modası geçmiş. Bazıları için işe yarıyor, bazıları için çalışmıyor. Ve erkekler razbiratsya ve vzhe tim daha onovlyuvat - molt. Bu nedenle, kararınız için test edin.

Postaya düzeltme ile PHP geri arama formu

qia siteye dönüş arama şekli Bağlanmadan önce zaten kendi başına işlevsel, ayrıcalıklar yaratıyormuş gibi bir dizi eklenti eski görünüm girdiğiniz verilerin geçerliliğini (okuma doğruluğunu) yeniden doğrulayan. Qi eklentileri harikalar ve güçlüler üzerinde çalışır! Ve onlara şöyle denir:

    1. JQTransform- formumuzu güzel bir ses haline getirmemizi sağlayan bir eklenti!

    2. formDoğrulayıcı- ve bu eklenti, girilen bilgilerin doğruluğu için iletişim formunu kontrol eder ve farklı şekillerde istemleri görüntüler!

Tam teşekküllü bir robotik form için bir vikoristano sınıfı olacak - PHPMailer. Vvazhaetsya en iyilerinden biri!

Akıllı olanlar için bir not:

Site için iletişim formu HTML olarak oluşturulabilir! Ale pratsyuvati sadece daha sık kazandı PHP'ye yardım et! Ben nіyak іnakshe!

HTML'de bir geri arama formu arayanlar için buradayım. Zrobiti zrobite, bira işe yaramaz!

Yani, sizin hatanız PHP'yi desteklemek ve iletişim formları için PHP suçlu ama beşinci sürümden daha düşük değil. Sanırım akıllıca konuşuyorum? Tim daha fazla, aynı zamanda, normal bir hosting için çok iyi olun!

İade bağlantı formunu www.tutorialzine.com sitesinde, orijinalin ortası olmayan kaynağı kullanarak tobto'yu çıkardım. yazarın sitesi tsієї formu!

Orada her şey İngilizce, bu yüzden biz Sasha'dan biraz kurcalama, bağlantı şeklini ve eklentileri sanki ona bağlıymış gibi Ruslaştırma şansımız oldu.

Dürüst olmak gerekirse, “kalıpçıyı” kullanmam iki gün sürdü, farklı pervazları birleştirmeye başladılar ve zvorotnoy zv'yazka'nın formu sonuna kadar tamamlanmadı, daha çok böyle bir garnitür, yapmadım yapmak istemiyorum! Böylece her şeyin bir sevgilisisiniz ve kafanız düşünceye yakın - kendi formunuzu Ruslaştırmak için, size sadece cümleleri çeviremeyeceğiniz birkaç zevk vereceğim:

    1. Geri dönüş bağlantısının Tsya biçimi, zavantazhena ile aynı şekilde burjuvazi için keskinleştirilmiştir, bu nedenle normal Rus sembollerini - krakozyably - değiştirmek zorunda kalmayacaksınız. Kodlamayı anlayın. O zagalom bıyık "mühürleri" cym ile bağlanacak!

    2. Doğrulama komut dosyası mektuplarımız için anlaşılır değil, bu yüzden onları oraya yazmanız gerekecek!

    3. Tsikh dіy'den sonra gezinin, sayfanın konusunu Rusça olarak belirtmek için sayfa konuyla birlikte gelir - Konu yok (yazım konusunda doğruyum), PHPMailer dosya sınıfı için kodlamanın belirtilmesi istenir.

    4. Orijinal formda, giriş alanlarının yanındaki metin ortada değil, altta sıkıştırılır. Bu, JQTransform eklentisinin bir hatasıdır.

Pekala, nachebto tüm raspisav i ileride. Hadi gidelim!

Merhaba sevgili okuyucular, bugün sizlere bir koristuvach'ın iletişim bilgilerini almak için formları nasıl oluşturduğumu anlatmak istiyorum.

Bugün, є açılış sayfasının yapısında. Yine de, uzun bir süre sonra e-postanızı aldıktan sonra, daveti kabul etmenin veya ürünlerinizin kataloğunu düzenlemenin yollarından biri verilir.

Bir zvorotny zv'yazku formunun oluşturulması - html işaretlemesi

Beni günde üç kez arayın ve çoğu durumda bir iletişim formu oluşturmak için dolaylı bir işaretim var:

Tarayıcıyı açmayı deneyin. Danimarka kodu ve ne tür bir İnternet tarayıcısı kazandığınıza bağlı olarak gördüklerinize hayret edin, belki şöyle görünebilir:

Yemek gibi bir şeyi taslaktan suçlamak için cesurca yorumlarda onlara sorun, bir rapor hazırlamaya çalışacağım ve dünyayı fazla abartmamak için makaledeki cilt unsurunu tarif edemiyorum. Diğer taraftan, elemanların bitirilmesi kolaydır.


Bir zvorotny zv'yazku - css formunun oluşturulması

Formumuzu şekillendirelim ve okunabilir bir görünüme taşıyalım:

/* Form stilleri */ #application ( genişlik: 475 piksel; kenar boşluğu: 0 otomatik; ) /* Giriş alanı stilleri */ #applicationName, #applicationEmail, #applicationTelephone ( genişlik: %100; yükseklik: 73 piksel; arka plan: yok; kenar boşluğu - üst: 25px;border:1px solid #fff;border-radius:40px;text-align:center;color:#fff;font-size:24px; , #applicationEmail:focus, #applicationTelephone:focus ( border: 1px düz # 30ad64; ) /*Yer tutucuda görüntülenecek metnin stillendirilmesi*/ ::-webkit-input-placeholder ( color: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba (0, 0, 0, .3); ) ::-moz-yer tutucu ( renk: #fff; yazı tipi ailesi: "PT Sans", sans-serif ; metin gölgesi: 0 1px 1px rgba(0, 0 , 0, .3); ) /* Firefox 19+ */ :-moz-yer tutucu ( renk: #fff; yazı tipi-ailesi: "PT Sans", sans-serif; metin-gölge: 0 1px 1px rgba(0,) 0 , 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( color: #fff; font-family: "PT Sans" , sans-serif;text-shadow: 0 1px 1px rgba ( 0, 0, 0, .3); ) ::yer tutucu ( renk: #fff; metin gölgesi: 0 1p x 1px rgba(0, 0, 0, .3); ) /*Button Styles*/ .applicationButton ( kenar boşluğu: 25 piksel; arka plan: #30ad64 kenarlık: yok genişlik: %100; yükseklik: 73 piksel; kenarlık yarıçapı: 40 piksel; renk: #fff; yazı tipi boyutu: 24 piksel; metin -transform: büyük harf; imleç: işaretçi; ) .applicationButton:hover ( background: #d68c18; )

Düğmenin renginin sorunsuz bir şekilde değişmesini istiyorsanız, .applicationButton ve.applicationButton:hover öğelerine aşağıdaki satırı ekleyin:

İletim: .6s;

De.6s - milisaniye cinsinden animasyon saati.
Şimdi bizim nabula şeklimiz Garni görünümü, bir anda şöyle görünür:


Bir zvorotnoy zv'azku oluşturma - php

Şimdi application.php dosyasını oluşturmamız gerekiyor. Otrimuvatim'de, posta yoluyla bize parametrі z formita nadsilatime іdnіdnіdnіdnіd.

Yeninin yapısı, tıpkı büyüklerinki gibi html dosyası, mümkünse ama diğer taraftan adınıza “Dakuyu, başvurunuz kabul edilmiştir” yazınız. Başvuruyu tamamladıktan sonra yöneticilerimiz sizinle iletişime geçecektir"

Tobto eğer koristuvach düğmesine basarsa, yogo application.php tarafına çevirin. Tse povnotsіnna storіnka i vy vinniі sorunu її vіdpovіdny rütbe.

"; $mesaj .="

siteden duyuru

\r\n"; $mesaj .= "

Kimin türü:".$kullanıcı adı."

\r\n"; $mesaj .= "

Postalamak:".$kullanıcı postası."

\r\n"; $mesaj .= "

İnternet sitesi:".$kullanıcıtel."

\r\n"; $msg .= ""; // uyarıyı güçlendir if(@mail($sendto, $subject, $msg, $headers)) ( echo "
";) başka (yankı"
"; } ?>

Kodu kısaca açıklayalım:

$gönder=" [e-posta korumalı]" // mail, bir liste alıyoruz $username = $_POST["name"]; // değişiklik verilerini topla, alandan çıkar $usertel = $_POST["telephone"]; // atlanan değişiklik verilerini topla $usermail = $_POST["email"];// telefon numarasına sahip alandan;// değiştirilen verilerde çıkarılmış e-posta adresi ile alandan çıkarılmış

Burada, sanırım, mantıklıydı.

Şimdi sayfanın başlığını oluşturalım.

$konu = "Yeni Güncelleme"; $başlıklar = "Kimden: " . strip_tags($usermail) . "\r\n"; $headers .= "Yanıt: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-Sürüm: 1.0\r\n"; $headers .= "İçerik Türü: text/html;charset=utf-8 \r\n";

Sıra $konu = "Yeni Güncelleme";- sayfanın konusuna cevap verin, oraya yazabilirsiniz: “Siteden başvuru” veya size daha çok uyanlar.

Sayfanın type="email" alanına girilen adres şeklinde bulunduğundan emin olmaya çalışacağım. Tobto, bir tür coristuvach'tan doldurulmuş formla birlikte. Bunun için sonraki satırları yazıyoruz:

$başlıklar = "Kimden: " . strip_tags($usermail) . "\r\n";

Bu nedenle, girilen e-posta adresi için geçerli olan bilgilerin alandan seçimini kaldırarak değiştirilen $usermail'in verilerini temsil ediyoruz.

Şimdi sayfanın eski görünümünü koyalım. Yogayı her zamanki gibi düzenleyebilirsiniz, ben de yapıyı yayacağım:

$mesaj = " "; $mesaj .="

siteden duyuru

\r\n"; $mesaj .= "

Kimin türü:".$kullanıcı adı."

\r\n"; $mesaj .= "

Postalamak:".$kullanıcı postası."

\r\n"; $mesaj .= "

Telefon:".$kullanıcıtel."

\r\n"; $mesaj .= "";

İlk satır, sayfanın yazı tipini ayarlar. Diğeri bir hatırlatma gibi görünüyor, örneğin: "İlk ekranda dönüş bağlantısı formu için başvuru." Formda üçüncü, dördüncü ve beşinci sıralar verilmiştir. Yeni bir satırdan cilt.

Şimdi, posta işlevini kullanarak bir sayfa göndermek ve başarılı veya başarısız bir sayfa yüklemesi ile ne yapılacağını belirlemek gerekiyor:

If(@mail($sendto, $konu, $msg, $başlıklar)) ( echo "

";) başka (yankı"
"; } ?>

Bunu, bir şekilde net metinli bir resim görüntülenecek şekilde yaptım. Doğru tarafa girmek için resmi değiştirebilirsiniz. Sadece resmi değiştirmek için kodu yazın.

Birkaç saniye sonra, resmi gördükten sonra yeniden yönlendireceğim (otomatik olarak yeniden yönlendireceğim) baş tarafı. Head etiketleri arasına bir sonraki satıra girerek daha iyi yapabilirsiniz;

4 saniye sonra Tobto ve koristuvach otomatik olarak baş tarafına dönüyor!

Ben php uzmanı değilim - bu dil programlamanın arka ucu, tüm hayatım ön uç geliştirmeye çekildi. Bu yüzden sert yargılamayın. Yani, burada, iletişim formlarını yeniden yazmak vb. üzerinde çalışabilirsiniz, ancak yeterli değilse, her zaman aynıdır, bu yüzden herhangi birinin bir teklifi varsa, kodunuzu nasıl geliştireceğinizi, gelincik olup olmadığını yorumlara veya postaya yazın. , dersi düzelteceğim sevgilim!

Konuşmadan önce, tarafı yeniden ayarlamadan bir dönüş bağlantısına ihtiyacınız varsa, ekleyebileceğinizleri okuyun.

Daha zeki olmayan biri için mümkün, ancak adımlarımı tam olarak tekrarlarsanız, uygun bir iletişim formunuz olacaktır. Yiyecekleri suçla - yorumları yaz, cevaplamaya çalışacağım! Blozі üzerinde zustrіchі için!

not Bu nedenle, formu kullanmayan ve posta için sayfaları olmayanlarla ilgilenme olasılığım daha yüksek olduğu için, öğrenebileceğiniz en popüler nedenleri açıkladım.

  • Formu sunucuda değil test edin.
  • Formu ücretsiz bir barındırmada test edin.
  • Formu ücretli bir barındırmada test edin, ancak ücretsiz bir test döneminde değil.

Bu vipadkah yapraklarında postayla size gelmiyor.

Bağımsız olarak öğrenmek ve çalışmak istiyorsanız, saygı göstermenizi tavsiye ederim.

23/07/2014 12/07/2018

dimadv7

Mobil ekler