Web sitenize uygun iletişim formu 7 stilini nasıl ayarlarsınız
Bir milyondan fazla aktif kurulumla, şimdiye kadarki kontak form 7, şimdiye kadarki en popüler WordPress eklentilerinden biridir. Popülerliği, “Basit ama esnek” tanımının arkasındaki gerçekle ilgili olabilir. İletişim Formu 7, basit bir HTML işaretlemesi (sizin için ürettiği) kullanarak birkaç iletişim formu oluşturmanıza olanak tanır. Yapıldıktan sonra, her form formu görüntülemek istediğiniz yere uygun kısa kodu yerleştirerek hızlı bir şekilde uygulanabilir; Sayfada, gönderi veya widget alanında. Form aracılığıyla gönderilen mesaj, eklentide verilen e -posta adresine gönderilir ve spam ayarları Captcha ve Akismet’e destek vererek direnir.
Temas formu 7, herkesin etkili bir şekilde kullanabileceği görünmesi çok basittir. Stil de, basit olması amaçlandı. Ama bazı insanlar için çok basit olabilir. Varsayılan olarak, Kontak Form 7 eklentisi şeklini düzenlemez. Sahip oldukları stil ne olursa olsun, WordPress tema stili sayfasındaki varsayılan stilin sonucudur. Genellikle bunun gibi oldukça basit bir şey üretir:
Bugünkü yazıda, herhangi bir temayı kullanarak herkes için iletişim formları 7’nin çeşitli olası düzenlemelerini açacak bir dizi ipucu paylaşacağım. İletişim Formu 7 stilini nasıl ayarlarsınız Web sitenize eşleşecek şekilde, kişi formunuzu düzenlediğiniz YouTube kanalımıza abone olarak 7 CSS (ve neden) Özel bir CSS eklerken, iletişim stili sayfasına eklememeniz önemlidir. 7 veya anne temanız. Orada yaptığınız her değişiklik veya ekleme, tema ve/veya eklenti güncellendikten hemen sonra yazılacaktır. Bunun yerine, çocuğunuzun temasına CSS eklemek istersiniz. Ayrıca JetPack’te özel bir CSS özelliği de kullanabilirsiniz veya temanız özel CSS için yönetici panelinde parçalar sağlıyorsa, onu da kullanabilirsiniz. Tamam, şimdi aşağıda tartışacağımız stili nereye yerleştireceğimizi biliyoruz, başlayalım! Site Genişliği Form Stili Nasıl Yapılır Tüm forma uygulanacak bazı genel düzenleme yaparak başlayalım. Bunu sınıf seçmenleri kullanarak yapabiliriz. WPCF7 ve sonra altına bir stil ekleyebiliriz. (Ayrıca, iletişim formu stilinizin nerede başladığını göstermek için aşağıda yazdığım yorumun başlığını stil sayfanızda yerleştirmenizi şiddetle tavsiye ederim.)/* İletişim Formu 7 Styles
———————————
.wpcf7 {
Arka Plan rengi: #F0F0F0;
Sınır: 5px katı #666666;
}
Yukarıdaki kodu stil sayfanıza ekledikten sonra, bir kişi formu 7 ile oluşturduğunuz her formun bir arka planı ve az önce belirttiğiniz sınır kuvveti olacaktır. Aşağıda bir örnek var.
Gördüğünüz gibi, bazı mesafe problemleri var. Bunu düzeltmek için, sınırlar ve iç formun öğeleri arasındaki marjı ayarlamak istersiniz. Bunu aşağıdaki kodla yapabilirsiniz. Marj-sağ: 25px;
Marj-Top: 25px;
Test sitemde, bu aşağıdakilerle sonuçlanır:
Not: Bu stil, farklı temalarla çalışması muhtemel olduğumuz için formunuzu biraz farklı bir şekilde etkileyebilir. Bu, bu kodun sizin için işe yaramayacağı anlamına gelmez, sadece siteniz için doğru olanı elde etmek için numarayı biraz değiştirmeniz gerekebilir.
Alan Stili Nasıl Yapılır Sitenin alanı, insanların iletişim formlarını yönetmede en yaygın taleplerden biridir. Özellikle çok uzak olmayan mesaj alanı. Aşağıdaki kod, mesaj alanını istediğiniz genişliğe genişletecektir (ayarlandığında). Benimkini% 95 için örnek olarak ayarladım çünkü hayal ettiğim kullanım durumunda en iyisi gibi görünüyor. Ayrıca, sabit piksel yüzdesini veya miktarını kullanarak ihtiyaçlarınıza göre ayarlayabilirsiniz. WPCF7-Textarea { Genişlik:%85;
}
Ayrıca, girdi sınıfı seçmenlerini ayarlayarak diğer alanların genişliğini de ayarlayabilirsiniz.
.wpcf7 giriş {
Genişlik:%50;
}
Tüm giriş alanlarını aynı kriterlerle ayarlamak istemiyorsanız, yalnızca ilgilendiğiniz alanı seçerek biraz göz atabilirsiniz. Aşağıdaki örnekte sadece metin alanımı değiştirmeyi seçtim, böylece gönderme düğmem de etkilenmedi … WPCF7-TEXT {
Genişlik:%50;
}
Yukarıdaki tüm değişikliklerden sonra, aşağıda gördüğünüz formu düzenleyebilirim. Düğme rengimi değiştirmek istemiyorum, ama bence büyük olasılıkla diğer yaygın arzular. Dolayısıyla, düğmenizin rengini değiştirmek istiyorsanız, denemek için aşağıdaki CSS’yi kullanabilirsiniz.
.wpcf7-submit {
Arka plan: #555555;
Renk: #ffffff;
}
Bu CSS biti ile, Kontak Form 7 ile oluşturulan her form yukarıdaki son resme benzeyecektir. Ancak belirli bir formun diğerlerinden farklı görünmesini istediğinizde ne olur? Belirli bir formda bir stil düzenleme yapmak için gerekli özel bir CSS kimliği elde etmek için belirli bir biçimin nasıl düzenlenmesi biraz zahmetli olabilir, ancak belki de biraz uğraşarak. Yapmak istediğiniz ilk şey, sitenize kısa bir kod eklemek ve bunu yapmaktır. (Kısa kodda kimlik için bir numara olduğunu göreceksiniz – ama aslında ihtiyacınız olan tam kimlik değil.)
Ardından, Google Chrome Muayene Elemanı özelliğini veya diğer tarayıcılarda benzerlerini kullanarak formun koduna bakın. Bunu kullanarak tam bir form kimliği bulacaksınız. Benim durumumda, kısa kodumdaki kimlik numarası 4407. Tam kimliğin WPCF7-F4407-P4405-O1 olduğu ortaya çıktı. Bu, aşağıdaki kodu, tüm sitelerimin ayarlarından farklı olan çeşitli kriterlerle kullanarak daha fazla düzenleme yapabileceğim anlamına gelir.#WPCF7-F4407-P4405-O1 {
Arka Plan rengi: #333333;
Sınır: 5px katı #0074A2;
}
Belirli alanlar nasıl düzenlenir, aynı şeyi belirli alanlarda yapabilirsiniz. Tarayıcınızda bir sınıf veya belirli CSS kimliğini izlemek yerine, tek yapmanız gereken form üreticisine eklemektir. Form üreticisine yerleştirilecek bir etiket oluşturduğunuzda, bir İd, sınıf veya her ikisi.
Bu örnekte özel bir alan adı verilen bir sınıf oluşturmayı seçtim. Aynı (veya benzeri) yaparsanız, aşağıdaki gibi yeni kimliğinizi (veya sınıfınızı) kullanarak bu alanı tek başına düzenleyebileceksiniz.#Özelleştirilmiş alan {
Renk: #ffffff;
Sınır: 2px katı #333333;
}
Ancak kişisel tercihler veya yukarıdan aşağıya görüntülemenin tercih edilebileceği bazı kullanım durumları nedeniyle, aşağıdaki iki seçenekten birini kullanabilirsiniz. Yukarıdan aşağıya ve soldan bir onay kutusu veya radyal düğme görüntülemek için bunu kullanın … WPCF7 liste-öğesi {
Ekran bloğu;
}
Onay kutusunu ve radyal düğmeyi yukarıdan aşağıya ve sağa görüntülemek için bunu kullanın. Ayrıca, bu seçenek için bir etiket yaptığınızda, “Önce Etiket” onay kutusunu seçtiğinizden emin olun … WPCF7-LIST-Item { Ekran: masa sırası;
}
.Wpcf7-List-öğe * { Ekran: masa hücresi;
}
Bonus İpuçları: Yer tutucunun başlığı nasıl silinir ve yer tutucu metin kullanma Bunun yerine bu ipucu, yukarıdaki diğerleri gibi CSS’nin kullanılmasını gerektirmez, ancak kişi formunda kullanılan işaretlemede basit bir ince ayar gerektirmez. Orada hangi bilgilerin olduğunu açıklayan. Sitenizde olan şey buysa, tek yapmanız gereken başlığı form üreticisinde silmek ve aşağıdaki örnekte yaptığım gibi bir yedek metin eklemektir. -posta yer tutucu “e -posta adresi”]
[TextAea-Message Place Tutucu “Benimle Konuş”]
Sonuç, daha az kaoslu daha temiz bir formdur. Sonuç olarak, yukarıdaki örnekte Kontak Form 7 eklentisinin çok uyarlanmış olduğunu umuyorum. Doğru, biraz uğraşma gerektirir, ancak beklenebilecek ücretsiz eklentiler için. Varsayılan olarak stil seçeneklerinin eksikliğinin, eklentilerin neden birçok insan için çok iyi çalıştığını düşünüyorum. Bu nedenle, ondan daha fazla stil isteyen çok fazla değer alan herkesin, yukarıdaki örneklerden birinin versiyonuna girmek için birkaç dakika yapmak için çok fazla değer elde etmesi doğaldır. Kendi 7 iletişim formu stiliniz var mı? Paylaşmak istediğiniz bir favori var mı? Aşağıdaki yorumlarda bize bir çizgi verin! Dmitry Lemon5ky // Shutterstock.com aracılığıyla küçük resim makaleleri
