Gelişmiş Gömülü Form Özelleştirmesi (HTML ve CSS ile)

Gömülebilir Denetim Aracı basit ve kolayca düzenlenebilir olacak şekilde tasarlanmıştır. Özellikle, kodu özelleştirmenizi açıkça engelleyen diğer 3. taraf araçlar gibi gömme kodunu sıkıştırmıyor veya karıştırmıyoruz.

Bunun yerine, temel CSS bilgisine sahip olduğunuz sürece form nesnelerini biçimlendirebilmeniz için tüm CSS'i HTML gömme kodunun üzerinde basit bir kod bloğunda sunuyoruz.

Görünümü ve hissi tamamen özelleştirmek için gereken tek şey, ilgili bölümlere birkaç satır CSS eklemektir. Orta düzeyde HTML bilginiz varsa, form yapısını kendiniz [değiştirebilirsiniz].

Ayrıca kendi JavaScript işlevlerinizi (örneğin: ek form doğrulaması) ekleyebilir veya form içinde onSubmit veya onClick üzerinde diğer işlevleri / sistemleri çağırabilirsiniz.

Yapabileceğimiz tek özelleştirme önerisi, hatalara neden olabileceği için JavaScript kod bloğunda herhangi bir değişiklik yapmamaktır. Bununla ilgili olarak, bazı JavaScript referansları formdaki nesnelerin göreceli konumuna dayandığından form elemanlarını orijinal sıralarından çok fazla taşımamanızı öneriyoruz.

Bunun dışında, formu özelleştirmenizi ve web sitenizin görünümüyle uyumlu hale getirmenizi şiddetle tavsiye ediyoruz ve teşvik ediyoruz. Sitenizin deneyiminin doğal bir parçası gibi hissetmeli ve eklenmiş bir widget gibi hissettirmemelidir.

Digital Butter'dan bu gömülü form gibi:

Bunu öneriyoruz çünkü ajansların formu web sitesi tarzına uygun şekilde özelleştirdiklerinde daha yüksek düzeyde [potansiyel müşteri] oluşturma elde ettiklerini görüyoruz.

Bu kılavuzda, Gömülü Form için en yaygın 3 gelişmiş özelleştirmeye bakacağız:

1. 1. Gelişmiş form doğrulama
   2. Form gönderimi sırasında bir Google Analytics veya Facebook etkinliği tetikleme
   3. Form alanı veya gönderme düğmesi stillerini özelleştirme

Fakat önce, gömme kodunun nasıl yapılandırıldığına bir göz atalım:

Temel HTML Gömme Kodunu "Keşfetmek"

Gömme kodunu oluşturmak için Embedding Settings sekmesine gidin ve "Ayarları Kaydet & Gömme Kodunu Oluştur" düğmesine basın. Aşağıda, temel kodun bir örneği bulunmaktadır.

İlk bölümün CSS olduğunu, ardından HTML ve son olarak JavaScript geldiğini fark edeceksiniz. İlk iki bölümü özelleştirmeli ve JavaScript'i olduğu gibi bırakmalısınız. 2. satırdaki yorumda önerildiği gibi, CSS bölümünü CSS dosyanıza taşıyabilirsiniz, böylece her şey merkezi bir yerde yönetilir.

1. Gelişmiş Form Doğrulama

SEOptimer Embed Form, varsayılan olarak basit form doğrulamasıyla birlikte gelir. OnSubmit'te, JavaScript tüm form alanlarını geçerli giriş için kontrol eder ve geçersiz bir giriş olması durumunda tarayıcıda aşağıdaki gibi bir JavaScript uyarı mesajı tetikler:

Embed Form'a güçlü doğrulama eklemek için en popüler iki alternatif "kısıtlama doğrulaması" ve "gerçek zamanlı doğrulama"dır:

Kısıtlama doğrulama

CSS-Tricks rehberine kısıtlama doğrulaması konusunda göz atın. Bu yöntem, odaklanıldığı anda form alanında veya çevresinde bağlamsal mesajlaşma kullanır. Kullanıcıyı önceden uyarır ve beklenen giriş formatına uymaları veya aşağıdaki örnekte olduğu gibi en azından alana bir şeyler girmeleri yönünde rehberlik eder:

Gerçek zamanlı Doğrulama

CSS-Tricks ayrıca, kullanıcı yazarken alan içi doğrulama sağlayan gerçek zamanlı doğrulama konusunda harika bir rehbere sahiptir. Bu, form üzerinde doğru girişi göstermek için ikonografi kadar basit olabilir:

2. Form Gönderimi Sırasında Google Analytics veya Facebook Olayı Tetikleme

Hedef ölçümü veya yeniden hedefleme için GA veya Facebook gibi takip etkinliklerini tetiklemek, Embed Formunuzu kullanarak trafiği değerlendirmek için harika bir yoldur. Bunu yapmanın en iyi yolu, Google'ın kendi Tag Manager (GTM) gibi bir Etiket Yöneticisi aracı kullanmaktır.

Bu şekilde, GTM'yi web sitenize boş bir konteyner olarak yükleyebilir ve ardından tüm etiketleri ve pikselleri her seferinde koda dalmadan doğrudan GTM'den yönetebilirsiniz.

Web sitenizdeki bir formun gönderilmesi üzerine GTM'nin olayları tetiklemesinin iki yolu vardır:

• Formun gönder olayı gerçekleştiğinde, yerleşik form tetikleyicisini kullanma
• GTM'nin veri katmanına eklenmesi gereken bir özel Olay (JavaScript satırı) kullanma

Çoğu kullanıcı için, ilk seçenek en iyisidir çünkü uygulanması en kolay olanıdır ve iyi çalışır. SEOptimer Embed Formu, kullanıcı formu tamamladığında standart bir HTML submit [eylemi] kullanır, bu yüzden formun veri gönderme şeklini değiştirmediğiniz sürece, GTM'nin yerleşik tetikleyicisi kullanılacak yoldur.

"Form Gönderimi"ne dayalı olarak GTM'de yeni bir Tetikleyici oluşturmanız gerekecek:

Ayrıca GTM'nin yerleşik "Form Kimliği" değişkenini etkinleştirdiğinizden emin olun. Bu değişken, HTML'deki form etiketinden Embed Form'un Kimliğini tanımlayacaktır.

Eğer Embed Form'un gönderme eylemini kaldırır ve bunu özel JavaScript ile değiştirirseniz, bu GTM'in yerleşik tetikleyicisinin form ile çalışmamasına neden olacaktır.

İşte burada GTM'nin veri katmanına bir olayın gerçekleştiğini bildirmek için bir JavaScript çağrısı eklemeniz gerekecek. Bu yaklaşım, sadece bir kez yapılması gerektiğinden oldukça basittir, bu nedenle eklemek istediğiniz gelecekteki herhangi bir olay GTM içinde kolayca yapılabilir. JavaScript şöyle görünecektir:

dataLayer.push({'event' : '[form] [Submitted]', 'formName' : 'WebsiteAudit'});

Her iki yöntemi GTM'de uygulamak için adım adım talimatlar için Click Insight'in kılavuzuna bakın.

3. Form Alanı veya Gönder Düğmesi [Stillerini] Özelleştirme

Yuvarlak "form" elemanları

Kanadalı dijital ajans Reach First'in bu örneği, web sitesinin görünümüne uyacak şekilde Denetim Aracı'nı değiştirmek için birkaç satır CSS'in nasıl kullanılabileceğine dair harika bir örnektir. Bu durumda, site genelinde diğer tüm giriş ve buton alanlarında yuvarlatma kullanırlar:

Burada "border-radius: 50px;" özniteliğinin Audit Tool'un metin giriş alanında yuvarlatma etkisini elde etmek için kullanıldığını görebiliriz. Sağ taraftaki dolgu özniteliğinin, giriş alanı ile "Kontrol" düğmesi arasında yeterli dolgu sağlamak amacıyla 160px olarak ayarlandığına dikkat edin. Bu, girilen metnin düğmenin üzerine binmesini engeller.

Buton için yalnızca "border-top-right-radius" ve "border-bottom-right-radius" özellikleri 50px olarak ayarlanmıştır, bu da giriş alanı ile buton arasındaki uyumlu etkiyi elde etmek içindir:

Form Elemanı Boyutlandırma ve Konumlandırma

Avustralya dijital pazarlama danışmanlığı, Stepps, 3 form alanında değişken genişlikler kullanarak ve düğmeyi kendi tam genişlikteki satırına taşıyarak Denetim Aracını ayrı bir "Web Sitesi Analizörü" açılış sayfasına çok güzel bir şekilde entegre etmiştir:

Form elemanlarının genişlikleri, içinde bulundukları div konteynerine göre görecelidir. Bunu sağlamak için genişlik CSS'de bir yüzde olarak ayarlanır. "Web sitenizi girin" alanı için bu alanın %25 genişliğe sahip olduğunu görebiliriz:

İlk İsim ve E-posta alanları her biri %15 genişliğinde daha küçükken:

Sonunda "Raporumu Oluştur" düğmesinin genişliği, giriş alanlarının toplamından 1 piksel daha geniştir: 25 + 15 + 15 = 56%

Bu örnekler, Audit Tool CSS'ini ajansınızın web sitesinin görünüm ve hissiyatına uyacak şekilde güncellemenin ne kadar esnek ve kolay olduğunu göstermektedir. Audit Tool'u yüklerken herhangi bir sorunla karşılaşırsanız, tam kılavuzumuza da göz atın!