Bir posta PHP betiği oluşturma. WordPress'te İletişim Formu Oluşturma

  • 25.05.2019

İster basit bir blog, ister büyük bir kurumsal web sitesi veya portföyünüzle WordPress tabanlı bir proje oluşturuyor olun, bir sayfa geri bildirim neredeyse her zaman gerekli bir unsurdur. Ve geri bildirim için adresinizi herkese açık olarak paylaşmak yerine herkese açık iletişim formunu kullanmak her zaman daha iyidir. E-posta(Spam botları bu tür adresleri çok sever).

Tabii ki, WordPress tabanlı birçok mükemmel eklenti var. Ama neden sitenizi hantal eklentilerle "yükleyin" ve Ek istekler küçük bir koda dayalı olarak kendinizinkini yazabiliyorsanız, veritabanına basit biçim geri bildirim?

| Kaynakları indir |

Kendi iletişim formunuzu oluşturmanın faydaları

Eklentiler harikadır, ancak birçoğunun ihtiyacınız olmayan gereksiz işlevleri vardır, ancak bunlar veritabanınızı ve sitenizi aşırı yükleyecektir. Bu, ek bir uygulamanın yürütülmesi nedeniyle gerçekleşecek php kodu, stil sayfaları ekleme css ve dosyalar JS... ve bir noktada ne kadar havalı olurlarsa olsunlar her türlü eklentiden uzak durmak istersiniz.

Bir kodlayıcı becerisine sahip değilseniz, itiraf etmeliyim: elleriniz biraz bağlı ve mevcut eklentilerden birini kullanmanız gerekecek. Ancak herhangi bir düzeyde bilginiz varsa (bu makaleyi okurken bu becerilere sahip olduğunuzu varsayacağız), o zaman site için kendi formunuzu tasarlamayı düşünmelisiniz. İşte bazıları Faydalar aşağıdaki kararı taşır:

  • Optimizasyon- özellikle ihtiyacınız olmayan fazlalık kodun kullanılması, ana makinenizin izin verilen maksimum sınırlarına yol açar. Ve sunucuda büyük bir kaynak kaynağınız olsa bile, optimizasyon sitenize her zaman fayda sağlayacaktır.
  • kod saflığı- Sunucunun çalışmasını optimize etmenin yanı sıra, "temiz" kod, sitenin sayfa yükleme hızında ana faktör olacaktır. Kendi kodunuzu yazmanız size yalnızca ihtiyacınız olanı kullanma avantajı sağlar ve sitenizde oldukça basit işlevlerden sorumlu olan çok sayıda "çöp" indirmeniz gerekmez. üzerinde de olumlu etkisi vardır. SEO.
  • Tam kontrolde memnuniyet- tam kontrol olanaklarını asla küçümsemeyin. Site üzerinde tam kontrol, sizi sadece bir set kullandığınızdan daha tutkulu bir geliştirici / tasarımcı olmaya itecektir. bitmiş kod. Ve kod size bitmiş halde verilmiş olsa bile, sadece "kopyala-yapıştır" yerine manuel olarak "yinelemek" her zaman daha iyidir. Kodu elle yazmak, eklentinin nasıl çalıştığını anlamanızı sağlar.

Gelelim koda

Yeterince gevezelik: hadi kodlamaya geçelim! Büyük miktarda kodla uğraşmak ve çok fazla çaba harcamak zorunda değiliz, bu nedenle PHP ve / veya WordPress'te yeni olsanız bile, aşağıdaki bölümler için talimatlarımı takip ederek aşağıdaki kodu sorunsuz bir şekilde anlayacaksınız. sizin "tanıyamadığınız" kod ".

ilgili kod tartışılacak, doğrudan bir dosyaya ekleyebilirsiniz işlevler.php temanız ve eklenti olarak uygulayın. Kodu ayrı bir eklenti olarak yayınlamanızı tavsiye ederim. Temalar arasında geçiş yaptığınızda, aynı işlevi yeniden eklemeniz gerekmez. İle başlayalım eklenti hakkında standart bilgiler :

Versiyon: 1.0 Yazar: Barış Ünver Yazar URI: http://beyn.org/ */ // Bu yorum satırı, bizim "yazacağımız" şaşırtıcı derecede basit kodun yerini alıyor. Yani gerçekten okumanıza gerek yok. Bu. ?>

Küçük yardımcı fonksiyon: get_the_ip()

Fonksiyonun adından da tahmin edebileceğiniz gibi gerçek bir sonuç elde etmek için kullanıyoruz. IP adresi kullanıcı, bu kullanıcı bize bir proxy sunucusu aracılığıyla "gelmiş" olsa bile. Çözüm elbette %100 kullanıcıyı korumak ve bilgi almak değil ama yine de kullanıcı hakkında ek bir fikir edineceğiz.

Temel olarak, diğer değişkenleri aşağıdakiler için kullanacağız: $_SERVER: HTTP_X_FORWARDED_FOR, HTTP_CLIENT_IP ve REMOTE_ADDR. Ve işte kodun kendisi:

wptuts_get_the_ip() işlevi ( if (isset($_SERVER["HTTP_X_FORWARDED_FOR"])) ( dönüş $_SERVER["HTTP_X_FORWARDED_FOR"]; ) elseif (isset($_SERVER["HTTP_CLIENT_IP"])) ($IP_CLIENT döndür"_HTTP ]; ) başka (döndür $_SERVER["REMOTE_ADDR"]; ) )

Kısa kod

Anlamanızı kolaylaştırmak için kısa kodu üç bölüme ayıracağız, ancak önce kısa koddaki işlevi açıp kapatmayı hatırlamanız gerekir:

İşlev wptuts_contact_form_sc($atts) ( // Bu yorum satırı da, iletişim formumuzu oluşturan parlak ancak basit kısa kodun yerini alıyor. Ve yine de bu yorumu okumak için zamanınızı boşa harcıyorsunuz. Bravo. ) add_shortcode( "contact", "wptuts_contact_form_sc");

Kısa kodumuzun özellikleri

Kısa kodun esnek olması ve kullanım kolaylığını sürdürmesi için birkaç öznitelik belirlememiz gerekiyor. İşte bunlar, bu nitelikler:

özü(shortcode_atts(array(// bir e-posta adresi sağlamazsanız, kısa kod yöneticinin e-posta adresini seçer: "email" => get_bloginfo("admin_email")), "subject" => "", "label_name" => "Adınız", "label_email" => "E-posta Adresiniz", "label_subject" => "Subject", "label_message" => "Mesajınız", "label_submit" => "Gönder", // gerekli alanlardan en az biri boş olduğunda hata mesajı: "error_empty" => "Lütfen doldurun hepsi gerekli alanlar.", // e-posta adresi geçerli olmadığında hata mesajı: "error_noemail" => "Lütfen geçerli bir e-posta adresi girin.", // ve e-posta gönderildiğinde başarı mesajı : "başarı" => "Teşekkürler senin için e-posta! "Mümkün olan en kısa sürede size geri döneceğiz."), $atts));

Kodumuzda bu özniteliklere öznitelik adıyla değişkenler olarak başvuracağımızı unutmayın (örneğin: $label_submit ).

E-mail göndermek

Bu, e-postayı göndermekten sorumlu olan işlevin en önemli kısmıdır:

// Eğer

öğe POST edilirse, if ($_SERVER["REQUEST_METHOD"] == "POST") ( $error = false; // "gerekli alanları" kontrol edilecek şekilde ayarlayın $required_fields = array("your_name", "email") ", "message", "subject"); // bu kısım POST'lanmış her şeyi getirir, sterilize eder ve onları $form_data["subject"] foreach ($_POST as $field => $value) olarak kullanmamıza izin verir ( if (get_magic_quotes_gpc()) ( $değer = stripslashes($value); ) $form_data[$field] = strip_tags($value); ) // gerekli alanlar boşsa, $hatasını TRUE olarak değiştirin ve sonuç metnini ayarlayın "error_empty" foreach ($gerekli_alanlar $gerekli_alan olarak) adlı kısa kod özniteliğine ( $değer = trim($form_data[$gerekli_alan]); if (empty($değer)) ( $hata = doğru; $sonuç = $hata_empty; ) ) // ve e-posta geçerli değilse, $error öğesini TRUE olarak değiştirin ve sonuç metnini "error_noemail" adlı kısa kod özniteliğine ayarlayın if (! is_email($form_data["email"])) ( $error = true; $sonuç = $error_noemail; ) if ($err veya == yanlış) ( $email_subject = "[" . get_bloginfo("ad") . "]" . $form_data["konu"]; $email_message = $form_data["mesaj"] . "nIP:" . wptuts_get_the_ip(); $başlıklar = "Kimden: " . $form_data["ad"] . "<" . $form_data["email"] . ">n"; $headers .="İçerik Türü: metin/düz; charset=UTF-8n"; $başlıklar .= "İçerik Aktarımı-Kodlama: 8bitn"; wp_mail($email, $email_subject, $email_message, $başlıklar); $sonuç = $başarı; $gönderilen = true; ) // ancak $error hala YANLIŞ ise, POSTed değişkenleri bir araya getirin ve e-postayı gönderin! if ($error == false) ( // web sitesinin adını alıp konunun önüne koyar $email_subject = "[ " . get_bloginfo("name") . "] " . $form_data["konu"]; // formdan mesajı alın ve IP adresini ekleyin Kullanıcı altında $email_message = $form_data["message"] . "nIP:" . wptuts_get_the_ip(); // e-posta başlıklarını kullanıcının adı, e-posta adresi ve karakter kodlamasıyla ayarlayın $headers = "Kimden: " . $form_data["adınız"] . "<" . $form_data["email"] . ">n"; $headers .="İçerik Türü: metin/düz; charset=UTF-8n"; $headers .= "Content-Transfer-Encoding: 8bitn"; // "email" adlı kısa kod özniteliği ve POSTed veri wp_mail($email, $email_subject, $email_message) ile e-postayı gönder , $headers); // ve sonuç metnini "success" $sonuç = $success; // ...ve $sent değişkenini TRUE $sent = true; ) adlı kısa kod özelliğine ayarlayın

İletişim Formu

Çalışmanın bu kısmı öncekinden daha az önemli değildir. Sonuçta, gönderilecek bir form yoksa, önceki kodun size nasıl bir e-posta göndermesi gerekiyor? :)

// $sonuç metni yoksa (yani hata veya başarı yok, yani kullanıcı sayfayı yeni açtı ve hiçbir şey yapmadı) $info değişkenini göstermeye gerek yok if ($sonuç != "" ) ( $bilgi = "

" . $sonuç ."
"; ) // neyse, hadi formu oluşturalım! (kısa kod özniteliklerini adlarıyla değişkenler olarak kullandığımızı unutmayın) $email_form = "
";

İpucu: Yakından bakarsanız HTML Kodu formda, değişkeni fark edebilirsiniz $konu. Kısa kod niteliğini hatırla ' ders' boş bir varsayılan değerle? Bu, özniteliğe ihtiyacınız olan değeri değiştirerek bir kısa kod kullanabileceğiniz anlamına gelir, örneğin:

Kısa koda dönüş ekleme

Çalışmanın son kısmı oldukça basittir. Gönderdikten sonra, kullanıcı mektubun başarıyla gönderildiğine dair bir mesaj veya başarısızlık durumunda bir hata bildirimi görmelidir. İşte kodun kendisi:

Eğer ($sent == true) ( ​​return $info; ) else ( return $info . $email_form; )

E-postayı gönderdikten sonra form tekrar görüntülenmez, ancak yine de formun görüntülenmesini istiyorsanız küçük bir kod satırı kullanabilirsiniz:

$info döndür. $email_formu;

CSS Kodu

Tabii ki, kodun kendisi mükemmel görünmüyor. ile biraz çekicilik ekleyelim css. Dosyanızdaki CSS koduna aşağıdaki satırları ekleyin stil.css:

İletişim formu etiketi, .contact-form girişi, .contact-form textarea ( ekran: blok; kenar boşluğu: 10px 0; ) .contact-form etiketi ( yazı tipi boyutu: daha büyük; ) .contact-form girişi ( dolgu: 5px; ) #cf_message ( genişlik: %90; dolgu: 10 piksel; ) #cf_send ( dolgu: 5 piksel 10 piksel; )

Her şeyi doğru yaptıysanız, aşağıdaki resimde gösterilene benzer bir şey göreceksiniz:

Tebrikler: Az önce kendi iletişim formunuzu oluşturdunuz!

Çözüm

Bu basit iletişim formu çoğu web sitesinde işe yarar, ancak buna ek alanlar eklemek istiyorsanız, düzenleyin ve değişkenler ekleyin. $form_data["name_of_the_new_field"] bir değişkenin içinde $email_message(ayrıca diziye alan adını da eklemeniz gerekebilir $gerekli_alanlar).

Bu gönderideki kısa kodu nasıl geliştireceğinize dair herhangi bir fikriniz varsa veya bu formla nasıl başa çıktığınızı bize göstermek istiyorsanız, lütfen düşüncelerinizi ve bağlantılarınızı yorumlarda bizimle paylaşın.

Bir iletişim formu, çoğu sitenin önemli bir özelliğidir. WordPress dizininde bu kadar çok iletişim formu eklentisinin bulunmasının nedeni budur. En popüler olanlardan biri İletişim Formu 7'dir. Eklenti, her türden form oluşturmanıza olanak tanır; çok esnek ve kurulumu kolay; uzun yıllardır gelişmekte ve birçok gelişmeyi içinde barındırmaktadır.

İletişim formları oluşturma ve görüntüleme

Yöneticide form oluşturma

Eklentiyi kurduktan sonra, formlar oluşturabileceğiniz ve silebileceğiniz "İletişim Formu 7" menü öğesi görünecektir.

Eklenti etkinleştirildiğinde resimdeki form otomatik olarak oluşturulmuştur.

Varsayılan formu kullanıyoruz, bunun için bir "Bana ulaşın" sayfası oluşturacağız ve formun kısa kodunu buraya ekleyeceğiz.

sitenin önü

Şimdi makaleyi kaydedelim ve formumuzun nasıl göründüğüne bakalım (Yirmi Onaltı temasını kullanarak):

Resim, gönderilen mektuptan sonraki formu göstermektedir (bu, formun altındaki bildirimde belirtilmiştir).

Form özelleştirme (karmaşık formlar oluşturma)

Yukarıdaki örnek, hazır ve çok basit bir iletişim formunun nasıl ekleneceğini göstermektedir. Ve şimdi daha zor bir formun nasıl oluşturulacağına bakalım. Bunu yapmak için yönetici paneline, form yöneticisine döneceğiz ve varsayılan formu düzenlemeye gideceğiz.

AT üst boşluk- formun adı (yalnızca yönetici panelinde görünür), kendiniz için anlaşılabilir bir ad belirtin, örneğin: "Site hakkında geri bildirim", "İş başvuru formu", "Geri bildirim formu" vb.

Başlığın altında bir kısa kod var. Formu görüntülemek için kayıtlarda kullanırız.

Ve aşağıda dört sekme var:

  1. Form Şablonu
  2. Mektup
  3. Ek ayarlar

Her sekmeyi ayrı ayrı ele alalım.

Form Şablonu

Bu sekmede, formun alanlarını ve görünümünü özelleştirebilirsiniz. çalışma alanı dır-dir HTML düzenleyici WP. Sadece bunun yerine tanıdık düğmeler farklı form alanları eklemek için düğmeler görüyoruz.

Form düzeni

Düzen için html etiketlerini ve eklenti kısa kodlarını kullanabilirsiniz. Kısa kodlar, form alanları ekler ve html etiketleri, özel oluşturmanıza izin verir. HTML yapısı. Örneğin, varsayılan formumuz şöyle görünür:

Ve bir gönderide görüntülendiğinde, bu HTML'ye dönüşecektir:

Kısa kod sözdizimi

"Metin" butonuna tıklayalım. Metin alanı için nitelikler belirleyebileceğimiz bir pencere açılır. "Etiket ekle"yi belirtin ve tıklayın.

Etiket daha sonra html koduyla bir metin alanına dönüştürülecektir:

Kısa kodlar, kısa kod oluşturucu kullanılarak kolayca oluşturulabilir.

Ancak yapıcı, kısa kodu değiştirmenize izin vermez (orada yalnızca bir kısa kod oluşturabilirsiniz). Kısa kodu değiştirmenin iki yolu vardır:

  1. yapıcıyı kullanarak silin ve yeni bir tane oluşturun.
  2. sözdizimini inceleyin ve alan kısa kodunu manuel olarak düzeltin.

Tasarımcı ile kendin anlayacaksın.

Ve burada kısa kodun sözdizimini analiz edeceğiz.


Örneğin, ek seçenekler içeren bir metin alanı etiketi düşünün:

Metin (gereklidir) Alan türü: metin, seçim, şifre, sayı vb. (bu durumda, bir metin alanı). Etiketimizin hangi form öğesine dönüştürüleceğini, yani ne tür verileri kabul edeceğini belirler. * Yıldız işareti, alanı zorunlu kılar (form gönderilmeyecek ve alanın doldurulması gerektiğine dair bir bildirim görüntülenecektir). Müşteri Adı (gereklidir) Alan adı olarak kullanılır isim niteliği girişte ve ayrıca gönderilen mektubun şablonunu oluştururken kullanılır. id:my-id, my-id değerine sahip girişteki id özelliği. Dekorasyon için kullanılır. class:my-class my-class değerine sahip girdi üzerindeki class niteliği. Dekorasyon için kullanılır. yer tutucu "(!LANG:Bir ad girin" Использовать текст "Введите имя" как placeholder. !}

Etiket niteliklerinin sırasını takip edin: önce alan türü, ardından adı ve ancak daha sonra ek seçenekler gelir.

Alan türleri

  • Metin alanları: metin, e-posta, tel, url, textarea
  • Sayısal alanlar: sayı , aralık
  • Tarih alanları: tarih
  • Onay kutuları, radyolar, listeler: onay kutusu , radyo , seçin
  • Dosya yükleme alanı: dosya
  • CAPTCHA: captchac ve captchar
  • Anketler: bilgi yarışması
  • "Kabul et" alanı: kabul
  • Gönder düğmesi: gönder
  • Özel alan türü

Mektup şablonu

İkinci sekmede, gönderilen mektubun şablonuna (düzenine) ve özelliklerine ince ayar yapabilirsiniz. Bu sekmenin alanlarında özel form alanı etiketleri kullanabilirsiniz - bu, formda belirtilen verileri mektupta göndermeyi mümkün kılar.

Etiketler, form şablonundaki alan adlarından oluşur. Örneğin, adında bir metin alanı oluşturduk: . Artık etiketi e-posta şablonunuzda kullanabilirsiniz. Harfte bu etiket yerine kullanıcı tarafından girilen alanın değeri (tam isim) değiştirilecektir.

E-posta başlıkları:

    Kime - e-postanın gönderileceği e-posta adresi. Virgülle ayırarak istediğiniz kadar kutu belirleyebilirsiniz.

    Kimden - mektubun geldiği isim ve e-posta. Genellikle sunucu postası burada belirtilir (örneğin [e-posta korumalı]).

    Herhangi bir posta belirtebilirsiniz, ancak posta etki alanı site etki alanından farklıysa, form kontrolü geçemez ve mektuplar gönderilmeye devam etmesine rağmen bu parametrede “yemin eder”.

    Konu - E-postanın başlığı. Verilerin hangi formdan gönderildiği açık olacaktır. Örneğin, mektubun konusu "Sitede hata", "Sipariş geri aramak" vb. Alınan harflerle çalışmayı kolaylaştırmak için bir başlık seçin.

  • Ek başlıklar - Yanıtla: varsayılan olarak buraya yazılır. Yanıtla başlığı, bu e-postanın aşağıdaki "Yanıtla" düğmesine tıklanarak yanıtlanabileceğini söyler. posta programı, ve form etiketi, şablondaki alanın adıdır. Bu etiket yerine kullanıcı tarafından belirtilen e-posta eklenecektir. Yanıtla gibi bir şey alırsınız: [e-posta korumalı].
Harf gövdesi

Bu, bu sekmenin bir sonraki önemli kısmıdır. İşte mektubun metni. Metinde aynı form etiketlerini kullanıyoruz (form şablonundaki alan adları).

Varsayılan harfi analiz edelim:

İtibaren:<>Konu: Mesaj: -- İletişim Formu 7 Eklentisini Keşfetme sitesinden gönderildi (http://test-wp.ru)

Kullanıcının doldurduğu 4 alanımız vardı. E-postayı gönderdikten sonra etiketler değerlere dönüşecek ve şöyle bir e-posta alacağız:

Gönderen: Dmitry Konu: İletişim Formu 7 İle İlgili Soru: Merhaba! Contact Form 7 eklentisi hakkında bir sorum var, nasıl kurarım? -- İletişim Formu 7 Eklentisini Keşfetme sitesinden (http://test-wp.ru) gönderildi

E-postanın gövdesindeki isteğe bağlı alanlar

Kullanıcı alanı doldurmaz, ancak harfin gövdesinde kullanılırsa, mektubun gövdesi eksik olacaktır. Örneğin, vücut Şehirden Adam diyor, ancak kullanıcı alanı doldurmadı, bu da mektupta şehirden Adam alacağımız anlamına geliyor… Mektupta böyle bir satır gereksiz. Bu satırı e-postadan kaldırmak için "Boş mesaj etiketli satırların çıktısını hariç tut" kutusunu işaretleyin. Bunun yalnızca alan metni ve kısa kod aynı satırda olduğunda çalışacağını unutmayın.

Seçenek "Mektubun HTML biçimini kullan". Vücutta kullanım sağlar HTML harfleri etiketler. Bu durumda, sınırlı bir HTML etiketleri listesi kullanabilirsiniz, çünkü tümü posta istemcileri veya hizmetler karmaşıklığı düzgün bir şekilde işleyebilir HTML işaretlemesi. Şunları kullanabilirsiniz: tablolar, madde işaretli listeler, koyuluk, paragraflar vb. Daha fazla ayrıntı için web'de arama yapın.

İletişim Formu 7, iki adrese mektup göndermenizi sağlar ve her harf için ayarlar farklıdır. Bu, site yöneticisine bir e-posta göndermeniz gerektiğinde yararlı olabilir. tüm bilgiler ve yönetici için yalnızca sipariş verilerini içeren bir kopya.

Form gönderme bildirimleri

Bu sekmede, belirli bir durumda formun görüntülediği mesajları düzenleyebilirsiniz: başarılı veya başarısız bir mektup gönderirken veya hatalar meydana geldiğinde.

Harf şablon etiketleri bu alanlarda çalışmaz.

Ek ayarlar

Bu sekme ileri düzey kullanıcılar için tasarlanmıştır ve JS kodunu kullanarak formun yeteneklerini genişletmenize olanak tanır. Örneğin, analitik için olayları askıya alın.

Bu işlevin kullanımından ayrı bir yazıda bahsedeceğim.

Bu eğitim size en basit HTML iletişim formunu nasıl oluşturacağınızı gösterecektir.

Her şeyden önce 2 dosya oluşturun: contact_form.html ve iletişim.php. İlk dosya iletişim formu kodunuzu içerecek ve ikinci dosya form verilerini işleyecektir.

HTML

Aşağıda bir iletişim formu için örnek bir HTML kodu verilmiştir:

Adınız

E-posta adresiniz

İleti