03.01.2023
Bu yazıda, herhangi bir eklenti veya api kullanmadan iletişim formuna il ilçe seçeneği nasıl eklenir, ona yer vereceğiz.
Bu kod parçasını hem HTML ve JS içerisinde, hem de Contact Form 7 gibi eklentilerde kullanabilirsiniz. Ben bu örnekte formu Contact Form 7 eklentisi ile hazırladım. Formun body’sinin syntax’ini de eklentidekine göre yazdım.
İlk olarak form alanlarında yer alacak seçenekleri oluşturuyoruz.
<label> Ad [text* first-name] </label>
<label> Soyad [text* last-name] </label>
<label> İl [select* city id:form-field-Iller "Seçiniz" ] </label>
<label> İlçe [select* district id:form-field-Ilceler "Seçiniz" ] </label>
Contact Form 7 eklentisi üzerinden bir form oluştururken köşeli parantez içinde [select] kullanarak ile seçim alanı oluşturabiliyorsunuz. ‘id:’ kullanarak formun sayfa içinde alacağı id değerini belirliyorsunuz. Çift tırnak işareti içerisinde o alandaki metni belirtiyorsunuz. Label kullanımı için de form elementini direkt olarak <label> etiketi içine yazmak yetiyor.
Görüleceği gibi, il ve ilçe alanlarının id’lerini form-field-Iller ve form-field-Ilceler olarak belirttik.
Bir sonraki adımda, forma Jquery kütüphanesini ve JSON kodlarını ekleyeceğiz. Bunu yaparken kodları Contact Form 7’deki form alanını oluşturduğunuz yerin başına da koyabilirsiniz, formu oluşturduğunuz PHP dosyasında <script> şeklinde de yazabilirsiniz. Ben bu örnekte ikinci seçeneği kullandım, yani kodları PHP dosyası içerisinde oluşturdum.
İlk önce script etiketi üzerinden Jquery kütüphanesini çağırıyoruz.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
İkinci adımda, seçeneklerin derleneceği JSON’u ekliyoruz. Bu şekilde, ileride bir değişiklik yapılması gerekmesi durumunda buradan düzenleme yapılması yeterli olacak.
<script>
var data = [
{
"il": "Ankara",
"ilceleri": [
"Beypazarı",
"Çamlıdere",
"Çankaya",
"Kalecik",
"Kızılcahamam",
"Nallıhan",
"Polatlı"
]
},
{
"il": "İstanbul",
"ilceleri": [
"Adalar",
"Bakırköy",
"Beşiktaş",
"Beykoz",
"Beyoğlu",
"Eyüp",
"Kadıköy",
"Şişli"
]
},
{
"il": "İzmir",
"ilceleri": [
"Bergama",
"Bornova",
"Çeşme",
"Foça",
"Karaburun",
"Karşıyaka",
"Seferihisar",
"Selçuk"
]
}
]
</script>
Son olarak da formdaki değişiklikleri düzenlediğimiz JS fonksiyonunu oluşturuyoruz.
<script>
function search(nameKey, myArray){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].il == nameKey) {
return myArray[i];
}
}
}
$( document ).ready(function() {
$.each(data, function( index, value ) {
$('#form-field-Iller').append($('<option>', {
value: value.il,
text: value.il
}));
});
$("#form-field-Iller").change(function(){
var valueSelected = this.value;
if($('#form-field-Iller').val() != null) {
$('#form-field-Ilceler').html('');
$('#form-field-Ilceler').append($('<option>', {
value: 0,
text: 'Seçiniz'
}));
$('#form-field-Ilceler').prop("disabled", false);
var resultObject = search($('#form-field-Iller').val(), data);
$.each(resultObject.ilceleri, function( index, value ) {
$('#form-field-Ilceler').append($('<option>', {
value: value,
text: value
}));
});
return false;
}
$('#form-field-Ilceler').prop("disabled", true);
});
});
$("#form-field-Ilceler").change(function() {
var IlceSelected = this.value;
});
</script>
Oluşturduğumuz fonksiyonda önce tüm ‘il’ değerlerini bir array içinde oluşturduk. Daha sonra ikinci fonksiyonda #form-field-Iller‘i çağırdık, buradaki value ve text‘i parametreler üzerinden tanımladık. Üçüncü fonksiyonda change event’i kullanarak değişen seçeneğin value’sunu almasını söyledik. ‘$(‘#form-field-Ilceler’).append($(‘<option>’ { text: ‘Seçiniz’ } diyerek, formda henüz bir seçim yapılmamışken metin olarak ‘Seçiniz’ gözükeceğini, yapılan seçimden sonra o değer ile değişeceğini belirttik. Bir diğer önemli bir detay olarak, ‘ $(‘#form-field-Ilceler’).prop(“disabled”, true);’ koduyla, il alanında bir value yokken bu alan için disabled, true dedik, yani seçilemeyeceğini belirttik. Bir il seçilmesi, yani ilk alandan bir value gelmesi halinde buranın disabled, false olarak değişeceğini belirttik. Bu şekilde kullanıcılar forma girdiklerinde ilçe alanı kapalı olacak ve il alanında seçim yapmadan bir ilçe seçemeyecekler. Son fonksiyonda da, ‘il’ alanında yaptığımız gibi yine change event’i üzerinden ‘#form-field-Ilceler’ alanındaki değişen value’yu almasını söyledik.
Türkiye’deki tüm il ve ilçeleri kapsayan kodu Github repo’mda bulabilirsiniz.
Perfist Blog
Benzer Yazılar
Universal Analytics’ten Google Analytics 4’e geçişle beraber bazı çözülmesi gereken sorunlarınız olabilir. Bu sorunlardan biri de ‘unassigned’ trafik. Raporlarda “unassigned” / (not set) olarak görünen boyutlar, analiz ve optimize etme olanağınızı olumsuz etkileyen bir faktör olarak karşımıza çıkıyor. GA4 raporlarınızdaki “unassigned” trafiğin nedenlerini ve nasıl azaltalabileceği gibi konulara değineceğiz. Bu sayede web sitenizin ziyaretçi trafik […]
Devamını Oku
Beginner Level Web/App AnalitiğiGoogle Cloud’un BigQuery veri ambarı Facebook Reklamlarından otomatik veri aktarımını desteklediğini bu yılın başında açıklamıştı. Önizleme aşamasında olan bu özellik, veri yükleme işlerinin planlanmasına olanak tanıyarak analiz ve içgörüler geliştirmek için alternatif bir yol sunuyor. Bu entegrasyon sayesinde üçüncü taraf araçlara veya manuel kod çalışmasına olan ihtiyacınız ortadan kalkıyor. Bu entegrasyon özel raporların desteklenmediği sabit […]
Devamını Oku
Mid Level Web/App AnalitiğiGoogle Analytics 4’ün app ve web verilerini birleştiriyor olmasıyla uygulama analizleri daha kolay takip edilebilir hâle geldi. Firebase Analytics, iOS veya Android uygulamanızın takibini GA4 ile kolaylıkla yapabilmenize olanak tanıyor. Mobil uygulama takibi için birçok farklı tool olmasıyla beraber aynı mülk içinde hem web hem de app verilerini görebiliyor olmak daha doğru analizler ve stratejiler […]
Devamını Oku
Mid Level Web/App Analitiğiİşletmeler, analitik ve pazarlama çerezlerinden mümkün olduğunca fazla veri kullanmak ister. Ancak bu verileri toplayabilmesi ve kullanabilmesi için KVKK/GDPR gibi kanunlara uyum sağlaması gerekir. Google, Consent Mode’nu kullanıma açarak çerezlerin onay düzeyine göre kullanılabilmesine yardımcı olur. Yani Consent Mode ile kullanıcıların gizlilik tercihleri dikkate alınarak ilgili platformlara aktarılması sağlanır. Çerez türlerini kısaca açıklamak gerekirse: Zorunlu […]
Devamını Oku
Mid Level Web/App Analitiği