Kişi Divi form modülü ile bir teklif formu nasıl oluşturulur

Teklif formu (diğer adıyla Teklif Talebi formu), telefona cevap verme zahmetine girmeden gereksinimleri karşılayan beklentiler almak isteyen küçük işletmeler için iyi bir çözümdür. İyi bir teklif formu, doğru yeterlilik sorularını sorarak hizmetinize hazır olmayan kötü yumurtaları sıralayabilir. Bu aynı zamanda müşterinin ihtiyaçlarını belirlemeye yardımcı olabilir, böylece telefona aldıktan sonra etkili yanıtlar/teklifler hazırlayabilir ve satışları kapatabilirsiniz. İşleme formlarına adanmış bir dizi harika form eklentisi vardır. Ancak Divi siteniz için basit ve etkili bir çözüm arıyorsanız, ihtiyacınız olan şey güncellenmiş Divi iletişim formu modülüdür.
Bugün, daha kaliteli beklentiler elde etmek için koşullu mantık kullanarak basit ama güçlü bir teklif formu oluşturma sürecinde size rehberlik edeceğim. Ayrıca, formu daha temiz ve okumayı kolaylaştıracak özel CSS kullanarak bazı gelişmiş tasarım özellikleri ekleyeceğim.

Başlayalım. Divi Binası ile Tasarım Uygulama Tam Ekran Başlık Bölümü Alıntı Herhangi bir sayfaya eklenebilir, ancak bu örnek için yalnızca teklif formu için özel bir sayfa kullanacağım. Ziyaretçileri karşılamak için kullanıcıları düğmeyi tıklamaya veya formu görüntülemek için kaydırmaya zorlayan tam ekran başlığı kullanıyorum. Bu, daha kişisel bir deneyim yaratan ve kullanıcıları forma bakmadan önce kaydırma ve tıklama fikriyle ısıtan harika bir özelliktir. Bazı durumlarda, sayfayı doldurmak için uzun bir formla açtığımda biraz çekici ve aşırı görünüyor. Bu elbette isteğe bağlıdır ve tam ekran başlığı olmadan daha iyi dönüştürüp dönüşmediğini görmek için kesinlikle test edeceğim. Visual Builder kullanarak, tam genişlik bölümü ve FullWidth başlık modülünü sayfanızın üstüne ekleyin.
Tam genişlik başlık ayarını şu şekilde güncelleyin: İçerik Seçeneği Başlık: [Başlığı girin; “Alıntı Form” gibi sıkıcı bir başlıktan daha kişisel olmaya çalışın] Altyazılı metin: [Altyazı metnini girin] #1 Metin düğmesi: [Düğme metnini girin; “Göster bana” veya “hadi bunu yapalım”] #1 URL düğmesi: #quote (bu, aşağıdaki formu içeren parçaya yuvarlanacak CSS kimliği için kullanılacaktır) URL logo görüntüsü: [Logo görüntüsünü girin] Arka plan: RGBA (0.0,0,0,7) Arka Plan Görüntü: [Arka Plan Görüntüsünü Yükle 1920 X 1080 You]

Metin Yönlendirme Tasarımı ve Logo Seçimi: Tam Ekran Olarak Orta: Evet Top Balo Çetesi Düğmesi Düğmesi: Evet Icon: [Icon Seç] Simgenin rengini kaydırın: #9999999 Renk Metin: Light Font Başlık: Ubuntu Başlık Yasağı Boyutu: 36px Yazı Tipi Altyazılar: Ubuntu Altyazı Yazı Tipi Boyut: 22px Bir düğme için özel bir stil kullanın: Evet Bir Düğme Metin Boyutu: 20px One Renk Düğmesi Metin: #ffffff Arka plan renk düğmesi: #e09900; Bir Renk Düğmesi Sınırı: #E09900 Bir Aralık Harf Düğmesi: 1px Bir Yazı Tipi Düğmesi: Ubuntus Teklif formunu oluşturmak için bir ayardır. İlk olarak, tam geniş bir satır (1 sütun) ile düzenli bir parça eklememiz gerekir. Ardından hatta Kontak formu modülünü ekleyin.
İletişim formu ayarlarını aşağıdaki gibi güncelleyin. İçerik seçeneği? Başlık: [İletişim formunuzun başlığını belirleyin veya ek talimatlar ekleyin] Metin düğmesini gönderin: Bir e -posta teklif alın: [E -posta adresi hedef mesajını girin] Farklı URL’yi etkinleştirin: Evet (bu isteğe bağlı ama iyi bir fikir) URL’yi yeniden yönlendir : [URL’yi girin Özel Teşekkürler Sayfasına yönlendirme] Yazı tipi başlık tasarım seçenekleri: ubuntu yazı tipi boyutu başlık: 30px alan harfleri başlık: 1px yazı tipi alan formu: ubuntu yazı tipi yazı tipi boyutu form: 24px renk metin alanı formu: #e09900 radius rayius giriş sınırı: 5px Sınırı kullanın: Evet Renk Sınır: #999999 Sınır Genişliği: 1px Düğme için özel bir kuvvet kullanın: Evet Metin Boyutu Düğmesi: 24px Renk Metin Düğmesi: #FFFFFF Renk Arka Plan Anahtar Düğmesi: #E09900; Renk Düğmesi Sınırı: #E09900 Hareketler Mesafesi Düğmesi: 1px Yazı Tipi Düğmesi: Ubuntu

Gelişmiş Seçenekler (Özel CSS) CAPTCHA Alanı: Yazı tipi boyutu: 24 piksel;

Max-Width: 60px;
Dolgu: 16px 14px 14px;
Captcha Metin: Yazı tipi boyutu: 24 piksel
Sahip olduğunuz ayarları değil, teklif alanını eklemek için ayarları kaydedin, şimdi form öğelerimizi ekleme zamanı. Varsayılan olarak, formlar “ad”, “e -posta” ve “mesaj” alanlarını içerir. “Mesaj” ı silebilirsiniz. “E -posta” alanı altındaki şirketin sektörü yeni alanlar ekleyin ve içerik seçeneğinin altındaki ayarları aşağıdaki gibi güncelleyin: ID Alanı: Şirket Başlığı: Şirketinizin adı nedir? Gerekli Alanlar: Evet
“Şirket” alanı altındaki hizmetler alanı yeni alanlar ekleyin ve içerik seçeneği altındaki ayarları şu şekilde güncelleyin: ID Alanı: Hizmet Başlığı: Bugün ne yardımcı olabiliriz? Tür: Radyo Seçenek Düğmesi:

Web sitesi üretimi
Uygulama geliştirme
Sanat Yönetimi
Video yapımı
Gereken alanlar: evet “Hizmet” alanındaki sanat hedefleri alanı yeni alanlar ekleyin ve içerik seçeneği altındaki ayarları şu şekilde güncelleyin: Alan Kimliği: Art_purpose Başlık: Sanat Yönü Neye ihtiyacınız var? Tür: Radyo Seçenek Düğmesi:
Grafik dizayn
Reklam
marka
Ambalajlama
Gereken alanlar: Evet Koşullu Mantık İlişkisini Etkinleştir: Kurallar Ne olursa olsun: Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> sanat yönü
Not: Bu mantık, kullanıcı önceki sorudan “sanat yönünü” her seçtiğinde bu alanı gösterir. “Art_purpose” alanının altındaki web amaçlı alanı yeni alanlar ekleyin ve içerik seçeneğinin altındaki ayarları aşağıdaki gibi güncelleyin: Alan Kimliği: Web_Purpose Başlık: Ne tür bir web sitesine ihtiyacınız var? Tür: Radyo Seçenek Düğmesi:
Elektronik ticaret

Blog
Web sitesi uygulaması
Yön sayfası
Gereken alanlar: Evet Koşullu Mantık İlişkisini Etkinleştir: Kurallar Ne olursa olsun: Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Web Sitesi Üretim Not: Bu mantık, kullanıcının önceki sorudan “web üretimi” ni her seçtiğinde bu alanı gösterir. : Video başlığı: Videonun hangi cihazın görüntülenmesini istiyorsunuz? Tür: Radyo Seçenek Düğmesi:
Cep telefonu
Tablet
Monitör veya TV
Projektör
Gereken alanlar: Evet Koşullu Mantık İlişkisini Etkinleştir: Kurallar Ne olursa olsun: Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Video Yapma Not: Bu mantık, kullanıcı önceki sorudan “video yapımı” seçtiğinde bu alanı gösterir. “Video” alanı altındaki uygulama platformu alanı yeni bir alan ekler ve içerik seçeneğinin altındaki ayarları aşağıdaki gibi günceller:
Alan Kimliği: App_platform Başlık: Uygulamanın hangi platformda geliştirilmesini istiyorsunuz? Tür: Radyo Seçenek Düğmesi:
iOS
Android
pencere
Böğürtlen
Gereken alanlar: Evet Koşullu Mantık İlişkisini Etkinleştir: Kurallar Ne olursa olsun: Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Uygulama Geliştirme Not: Bu mantık, kullanıcı önceki sorudan “Uygulama Geliştirme” ni her seçtiğinde bu alanı gösterir. “App_platform” alanı altındaki bütçe alanı yeni alanlar ekleyin ve içerik seçeneğinin altındaki ayarları aşağıdaki gibi güncelleyin: ID Alanı: Bütçe Başlığı: Bütçeniz varsa bize söyleyin. Tür: Radyo Seçenek Düğmesi:
1 bin dolardan az
5 bin dolar civarında
10 bin dolardan fazla
Gereken alanlar: Disactive koşullu mantık ilişkisi: kurallar ne olursa olsun: Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Uygulama Geliştirme Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Video Yapma Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> Web sitesi üretimi Bugün size nasıl yardımcı olabiliriz? > Eşdeğer> sanat yönü
Ayarları Kaydetme CSS Ankraj Kimliğini tekrar ekleyin ve formu içeren bölüm için bölümün ayarlarını düzenleyin. Devam sekmesinin altına, ID CSS’nin “alıntılığını” girin.
Bu, tam genişlik başlığındaki düğmenin URL’siyle eşleşir, böylece düğme tıklandığında parçaya döner. Bir sonraki teklif formu sütunu için özel bir genişlik ayarlayın, teklif formunu içeren satırlar için satır ayarlarını açın ve tasarım seçeneğini aşağıdaki gibi güncelleyin: Özel genişliği kullanın: özel genişlik: 556px
Ek Tasarım Özelleştirme Bu alıntı formu için radyo düğmesini kullanırız, radyo/daire düğmesi tıklandıktan sonra, Daire Dolgusu’nun rengi Tema Ayarlaması> Genel Ayarlar> Düzen Ayarları>

Radyo düğmesi doldurma rengi için sitenin her yerinde tema aksanının rengini değiştirmek istemiyorsanız, sayfa ayarlarını açın ve CSS sekmesinde aşağıdaki özel CSS’yi girin: .et_pb_contact p girişi [type = “radyo” ]: Kontrol edilen + etiket I: Önce {arka plan: #e09900; }

Buna ek olarak, radyo düğmesini içeren bir soru için başlığın başlığını ayarlamak için aşağıdaki CSS’yi ekleyebilirsiniz: .et_pb_contact_field_radio_wrapper .et_pb_contact_field_radio_title {font-boyut: 24px; yazı tipi ailesi: ‘ubuntu’; yazı tipi-ağırlık: 400; }

Son olarak, formun biçimini aşağıdaki CSS ile eşleştirmek için radyo düğmesi listesine kuvvet sınırını ekleyebilirsiniz: Taşma: gizli; Sınır: 1px katı #999999; Dolgu: 20px; Border-Radius: 4px; Genişlik:%100; Marj-Top: 10px} İşte bu kadar. Sonuç olarak görün:

Bu alıntı formunun son zihni, teklif formuyla neler yapabileceğinizin basit bir örneğidir. Kendi teklif formunuz için, “telefon numarası” gibi ek alanlar eklemek isteyebilirsiniz, böylece potansiyel müşterilerinizi geri arayabilirsiniz. Müşteri ihtiyaçları hakkında daha spesifik bilgi almak için daha koşullu mantık kullanabilirsiniz. Makalenin başında söylediğim gibi, orada daha sofistike bir eklenti vardı. Bir nedenden dolayı güçlü bir temas formu çözümünde uzmanlaşmış tüm şirketler vardır. Umarım bu yazı, Kontak Form modülünün standart iletişim formu ihtiyaçlarınızın çoğunu nasıl ele alabildiğini göstermede yararlıdır.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir