Özelleştirilebilir geri bildirim formu: Çevrimiçi nasıl oluşturulur? Bir telefonla güzel bir pop -up geri bildirim formu html ve php nasıl yapılır ve bir e -mail siparişi gönderilir?

HTML ve CSS'de bir geri bildirim formu oluşturma talimatlarının yanı sıra, bağlantıları ve yapılandırmaları için hazır formlar ve manuel koleksiyonu.

Bugün, programlama becerilerine sahip olmayan herhangi bir kişi, ağdan hazır bir şablon indirip kullanılan motora yükleyerek kendi sitesini kolayca oluşturabilir.

Ancak, her hazır şablon kullanıcının gereksinimlerini karşılayamaz. Birçoğu “peynir” formunda temsil edilir ve örneğin bir geri bildirim formu gibi önemli bölümlere ve işlevlere sahip değildir.

Bu site bloğu, çevrimiçi mağazaların sahipleri ve büyük bilgi portalları için son derece önemlidir. Makalemizde, bağımsız olarak bir geri bildirim formu nasıl oluşturulacağı, bitmiş bir şablonun nereden indirileceği ve web sitenize nasıl yükleneceği hakkında bilgi bulacaksınız.

Şekil 1. Geri bildirim formu nedir ve neden bu kadar gereklidir?

Geri bildirim formu nedir ve neden bu kadar gereklidir?

• Herhangi bir iyi sitenin en önemli işlevlerinden biri geri bildirim formudur. Ziyaretçi ve kaynak yönetimi arasında etkileşim için hizmet vermektedir. Böylece yardımıyla teknik desteğe itiraz yazabilir veya gerekli verileri idarelere gönderebilirsiniz. Örneğin, çevrimiçi mağazalarda ödeme ayrıntıları veya sipariş edilen malların adı. Portalınızda böyle bir form olması şiddetle tavsiye edilir, çünkü ziyaretçileri ve müşterileriyle sürekli iletişim başarılı gelişmesinin anahtarıdır.

Geri bildirim formu, metnin birkaç giriş alanından ve “Gönder” düğmesinden oluşan ayrı bir sayfa veya blok (departman )dır. Kural olarak, standart form aşağıdaki alanlara sahiptir:

• Ad Soyad
• E-posta (e-posta adresi)
• Cep telefonu numarası
• Sitenizin adresleri
• Metin Mesajı Giriş Alanı

Ancak, alanlar istediğiniz kadar olabilir ve bunlar istediğiniz kadar imzalanabilir. Her şey ihtiyaçlarınıza ve hayal gücünüze bağlıdır.

Şekil 2. Geri bildirim formu nedir ve neden bu kadar gereklidir?

• Buna ek olarak, bazı sahipler geri bildirim formuna Google veya Yandex kartları, “Vkontakte”, “Facebook”, “Google+” vb. Ancak, sadece işaretleme dilinin temelleri hakkında bilgiye ihtiyacınız olacak en basit geri bildirim biçimini oluşturma hakkında konuşacağız. HTML Ve başka bir şey yok.

HTML ve PHP'de site için en basit geri bildirim formu nasıl oluşturulur?

Makaleyi tam sıkıcı bir ders kitabına dönüştürmemek için, işaretleme dilinin temellerine zaten aşina olduğunuz gerçeğinden geçeceğiz. HTML Ve nasıl çalıştığı konusunda genel bir fikriniz var. Böyle bir beceriye sahip değilseniz, bir form oluşturulmadan önce, bilginizi özgür bir kaynak hakkındaki bilgilerinizi biraz sıkmanız şiddetle tavsiye edilir. htmlbook.ru. Aksi takdirde, sadece bu girişimi terk etmekle kalmaz, aynı zamanda sitenizin kodunu da bozabilirsiniz.

Geri bildirimin çalışma biçimini yeniden yaratmak için, biri formun işaretlenmesinden ve yapısından sorumlu olan üç önemli unsura ihtiyacınız var ( HTML), ikincisi harici tasarımı ( CSS) ve verilerin işlenmesi ve iletilmesi için üçüncüsü ( PHP). Sırayla başlayalım:

Geri bildirim için bir HTML kodu yazmak

• Aşama 1. Formu belirtmek için HTML Etiket kullanılır ‹Form› ‹/Form›. İçinde, formların boyutları, stilleri ve diğer hayati özellikleri ayarlanacaktır. Etiketin kendisini kaydederken, belirtilecek bir sınıf ayarlaması gerekir, bu da form için yüklemeye yardımcı olacaktır. CSS Stiller.

Şekil 1. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 2. Formumuzun ilk alanını etiketin içinde oluşturmak için \u003cBiçim\u003e Blok etiketi yazmanız gerekiyor \u003cP\u003eyeni bir çizgi oluşturmaktan sorumludur.

Şekil 2. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Aşama 3. İç etiket \u003cP\u003e Yeni satırdan aşağıdaki etiketi giriyoruz: ‹Etiket \u003d" Name "› ›İsim \u003c/Etiket\u003e. Gelecekteki form alanının isimlerinden sorumludur.

Şekil 3. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• 4. Adım. Yeni satırda, her şey aynı etikette \u003cP\u003e Aşağıdaki değerlerle bir alan oluşturma etiketini reçete ediyoruz: ‹Giriş türü \u003d" metin »name \u003d" name "yer tutucu \u003d"Adınızı giriniz "Gerekli \\\u003e. Parametre " type \u003d "metin"" Metin alanının türünü ve parametreyi ayarlar " yer tutucu \u003d "Adınızı giriniz «» Bu metin alanında ilk metni ayarlar. Parametre " gerekli»Site ziyaretçisine bu alanın doldurulması için zorunlu olduğunu açıkça ortaya koymaktadır. Sonuç olarak, aşağıdaki ekran görüntüsünde gösterildiği gibi bir alanla bir form almalısınız.

Şekil 4. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 5. Yukarıdaki örneğe göre, etiketten her seferinde ihtiyacınız olan alanları ekleyin \u003cP\u003e. Metin mesajı olan bir alan kurmak için etiket kullanın ‹TextArea Name \u003d" Mesaj "Cols \u003d" 50 ″ satır \u003d "6 ″ gerekli› ‹/textAea›. Seçenekler " kollar" Ve " satır»Metin alanının genişliğinden ve yüksekliğinden sorumludur. Daha çok sevdiğiniz parametreleri ayarlayabilirsiniz. Aşağıdaki ekran görüntüsünde gösterilen böyle bir şey almalısınız.

Şekil 5. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 6. Kendinizi bugün internette çok fazla olan botlardan korumak için etiketle başka bir satır oluşturun ‹Girdi adı \u003d" Bezpama "Type \u003d" Metin "Style \u003d" Ekran: Yok "Değer \u003d" "" /›. Parametre nedeniyle " style \u003d "Ekran: Yok"»Bu alan sadece ölümlüler tarafından görünmeyecektir, ancak botlar otomatik olarak doldurulacaktır. Böylece, yaşayan bir kişiyi her zaman programdan ayırabilirsiniz.

Şekil 6. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 7. İşaretlemenin son aşaması gönderme düğmesinin oluşturulması olacaktır. Bunun için etiket kullanılır \u003cDüğme\u003e. Yeni bir blok oluştur \u003cP\u003e Ve içinde, aşağıdaki parametrelerle düğme kodunu girin: ‹Button Class \u003d" Gönder "Type \u003d" Gönder "›Bir mesaj göndermek \u003c/Düğme\u003e. Ekran görüntüsünde gösterildiği gibi benzer bir sonuç ortaya çıkmalıdır.

Şekil 7. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

Basamaklı Stillerle Çalışma (CSS)

• İşaretleme sürecinde daha önce fark ettiğiniz gibi, çok çarpık, inanılmaz ve iğrenç bir şey ortaya çıktık. Geri bildirim formuna az ya da çok düzgün bir görünüm vermek için bir dil HTML Yeterli olmayacak. Bu amaçla, stillerin kullanımına başvurmanız gerekecek CSS.
• Kaynaktaki temel becerilerinizi sıkılaştırma tavsiyesinden yararlanmanız durumunda htmlbook.ru, ardından formun tüm bölümleri için belirli tasarım parametrelerini ayarlayın CSS Senin için zor olmayacak. Tüm bunlarla uğraşmak için bir arzunuz veya zamanınız yoksa, size hazır bir kod sağlayacağız ve nasıl bağlanacağınızı söyleyeceğiz.

Şekil 8. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

Bağlan Stiller CSS İle HTML İki yol yapabilirsiniz:

• Kodu basamaklı tablomuzdan dosyanın altına kopyalayın style.cssSitede barındırma var
• Styles dosyamızı barındırmanıza taşıyın ve bağlayın

Dosya style.css Etiketin içine bağlanır ‹Head› ‹/Head› Senaryo kullanma ‹Link rel \u003d" Styles sayfası "medya \u003d" ekran "href \u003d" style.css "›. Styles içeren bir dosyanın ana HTML dosyasıyla aynı klasörde bulunmaması durumunda, yolunu belirtmeniz gerekir. Styles dosyamızda, her öğenin bir ataması vardır. İsterseniz, yalnızca temel programlama becerileri ile yönlendirilen parametreleri kendiniz değiştirebilirsiniz.

PHP dosya bağlantısı ve ayarlaması

Daha önce de belirtildiği gibi, senaryo PHP Geri bildirim formunun yürütülmesinden sorumludur. Ancak, dil çalışması ilkesini az çok anlamak için PHP, büyük miktarda literatür okumanız ve uygulama için çok sayıda saat geçirmeniz gerekir. Bu nedenle, CSS, size yalnızca formla belgeye eklenecek bir PHP komut dosyası ile hazır bir dosya sunacağız.

Dosyanın aksine style.css, Formun özelliklerine PHP komut dosyası içeren bir dosya eklenir. Sırayla başlayalım:

• Aşama 1. Daha önce yazılmış kodu açın ve açık form etiketine sahip bir satır bulun. Özellikler ekleyin " action \u003d "Contact-Form.php"" Ve " yöntem \u003d "Post"". Ekran görüntüsünde bir örnek izleyin.

Şekil 9. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 2. PHP dosyamızı indirin ve HTML belgesinin bulunduğu aynı klasörde barındırma üzerine yerleştirin. Böylece, PHP ve HTML dosyaları birbiriyle etkileşime girer.

Şekil 10. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Aşama 3. Ardından, komut dosyasını kendiniz yapılandırmanız gerekir. Dosyayı açın ve HTML betiğiyle aynı adları atayarak değişkenleri ayarlayın. Forma ek alanlar eklediyseniz, bunları tam olarak ekran görüntüsünde gösterildiği gibi PHP komut dosyasına ekleyin.

Şekil 11. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• 4. Adım. Ardından, e -postanızın adresi ve kutunuzda görüntülenecek mektubun konusunu içeren iki değişken daha eklemeniz gerekir. Değişkenli bir satırda " $ Adres"E-postayı belirtin ve satırda" $ Sub»Mektubun teması ekran görüntüsünde gösterilmiştir.

Şekil 12. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 5. Değişkenli bir satırda " $ MS»Posta ile alacağınız mektubun biçimi yapılandırılır. Değişiksiz yeniden yazabilir veya kendi zevkinizi düzenleyebilirsiniz.

Şekil 13 HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

• Adım 6. Diğer tüm satırlar mesajı göndermekten sorumludur ve botlardan koruma ayarlarını içerir, böylece değişmeden bırakılmalıdır. Sonuç olarak, tam kod aşağıdaki ekran görüntüsünde gösterilen bir şey görünmelidir.

Şekil 14. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

Geri bildirim için CSS ve PHP dosyalarını indirin

Çıkıştaki tüm işlemleri gerçekleştirdikten sonra, bu kadar basit bir düzenli geri bildirim formu alacaksınız

Şekil 15. HTML ve PHP'deki site için en basit geri bildirim formu nasıl oluşturulur?

Farklı amaçlar için HTML ve CSS hakkında güzel tasarım formları seçimi

• Yukarıdaki talimatlara dayanarak, geri bildirim formunu kendi zevkinize kolayca “çizebilirsiniz”. Bununla birlikte, sıfırdan bağımsız olarak bir form oluşturma zamanınız veya arzunuz yoksa, İnternet'te hazır tasarım formları bulabilir ve temel becerilere sahip olabilirsiniz. HTML Onları kendiniz düzenleyin.

Şekil 1. Farklı amaçlar için HTML ve CSS hakkında güzel tasarım formlarının bir seçimi

• Biraz arama yaptıktan sonra sizin için bir seçim bulduk 35 üzerine yazılmış güzel pop -up tasarım formları HTML Ve CSS. Bu formlar gibi motorlar için uygundur. WordPress Ve JoomlaKontrol panelinden basit ve kolay bir ayara sahiptirler ve ayrıca motoru olmayan siteler için mükemmeldir.

Siteler için bir dizi tasarımcı geri bildirim formu indirin

VİDEO: Rafed Romeed Geri Bildirim Geri Bildirimi Geri Bildirimi