HTML5 Düğme öğesini Kişi Formu olarak kullanın 7 Gönder
Bir WordPress web sitesine sahip olmak, ister bülten, iletişim sayfası, anket veya başka şeyler için olsun, büyük olasılıkla bir yerde bir iletişim formuna sahip olmanız gerektiği anlamına gelir. WordPress gibi CMS ile bir iletişim formu hazırlamak oldukça basit bir görevdir. Yani, kullanabileceğiniz birçok iletişim formu eklentisi vardır ve iletişim form 7 en popüler olanlardan biridir. Eklenti İletişim Formu 7’nin yapabileceğinin daha net bir resmine sahip olabilmeniz için, Themeforest’te birinci sınıf bir tema ile gelen bu eklenti ile oluşturulan iletişim formlarına bazı örnekler:
Gürültülü iletişim formu
Sekko İletişim Formu
Gluck İletişim Formu
WordPress’teki her türlü iletişim formunu kolaylaştırmakla kalmaz, aynı zamanda sürecin kendisi de iyi belgelenmiştir. Bu yüzden sadece noktaya geliyoruz. Bu eklentiyi kullanarak, süreci büyük ölçüde hızlandıracak özel formlar ve arka uç işlevselliği yapmaktan rahatsız olmanıza gerek yoktur. Ancak, sorunlu bulabileceğiniz şey, = “gönder” type type’in giriş öğesi olan Kontak Formu 7’dir. Standart Giriş Gönder düğmesi ile bile iyi bir çalışma formuna sahip olacaksınız. Ancak, bu öğeye ek stiller eklemek istiyorsanız sorunlar ortaya çıkar. Bildiğiniz gibi, CSS açısından belirli sınırlar vardır, çünkü burada sahte öğeler kullanamazsınız, örneğin: daha önce veya: bundan sonra bazı alt seri hatları, ikonik yazı tipi simgeleri veya gelecekteki animasyon için herhangi bir şey eklemek için yararlı olabilir. Formunuz için iyi bir son dokunuş.
Tabii ki, sadece Gönder düğmesini özel bir sınıfla birkaç div ile sararak olağanüstü bir animasyon elde etmek mümkündür, ancak girişi düğmeye değiştirerek çok daha büyük bir kontrole sahip olabilirsiniz. HTML5 düğmesi öğesini iletişim formunuz için Gönder düğmesi olarak nasıl kullanabileceğinize bakalım. Değişiklikten önce, Gönder düğmesi şöyle görünecektir. Tüm değişiklikler Functions.php dosyasında yapılmalıdır. Bu öğretici uğruna, tüm kodlarımızı yirmi on altı çocuk temasına yerleştireceğiz.
İlk olarak, Delfault 7 Kontak Form etiketini silmemiz gerekir. Bunu bu basit kod satırıyla yapabilirsiniz:
/*Varsayılan gönder etiketini silin*/
Remove_action (‘wpcf7_init’, ‘wpcf7_add_form_tag_submit’);
Adım 2
İkincisi, düğmeye özel işaretlememizi tutacak işlevimizle eylem eklememiz gerekiyor. Bu başka bir basit çizgi:
/*İşaretleme düğmemizi işleyen işlevlerle eylem ekleyin*/
Add_action (‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
Aşama 3
Ardından, düğmenin kontrol işlevini çağıracak etiketi ekliyoruz:
/*Gönder düğmesi etiketini ekleyin*/
if (! function_exists (‘TwentySixteen_Child_Cf7_Button’))) {
İşlev yirmi altı_anak_cf7_button () {
wpcf7_add_form_tag (‘gönder’, ‘yirmi altı sexteen_anak_cf7_button_handler’);
}
}
Adım 4
Son olarak, işleyiciye işaretleme eklemeliyiz:
/*İşleyicideki İşaretleme Çıkışı düğmesi*/
if (! function_exists (‘TwentySixteen_Child_Cf7_Button_Handler’) {
İşlev Yirmi altı_anak_cf7_button_handler ($ tag) {
$ tag = yeni wpcf7_formtag ($ tag); $ class = wpcf7_form_controls_class ($ tag-> type);
$ Att = array ();
$ atts [‘class’] = $ tag-> get_class_option ($ class);
$ atts [‘sınıf’]. = ‘yirmi altı-child-custom-btn’;
$ atts [‘id’] = $ tag-> get_id_option ();
$ atts [‘tabindex’] = $ tag-> get_option (‘tabindex’, ‘int’, true);
$ value = isset ($ tag-> değer [0])? $ tag-> değer [0]: ”;
if (boş ($ değer)) {
$ value = ESC_html __ (‘Bize Ulaşın’, ‘Yirmi -Sixteen’);
}
$ atts [‘type’] = ‘gönder’;
$ atts = wpcf7_format_atts ($ atts);
$ html = sprintf (‘ %2 $ s’, $ atts, $ değeri);
geri $ html;
}
}
İşleyici işlevi en önemli kısımdır. Baskı sınıflarına ve varsayılan kimliklere ek olarak, içine özel CSS sınıfları da ekleyeceğiz. $ HTML değişkenimiz olduğu son bölümde, Chevron Fontawesesome simgesiyle İşaretleme düğmesini koyduk. Temanızda bu fontwesome yazı tipine sahip olmanız gerektiğini unutmayın. Sahip değilseniz, içerecek bir eklenti bulduğunuzdan emin olun.
Şimdi, değiştirilen değiştirme düğmemiz şöyle görünecek:
Gördüğünüz gibi, sayfanızı Chrome Web Müfettişi ile kontrol ettiğinizde, sayfa işleyiciye ayarladığımızla aynı işaretlemeyi içerir.
Ve bu tam kod:
/*İşaretleme düğmemizi işleyen işlevlerle eylem ekleyin*/
Add_action (‘wpcf7_init’, ‘twentysixteen_child_cf7_button’);
/*Gönder düğmesi etiketini ekleyin*/
if (! function_exists (‘TwentySixteen_Child_Cf7_Button’))) {
İşlev yirmi altı_anak_cf7_button () {
wpcf7_add_form_tag (‘gönder’, ‘yirmi altı sexteen_anak_cf7_button_handler’);
}
}
/*İşleyicideki İşaretleme Çıkışı düğmesi*/
if (! function_exists (‘TwentySixteen_Child_Cf7_Button_Handler’) {
İşlev Yirmi altı_anak_cf7_button_handler ($ tag) {
$ tag = wpcf7_formtag new ($ tag);
$ class = wpcf7_form_controls_class ($ tag-> tür);
$ Att = array ();
$ atts [‘class’] = $ tag-> get_class_option ($ class);
$ atts [‘sınıf’]. = ‘yirmi altı-child-custom-btn’;
$ atts [‘id’] = $ tag-> get_id_option ();
$ atts [‘tabindex’] = $ tag-> get_option (‘tabindex’, ‘int’, true);
$ value = isset ($ tag-> değer [0])? $ tag-> değer [0]: ”;
if (boş ($ değer)) {
$ value = ESC_html __ (‘gönder’, ‘yirmi -üstte’);
}
$ atts [‘type’] = ‘gönder’;
$ atts = wpcf7_format_atts ($ atts);
$ html = sprintf (‘ %2 $ s’, $ atts, $ değeri);
geri $ html;
}
}
Adım 5
Orada olan her şeyle, düğme stilini istediğiniz gibi ayarlamak için ek sınıflar ve işaretlemeler kullanabilirsiniz. Ayrıca, aşağıdaki CSS kodu ile basit bir Hover animasyonu ekleyeceğiz.
button.twentySixteen-custom-btn {
Rulman: 15px 45px;
-Webkit-Transition: -Webkit-Background .2s kolaylık;
-Moz-transmition: -moz-background .2s kolaylık;
Geçiş: arka plan kolaylığı .2;
}
Button.twentySixteen-Child-Custom-btn .twentysixteen-custom-btn-text {
Marj-sağ: 7px;
Yazı tipi boyutu: 15px;
}
button.twentySixteen-custom-btn .twentySixteen-custom-icon {
Yazı tipi boyutu: 12px;
Pozisyon: göreceli;
Ekran: Hat bloklarında;
Dikey-High: Orta;
Çizgi Yüksekliği: Kalıtım; -Webkit-Transition: -Webkit-Transform .2s kolaylık;
-Moz-dönüşüm: -moz-transform .2s kolay çıkış;
Geçiş: Dönüşüm .2S kolaylığı;
}
Button.twentySixteen-Child-Custom-Btn: Hover .TwentySixteen-Child-Custom-icon {
-WebKit-Transform: Translate3D (3px, 0.0);
-Moz-Transform: Translate3D (3px, 0.0);
Değişim: Tercüman3D (3px, 0.0);
}
CSS, çocuk temalarının CSS dosyasına eklenebilir veya WordPress arka uç> Görünüm> Özelleştir> Ek CSS alanı eklenebilir ve bununla birlikte yüzerken iyi görünen hareketli bir ok animasyonunuz olacaktır.
Çözüm
HTML5 düğmesi öğesi ile Kontak Formu düğmesini 7 bu şekilde değiştirirsiniz. Umarım talimatlarımız sizin için yararlı olacaktır. Eğer öyleyse, lütfen kullanabilen diğer insanlarla paylaşın.
Bu makalenin yararlı olduğunu umuyoruz. Eğer isterseniz, bu makalelerin bazılarını okumaktan çekinmeyin!
Çocuk Teması – Basit Açıklama
WordPress’te seçeneklerin özelleştirilmesi
