WordPress'e HTML Formları Nasıl Eklenir (2 Yöntem)

Görsel bir oluşturucuda alanları sürüklemek yerine kendi form işaretlemenizi yazmak ister misiniz?

İyi haber: Bu formun çalışması için herhangi bir PHP yazmanıza gerek yok. Hafif bir eklentinin işlemeyi halletmesine izin verebilirsiniz, siz her etiketi kendiniz yazarsınız. Alternatif olarak, formu görsel olarak oluşturabilir ve tam olarak ihtiyacınız olan yere özel HTML ekleyebilirsiniz.

Bu kılavuzda, WordPress'te çalışan özel bir HTML formu oluşturmayı göstereceğiz.

HTML Formları Nedir ve Neden Oluşturulur?

Bir HTML formu, web'deki diğer herhangi bir form gibi ziyaretçi bilgilerini (adlar, e-postalar ve geri bildirimler gibi) toplar. Onu farklı kılan, nasıl oluşturulduğudur. Ağır bir sürükle ve bırak görsel düzenleyicisine güvenmek yerine, düz kodla bir HTML formu oluşturursunuz. Bu, alanları (metin kutuları, onay kutuları ve açılır menüler gibi) kendiniz yazdığınız anlamına gelir.

Sürükle ve bırak form oluşturucular yerine HTML formlarını kullanan kişiler, bunu genellikle web sitelerinin performansını en üst düzeye çıkarmak için yaparlar. Düz HTML formları, web sayfalarınızın biraz daha hızlı yüklenmesini sağlar. Hızın ötesinde, kodu kendiniz yazmak size tam tasarım kontrolü verir. Bir oluşturucunun katı ayarları tarafından sınırlanmak yerine, düzeni tam olarak ihtiyaçlarınıza göre özelleştirebilirsiniz.

Çoğu WordPress kullanıcısı, sürükle ve bırak form oluşturucu eklentilerinin en iyi kullanıcı deneyimini sunduğunu buluyor. Manuel sunucu yapılandırması zahmetine girmeden tam HTML özelleştirmesi elde edersiniz.

Bu kılavuzda ele alacağımız her şey burada:

Yöntem 1: Bir Eklenti ile WordPress'te HTML Formları Ekleme

🎖️ En iyi: Hafif, performansa odaklı bir çözümle tam HTML kontrolü isteyen geliştiriciler ve site yöneticileri. Eklenti, görsel form oluşturucular yerine basitliğe ve hıza odaklanır.

WordPress'e HTML Forms gibi ücretsiz bir form eklentisi kullanarak bir HTML formu ekleyebilirsiniz. Bu eklenti, WordPress'te bir HTML formunu çalıştırmak için gereken PHP ve az miktarda JavaScript'i yönetirken, size HTML'yi kendiniz yazma konusunda tam özgürlük tanır.

Ücretsiz sürüm, e-posta bildirimleri gönderme ve gönderilerinizi saklama dahil olmak üzere bu öğreticideki her şeyi kapsar. Spam koruması da ücretsizdir.

Başlamak için eklentiyi WordPress web sitenize kurun. Yardıma ihtiyacınız olursa, WordPress eklentisi yükleme hakkındaki adım adım kılavuzumuzu izleyin.

Etkinleştirdikten sonra, formunuzu oluşturmaya başlamak için HTML Forms » Yeni Ekle'ye gidin.

Formunuz için ‘Form Başlığı’ alanına bir ad yazın. Bu kılavuzda basit bir iletişim formu oluşturuyoruz, bu yüzden bizimkini ‘İletişim Formu’ olarak adlandırdık.

Ardından, Form Oluştur düğmesine tıklayın.

Bunu yaptıktan sonra, ‘Form Düzenle’ sayfası görünecek ve HTML formunuzu özelleştirmeye başlayabilirsiniz.

Sayfanın üst kısmında, form başlığınız, slug ve kısa kodunuz dahil olmak üzere formunuzun ayrıntılarını göreceksiniz. Bu ayrıntıların altında beş sekme bulacaksınız: ‘Alanlar,’ ‘Mesajlar,’ ‘Ayarlar,’ ‘Eylemler’ ve ‘Gönderimler.’

‘Alanlar’ sekmesi, alan kodunuzu oluşturan on düğme içerir.

Bu sekmenin altında, önceden oluşturulmuş bir HTML formu ve bir önizleme bulacaksınız.

Varsayılan form oldukça basittir. Kullanıcıların adlarını, e-posta adreslerini, kısa bir konuyu ve bir mesajı yazmaları için 4 alana sahiptir.

Yeni bir alan eklemek için, ‘Form Kodu’ kutusunun hemen üzerindeki ilgili düğmeye tıklayın.

Bu öğreticide Konu alanını bir açılır alanla değiştireceğiz.

Devam edin ve ayarlarını açmak için ‘Açılır Liste’ye tıklayın. Ardından, sorunuzu ‘Alan Etiketi’ kutusuna yazın ve her sorgu türü için ‘Genel soru,’ ‘Satış’ ve ‘Destek’ gibi bir seçenek ekleyin.

Bu bilgileri girdikten sonra ‘Alanı Forma Ekle’ye tıklayın.

Ardından yeni açılır liste etiketinin ‘Form Kodu’ kutusunda göründüğünü göreceksiniz. Güncellenmiş işaretlemenizi görmek için aşağı kaydırmanız yeterlidir.

Formu kullanıcı dostu hale getirmek için açılır menü alanını doğrudan 'E-posta adresiniz' alanının altına yerleştirelim. Bu eklentinin sürükle ve bırak oluşturucusu olmadığından, kodu kod oluşturucudan kesip istediğiniz yere yapıştırmanız gerekecektir.

Konu alanını kaldırmak için, Konu alanını içeren tüm paragraf bloğunu silin.

İşiniz bittiğinde 'Form Önizleme' panelini kontrol etmek isteyeceksiniz.

Göremiyorsanız, 'Form Önizlemeyi Göster' bağlantısına tıklayın.

Bu canlı önizleme, değişikliklerinizin düzeni bozmadan çalıştığını doğrulamanızı sağlar.

Konu alanının gittiğini hızla doğrulayabilir ve yeni açılır menünüzün düzgün çalıştığını test edebilirsiniz.

Ardından, mavi 'Değişiklikleri Kaydet' düğmesine tıklayın.

Şimdi, formun yapılandırmasını kontrol etmek isteyebilirsiniz. HTML Forms'un form gönderme onay mesajlarını nasıl yapılandırdığını görmek için 'Mesajlar' sekmesine tıklayın.

Bu sekme, kullanıcıların göreceği onay mesajlarını özelleştirmenize olanak tanır.

Varsayılan metinden memnunsanız, olduğu gibi bırakabilirsiniz. Aksi takdirde, düzenlemelerinizi yapın ve ardından Değişiklikleri Kaydet'e tıklayın.

Varsayılan olarak, yeni bir form girdilerinizi veritabanına kaydeder, ancak biri gönderdiğinde size e-posta göndermez.

Bunu düzeltmek için Eylemler sekmesine tıklayın. 'Bu form için yapılandırılmış form eylemi yok.' diyen bir bildirim göreceksiniz.

'E-posta Gönder'e tıklayın.

'Kimden', 'Kime' ve 'Mesaj' alanları gereklidir. Ziyaretçinin formunuza girdiği bilgileri otomatik olarak eklemek için Mesaj kutusunun hemen altındaki değişken alanları kullanabilirsiniz.

Bunları doldurduktan sonra 'Değişiklikleri Kaydet'e tıklayın. Artık biri formunuzu her gönderdiğinde bir e-posta alacaksınız.

Her şey yapılandırıldıktan sonra, tek yapmanız gereken HTML formunuzu yayınlamak. Formu yerleştirmek istediğiniz sayfaya veya gönderiye gidin. Ardından, formu eklemek istediğiniz alanın üzerine gelin ve '+' düğmesine tıklayın.

Buradan, arama çubuğuna 'HTML Forms' yazmaya başlayın. Doğru blok göründüğünde, sayfanıza veya gönderinize eklemek için tıklayın.

HTML Forms bloğunun içinde, açılır menüye tıklayın ve görüntülemek istediğiniz formu seçin.

Formu açılır menüden seçtikten sonra 'Güncelle' düğmesine tıklayın.

İletişim formunuz artık yayında. Ziyaretçileriniz için şöyle görünecek:

Formu herhangi bir yerde tanıtmaya başlamadan önce, örnek bir giriş göndererek kendiniz test etmenizi öneririz. Bu, formun sadece görüntülenmediğini, aynı zamanda gerçekten teslim edildiğini nasıl onaylayacağınızdır.

Test girişi gönderdikten sonra, HTML Forms » Tüm Formlar'a gidin. Burada, formunuzun 'Gönderimler' bağlantısına tıklayın.

Bu, tüm form gönderimlerinizi gösterir. Test girişiniz tabloda görünecek ve gelen kutunuza da bir bildirim almalısınız.

'Gönderimler' tablosu, formun ne zaman gönderildiğini belirten bir 'Zaman Damgası' sütunuyla açılır, ardından her alan için bir sütun gelir.

Yöntem 2: Sürükle ve Bırak ile Formlara Özel HTML Ekleme

🎖️ En iyisi: Bir formu görsel olarak oluşturmak isteyen ancak yine de ipucu, bağlantı veya biçimlendirilmiş bir not gibi belirli HTML'yi içine eklemesi gereken herkes için.

Form oluşturma söz konusu olduğunda, WPForms'ı öneririz. Sürükle ve bırak oluşturucu sunarken, kendi işaretlemenizi eklemenize de olanak tanır, böylece bir bağlantı, biçimlendirilmiş bir not veya bir ipucu tam olarak istediğiniz yere yerleşir.

Kendi web sitelerimizde iletişim formları, potansiyel müşteri oluşturma, yıllık anketler ve daha fazlası için WPForms kullanıyoruz.

WPForms Lite tamamen ücretsizdir, ancak bu yöntemde kullanılan HTML alanı ücretli bir özelliktir. Temel plan (39,60 $/yıl) ve daha yüksek planlarda mevcuttur.

Bu yöntemde, WPForms kullanarak WordPress formlarınızı özelleştirmek için HTML kod parçacıklarını nasıl ekleyeceğinizi göstereceğiz.

Başlamak için WPForms'u yükleyin ve etkinleştirin.

Tamamlandıktan sonra, formlar oluşturmaya ve özel HTML eklemeye başlayabilirsiniz. Bu kılavuz için, iletişim formunuza basit bir ipucu eklemeyi göstereceğiz.

Başlamak için, WPForms » Yeni Ekle'ye giderek iletişim formunu oluşturalım.

Kurulum panelinde, formunuza bir ad vererek başlayın.

Bu ad yalnızca dahili referans amaçlıdır, bu nedenle istediğiniz herhangi bir şeyi kullanabilirsiniz.

Bir sonraki adım, formunuzu nasıl oluşturmak istediğinize karar vermektir. WPForms ile önceden hazırlanmış bir şablonla başlayabilir, sıfırdan oluşturabilir veya ihtiyacınız olanı açıklayabilir ve yapay zeka form oluşturucunun sizin için bir araya getirmesini sağlayabilirsiniz.

Yapay zeka destekli oluşturucuyu kullanmak istiyorsanız, basit bir komut istemi girmeniz yeterlidir. Yapay zeka daha sonra formu sizin için birkaç saniye içinde oluşturacaktır.

Bu eğitim için önceden oluşturulmuş bir şablon kullanacağız.

Seçenekler arasında 2.100'den fazla form şablonu olduğundan, bunları hızlı bir şekilde filtrelemek için arama çubuğunu kullanabilirsiniz. Bunu yapmak için 'İletişim Formu' yazmanız ve aramanın tamamlanmasını beklemeniz yeterlidir.

Bir şablona daha yakından bakmak için yerleşik önizleme özelliğini kullanabilirsiniz. Herhangi bir form şablonunun üzerine gelin ve 'Demo Görüntüle'ye tıklayın.

İhtiyaçlarınız için mükemmel iletişim formunu bulduğunuzda, tekrar üzerine gelin ve 'Şablonu Kullan'a tıklayın.

Bu, form oluşturucuyu başlatacaktır. Sol panelde tüm özelleştirme araçlarını ve sağda canlı bir önizlemeyi göreceksiniz.

Sol panelden öğeleri sürükleyip canlı önizlemeye bırakabilirsiniz. Ayrıca sürükle ve bırak kullanarak önizlemedeki öğeleri yeniden düzenleyebilirsiniz.

Sol panelde aşağı kaydırarak Süslü Alanlar grubuna gidin, ardından HTML alanını doğrudan formunuza sürükleyip bırakın.

HTML alanını ekledikten sonra, özelleştirme seçeneklerini açmak için üzerine tıklayın.

Başlamak için, bu alanı tanımlamanıza yardımcı olacak bir 'Etiket' yazın. Bu yalnızca sizin referansınız içindir ve ziyaretçilere gösterilmez, bu nedenle istediğiniz herhangi bir şeyi kullanabilirsiniz. Alanı boş bırakabilirsiniz.

Ardından, özel HTML kodunu ‘Kod’ alanına yapıştıracaksınız.

Bir araç ipucu oluşturmak için <span> etiketini kullanabilir veya aşağıdaki kodu kopyalayıp 'Kod' alanına yapıştırabilirsiniz:

<span title="We have cool stuff to share every week. :)">Hi there! We have an email newsletter you might want to subscribe to. Let us know in the Comment or Message field, and we'll sign you up.</span>

Bu yalnızca örnek koddur, bu nedenle ihtiyaçlarınıza uyacak şekilde düzenlemekten çekinmeyin. Kodun title="" kısmı, web tarayıcısına açılır pencere efektini oluşturmasını söyleyen kısımdır, böylece sitenize herhangi bir CSS eklemeden ipucunu elde edersiniz.

WPForms'un form oluşturucu önizlemesinde HTML kodunu göstermediğini unutmayın. İpucunu test etmek için 'Önizleme'ye tıklayın.

Bu yeni bir sekme açacaktır.

Burada, ipucu için HTML kod parçacığının metnin üzerine gelerek düzgün çalışıp çalışmadığını test edebilirsiniz. Birkaç dakika sonra ipucu görünmelidir.

Sonuçlardan memnun kaldığınızda, formunuzu sonlandırmak için form oluşturucuya geri dönebilirsiniz.

WPForms, bildirim ve onay ayarlarınızı sizin için otomatik olarak yapılandırır. Ancak, bunları özelleştirmek isterseniz, ‘Ayarlar’i ve ardından ‘Bildirimler’ veya ‘Onaylar’ı seçin.

'Bildirimler' bölümünde, iletişim formu gönderiminiz için birden fazla alıcı ekleyebilirsiniz.

Birden çok alıcı eklemek için e-posta adreslerini virgülle ayırın, örneğin email1@example.com, email2@example.com, email3@example.com.

Bildirimlerinizi ve diğer ayarlarınızı özelleştirdikten sonra, WordPress formunu yayınlama ve gömmek zamanı.

Form oluşturucunun sağ üst köşesindeki ‘Göm’ düğmesine tıklayın.

WPForms daha sonra formu mevcut bir sayfaya mı yoksa yeni bir sayfaya mı eklemek istediğinizi soracaktır.

Bu kılavuzda, ‘Mevcut Sayfayı Seç’ seçeneğini seçeceğiz.

Bir sonraki açılır pencerede, mevcut sayfalar listesinden bir sayfa seçin. Bundan sonra, blok düzenleyiciyi açmak için ‘Hadi gidelim!’e tıklayabilirsiniz.

Şimdi, formu eklemek istediğiniz alanın üzerine gelin ve ‘+’ düğmesine tıklayın. Ardından, WPForms bloğunu seçin.

Artık açılır menüyü kullanarak görüntülemek istediğiniz formu seçebilirsiniz.

Formunuzu seçtikten sonra, WPForms onu blok düzenleyicide yükleyecektir.

Her şeyin nasıl ayarlandığından memnun kaldığınızda, ‘Güncelle’ düğmesine tıklayın.

Ve tamamlandı! WPForms iletişim formunuza özel HTML eklediniz ve WordPress web sitenizde yayına aldınız.

Gerçek ziyaretçileri forma göndermeden önce, her şeyin çalıştığından emin olmak için hızlı bir test girişi göndermenizi öneririz.

Bir test gönderdikten sonra, WPForms » Tüm Formlar'a gidin. Burada, iletişim formunuzun üzerine gelin ve göründüğünde ‘Girdiler’e tıklayın.

Bir sonraki ekranda, tüm form gönderimlerinizi göreceksiniz.

Tablo, kullanıcıların gönderdiği her bilgiyi ve tam gönderim zamanını gösterir.

SSS: WordPress'e HTML Formları Nasıl Eklenir

WordPress'te HTML formum neden çalışmıyor?

Büyük olasılıkla, WordPress formunuzu gösteriyor ancak işleMyor. Bir HTML formunu bir sayfaya yapıştırmak, çalışması için yeterli değildir.

Form doğru görüntüleniyor olsa da, WordPress form gönderimlerini otomatik olarak işlemez. Temel bir HTML sitesinin aksine, birisi Gönder'e tıkladığında verileri işleyecek yerleşik bir betik yoktur.

Formu işlevsel hale getirmek için gönderimleri işlemek üzere özel PHP kodu eklemeniz veya bu işlemi sizin için yapan bir eklenti kullanmanız gerekecektir.

HTML kullanırsam formlarımı yine de özelleştirebilir miyim?

Evet, kesinlikle. HTML kullanmak, formunuzun nasıl göründüğü ve çalıştığı üzerinde tam kontrol sahibi olmanızı sağlar. Yalnızca şunlar gibi diğer her şeyden sorumlu olacağınızı unutmayın:

• Formu kendi CSS'nizle stilize etme
• Özel kodla doğrulama, hata mesajları veya koşullu mantık ekleme
• Formun farklı cihazlarda ve tarayıcılarda düzgün çalıştığından emin olmak

Yani evet, tam esnekliğe sahipsiniz, ancak aynı zamanda tam sorumluluğa da sahipsiniz.

Ek Kaynaklar: Daha Fazla WordPress Form Rehberi

Umuyoruz ki bu makale, WordPress'te HTML formlarının nasıl ekleneceğini öğrenmenize yardımcı olmuştur. Sonra, aşağıdaki kılavuzlarımıza göz atmak isteyebilirsiniz:

• WordPress Form Girişlerini CSV ve Excel'e Aktarma
• WordPress Formlarınızı Özelleştirme ve Stil Verme
• En İyi WordPress İletişim Formu Eklentileri

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.