Bir formu tek bir satırda görüntülemek, sitenize temiz bir görünüm kazandırırken yerden tasarruf etmenin harika bir yoludur.
Özellikle üstbilgilerde, altbilgilerde veya kenar çubuklarında iyi çalışır, formları yüksek trafikli alanlara yerleştirmenize ve dönüşümleri artırmanıza olanak tanır.
WPBeginner’da, müşteri adayı yakalama sürecimizi optimize etmek için farklı iletişim formu yerleşimlerini test ettik. Bu deneyim sayesinde, basit formların genellikle daha yüksek tamamlanma oranlarına yol açtığını gördük.
Bu yazıda, WordPress’te formunuzu tek bir satırda nasıl kolayca görüntüleyebileceğinizi adım adım göstereceğiz.

WordPress’te Neden Tek Satırlı Formlar Görüntüleniyor?
Tek satırlı formlar, formlarınızı nereye yerleştireceğinizi seçerken size daha fazla esneklik sağlar. Bu tarz formlar yalnızca tek bir satırdan oluştuğu için fazla yer kaplamaz ve bir WordPress blogundaki mevcut içeriğinizle kolayca entegre edilebilir.
Örneğin, e-posta bülteni kayıt formları genellikle blog yazısı içeriğinin üstünde veya altında tek bir satırda görüntülenir. Bu tür formlar açılış sayfalarında, iletişim sayfalarında ve web sitenizdeki diğer önemli sayfalarda da iyi çalışır.
Daha fazla abone ve potansiyel müşteri oluşturmanın ötesinde, her türlü formu tek satırlık bir forma dönüştürebilirsiniz.
Örneğin, WordPress web sitesinde yerden tasarruf etmek ve formunuzu mobil cihazlara daha duyarlı hale getirmek için iletişim formunuzu tek bir satırda görüntülemek mantıklı olabilir.
Bununla birlikte, WordPress sitenizde tek satırlık bir formu nasıl görüntüleyeceğinizi gösterelim.
WordPress’te Tek Satırlı Form Nasıl Oluşturulur
Bu eğitim için WPForms eklentisini kullanacağız. Herhangi bir WordPress formunu hızlı bir şekilde oluşturmanızı sağlayan bir sürükle ve bırak oluşturucuya sahiptir. Ayrıca, popüler e-posta pazarlama araçlarıyla entegre olarak e-posta listenizi kolayca büyütebilirsiniz.
WPBeginner’da bu aracı iletişim formları ve yıllık anketler oluşturmak için kullanıyoruz ve harika sonuçlar elde ettik. Daha fazla bilgi için WPForms incelememizin tamamına bakın.

Not: WPForms’un yükseltebileceğiniz premium bir sürümü de vardır. Ancak, bu eğitim için WPForms Lite ‘ı kullanacağız çünkü basit bir iletişim formu oluşturmanıza ve potansiyel müşteri oluşturmak için Constant Contact’a bağlamanıza izin veriyor.
Öncelikle WPForms eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için WordPress eklentisi yükleme hakkındaki başlangıç kılavuzumuza bakın.
Etkinleştirmenin ardından, WordPress yönetici kenar çubuğunuzdaki WPForms ” Yeni Ekle sayfasını ziyaret edin ve formunuza bir ad verin. Ardından, form şablonunuzu seçmelisiniz.
‘Opt-In Formu’ şablonunu seçeceğiz. Şablonun üzerine gelin ve ‘Şablonu Kullan’ düğmesine tıklayın.

Bu, WPForms sürükle ve bırak form oluşturucuyu ekranda başlatacaktır.
Seçtiğimiz şablonun otomatik olarak ad ve e-posta alanlarını ve bir gönder düğmesini içerdiğini göreceksiniz.

Her alan, üzerlerine tıklanarak ve sol taraftaki sütunda değişiklikler yapılarak düzenlenebilir.
Ayrıca sıralarını değiştirmek için alanları sürükleyip bırakabilirsiniz.

Alanları özelleştirmeyi tamamladıktan sonra, formunuzu tek bir satırda görüntüleyebilirsiniz.
Bunu yapmak için form oluşturucudaki Ayarlar ” Genel sekmesine geçin ve ardından ‘Gelişmiş’ açılır menüsüne tıklayın.

Ardından, ‘Form CSS Class’ kutusuna ‘inline-fields’ yazın (tırnak işaretleri olmadan).
Bu, söz konusu CSS sınıfını forma uygulayacaktır. WPForms ‘inline-fields’ sınıfı için stil içerdiğinden, tüm form düzeninizi otomatik olarak değiştirecek ve tek bir satırda güzel bir şekilde görüntüleyecektir.

Bundan sonra, alan etiketlerini gizleyerek formunuzu daha da küçültebilirsiniz.
Bunu yapmak için, sol sütunda ayarlarını açmak üzere formdaki bir alana tıklamanız yeterlidir.
Bunu yaptıktan sonra, ‘Gelişmiş’ menü seçeneğini seçin ve açmak için ‘Etiketi Gizle’ geçişine tıklayın.

Ardından, tüm form alanı etiketleri için aynı şeyi yapmanız gerekir.
Bundan sonra, aynı ‘Gelişmiş’ bölümünde, ‘Yer Tutucu’ kutusuna metin girebilirsiniz.
Bu, kullanıcılarınıza her bir form alanının ne için olduğunu söyler.

Formunuzu özelleştirmeyi tamamladıktan sonra, ayarlarınızı kaydetmek için ‘Kaydet’ düğmesine tıkladığınızdan emin olun.
Formunuzu potansiyel müşteri oluşturmak için kullanıyorsanız, formunuzu e-posta pazarlama sağlayıcınıza bağlayabilirsiniz. Daha fazla ayrıntı için, doğru şekilde e-posta bülteni oluşturma hakkındaki kılavuzumuza bakın.
Tek Satırlık Formunuzu WordPress Web Sitenize Ekleme
Şimdi sıra tek satırlık formunuzu WordPress sitenize eklemeye geldi. Herhangi bir sayfaya, yazıya veya widget alanına ekleyebilirsiniz.
Biz mevcut bir sayfaya ekleyeceğiz, ancak WordPress blogunuzun başka bir alanına ekliyorsanız süreç benzer olacaktır.
Tek satırlık formu istediğiniz sayfayı açın ve blok menüsünü açmak için ‘Blok Ekle’ (+) düğmesine tıklayın.

Ardından, sitenize eklemek için ‘WPForms’ bloğuna tıklayın.
Ardından, bloktaki açılır menüden daha önce oluşturduğunuz tek satırlı formu seçin.

Formunuzu seçtikten sonra eklenti, içerik düzenleyicinin içinde formunuzun bir önizlemesini yükleyecektir. Ardından, yeni formunuzu canlı hale getirmek için ‘Güncelle’ veya ‘Yayınla’ düğmesine tıklayın.
Şimdi, yeni formunuzu çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Bonus: Pop-up ve Banner Oluşturmak için OptinMonster’ı Kullanın
Tek satırlık formlar oluşturmanın yanı sıra, e-posta potansiyel müşterilerini yakalamak için web sitenizde kayan iletişim formları, katılım açılır pencereleri ve banner’lar da oluşturabilirsiniz.
Bunu yapmak için piyasadaki en iyi WordPress dönüşüm optimizasyon aracı olan OptinMonster‘ı kullanabilirsiniz.
WPBeginner’da profesyonel hizmetlerimizi ve bültenimizi tanıtan pop-up’lar ve banner’lar oluşturmak için sürekli olarak kullanıyoruz ve onu seviyoruz. Daha fazlasını öğrenmek için OptinMonster incelememizin tamamına bakın.
Araç, kullanıcınızın ilgisine göre kişiselleştirilmiş ve ilgili bilgileri görüntüleyen güzel optin formları oluşturmanıza olanak tanır ve potansiyel müşterileri yakalamayı çok kolaylaştırır.
Ayrıntılı talimatlar için WordPress’te bir iletişim formu açılır penceresinin nasıl oluşturulacağına ilişkin eğitimimize göz atmak isteyebilirsiniz.

Bunun dışında, web siteniz için kullanıcılardan kaydolmalarını ve bülteninizin bir parçası olmalarını isteyen çekici bannerlar da oluşturabilirsiniz.
Bu şekilde, web sitesinde fazla yer kaplamadan veya kullanıcıları rahatsız etmeden kullanıcı ayrıntılarını yakalayabilirsiniz.
Ayrıntılar için lütfen OptinMonster ile e-posta listesi oluşturma hakkındaki başlangıç kılavuzumuza bakın.

Umarız bu makale WordPress’te formunuzu tek bir satırda nasıl görüntüleyeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, daha etkileşimli formların nasıl oluşturulacağına ilişkin kılavuzumuzu veya en iyi Typeform alternatifleri uzman seçimimizi görmek isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Arkady
Very helpful article!
Is it possible to move submit button to the left end of line?
Thank you in advance!
WPBeginner Support
For that, you would place the button on the top instead of the bottom of the form
Admin