Divi'nin İletişim Formu Modülü ile Teklif Formu Nasıl Oluşturulur

Bir fiyat teklifi formu (diğer bir deyişle fiyat teklifi talep formu), telefonlara cevap verme zahmetine girmeden nitelikli müşteri adayları elde etmek isteyen küçük işletmeler için harika bir çözümdür. İyi bir teklif formu, hizmetiniz için hazır olmayan kötü yumurtaları doğru niteleyici soruları sorarak çözebilir. Ayrıca, etkili bir yanıt/teklif hazırlayabilmeniz ve müşteriyi telefonda aldıktan sonra satışı kapatabilmeniz için bir müşterinin ihtiyaçlarını tam olarak belirlemenize yardımcı olabilir.

Form işlemeye adanmış çok sayıda harika form eklentisi var. Ancak Divi siteniz için basit ve etkili bir çözüm arıyorsanız, Divi'nin güncellenmiş İletişim Formu Modülü tam da ihtiyacınız olan şeydir.

Bugün, potansiyel müşterileri daha iyi nitelemek için koşullu mantık kullanarak basit ama güçlü bir teklif formu oluşturma sürecinde size yol göstereceğim. Ayrıca, formu daha da temiz ve okunabilir hale getirecek özel CSS kullanarak birkaç gelişmiş tasarım özelliği ekleyeceğim.

Başlayalım.

Tasarımı Divi ile Uygulamak

Tam Ekran Başlık Bölümünü Oluşturma

Teklif formu herhangi bir sayfaya eklenebilir, ancak bu örnek için teklif formu için özel bir sayfa kullanacağım.

Ziyaretçiyi karşılamak için, kullanıcıyı formu görmek için düğmeyi tıklamaya veya kaydırmaya zorlayan tam ekran bir başlık kullanıyorum. Bu, daha kişisel bir deneyim yaratan ve kullanıcıyı formu görmeden önce kaydırma ve tıklama fikrine ısıtan harika bir özelliktir. Bazı durumlarda, doldurmam gereken uzun bir formdan başka bir şey olmayan bir sayfaya geldiğimde biraz davetsiz ve bunaltıcı görünüyor. Bu elbette isteğe bağlıdır ve tam ekran başlığı olmadan daha iyi dönüştürülüp dönüştürülmediğini görmek için kesinlikle test ederim.

Visual Builder'ı kullanarak sayfanızın en üstüne tam genişlikte bir bölüm ve tam genişlikte bir başlık modülü ekleyin.

Fullwidth Header ayarlarını aşağıdaki gibi güncelleyin:

İçerik Seçenekleri

Başlık: [başlığı girin; “Alıntı Formu” gibi sıkıcı bir başlık yerine daha kişisel olmaya çalışın]
Alt Başlık Metni: [alt başlık metnini girin]

Düğme #1 Metni: [düğme metnini girin; “Bana göster” veya “Hadi bunu yapalım” gibi bir şey]
Düğme #1 URL: #quote (bu, aşağıdaki formu içeren bölüme kaydıracak olan sabit CSS kimliği için kullanılacaktır)
Logo Resmi URL'si: [logo resmini girin]
Arka Plan Yerleşimi: rgba(0,0,0,0.7)
Arka Plan Resmi: [1920 x 1080 arka plan resminizi yükleyin]

Tasarım Seçenekleri

Metin ve Logo Yönü: Orta
Tam Ekran Yap: EVET
Aşağı Kaydır Düğmesini Göster: EVET
Simge: [simge seçin]
Aşağı Kaydır Simge Rengi: #999999
Metin Rengi: Açık
Başlık Yazı Tipi: Ubuntu
Başlık Yazı Tipi Boyutu: 36px
Alt Başlık Yazı Tipi: Ubuntu
Alt Başlık Yazı Tipi Boyutu: 22px
Düğme Bir için Özel Stilleri Kullan: EVET
Düğme Bir Metin Boyutu: 20px
Düğme Bir Metin Rengi: #ffffff
Düğme Bir Arka Plan Rengi: #e09900;
Düğme Bir Kenar Rengi: #e09900
Düğme Bir Harf Aralığı: 1px
Düğme Bir Yazı Tipi: Ubuntu

Ayarları kaydet

Teklif Formunu Oluşturma

Şimdi teklif formu için Divi'nin İletişim Formu Modülünü kullanacağız. İlk önce tam genişlikte (1 sütun) satır içeren normal bir bölüm eklememiz gerekiyor. Ardından satıra bir İletişim Formu Modülü ekleyin.

İletişim Formu Ayarlarını aşağıdaki gibi güncelleyin.

İçerik Seçenekleri?

Başlık: [iletişim formunuz için bir başlık tanımlayın veya ek talimatlar ekleyin]
Gönder Düğme Metni: Teklif Al
E-posta: [mesajların gönderileceği e-posta adresini girin]
Yönlendirme URL'sini Etkinleştir: EVET (bu isteğe bağlıdır ancak iyi bir fikirdir)
Yönlendirme URL'si: [özel bir teşekkür sayfasına yönlendirme URL'sini girin]

Tasarım Seçenekleri

Başlık Yazı Tipi: Ubuntu
Başlık Yazı Tipi Boyutu: 30px
Başlık Harf Aralığı: 1px
Form Alanı Yazı Tipi: Ubuntu
Form Alanı Yazı Tipi Boyutu: 24px
Form Alanı Metin Rengi: #e09900
Giriş Sınır Yarıçapı: 5px
Kenarlık Kullan: EVET
Kenar Rengi: #999999
Kenar Genişliği: 1px
Düğme için Özel Stilleri Kullan: EVET
Düğme Metin Boyutu: 24px
Düğme Metin Rengi: #ffffff
Düğme Arka Plan Rengi: #e09900;
Düğme Kenar Rengi: #e09900
Düğme Harf Aralığı: 1px
Düğme Yazı Tipi: Ubuntu

Gelişmiş Seçenekler (Özel CSS)

Captcha Alanı:

Font-size: 24px;
Max-width: 60px;
Padding: 16px 14px 14px;

Captcha Metni:

Font-size: 24px

Ayarları kaydet

Teklif Formu Alanlarını Ekleme

Ayarlarınızı yaptığınız şey değil, form öğelerimizi eklemenin zamanı geldi. Varsayılan olarak form "ad", "e-posta" ve "mesaj" alanlarını içerir. “Mesajı” silebilirsiniz.

Şirket Alanı

“E-posta” alanının altına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan kimliği : şirket
Başlık : Şirketinizin adı nedir?
Zorunlu Alan : VAR

Hizmet Alanı

“Şirket” alanına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan kimliği : hizmet
Başlık : Bugün size nasıl yardımcı olabiliriz?
Tür : radyo düğmeleri
Seçenekler :

• Web Sitesi Üretimi
• Uygulama Geliştirme
• Sanat Yönetimi
• Video Oluşturma

Zorunlu Alan : VAR

Sanat Amaçlı Alan

“Servis” alanına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan Kimliği : art_amaç
Başlık : Nasıl bir sanat yönetmenliğine ihtiyacınız var?
Tür : radyo düğmeleri
Seçenekler :

• Grafik dizayn
• reklam
• markalaşma
• Ambalajlama

Zorunlu Alan : VAR
Koşullu Mantığı Etkinleştir
İlişki : HERHANGİ BİR
Kurallar : Bugün size nasıl yardımcı olabiliriz? > Eşittir > Sanat Yönetimi

Not : Bu mantık, bir kullanıcı bir önceki sorudan “Sanat Yönü” seçtiğinde bu alanı gösterir.

Web Amaç Alanı

“sanat_amaç” alanının altına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan Kimliği : web_amacı
Başlık : Ne tür bir web sitesine ihtiyacınız var?
Tür : radyo düğmeleri
Seçenekler :

• E-Ticaret
• Blog
• internet uygulaması
• Açılış sayfası

Zorunlu Alan : VAR
Koşullu Mantığı Etkinleştir
İlişki : HERHANGİ BİR
Kurallar : Bugün size nasıl yardımcı olabiliriz? > Eşittir > Web Sitesi Üretimi

Not : Bu mantık, bir kullanıcı bir önceki sorudan “Web Üretimi” seçtiğinde bu alanı gösterir.

Video Alanı

"web_amacı" alanının altına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan kimliği : video
Başlık : Videonun hangi cihazda gösterilmesini istiyorsunuz?
Tür : radyo düğmeleri
Seçenekler :

• Cep telefonu
• Tablet
• Monitör veya TV
• projektör

Zorunlu Alan : VAR
Koşullu Mantığı Etkinleştir
İlişki : HERHANGİ BİR
Kurallar : Bugün size nasıl yardımcı olabiliriz? > Eşittir > Video Oluşturma

Not : Bu mantık, bir kullanıcı önceki sorudan “Video Oluşturma”yı seçtiğinde bu alanı gösterir.

Uygulama Platformu Alanı

“Video” alanının altına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan Kimliği : app_platform
Başlık : Uygulamanın hangi platformda geliştirilmesini istiyorsunuz?
Tür : radyo düğmeleri
Seçenekler :

• iOS
• Android
• pencereler
• Böğürtlen

Zorunlu Alan : VAR
Koşullu Mantığı Etkinleştir
İlişki : HERHANGİ BİR
Kurallar : Bugün size nasıl yardımcı olabiliriz? > Eşittir > Uygulama Geliştirme

Not : Bu mantık, bir kullanıcı önceki sorudan "Uygulama Geliştirme"yi seçtiğinde bu alanı gösterir.

Bütçe Alanı

“app_platform” alanının altına yeni bir alan ekleyin ve İçerik Seçenekleri altındaki ayarları aşağıdaki gibi güncelleyin:

Alan kimliği : bütçe
Başlık : Aklınızda bir bütçe varsa bize bildirin.
Tür : radyo düğmeleri
Seçenekler :

• 1 bin dolardan az
• 5 bin dolar civarında
• 10 bin dolardan fazla

Zorunlu Alan : HAYIR
Koşullu Mantığı Etkinleştir
İlişki : HERHANGİ BİR
Kurallar :
Bugün size nasıl yardımcı olabiliriz? > Eşittir > Uygulama Geliştirme
Bugün size nasıl yardımcı olabiliriz? > Eşittir > Video Oluşturma
Bugün size nasıl yardımcı olabiliriz? > Eşittir > Web Sitesi Üretimi
Bugün size nasıl yardımcı olabiliriz? > Eşittir > Sanat Yönetimi

Ayarları kaydet

Bağlantı CSS kimliğini ekleyin

Geri dönün ve formu içeren bölüm için Bölüm Ayarları'nı düzenleyin. Gelişmiş sekmesi altında, CSS kimliği "alıntısını" girin.

Bu, tam genişlik başlığındaki düğme url'sine karşılık gelir, böylece düğme tıklandığında bölüme kaydırılır.

Teklif Formu Sütunu için Özel Genişlik Ayarlayın

Ardından, teklif formunu içeren satır için Satır Ayarları'na gidin ve Tasarım Seçeneklerini aşağıdaki gibi güncelleyin:

Özel Genişlik Kullan: EVET
Özel Genişlik: 556px

Ek Tasarım Özelleştirmeleri

Bu teklif formu için radyo düğmeleri kullanıyoruz, bir radyo düğmesi/daire tıklandığında, daire dolgusunun rengi Tema Özelleştirici > Genel Ayarlar > Düzen Ayarları > altındaki sitelerinizin tema vurgu rengine karşılık gelir.

Radyo düğmesi dolgu rengi için site genelinde tema vurgu renginizi değiştirmek istemiyorsanız, Sayfa Ayarları'na gidin ve CSS sekmesine aşağıdaki Özel CSS'yi girin:

.et_pb_contact p input[type="radio"]:checked + label i:before { background: #e09900; } 

Ayrıca, radyo düğmeleri içeren soruların başlık metnini özelleştirmek için aşağıdaki CSS'yi ekleyebilirsiniz:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title { font-size: 24px; font-family: 'ubuntu'; font-weight: 400; } 

Son olarak, formun stilini aşağıdaki CSS ile eşleştirmek için radyo düğmesi listelerine stilli bir kenarlık ekleyebilirsiniz:

.et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_list { float: left; overflow: hidden; border: 1px solid #999999; padding: 20px; border-radius: 4px; width: 100%; margin-top: 10px }

Bu kadar.

Nihai sonucu kontrol edin:

Son düşünceler

Bu teklif formu, teklif formuyla neler yapabileceğinizin basitleştirilmiş bir örneğidir. Kendi teklif formunuz için “Telefon Numarası” gibi ek bir alan eklemek isteyebilirsiniz, böylece potansiyel müşterilerinizi geri arayabilirsiniz. Müşterinin ihtiyaçlarıyla ilgili daha spesifik bilgi almak için daha koşullu mantık da kullanabilirsiniz.

Makalenin başında söylediğim gibi, orada daha gelişmiş eklentiler var. Bir nedenden dolayı sağlam iletişim formu çözümlerinde uzmanlaşmış şirketler var. Umarım bu gönderi, İletişim Formu Modülünün standart iletişim formu ihtiyaçlarınızın çoğunu nasıl karşılayabileceğinden daha fazlasını göstermede yardımcı olmuştur.