8 Güzel İletişim Formu Örneği + Bunları Web Sitenize Nasıl Eklersiniz

Yayınlanan: 2019-12-10

Mütevazı iletişim formu - şu veya bu şekilde, İnternet'teki hemen hemen her web sitesinin çalışma gücüdür. Ancak her web sitesinin bir iletişim formu olsa da, tüm iletişim formu tasarımları eşit oluşturulmaz.

İş hedeflerinize ulaşmanızı sağlayacak bir iletişim formu oluşturmanıza yardımcı olmak için gerçek web sitelerinden sekiz iletişim formu örneği topladık. Her örnek için, formunuza ne ekleyeceğinizi bilmeniz için size tam olarak ne işe yaradığını söyleyeceğiz.

Ardından, bu gönderiyi güzel ve uygulanabilir kılmak için herhangi bir özel bilgiye ihtiyaç duymadan kendi esnek iletişim formunuzu nasıl oluşturacağınızı göstereceğiz.


İletişim formu tasarımınızı çivilemek için beş ipucu

Gerçek iletişim formu örneklerine geçmeden önce, hızlı bir yoldan gidelim ve harika bir iletişim formunun ne olduğundan bahsedelim. Bir sonraki bölümde her bir iletişim formu örneğinin ne işe yaradığını tartışırken, bu dolambaçlı yol ortamı hazırlayacaktır.

Büyük olasılıkla, insanların doldurmasını istediğiniz için bir iletişim formunuz var. Peki daha fazla insanın onu kullanmasını nasıl sağlarsınız? İşte bazı en iyi uygulamalar…

1. Formunuzun ne için olduğunu açıkça belirtin

Yoğun bir işletmeniz veya web siteniz varsa, farklı kullanımlar için birden fazla iletişim formunuz olabilir. Örneğin, şunlar olabilir:

  • Satış soru formu

  • Müşteri destek formu

  • Çevrimiçi sipariş formu

  • Geri arama talep formu

  • Vesaire.

Bununla başa çıkmak için iki temel yaklaşım vardır ve her ikisini de aşağıdaki gerçek hayattaki iletişim formu örneklerinde göreceksiniz:

  1. Ayrı formlar. Her kullanım durumu için ayrı formlar oluşturun ve her formun tam olarak ne yaptığını netleştiren metin ekleyin.

  2. Açılır bir alan. Formunuzun üst kısmına, farklı kullanım durumlarını listeleyen ve iletişim formunuzu otomatik olarak doğru noktaya yönlendiren bir açılır alan ekleyin.

Açılır menü içeren iletişim formu örneği Canlı önizlemeye bakın →

Her iki durumda da, her bir iletişim formunun amacını ziyaretçileriniz için kesinlikle net hale getirmek için form etiketlerinizi ve çevresindeki metni kullanın.

2. Daha fazla dönüşüm için form uzunluğunu sınırlayın (ancak kaliteyi unutmayın)

Her şey eşit olduğunda, veriler daha uzun iletişim formlarının daha az başvuru anlamına geldiğini gösteriyor.

Örneğin, HubSpot 40.000'den fazla açılış sayfasını analiz etti ve dönüşüm oranları ile form alanlarının sayısı arasında açık bir ilişki olduğunu fark etti.

En yüksek dönüşüm oranı yaklaşık üç alandır. Dönüşüm oranı, düzleşmeden önce sekiz form alanına kadar sürekli olarak düşer:

Form alanlarının sayısına göre iletişim formu dönüşüm oranları Kaynak

Daha anekdot bir notta, Marketo, HubSpot'a benzer sonuçlara sahip üç formu test etti:

  • 5 alan — %13.4 dönüşüm oranı

  • 7 alan — %12.0 dönüşüm oranı

  • 9 alan — %10,0 dönüşüm oranı

Tabii ki, yalnızca daha fazla iletişim formu gönderimi almak gerçek hedefiniz olmayabilir, bu nedenle formlarınızdaki alan sayısını minimuma indirmek kadar basit değildir.

Örneğin, alanları azaltarak daha fazla gönderi elde edebilirsiniz, ancak giriş engeli çok düşük olduğu için bu gönderiler o kadar kaliteli olmayabilir.

Genel olarak, iyi bir kural, tüm gereksiz alanları ortadan kaldırmaktır, ancak yalnızca formunuzu kısaltmak için önemli bilgiler toplayan alanları, özellikle de bu bilgiler potansiyel müşterilerinizi nitelendirmeye hizmet ediyorsa, ortadan kaldırmayın.

3. Alanları açıklamak için akıllı mikro kopya kullanın

İletişim formunuzda standart "ad, e-posta, mesaj" alanlarından daha fazlası varsa, ziyaretçilerin kafasını karıştırma riskiniz vardır.

Örneğin, bir "bütçe" alanınız varsa, bu bütçenin ne için olduğu belirsiz olabilir. Tüm proje için mi? Sadece belirli bir bölüm için mi?

Bu tür karışıklıkların önüne geçmek için iletişim formunuza “mikroskop” ekleyebilirsiniz.

Mikrokopi, temel olarak form alanlarını daha net hale getirmek için eşlik eden küçük açıklayıcı metindir. Örneğin, aşağıdaki Ödeme hacmi alanına bakın (bu örneği daha sonra da göreceksiniz):

İletişim formunda mikroskop kullanımı

4. Farklı formatlarla denemeler yapın

Çoğu kişi bir iletişim formu düşündüğünde, çoğu web sitesinde gördüğünüz aynı temel gömülü formun aynısını hayal ederler. Ancak, insanların sizinle iletişim kurmasını kolaylaştırmak istiyorsanız, bazen bir açılır pencere veya bildirim çubuğu gibi farklı görüntüleme yöntemlerini denemek faydalı olabilir.

Örneğin, sitenizin yan tarafında kayan bir iletişim düğmesi olması, bir destek iletişim formu için harika olabilir. Kullanıcıların bir sorunla karşılaştıklarında iletişim sayfanızı aramalarına gerek kalmadan sizinle hemen iletişim kurmasını çok kolaylaştırır:

Teknik destek için kayan iletişim düğmesi Canlı önizlemeye bakın →

5. İnsanlara sonraki adımları anlatın ve beklentileri belirleyin

İnsanlar Gönder'e bastıktan sonra iletişim formu tasarımınız tamamlanmadı!

Daha iyi bir kullanıcı deneyimi sunmak için insanlara bundan sonra ne olacağını ve ne kadar süreceğini tam olarak söylemek istersiniz. Örneğin…

  • Tüm sorulara mı cevap veriyorsunuz yoksa sadece bazılarına mı?

  • Cevap vermen ne kadar sürer?

  • E-posta veya başka bir yöntemle yanıt verecek misiniz?

Açık beklentiler belirlerseniz, ziyaretçileriniz neler olup bittiğini ve formunuzun çalışıp çalışmadığını merak etmeyecektir.

Gerçek web sitelerinden sekiz harika iletişim formu örneği

Artık en iyi uygulamaları bildiğinize göre, kendinize ilham verecek bazı gerçek dünyadaki iletişim formu tasarımlarına bakalım ve size bu en iyi uygulamaları eylem halindeyken gösterelim.

1. şerit

Stripe'ın satış iletişim formu, bazen biraz fazladan bilgi toplamanın iletişim formlarınızın daha nitelikli potansiyel müşteriler oluşturmasını nasıl sağlayabileceğinin harika bir örneğidir (temel dönüşüm oranını biraz düşürse bile).

Stripe'ın web sitesinden iletişim formu örneği

Standart bilgi alanlarına ek olarak Stripe, her bir müşteri adayının potansiyel kalitesini daha iyi anlayabilmeleri için bir Ödeme hacmi alanı ekler.

Bunun ötesinde, aşağıdakiler de dahil olmak üzere başka güzel tasarım seçenekleri de var:

  • Sosyal kanıt — yandaki logolar, Stripe kullanan tüm başarılı işletmeleri görüntüleyerek sosyal kanıt ekler.

  • Mikrokopi — "Ödeme hacmi" terimi biraz kafa karıştırıcı olabilir, bu nedenle Stripe, alanın nasıl doldurulacağını açıklayan bazı yararlı mikroskopi ekler.

  • Amaç — Stripe, bu formun yalnızca satış sorguları için olduğunu açıkça ortaya koyuyor. Bu, insanların onu destek veya diğer satış dışı kullanımlar için kullanmaya çalışmamalarını sağlar.

2. Sitekontrolünü al

Getsitecontrol'de iletişim formu tasarımımızı biraz farklı şekilde ele alıyoruz.

Getsitecontrol iletişim formu örneği Canlı önizlemeye bakın →

Ziyaretçilerin gitmesi gereken özel bir "Bize Ulaşın" sayfası oluşturmak yerine, hemen orada bir açılır pencere açan Bize Ulaşın bağlantısını ekliyoruz ve ardından - sayfanın yeniden yüklenmesi gerekmez.

Bu, insanlar için gerçekten uygun çünkü…

  • sitedeki herhangi bir sayfadan iletişim formumuza erişin,

  • yaptıkları herhangi bir şeyi kesmeden bir mesaj gönderin (bu blog yazısını okumak gibi!).

İletişim formu gönderme başarı sayfası Canlı önizlemeye bakın →

Getsitecontrol iletişim formu basit ve doldurması kolaydır. Ayrıca, insanlar formu gönderdikten sonra sonraki adımları ve Getsitecontrol blogunu kontrol etmek için bir CTA'yı açıkça bildirir.

3. Kinsta

Kinsta, kullanıcıları sayfayı yeniden yüklemelerine gerek kalmadan otomatik olarak uygun iletişim formuna yönlendiren tek bir "Bize Ulaşın" sayfasına sahiptir.

Kinsta formu örneği

Kinsta, en popüler beş iletişim isteğini listeler:

  1. Fiyatlandırma veya planlar

  2. Özellikler veya teknik bilgiler

  3. Taşıma veya ilgili herhangi bir soru isteyin

  4. Misafir gönderisi, sponsorlu gönderi veya geri bağlantı isteği

  5. Başka bir şey

Kullanıcılar hedeflerini seçtiklerinde, Kinsta ya kişiselleştirilmiş bir iletişim formu ya da bir mesaj görüntüler.

Bu, Kinsta'nın ziyaretçileri gereksiz alanlarla doldurmadan tam olarak ihtiyaç duydukları bilgileri toplamasını sağlar.

Örneğin, Fiyatlandırma veya planlar iletişim formunda Kinsta, kişinin barındırmak istediği kaç web sitesi ve ziyaretçiyi anlamak için fazladan alanlar ekler, ancak bu alanlar “Başka bir şey” formunda görünmez.

Kinsta ayrıca en üstte net beklentiler belirliyor – “Bir iş günü içinde sizinle iletişime geçeceğiz”.

4. Seçim Taraması

Seçim Taramasının uzun bir iletişim formu vardır. İlk bakışta, bunun formun dönüşüm oranlarını öldüreceğini düşünebilirsiniz. Ve bu biraz doğru - Seçim Taraması, şüphesiz daha kısa bir forma göre daha az form gönderimi alacaktır.

Seçim Tarama iletişim formu örneği - uzun versiyon

Ama bazen bunun neden sorun olmadığını ve bunun neden harika bir iletişim formu örneği olduğunu konuşalım.

Choice Screening, çok özelleşmiş, işletmeler arası bir alanda faaliyet göstermektedir. Yalnızca iletişim formu gönderimleri değil, uzun süreli müşterilere dönüşecek nitelikli potansiyel müşteriler elde etmeye çalışıyorlar.

Ayrıntılı hizmet listesi ve birçok onay kutusuyla form, henüz ne istediğinden emin olmayan kişileri ayıklayacak ve yalnızca müşteriye dönüşme şansı yüksek nitelikli potansiyel müşterilere izin verecektir.

Yani seçme Eleme bu iletişim formu ile potansiyel müşterilere tarama olduğunu söyleyebiliriz!

5. Joel Klettke / Ticari Gündelik Metin Yazarlığı

Joel profesyonel bir metin yazarıdır, bu nedenle iletişim formu tasarımının ve kopyasının yerinde olacağına bahse girebilirsiniz.

Bir iş metin yazarı için kurşun gen formu örneği

Joel'in formu, standart alanlar ve bir kişinin bütçesi için bazı ekstra nitelikli alanlar ile basittir. Yine de, bunu bu kadar iyi bir iletişim formu örneği yapan, formun yanında olup biten her şey.

Bu metinde Joel, beklentileri belirleme ve olası satışları nitelendirme konusunda harika bir iş çıkarıyor. Ayrıca, asgari ücretlerini tartışarak düşük bütçeli müşterileri kasten uzaklaştırıyor. Joel, daha yüksek bir ön dönüşüm oranı elde etmek için bu sözleri kaldırabilse de, bunu yapmak aslında daha düşük nitelikli olası satış yüzdesine yol açar ve sonunda Joel'in zamanını boşa harcar.

6. Neil Patel

Neil Patel, dünyanın en popüler dijital pazarlama web sitelerinden birini işletiyor, bu nedenle çok sayıda iletişim formu gönderimi aldığından oldukça emin olabilirsiniz.

Neil Patel'in kısa iletişim formu örneği

Bu gönderileri doğru yere yönlendirmeye yardımcı olmak için Neil, insanların önceden belirlenmiş bir dizi seçenek arasından seçim yapabilecekleri bir “hakkında sohbet etmek istiyorum” açılır menüsü içerir. Ayrıca, insanlara mesajlarını kısa ve öz tutmaları için yalvarmak için yer tutucu kutusunda bir miktar mikroskop kullanıyor.

Bu basit - ancak bazen iletişim formu tasarımınızda ihtiyacınız olan tek şey basit.

7. Odak Laboratuvarı

Tamam, bu eğlenceli, tuhaf ve kesinlikle her iş için çalışmayacak. Ancak, yaratıcı bir alandaysanız (ki Focus Lab'dir), bunun gibi tuhaf bir iletişim formu tasarımı oluşturmak, kutunun dışında düşünebildiğinizi gösterebilir.

Focus Lab yaratıcı iletişim formu tasarımı

Focus Lab, geleneksel bir form oluşturmak yerine, ziyaretçilerin bilgilerini mevcut bir paragrafa girdiği Mad Libs tarzı bir yaklaşımdan daha fazlasını kullanır. Bu yaklaşımı kullanarak Focus Lab, daha geleneksel bir iletişim formu tasarımının sahip olabileceği etkileyici görünüm olmadan daha fazla bilgi (hedefler ve bütçe gibi) toplayabilir.

8. CAMİKB

Topluluk Birliği Yöneticileri Uluslararası Sertifikasyon Kurulu'nun kısaltması olan CAMICB, ABD'deki topluluk dernekleri için sertifika sunar.

Getsitecontrol'de oluşturulan CAMICB iletişim formu açılır penceresi

CAMICB iletişim formuyla ilgili dikkate değer şey, karma bir açılır pencere/“Bize Ulaşın” sayfası yaklaşımı kullanmasıdır. Kullanıcılar Bize Ulaşın sayfasına geldiklerinde, CAMICB web sitesi anında ziyaretçilerin mesajlarını gönderebilecekleri basit bir açılır iletişim formu açar.

Sadece üç alanla CAMICB, formunu kısa ve öz tutar. Ardından, açılır pencere yaklaşımı, odağın tamamen formda olduğu, dikkat dağıtıcı olmayan güzel bir arayüz oluşturur.

Bu, mümkün olduğunca sorunsuz bir soruşturma göndermeyi sağlar.

Ve işleri daha da kolaylaştırmak için CAMICB, kullanıcıların altbilgisinde erişebilecekleri kayar bir iletişim formu da görüntüler:

Bir web sayfasının altına yerleştirilen genişletilebilir bize ulaşın sekmesi

Kendi özelleştirilebilir iletişim formu tasarımınızı nasıl oluşturabilirsiniz?

Bu sekiz iletişim formu örneğine göz attıktan sonra, muhtemelen bu ilkeleri kendi iletişim formu tasarımlarınıza nasıl uygulayabileceğinize dair bir sürü fikir edinmişsinizdir.

Başlamak istiyorsanız, [Getsitecontrol](/feedback-popup/ sizi kısa sürede hazır hale getirebilir.

Çoğu iletişim formu çözümünün aksine Getsitecontrol, formunuz için dört esnek konum ve düzinelerce şablon arasından seçim yapmanızı sağlar. CAMICB ve Getsitecontrol web sitesinde gördüğünüz gibi geleneksel bir açılır pencere oluşturabilirsiniz. Ya da slaytlar, bildirim çubukları, düğmeler ve daha fazlasıyla işleri alt üst edebilirsiniz.

Nitelikli gönderimler almak için ihtiyaç duyduğunuz kadar (veya az) alan ekleyebileceksiniz ve ayrıca ziyaretçilerin formunuzu doldurmasına yardımcı olmak için mikro kopya da ekleyebilirsiniz.

Getsitecontrol'e bugün kaydolun ve birkaç dakika içinde çalışan bir iletişim formuna sahip olabilirsiniz.

Colin Newcomer, SEO ve bağlı kuruluş pazarlamasında geçmişe sahip serbest çalışan bir yazardır. Öncelikle WordPress ve dijital pazarlama hakkında yazarak müşterilerin web görünürlüğünü artırmalarına yardımcı olur.

Pazarlama uzmanlarının çevrimiçi işinizi büyütmek için kanıtlanmış taktikleri paylaştığı Getsitecontrol blogunu okuyorsunuz. Bu makale, Müşteri etkileşimi bölümünün bir parçasıdır.

Bültenimize abone olun → Icons8 ana çizimi