Wordpress başvuru formu. WordPress Formları - hızlı, basit, etkili! İletişim formu ayarlama

Varsayılan olarak WP'de böyle bir işlevsellik yoktur, ancak eklentiler ve motor için özel olarak tasarlanmış yapılandırmalar kurtarmaya gelir.

Contact Form 7 eklentisini kullanan WordPress geri bildirim formu

Rusçaya çevrilmiş ücretsiz İletişim Formu 7'yi analiz edeceğim. Standart olarak şunları içerir:

• Posta adresi
• İstenirse telefon
• Mesaj metni
• Captcha

Captcha reCaptcha'yı ekleyin

Eklentiyi standart olarak WordPress admin paneli üzerinden kuruyoruz, panelde bu şekilde görünüyor.

Aramada CF7

Google’dan reCaptcha kurulumunu yapalım, entegrasyon kısmına gelip google.com/recaptcha linkine tıklayalım. Bir Google hesabına sahip olmanız gerekir.

Recaptcha bağlantısı

Servise aktaracak, öğeleri ekran görüntüsündeki gibi ayarlayacak, alan adını doğru şekilde girecek ve alttaki gönder seçeneğine tıklayacaktır.

Captcha'yı siteye bağlama

Captcha verilerini her iki tuşa da kopyalayın.

Erişim tuşları

Hadi geri dönelim WordPress eklentisi ve Entegrasyon Ayarları düğmesini tıklayın.

Entegrasyon

ReCaptcha servisinden kopyaladığımız anahtarları girip uygun bölümlere yazıp kaydediyoruz.

Ayarları kaydetme

Form Oluşturma

Ayarlara gidin ve oluşturun yeni üniforma. Standart işaretleri siliyoruz.

Standart yazıları sil

Yeni projenin adını girin ve Metin butonuna tıklayın çünkü isim kuralsız bir şekilde metin olarak girilecektir.

Metin alanı

Bir açılır pencere görünecektir, ihtiyaçlarınıza göre özelleştirin.

1. Tür, ziyaretçinin alanı doldurmasının gerekip gerekmediğini belirler, ben evet olarak ayarladım
2. Adı değiştirmiyoruz; bu benzersiz bir tanımlayıcıdır
3. Varsayılan değer, içinde göreceğim ifadeyi girdim
4. Yer tutucu yerine kullanın, yani hiçbir şey girilinceye kadar yazı görüntülenecektir
5. Akismet alanını kullanmanızı tavsiye etmiyorum
6. Stil eklemek için sınıf veya kimliği girin, kutup adı yapın
7. Etiketi ortak alana ekleyin

Benzer şekilde e-posta butonuna bastığımızda da aynı arayüzü görüyoruz.

Posta oluşturucu

E-postayı metin yoluyla girebilirsiniz ancak bu durumda doğruluk kontrolü işlevini kaybedersiniz. Eklenti @ işaretinin olup olmadığını kontrol edecektir.

Bir metin alanı ve telefon bölümü ekleyin (isteğe bağlı), prensip aynıdır.

Telefon ve metin alanı düğmeleri

Daha önce WordPress'te captcha entegrasyonunu kurmuştuk. temel sürüm CF7'de captcha eklemek için bir düğme yoktur; bunun için bir kısa kod oluşturulmuş ve diğer öğelerin altına yerleştirilmiştir.

Geriye kalan tek şey bir gönder düğmesi eklemek, listeden seçim yapmak ve çıktısını yapılandırmak.

Gönder düğmesi

Sonuç aşağıdaki koddur.

Son CF7 kodu

Mektup göndermeyi ayarlama

E-posta ayarlarını değiştirme

1. Daha önce oluşturulan alan etiketleri
2. Mektupların gönderileceği posta adresi
3. Kimden ve konu, istediğiniz gibi doldurun
4. Ek başlıklar tamamen temizlendi
5. Mektubun gövdesine, gönderdikten sonra e-posta yoluyla ne almak istediğimizi yazıyoruz. Örneğin Mail yazdım ve bu kelimenin karşısına karşılık gelen etiketi ekledim.
6. Alt kısımdaki Kaydet'e tıklayın

Kaydediliyor

Kalan bildirim ve ayarlar sekmelerini test edin; farklı durumlarda görüntülenen metni değiştirebilirsiniz.

Bir web sitesine form ekleme

Sayfanın üst kısmında kısa bir kod oluşturuldu, kopyalayın.

Kısa kod

Herhangi bir girişe gidin ve yapıştırın.

Sayfaya kısa kod ekleyin

Görüntüle butonuna tıkladıktan sonra yapılan çalışmaların görüntülendiği siteye aktarılacaktır.

Son versiyon

WordPress tema geliştiricilerinin iyi bir özelliği, önceden CF7'yi destekleyen, hayatı kolaylaştıran ve kayıt gerektirmeyen bir ürün yapmaktır. CSS stilleri site kodunu girin. Temam eklentiyi destekliyor ve çok güzel bir resim gösteriyor. Memnun kalmazsanız her alana bir sınıf atanmıştır, tasarımı değiştirmek için bunu kullanın. Temayı kontrol ettim ve e-postalar hızlı bir şekilde geliyor. Diğer yöntemler için bağlantıyı okuyun.

Tüm materyallere yalnızca oluşturma sürecini değil aynı zamanda nasıl yapılacağını da gösteren video talimatları ekleyeceğim. Yapmak güzel tasarım formlarçünkü tüm süreç metinle anlatılamaz.

Alanları bir çizgi halinde yatay hale getirin

İnternete baktım ve ne kadar çok manipülasyon yapıldığı karşısında dehşete düştüm. Size tasarımın nasıl tamamen özelleştirileceğini göstermeyeceğim; bu her büyük kılavuzun konusudur. Formu düzenleyip div'de yatay olarak hizalamak istediğimiz alanları bir sınıfla sarıyoruz, koda bakıyoruz.

Ad, Posta ve Telefon alanlarını sıralamak istiyorum. Değişiklikleri kaydetmeyi unutmayın.

Div'e sarın

WordPress yöneticisine giriş yapın Dış görünüş> Tema editörü > style.css'in arkasına stiller yazıyoruz WordPress iletişimleri dosyanın sonuna kadar.

Flex-form(display:flex;) @media only ekranı ve (max-width: 655px)(.flex-form(display:block;))

Reçete yazma stilleri

Stillerden, flex-form sınıfına sahip div'e display:flex özelliğinin atandığı açıktır; bu, öğelerin bir satırdaki düzenini, olmadan belirtir. ek parametreler alan eşit olarak bölünmüştür.

İkinci girişte ise ekran çözünürlüğü 655 piksele ulaştığında formun özelliği flex'ten bloğa dönüşecek ve form eskisi gibi alt alta alanlarla görüntülenmeye başlayacak. Bu 655 sınırı kişiye göre değişir, stile göre yapılır mobil cihazlar geri bildirimler iyi görünüyordu.

Açılır geri bildirim formu

CF7'den başvuruların kabul edilmesiyle ilgili olumlu eylem. Açılır pencereyi görüntülemek için kullanılan eklenti Popup Maker olacaktır. Bunu tarif etmeyeceğim, materyalin bağlantısı bu paragrafta yer alıyor. O makaleye ek olarak.

Elementor'a nasıl eklenir

Elementor'a form eklemek için kısa kod bölümünü kullanmanız gerekir. Form yukarıdaki talimatlara göre oluşturuldu, bu da CF7'den bir kısa kod olduğu anlamına geliyor. Elementor'da sayfa oluşturmaya gidelim ve öğe aramada bir kısa kod arayalım.

Elementor'da bir öğe bulma

Elementor isteği işleme koydu

Tema ayarını kullanma

Çoğu WordPress şablonunda otomatik geri bildirim oluşturmaya yönelik araçlar yoktur. Ancak WPShop'taki şablonlarımız, kısa kod kullanılarak görüntülenen yerleşik bir işleve sahiptir. Root örneğine bakalım. Bir sayfa oluşturmaya geçiyorum, ardından anlık görüntüye bakıyorum.

ROOT'ta eklenti

• [ iletişim formu ] metnini girin (parantez içinde boşluk olmadan)
• Önizlemeyi tıklayın

Ziyaretçinin yöneticiden geri bildirim alabileceği, önceden uyarlanmış, işaretlenmiş ve hazırlanmış bir formun bulunduğu bir sayfa açılacaktır.

ROOT yerleşik fonksiyon çalışması

Widget'lar aracılığıyla geri bildirim

Widget'lara geri bildirim eklemek kolaydır. Metin widget'ı yardımcı olacaktır, onu aktif bölgeye taşıyın ve kısa kodu buraya yazın.

Metin widget'ını kullanma

Başlığı belirliyoruz, metin alanına konfigürasyonu giriyoruz, bloga gidiyoruz ve geri bildirimin nasıl işlendiğini görüyoruz.

Widget'taki form

Eklenti olmadan geri bildirim

Eklentisiz yöntemleri tercih ediyorsanız, mükemmel talimatlar var, bunları internette buldum, kodun sahibi görünürse, bir bağlantı vermekten memnuniyet duyarım.

Function.php dosyasını düzenlemek için açın, nasıl kullanılacağını anlatan kodu en alta yazın.

/*geribildirim kodu*/ add_shortcode("art_feedback", "art_feedback"); function art_feedback() ( ob_start(); ?>

WordPress HTML işaretlemesinde bir form oluşturduk ve onu bir kısa koda bağladık. Bu yaklaşımın uygun olacağını düşünüyorum çünkü blok her yerde görüntülenebiliyor.

WordPress panelinde sayfa oluşturmaya gidin, yazın, görünüme tıklayın.

Gutenberg'de herhangi bir metin bloğuna satır eklersiniz.

Çıktıyı kaydetme

Siteye gittiğimizde oluşturulmamış bir form göreceğiz, alanlar çalışıyor ancak PHP işleyicisi eklenmediğinden mektup gönderilmeyecek.

Kötü görünüm

Şimdi görünümü özelleştirelim, bu kodu aktif temanın style.css dosyasına yapıştıralım.

#add_feedback ( kenar boşluğu: 20 piksel 0 0; konum: göreceli; ) #sanat_adı, #sanat_epostası, #sanat_konusu, #sanat_yorumları ( dolgu: 10 piksel 5 piksel; ekran: satır içi blok; genişlik: %49,548; kenarlık yarıçapı: 3 piksel; kenarlık: 1px katı #ddd; yazı tipi boyutu: 0,9em; ) #art_subject ( genişlik: %100; kenar boşluğu: 5px 0; ) #art_comments ( genişlik: %100; ) #add_feedback .button ( kenarlık: yok; dolgu: 10px 20px; renk: #fff; yazı tipi boyutu: 1em; kenar boşluğu: 10 piksel 0 0 0; kenarlık yarıçapı: #2f94ce; giriş: odak, #add_feedback metin alanı: odak ( renk: #444; kutu gölgesi: 0 0 3px rgba(68) , 68, 68, 0,2); ) .hata-metni ( arka plan: #F59E9E; dolgu: 15 piksel 0 piksel; metin - hizalama: orta; renk: #fff; ) .hata-adı, .hata-e-postası, .hata-yorumları ( ekran: satır içi blok; yazı tipi boyutu: 11 piksel; konum: mutlak; üst: -30 piksel; renk: beyaz; kenarlık: 1 piksel düz kırmızı; dolgu: 5 piksel 10 piksel; arka plan: kırmızı; kutu gölgesi: 0 0 3 piksel 0 piksel rgba (0, 0, 0, 0,3); ) .hata-adı:sonra, .hata-epostası:sonra, .hata-yorumları:sonra ( içerik: ""; konum: mutlak; sol: 20 piksel; alt: -10 piksel; kenarlık: 5 piksel düz şeffaf; kenarlık üst: 5px düz kırmızı; ) .error-comments (üst: %16; sol: 0; ) .error-name (sol: 0; ) .error-email (sağ: %4; ) .message-success ( arka plan: rgba( 0, 128, 0, 0,5); renk: #fff; metin hizalama: merkez; kenarlık yarıçapı: 3 piksel; .gerekli: sonra ( içerik: "*"; konum: mutlak; sol: 20 piksel; alt: -10 piksel; ) #art_name:focus::-moz-placeholder, #art_name:focus:-moz-placeholder, #art_name:focus :-ms-input-placeholder, #art_email:focus::-webkit-input-placeholder, #art_email: focus::-moz-placeholder, #art_email:focus:-moz-placeholder, #art_email:focus:-ms- input-placeholder, #art_comments:focus::-webkit-input-placeholder, #art_comments:focus::- moz-placeholder, #art_comments:focus:-moz-placeholder, #art_comments:focus:-ms-input-placeholder, #art_subject:focus::-webkit-input-placeholder, #art_subject:focus::-moz-placeholder, #art_subject:focus:-moz-placeholder, #art_subject:focus:-ms-input-placeholder ( renk: şeffaf )

Sunucudaki style.css'yi güncelliyoruz ve sayfadaki geri bildirimin nasıl değiştiğini görüyoruz.

Düzen bloğu

Bir geribildirim.js dosyası oluşturun ve kodu bu dosyaya yerleştirin. Aktif temanın js klasöründeki hostinge yükleyin.

JQuery(document).ready(function ($) ( var add_form = $("#add_feedback"); // Alan değerlerini sıfırla $("#add_feedback input, #add_feedback textarea").on("blur", function () ( $("#add_feedback girişi, #add_feedback metin alanı").removeClass("hata"); $(".hata-adı,.hata-e-postası,.hata-yorumları,.message-success").remove( ); $("#submit-feedback").val("Mesajı gönder" )); // Alan değerlerini gönder var options = ( url: geribildirim_object.url, data: ( action: "feedback_action", nonce: geribildirim_object) .nonce ), şunu yazın: "POST", dataType: "json", beforeSubmit: function (xhr) ( // Gönderirken, düğmedeki etiketi değiştirin $("#submit-feedback").val("Submit.. ."); ), başarı: function (request, xhr, status, error) ( if (request.success === true) ( ​​// Tüm alanlar doldurulmuşsa verileri gönderin ve etiketteki etiketi değiştirin. add_form.after(" düğmesi

sunucudaki js klasörü

Şimdi kodun ikinci kısmını function.php dosyasına yüklüyoruz.

/*ikinci bölüm*/ add_action("wp_enqueue_scripts", "art_feedback_scripts"); function art_feedback_scripts() ( // Alanlar işleniyor wp_enqueue_script("jquery-form"); // wp_enqueue_script("feedback", get_stylesheet_directory_uri() . "/js/feedback.js", array("jquery") komut dosyasını dahil edin, 1.0 , true); // Ajax nesne verilerini ayarlayın wp_localize_script("feedback", "feedback_object", array("url" => admin_url("admin-ajax.php"), "nonce" => wp_create_nonce("feedback-) hemen" ),)); ) add_action("wp_ajax_feedback_action", "ajax_action_callback"); add_action("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback() ( // Hata dizisi $err_message = dizi(); // Tekrarı kontrol edin. Kontrol başarısız olursa gönderimi engelleyin if (! wp_verify_nonce($_POST["nonce"], "feedback-nonce") ) ( wp_die("Veri yanlış adresten gönderildi"); // Spam olup olmadığını kontrol edin. Gizli alan doldurulursa veya kontrol iptal edilirse gönderimi engelleyin if (false === $_POST["art_anticheck"] | | ! empty($_POST[ "art_subtained"])) ( wp_die("Bu spam"); ​​​​) // İsim alanlarını kontrol edin, eğer boşsa, ardından hata dizisine bir mesaj yazın if (empty($_POST) ["sanat_adı"]) || isset($_POST ["sanat_adı"])) ( $err_message["isim"] = "Lütfen adınızı girin."; ) else ( $sanitize_text_field($_POST["sanat_adı) "]); ) // Posta alanlarını kontrol edin, eğer boşsa, mesajı hata dizisine yazarız if (empty($_POST["art_email"]) || ! isset($_POST["art_email"])) ( $err_message['email'] = "Lütfen e-posta adresinizi girin."; ) elseif (! preg_match("/^[[:alnum:]]*@+\.(2,4)$/i", $ _POST["art_email"])) ( $err_message["email "] = "E-posta adresi hatalı."; $email_to) ( $email_to = get_option("admin_email"); ) $body = "Ad: $art_name \nE-posta: $art_email \n\nMesaj: $art_comments";<" . $email_to . ">" . "\r\n" . "Yanıtla: " . $email_to; // Bir mektup gönder wp_mail($email_to, $art_subject, $body, $headers); // Başarılı gönderim hakkında bir mesaj gönder $message_success = "Mesaj gönderildi. Kısa süre içinde sizinle iletişime geçeceğim."; wp_send_json_success($message_success); ) // Her ihtimale karşı, ajax işlemini tekrar sonlandırın wp_die(); )

Formu işlevsellik açısından kontrol ediyoruz. Js dosyasını WordPress temasına doğru şekilde yüklemediyseniz ve yolu doğru şekilde belirtilmemişse, yani // Betik dosyasını dahil et bölümündeki ikinci kodda sorun ortaya çıkabilir.

Mektubu doldurup gönderin

Böyle bir mektup geri bildirimle birlikte postayla gelir.

Gönderdikten sonra ne gelir?

Harika, başardık, WordPress'te üç farklı yöntem kullanarak geri bildirim formu oluşturmayı başardık, sorularınız varsa sorun, biz çözelim. İyi şanlar!

hoşuma gitti, hoşuma gitmedi

Yazardan: Selamlar sevgili okuyucular. WordPress web siteniz için bir geri bildirim formuna ihtiyacınız varsa bu makale tam size göre. Makaleyi okuduktan sonra WordPress'te geri bildirim formunun nasıl oluşturulacağını ve bunu kolay, hızlı ve verimli bir şekilde yapmayı öğreneceksiniz.

Bu sorunu çözmek için Contact Form 7 adında bir geri bildirim formu eklentisi kullanacağız. Yazarın neden bu ismi seçtiğini bilmiyorum, daha doğrusu isimdeki seri numarasını, belki de bu onun şanslı numarasıdır

Öyle olsa da, WordPress için İletişim Formu 7 eklentisi, WordPress geri bildirim formu oluşturmaya yönelik eklentiler arasında ve diğerleri arasında en popüler eklentilerden biridir. Ve gerçekten de bir milyondan fazla kurulum - rakam kendini anlatıyor. Eklentinin derecelendirmesi oldukça yüksek - 4,5 yıldız, bu da kullanımıyla ilgili tüm şüpheleri ortadan kaldırıyor. Ayrıca eklenti zaten Rusçalaştırılmış olduğundan form alanlarını ve mesajları Rusçaya çevirmenize gerek yok.

WORDPRESS İÇİN İLETİŞİM FORMU 7 EKLENTİSİNİN KURULMASI

Peki, standart kurulum sürecinden geçelim. Bu arada, daha önce hiç eklenti yüklemediyseniz “WordPress. Eklentileri kurmanın tüm olası yollarını bulacağınız “Eklentileri yükleme”.

Site yönetici panelinde Eklentiler - Yeni ekle bölümüne gidin ve arama çubuğuna eklentinin adını girin - "iletişim formu 7". Bulunan ilk geri bildirim formu eklentisi ihtiyacımız olan seçenektir.

Install butonuna tıklayın ve eklentiyi etkinleştirin. Kurulumdan sonra menüde çeşitli öğelerin bulunduğu yeni bir İletişim Formu 7 bölümü görünecektir.

İlk Formlar öğesi, sitenizdeki mevcut formların bir listesini içerir ve bunları yönetmenize (düzenlemenize veya silmenize) olanak tanır. Tamamlanan form, bir gönderiye, sayfaya ve hatta widget'a eklenebilecek bir kısa koddan (kısa kod) başka bir şey değildir. Bu kısa kod sayfada tam koda genişletilecektir. Eklenti zaten bir geri bildirim formu örneğiyle birlikte geliyor; kısa kodunu kopyalayıp örneğin iletişim sayfasına yapıştıralım. Bundan sonra sayfaya gidelim ve üzerinde hazır çalışan bir WordPress geri bildirim formu görelim.

Formu doldurup göndermeyi deneyebiliriz, mektup yöneticinin profil ayarlarında belirtilen e-posta adresine teslim edilecektir. İletişim Formu 7 eklentisinin yalnızca olağan standart geri bildirim formunu sunmadığını lütfen unutmayın. Hayır, eklenti esnek bir şekilde yapılandırmanıza olanak tanır. Ayrıca sayfa yeniden yüklenmeden form gönderilir, bu da ek bir artıdır. Ve tabii ki form alanlarının doğrulanması, gerekli alanların belirlenebilmesi de bir başka büyük artı.

WordPress İÇİN GERİ BİLDİRİM FORMU AYARLAMA

Biz hazır bir form kullandık. Peki onu değiştirmeye ne dersiniz? Bu mümkün mü ve yapılması kolay mı? Her iki sorunun cevabı da evet. Örneğin konu alanını formdan kaldırmak istiyorum, bunu nasıl yapabilirim? Forms eklenti menüsünde formu düzenlemeye geçelim ve aşağıdaki resmi görelim.

Konuyu kaldırmak için ekran görüntüsünde daire içine alınmış ilgili 2 satırı kaldırmanız yeterlidir. İkinci satır burada ilginç: . Tahmin edebileceğiniz gibi bu, form alanına yerleştirilen bir kısa koddan başka bir şey değildir. Bu durumda, bu, name özelliğinin (konunuzun) değerini içeren bir metin türü alanıdır.

Örneğin aşağıdaki metin alanından bahsediyorsak, kısa kodu şu şekilde görünür: . Burada textarea formun textarea etiketidir ve your-message bu form öğesinin adıdır. Çok basit.

Burada tamamen mantıklı bir soru sorabilirsiniz: diğer form öğeleriyle ne yapmalı? Örneğin bir açılır listeden hangi kısa kodun sorumlu olduğunu nasıl öğrenebilirim? Burada da karmaşık bir şey yok. Düzenlenebilir formun şablon alanının üstünde, üzerine tıklayarak gerekli elemanları forma ekleyeceğimiz butonlar bulunmaktadır.

Hala zorluklar ortaya çıkarsa, birçok örnek bulabileceğiniz eklentinin belgeleri size yardımcı olacaktır.

Örnek olarak mesajın konusunu kaldıralım ve mesajın konusunu seçme seçeneklerini içeren bir liste ekleyelim. Bir açılır liste oluşturmak için açılır menü düğmesine tıklayın. Açılan kalıcı pencerede formu doldurun. Anahtar, açılır liste için seçenekleri girdiğimiz Seçenekler alanıdır. Her seçenek yeni bir satırdadır. Diğer form alanları sezgisel olmalıdır. Örneğin Alan tipi (Zorunlu alan) kutucuğunu işaretlersek, oluşturulan form alanının doldurulmasını zorunlu hale getireceğiz. Çoklu seçime izin ver onay kutusu, birden çok seçeneği belirleme olanağına sahip bir liste oluşturmanıza olanak tanır ve İlk seçenek olarak boş bir öğe ekle onay kutusu, listedeki ilk boş seçeneği oluşturur. Id ve Class alanları kendi adlarına konuşur; bunlar, alanı daha fazla tasarlamanıza olanak tanıyan id ve class niteliklerinin eklenmesine yönelik alanlardır.

Gerekli seçenekleri içeren bir liste oluşturduktan sonra form şablonunda yeni bir alan görünecektir.

Şablonu kaydedip yeni geri bildirim formunu test etmeye çalışıyoruz. Sitede form gerçekten değişti; tema metin alanı yerine tema seçme seçeneklerinin bulunduğu bir açılır liste var.

Formu doldurup göndermeye çalışalım. Form gönderildi, ancak hata... Alınan e-postada seçilmiş bir konu seçeneği yok. Nasıl yani? Bu yanlış anlaşılma nasıl düzeltilir? Endişelenmeyin, düzeltmesi kolaydır. Formu düzenlemeye gidin ve Mektup sekmesine geçin.

Bu sekmede geri bildirim formundan e-postaya gelen mektubun formatını yapılandırırsınız. Ekran görüntüsünde daire içine alınmış ilk alanda, geri bildirim formumuzda kullanılan kısa kodların (form alanı adları) bir listesini görüyoruz. Mektup şablonuna değiştirilen bu alanların değerleridir. İkinci işaretli alanda Konu alanının bir önceki alanın adını koruduğunu görüyoruz. Mesaj Gövdesi alanı da aynı kısa kodu içerir. Bunları yukarıdaki listeden uygun etiketle değiştirelim - . Bu arada burada alıcının e-posta adresini de değiştirebiliriz, Kime alanında yazıyor. Aşağıda diğer ayarları da değiştirebiliriz, hepsi imzalı ve anlaşılır.

Değişiklikleri kaydedip mektubu tekrar göndermeye çalışıyoruz. Artık geri bildirim formu beklendiği gibi çalışıyor; seçilen konuyu içeren bir e-posta e-postanıza gönderilir.

Bir sonraki Form Gönderim Bildirimleri sekmesinde, form gönderilirken oluşan başarı veya hata mesajlarını yapılandırabiliriz.

GERİ BİLDİRİM FORMUNUN GÜVENLİĞİ

Peki ya spam hakkında makul bir soru sorabilirsiniz? Eklentinin yazarı da bununla ilgilendi. Eklenti ayarları bölümünde bir Entegrasyon öğesi vardır.

Burada Google'ın reCAPTCHA hizmetini ayarlayabiliriz. Bunu yapmak için, ilgili Google hizmetine giden belirtilen bağlantıyı takip etmeniz ve ardından gerekli anahtarı almak ve captcha'yı sitenize entegre etmek için talimatları izlemeniz gerekecektir.

Eklenti, reCAPTCHA hizmetini kullanmak istemeyenler için soru/cevap alanı şeklinde robotlara karşı koruma sunuyor. Bu alanı form şablonuna eklemek için sınav düğmesine tıklayın ve formu açılır listede yaptığımız gibi doldurun. Soruyu girin ve dikey bir çizgi üzerinden cevaplayın.

Bundan sonra geri bildirim formunda yazdığınız soruların seçeneklerinden birinin yer aldığı yeni bir alan görünecektir. Şimdi formun gönderilebilmesi için soruya doğru cevabı vermeniz gerekiyor.

Gördüğünüz gibi WordPress'te geri bildirim formu oluşturmak armut ayıklamak kadar kolaydır. Contact Form 7 eklentisi hemen hemen her amaç için bir form oluşturmanıza olanak tanır. Bu bir geri bildirim formu, başvuru formu vb. olabilir. Evet, yukarıda da söylediğim gibi form yalnızca bir gönderiye veya sayfaya değil, aynı zamanda bir kenar çubuğu widget'ına da eklenebiliyor. Bunu yapmak için bir Metin widget'ı oluşturmanız ve istediğiniz formun kısa kodunu ona eklemeniz yeterlidir. Tahmin ettiğiniz gibi Yeni Eklenti Ekle menüsünde yeni formlar oluşturulabiliyor.

Benim için hepsi bu. WordPress için Contact Form 7 eklentisiyle biraz oynayın, farklı formlar oluşturmayı deneyin, inanın bana, keşfedilecek hala birçok olasılık var. Sorularınız varsa her zaman olduğu gibi yorumlarda bekliyorum. İyi şanlar!

Çevrimiçi form, kesinlikle herhangi bir web sitesi için vazgeçilmez bir araçtır. Bu, web sitenizin ziyaretçileriyle iletişimin en önemli kaynağıdır. Formlar geri bildirim toplamanıza, anketler yürütmenize, e-posta abonelikleri oluşturmanıza, müşteri ödemeleri almanıza ve çok daha fazlasına olanak tanır. Programlama biliyorsanız site için kolaylıkla form oluşturabilirsiniz. Aksi takdirde, bir web sitesine kolayca kurulabilecek ve form oluşturmak için kullanılabilecek pek çok iyi eklenti vardır.

adımFORM

stepFORM - Görsel bir tasarımcıya dayalı olarak her türlü karmaşıklıkta formlar oluşturmak için WordPress eklentisi. Yerleşik spam koruması, e-posta ve CRM yanıtlarının toplanması, Google Analytics ve Yandex.Metrica ile entegrasyon, formüller kullanılarak maliyet hesaplama, PayPal, Wallet One, Yandex.Money ve Yandex.Cash aracılığıyla ödeme kabul etme, formun kullanılması sosyal ağlardaki bağlantı ve çok daha fazlası.

uCalc

uCalc, değişen karmaşıklık derecelerinde hesaplama formları oluşturmaya yönelik popüler bir WordPress eklentisidir. Eklenti, yalnızca site ziyaretçilerinden bilgi almanın değil, aynı zamanda formülleri kullanarak otomatik hesaplamalar yapmanın veya mal veya hizmet satışı için müşteri ödemelerini kabul etmenin de gerekli olduğu formlar için mükemmeldir. Eklenti birkaç tıklamayla bağlanabilir ve programlama bilgisi gerektirmez. Bir sayfayı veya yayını düzenlerken hesaplama formu eklenir.

İletişim Formu 7

Contact Form 7, WordPress'te form oluşturmak için en popüler eklentilerden biridir. Bu eklentiyle formların içeriğini çok esnek bir şekilde özelleştirebilir ve verilerin e-postayla gönderilmesini yapılandırabilirsiniz. Formlar, ajax gönderiminin yanı sıra spam'e karşı Captcha ve Akismet'i de içerir.

WPFormları

WPForms, web siteniz için birkaç dakika içinde güzel iletişim formları, abonelik formları, ödeme formları ve diğer formlar oluşturmanıza olanak tanır. WPForms tüm cihazlarda (mobil, tablet, dizüstü bilgisayar ve masaüstü) harika görünecektir.

Ninja Formları

Ninja Forms, farenizi kullanarak form alanlarını hareket ettirerek dakikalar içinde WordPress için çevrimiçi formlar oluşturmanıza yardımcı olur. Geliştiriciler için, temel olarak Ninja Forms'u kullanarak form oluşturma veya göndermenin herhangi bir aşamasında ihtiyaç duyduğunuz her şeyi yapmak için yerleşik kancaları, filtreleri ve özel alan şablonlarını kullanabilirsiniz.

Form Oluşturucu

Form Maker, basit ve sezgisel bir arayüz aracılığıyla WordPress için duyarlı formlar oluşturur. Eklenti, herhangi bir alanla, soru ve cevap seçenekleriyle çeşitli anketler oluşturmanıza olanak tanır. Formları oluşturmak yalnızca birkaç tıklamayı ve bunları mevcut temalar, stiller ve görüntüleme seçenekleriyle özelleştirmek birkaç dakikanızı alır.

Kaldera Formu

Caldera Form, basit bir görsel düzenleyici kullanarak duyarlı formlar oluşturan, WordPress için ücretsiz ve güçlü bir eklentidir. Eklenti hem yeni başlayanlar hem de web geliştiricileri için birçok ücretsiz, kullanışlı eklentiye sahiptir. Antispam, AJAX, bildirim e-postaları ve veritabanı kayıt takibi varsayılan olarak etkindir.

Görsel Form Oluşturucu

Visual Form Builder, web siteniz için her türlü formu tek bir yerden oluşturmanıza ve yönetmenize olanak tanıyan bir eklentidir. Tamamen işlevsel bir iletişim formu oluşturmak yalnızca birkaç dakika sürer ve bir damla bile PHP, CSS veya HTML yazmanıza gerek kalmaz.

Bu liste, çevrimiçi formlar oluşturmak için en popüler WordPress eklentilerini içerir. Bu listede olmayan başka ilginç eklentiler kullanıyorsanız yorumlara yazın.

Neredeyse her web yöneticisi yeni bir web sitesi geliştirdiğinde, iletişim ve geri bildirim formları için (belirli ihtiyaçlar için) en iyi WordPress eklentisini seçmek zorundadır. Bu genellikle müşterinin her zaman basit bir iletişim formundan hoşlanmaması ve bazen bir sitede aynı anda birden fazla forma ihtiyaç duyulması nedeniyle olur.

Geri bildirim formu bir WordPress sitesinin en önemli unsurlarından biridir, çünkü bu form olmadan okuyucularınız, ortaklarınız ve müşterilerinizle her zaman iletişim halinde kalma şansınızı kaybedersiniz. Ayrıca yeni müşteriler çekmek için birçok fırsatı kaçırıyorsunuz. WordPress iletişim formu eklentisi, web sitenize iletişim formu eklemeyi kolaylaştırır. Sadece basit iletişimler için değil bazen çok özel formların gerekli olduğu çeşitli kurumsal ve satış sitelerinden bahsetmiyorum bile.

Bu yazıda en popüler eklentileri tamamen rastgele bir sırayla listeleyeceğim. Makale kesinlikle zaman içinde en iyi çözümlerle desteklenecektir.

İletişim Formu 7, en popüler (şu anda 12.000'den fazla indirme ve sayım devam etmektedir) WordPress iletişim formu eklentisidir. Eklenti, AJAX gönderme, yerleşik , Akismet spam filtresi ve dosya yükleme özelliğine sahiptir. Eklenti tamamen ücretsizdir ve basit HTML kullanılarak kolayca özelleştirilebilir.

Artıları: Basit bir iletişim formuna ihtiyacınız varsa, basit ayarlar sayfasıyla kurulumu ve yapılandırması kolay olduğundan bu eklenti tam aradığınız şeydir. Yalnızca bir satır kodla herhangi bir gönderiye veya sayfaya iletişim formu ekleyebilirsiniz.

Eksileri: Teknik olarak bu eklentinin herhangi bir çalışmaya ihtiyacı yoktur, ancak aralarından seçim yapabileceğiniz birkaç tane olması güzel olurdu. Formun görünümünü değiştirmek istiyorsanız CSS ile oynamak zorunda kalacaksınız.

Fast Secure Contact From, halihazırda 3,5 milyondan fazla indirilen başka bir popüler eklentidir. Blog sahiplerinin WordPress sitelerine kolayca iletişim formları oluşturmasına ve eklemesine olanak tanır. Formu, normal veya video görüşmesine davet istekleri göndermek için de kullanabilirsiniz.

Eklenti, sınırsız sayıda form oluşturabileceğiniz ve önizlemelerini görüntüleyebileceğiniz bir yönetici arayüzüne sahiptir. Captcha ve Akismet Fast Secure formunu kullanarak en popüler spam taktiklerine dayalı saldırıları engeller.

Artıları: Diğer benzer eklentilerin aksine, Fast Secure formu kullanıcılara profil kaydetme seçeneği sunmaz ancak planlama, çevrimiçi toplantılar, birden fazla e-posta adresi desteği vb. gibi başka harika özellikler sunar.

Eksileri: Eklentinin mevcut sürümü basit bir arayüze sahip değil, ancak eklentinin yazarı yakın zamanda arayüzün çok daha iyi olduğu bir beta sürümünü yayınladı. Dolayısıyla arayüz sorunu o kadar da ciddi değil.

Bana Ulaşın'dan İletişim Formu

İletişim Formu, temel işlevlere sahip ücretsiz bir eklentidir ancak contactme.com'a kaydolmanızı gerektirir. Kayıt tamamen ücretsizdir ve sizden herhangi bir çaba gerektirmez. Eklentinin geliştiricileri, bunun, iletişim formu 7 de dahil olmak üzere birçok popüler iletişim formu eklentisinden çok daha iyi olduğunu iddia ediyor!

Artıları: Eklentinin bazı yararlı işlevleri vardır - posta kutunuza ve akıllı telefonunuza bildirim gönderme seçeneği, forma isteğe bağlı kod veya komut dosyaları ekleme yeteneği ve kart için bir logo, şirket iletişim bilgileri ve hatta yerleştirme özelliği formdaki sosyal ağlardaki profillere bağlantılar ve çok daha fazlası.

Eksileri: Eklentiyi kullanmak için Bana Ulaşın web sitesinde bir profil oluşturmanız gerekecektir. Kayıt olmak basit ve ücretsiz olmasına rağmen yine de bir şeyler yapmak zorunda kaldığınızda sizi mutlu etmiyor.

Başlangıçta FormCraft eklentisi yalnızca premium sürümde oluşturulmuş ve geliştirilmiştir. Nispeten yakın zamanda, yazarlar ayrı, ücretsiz bir sürüm hazırladılar - FormCraft - Form Builder.

Premium versiyonda olduğu gibi FormCraft - Form Builder, özel ve çok kullanışlı bir sürükle ve bırak düzenleyicisiyle farklı formları kolayca ve hızlı bir şekilde tasarlamanıza olanak tanır. Doğal olarak burada daha az olasılık var ancak sıradan kullanıcılar için yeterli olacaktır.

FormCraft'ın premium sürümü, komut dosyası mantığı ayarlama, otomatik kaydetme, 20'den fazla ek özel alan, açılır pencere ve giriş formları, CSV'ye aktarma ve diğer eğlencelerle övünebilir.

Hem premium hem de ücretsiz sürümlerde günümüzün en iyi eklentilerinden biri.

Eklenti, web sitenizdeki tüm form türlerini tek bir yerden oluşturmanıza ve yönetmenize olanak tanıdığından, Visual Form Builder arayüzü sizi hoş bir şekilde şaşırtacak. Tek tıklamayla yeni alanlar ekleyebilir, mevcut alanları yeniden düzenleyebilir ve antispam çözümü uygulayabilirsiniz. Alanların sırasını değiştirmek için sürükle bırak teknolojisini kullanabilirsiniz.

Artıları: Visual Form Builder, burada listelenen diğer iletişim formu eklentilerine benzese de, kendi ilginç özelliklerine sahiptir: öğeleri basit bir sürükle ve bırak yöntemiyle yeniden düzenleme yeteneği, giriş verilerini bir CSV dosyasına aktarma, özelleştirilebilir onay mesajları, birden fazla e-posta girmeyi destekleyen bir gönderim formu.

Eksileri: WordPress siteniz çok büyükse, form girişini WordPress veritabanınızda sakladığından başka bir eklenti kullanmanız daha iyi olabilir.

nForms – WordPress Form Oluşturucu

Sürükle ve Bırak Builder, Ajax gönderimi ve doğrulamasıyla size basit, çok sütunlu bir iletişim formu şablonu sağlar. Formu bir açılır eklenti kullanarak bile görüntüleyebilirsiniz. Formu bir kısa kod, normal bir PHP işlevi veya bir widget kullanarak görüntülemek mümkündür.

Bir iletişim formundan daha fazlasına ihtiyacınız varsa kullanabileceğiniz eklenti nForms'tur.

Gravity Forms, web sitenize iletişim formu eklemek için en eksiksiz çözümdür. Harika özellikleri sayesinde bu eklenti, şu anda mevcut olan en ilerici ve gelişmiş premium WordPress eklentisi olarak adlandırılabilir. Web siteniz için karmaşık geri bildirim formları oluşturmak için görsel düzenleyiciyi kullanabilirsiniz. Ayrıca, uzun formların kullanımını kolaylaştıran, birden fazla sayfaya gömülmelerine olanak tanıyan kullanışlı bir özellik de bulunmaktadır; ayrıca formun ne kadar eksiksiz olduğu bir doldurma göstergesi aracılığıyla gösterilir.

Artıları: Gravity Forms, sipariş formları oluşturma seçeneği (gerçek zamanlı maliyetlendirme dahil), alanları, bölümleri, sayfaları gizlemek veya göstermek için bağımlı alanlar ve hatta gönder düğmesi gibi diğer benzer eklentilerde bulunmayan tamamen özel işlevler sunabilir. kullanıcının tercihine bağlıdır.

Artıları: Burada sunulan diğer eklentilerle karşılaştırıldığında bu eklenti pahalıdır ancak yine de Gravity Forms bir iletişim formundan çok daha fazlasını sunar. Basit bir geri bildirim formu arıyorsanız bu eklentiye para harcamanın bir anlamı yok.

Haritalanmış İletişim Formu Pro WordPress, formu web sitenizde görüntülemek için farklı bir algoritma kullanır. Bu, bir işletme veya şirket için harika bir çözümdür çünkü sahadaki şubeleri veya ofisleri işaretlemek için kullanılabilir. Eklenti aynı zamanda web sitelerinde harita kullananlar için de idealdir.

İletişim formunda görünen her konum için adresinizi girebilirsiniz. Eklentinin kullanımı kolaydır ve basit bir kısa kodla herhangi bir yazıya veya sayfaya yerleştirilebilir.

Son zamanlarda bir başka popüler form oluşturucu. Çok güçlü, mükemmel, sezgisel bir düzenleyiciyle (ücretli eklentiler gibi), gerekli blokları sürükleyip bırakarak ve bunları özelleştirerek formunuzu oluşturabilirsiniz. Bir dizi önceden hazırlanmış alan ve bloklara sahiptir. Tüm alanlar ihtiyacınız olan dilde oluşturulduğunda anında düzenlenir. Varsayılan olarak geri bildirim için yalnızca standart bir iletişim formu ve buna karşılık gelen bir kısa kod bulunur.

Artıları: Mükemmel işlevsellik. Yeni bir form oluştururken "tasarımlarınızı" hızlı bir şekilde önizlemek ve test etmek için kullanışlı bir anahtar kullanabilirsiniz.

Eksileri: Çok sayıda blok ayarı yeni başlayanlar için göz korkutucu olabilir. Ana işlevselliğe ek olarak, ödemeleri, postaları ve diğer şeyleri kabul etmeye yönelik çeşitli hizmetlerle çalışmak için çok sayıda eklenti premium modüle sahiptir. Ancak bu elbette bir artı sayılabilir.

Ninja Kick: WordPress İletişim Formu

Tüm koleksiyondaki en orijinal iletişim formu. Sitenin sol veya sağ tarafında bir kaydırıcı olan ayrı bir panel olarak görüntülenmesi bakımından farklılık gösterir. Son derece etkileyici görünüyor. Pek çok ayarı var, ancak çoğunlukla görünümüyle ilgili. Alanların kendilerinin ayarlanması burada minimum düzeydedir. Ancak popüler İletişim Formu 7'den bir kısa kod kullanabilirsiniz ve işe yarayacaktır.

İlginç eklenti ve formun kendisi. Daha fazlasını şurada okuyabilirsiniz.

Özetleyelim

Artık web siteniz için doğru uzantıyı seçmenin zamanı geldi. İletişim Formu 7 veya FormCraft - Form Builder muhtemelen normal bir blog için en iyi çözümlerdir, ancak farklı hizmetler sunan büyük siteler için Gravity Forms veya Ninja Forms'u kullanmanızı tavsiye ederim. "Öne çıkmayı" sevenler için Ninja Kick: İletişim Formu mükemmel.

Basit ve güzel şeyleri seviyorum. WordPres blogum için güzel bir geri bildirim formuna ihtiyacım vardı, ancak kullandığım iletişim formları (en popüler İletişim Formu 7 ve Jetpack İletişim Formu) ne yazık ki çirkin. Ve onların tasarımıyla zaman kaybetmek istemiyorum. Bu nedenle hazır şık bir geri bildirim formu bulmaya karar verdim ve bir captcha'sı olması gerekiyor, aksi takdirde spam ile dolacak. Bu yüzden çok basit bir hedefim vardı: Aşağıdaki gereksinimleri karşılayan bir WordPress iletişim formu bulmak:

• captcha'nın varlığı,
• özgür,
• şık, güzel.

Çok sayıda olumlu inceleme ve aktif kurulum içeren bir geri bildirim formu oluşturmak için tüm popüler WordPress eklentilerini seçtim. Aynı zamanda yakın zamanda güncellendiklerinden de emin oldum. İtiraf etmeliyim ki, bir iletişim formunu kullanarak bir eklentiyi kurmak ve incelemek için 5 dakikadan fazla zaman harcamadım ve hemen güzel bir geri bildirim formu oluşturamazsam bir sonraki iletişim formuna geçtim. Bu nedenle, kurulumu hemen belli olmayan, tüm gereksinimleri karşılayan bir iletişim formuna sahip iyi bir eklentiyi kaçırmış olabileceğimi itiraf ediyorum. Aşağıda incelediğim tüm geri bildirim formlarının ekran görüntülerini görebilirsiniz.

WpForms Lite

Popüler, ücretsiz, anlaşılır ama çirkin geri bildirim formu, çok basit ve ek hazır tasarımlar yok. Recapcha Google var. 49 dolardan başlayan ücretli sürüm, iletişim formunuzu Aweber gibi e-posta pazarlama hizmetlerine entegre etmenize, ödeme kabul etmenize ve çok daha fazlasına olanak tanır. Bu iletişim formu Amerika'ya ait, ama öyle olduğunu söyleyemem.

Kaldera Formları

Kurulumu WpForms'a göre daha zor ama daha güzel. Captcha var ama bende görünmedi. Geri bildirim formunun tasarımı ortalamadır.

Jetpack İletişim Formu

WordPress'in yaratıcılarından gelen bir geri bildirim formu etkinleştirildiğinde, editörde İletişim Formu Ekle düğmesi görünür. Captcha yok, çok fazla spam var! Çirkin.

İletişim Formu 7

En popüler ve sofistike geri bildirim formu, işlevler ve ayarlar açısından zengin, ancak çirkin - tasarıma zaman ayırmanız gerekiyor.

Hızlı Güvenli İletişim Formu

Bu geri bildirim formunun tasarımı hoşuma gitmedi; çok çirkin!

WD'den Form Oluşturucu

Ücretsiz, pek çok güzel geri bildirim formu şablonu var. Gerçek bir aday! Ancak ReCaptcha'yı kuramadığım için kullanmadım.

Çirkin geri bildirim formu! Çok sınırlı işlevsellik - hiçbir şey yok...

BestWebSoft'tan İletişim Formu

Çirkin! Geri bildirim formunun işlevselliği çok sınırlı - hiçbir şey yok...

Ninja Formları

Bu standart tasarıma sahip normal bir geri bildirim formu, ancak bununla ilgili bir şey dikkatimi çekti, düzgün bir şey bulamazsam kullanmayı deneyebilirim. Google ReCaptcha entegrasyonu bulunmaktadır.

Büyük BT Formları

Aynı iletişim formu için tasarım temalarını farklı tasarımlarla değiştirebilirsiniz. Tasarımlar güzel, captcha var. Yalnızca yönetici panelimde eklentinin düzeni dağılıyor, eğer buna dikkat etmezseniz, o zaman bu değerli bir rakip.

Müthiş Formlar

Bu geri bildirim formunun çok süslü tasarımları yok ama temel tasarımı aşağı yukarı kabul edilebilir, bu yüzden onu kullanmaya başladım.

WordPress geri bildirim formu eklentilerine genel bakış içeren tablo

Geri bildirim formuna yönelik aramalarımın sonuçları aşağıdaki tabloda özetlenmiştir.

Sonuçlar: en iyi WordPress geri bildirim formu

Dürüst olmak gerekirse aradığımı bulamadım. İncelenen en popüler on bir geri bildirim formundan yalnızca iki iletişim formunda güzel tasarım şablonları bulunur: WD'den Form Maker ve Huge-IT Forms. Ancak ilkinde captcha yüklü değildi ve ikincisinde yönetici panelinin düzeni bozuluyordu. Geliştiriciler tasarımı umursamıyor gibi görünüyor ve bu nedenle diğer tüm geri bildirim formları tasarım olmadan geliyor ve bu nedenle çirkin ve CSS'yi düzenleyerek tasarımı kendiniz özelleştirmeniz gerekecek.

Yine de, Formidable Forms geri bildirim formunu seçtim, çünkü hala en azından temel bir yapıya sahip (geliştirici biraz ince ayar yaptı!), ancak şık bir tasarıma sahip, reCaptcha'ya sahip ve ücretsiz. Her şey benim için hemen çalıştı!

Captcha'lı WordPress için ücretsiz ve güzel bir geri bildirim formu biliyorsanız, lütfen bunu yorumlarda paylaşın.