Html & Css İle Özelleştirilebilir Bir Dinamik Fiyat Teklifi Formu Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce geliştirme ortamınızın hazır olması gerekir. Modern bir web projesi için herhangi bir karmaşık kurulum gerekmez; ancak aşağıdaki araçların elinizin altında bulunması süreci hızlandıracaktır:

• Modern Bir Kod Editörü: VS Code veya benzeri bir editör, eklenti desteği ile işinizi kolaylaştırır.
• Tarayıcı Geliştirici Araçları: Chrome veya Firefox'un "İncele" (Inspect) paneli, CSS düzenlemelerinizi anlık görmenizi sağlar.
• Temel Bilgi: HTML5 etiket yapısı ve CSS Flexbox/Grid yerleşim modelleri hakkında temel düzeyde bilgi.

Kodlarımızı yazarken, tarayıcı uyumluluğunu korumak adına standart HTML5 yapısını kullanacağız. CSS tarafında ise modern "Custom Properties" (CSS Değişkenleri) kullanarak, teklif formunuzun renklerini ve stilini tek bir noktadan yönetebilmenizi sağlayacağız.

Adım 1: HTML Yapısını Oluşturma

Dinamik bir formun temelinde, verilerin anlamlı bir şekilde gruplandığı bir HTML iskeleti yatar. Formumuzda hizmet türü, paket seçimi ve ek özellikler için gerekli girdileri tanımlayacağız.

  

    Hizmet Türü:
    
      Web Tasarım
      Mobil Uygulama
    
  
  

    
       SEO Optimizasyonu (+50 TL)
    
  
  

    Toplam Tutar: 0 TL
  

Bu yapıda, her bir girdiye mantıksal değerler (value) atadık. Bu değerler, ilerleyen aşamalarda JavaScript ile hesaplama yaparken kullanacağımız sayısal verileri temsil eder.

Adım 2: CSS ile Görsel Tasarım ve Özelleştirme

Formun kullanıcı dostu olması için estetik bir görünüm şarttır. CSS değişkenlerini kullanarak, temanızı markanıza göre kolayca değiştirebilirsiniz.

:root {
  --ana-renk: #2563eb;
  --yazi-rengi: #1e293b;
}

#teklifFormu {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-family: sans-serif;
}

.form-grup { margin-bottom: 15px; }
.toplam-gosterge { font-weight: bold; color: var(--ana-renk); }

Bu CSS bloğu, formun merkezlenmesini ve okunabilirliğini sağlar. :root seçicisi içerisindeki değişkenleri değiştirerek tüm formun renk paletini saniyeler içinde güncelleyebilirsiniz.

Adım 3: JavaScript ile Dinamik Hesaplama Mantığı

Formun "dinamik" olmasını sağlayan kısım, kullanıcı seçimlerini dinleyen JavaScript fonksiyonlarıdır. Bu kod, formdaki her değişikliği algılar ve toplam fiyatı anlık olarak günceller.

const form = document.getElementById('teklifFormu');
const toplamGosterge = document.getElementById('toplamFiyat');

form.addEventListener('change', () => {
  let toplam = 0;
  // Seçilen hizmet türünü al
  toplam += parseInt(document.getElementById('hizmetTuru').value);
  
  // Seçilen checkbox'ları kontrol et
  const ekler = document.querySelectorAll('input[name="ekOzellik"]:checked');
  ekler.forEach(ek => {
    toplam += parseInt(ek.value);
  });
  
  toplamGosterge.textContent = toplam;
});

Burada addEventListener kullanarak form üzerindeki her türlü etkileşimi takip ediyoruz. parseInt fonksiyonu ile string değerleri sayıya çevirerek matematiksel toplama işlemini gerçekleştiriyoruz.

Adım 4: Güvenlik ve Doğrulama Stratejileri

Form verilerini işlerken güvenlik en önemli konudur. İstemci tarafında (JavaScript) yaptığınız hesaplamalar sadece görsel amaçlıdır; gerçek fiyatlandırma ve veri işleme mutlaka sunucu tarafında (Backend) doğrulanmalıdır.

Kritik Güvenlik Uyarısı: İstemci tarafındaki fiyat hesaplamalarına asla güvenmeyin. Kullanıcılar tarayıcı konsolunu kullanarak fiyatları manipüle edebilir. Sunucu tarafında (PHP, Node.js vb.) gelen verileri mutlaka tekrar hesaplayın ve XSS (Cross-Site Scripting) saldırılarına karşı verileri sanitize edin.

Karşılaştırmalı Yöntemler Tablosu

Adım 5: Erişilebilirlik ve Mobil Uyumluluk

Formunuzun her cihazda düzgün çalışması için CSS'de media queries kullanmalısınız. Ayrıca, görme engelli kullanıcılar için aria-label gibi etiketleri ihmal etmeyin.

@media (max-width: 600px) {
  #teklifFormu { width: 90%; }
}

Bu küçük kod parçası, mobil cihazlarda formun ekranı tamamen kaplamasını engelleyerek daha iyi bir kullanıcı deneyimi sunar.

Sıkça Sorulan Sorular

Form hesaplamaları neden sunucuda doğrulanmalı?

JavaScript kodu tarayıcıda çalışır ve kullanıcı tarafından değiştirilebilir. Gerçek bir ödeme veya teklif süreci için sunucu tarafında doğrulama yapmak, kötü niyetli manipülasyonları engeller.

CSS değişkenleri (Custom Properties) neden tercih edilmeli?

CSS değişkenleri, projenin genelinde tutarlı bir tasarım dili oluşturmanızı sağlar. Tek bir yerden renk değişikliği yaparak tüm sayfayı güncelleyebilirsiniz.

Bu formu veritabanına nasıl bağlarım?

Formunuzu bir yapısına dönüştürerek verileri sunucuya gönderebilirsiniz. Sunucu tarafında verileri temizleyerek veritabanına kaydedebilirsiniz.

Erişilebilirlik için neye dikkat etmeliyim?

Form elemanlarının her birinin bir label etiketi ile eşleştiğinden emin olun. Bu, ekran okuyucuların formu doğru anlamasını sağlar.

Daha fazla özellik eklemek istersem ne yapmalıyım?

JavaScript'te input olaylarını dinleyerek daha karmaşık mantıklar (indirim kodları, miktar çarpanları vb.) ekleyebilirsiniz.

İleri Düzey Senaryo: İndirim Kodları ve Dinamik Çarpanlar

Formunuzun işlevselliğini bir üst seviyeye taşımak için kullanıcıdan alınan bir "İndirim Kodu" girdisini hesaplama mantığına entegre edebilirsiniz. Bu, müşteriye özel kampanyalar sunmanıza olanak tanır. Aşağıdaki örnekte, belirli bir kod girildiğinde toplam tutar üzerinden yüzde 10 indirim uygulayan fonksiyonel bir yapı kurgulanmıştır.

// İndirim kodu mantığı
const applyDiscount = (total, code) => {
    const validCodes = { "OZEL10": 0.10, "YENI20": 0.20 };
    if (validCodes[code]) {
        return total - (total * validCodes[code]);
    }
    return total;
};

// Hesaplama fonksiyonuna entegrasyon
function calculateFinalPrice() {
    let basePrice = parseFloat(document.getElementById('basePrice').value);
    let discountCode = document.getElementById('discountInput').value;
    let finalPrice = applyDiscount(basePrice, discountCode);
    
    document.getElementById('totalDisplay').innerText = finalPrice.toFixed(2) + ' TL';
}

Performans Optimizasyonu ve Hata Ayıklama

Dinamik formlarda kullanıcı her tuşa bastığında hesaplama yapılması (event listener kullanımı), karmaşık formlarda tarayıcıyı yorabilir. Bu durumu engellemek için "Debounce" yöntemini kullanmanız önerilir. Ayrıca, hatalı girişleri yakalamak için tarayıcı konsolunu değil, kullanıcıya görsel geri bildirim sağlayan hata mesajlarını tercih etmelisiniz.

Debounce Tekniği ile İşlem Yükünü Azaltma

Debounce, kullanıcının yazma işlemi bitene kadar hesaplama fonksiyonunun tetiklenmesini geciktirir. Bu, özellikle büyük formlarda performans artışı sağlar.

function debounce(func, delay) {
    let timeout;
    return function(...args) {
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(this, args), delay);
    };
}

const optimizedCalculation = debounce(calculateFinalPrice, 300);
document.getElementById('formContainer').addEventListener('input', optimizedCalculation);

Hata Ayıklama (Debugging) İpuçları

• Konsol Logları: Hesaplama sırasında değişkenlerin aldığı değerleri console.log() ile takip edin.
• Network Tabı: Form verilerini bir API'ye gönderiyorsanız, Chrome Geliştirici Araçları'ndaki "Network" sekmesinden gönderilen JSON verisinin doğruluğunu kontrol edin.
• Tip Kontrolü: JavaScript'te matematiksel işlemler yaparken typeof kontrolü yaparak verilerin String değil Number olduğundan emin olun.

Profesyonel İpucu: Kullanıcı formdan ayrılmadan önce verilerin kaybolmaması için localStorage kullanarak verileri tarayıcı hafızasında geçici olarak saklayabilirsiniz. Böylece sayfa yenilense bile teklif tutarı korunur.

Sonuç

Html & Css ile özelleştirilebilir bir dinamik fiyat teklifi formu oluşturmak, web geliştirme becerilerinizi sergilemek için harika bir yoldur. Bu rehberde, formun iskeletinden başlayarak dinamik hesaplama mantığına ve güvenlik önlemlerine kadar kapsamlı bir yol izledik. Bir sonraki adım olarak, bu formu bir e-posta gönderim servisi veya veritabanı ile entegre ederek tekliflerin otomatik olarak size ulaşmasını sağlayabilirsiniz.

Sorumluluk Reddi: Bu makalede paylaşılan kodlar eğitim amaçlıdır. Üretim ortamında (Production) kullanmadan önce mutlaka güvenlik testlerini yapın, girdileri doğrulayın ve kullanıcı verilerinin gizliliğine yönelik gerekli KVKK uyumluluklarını sağlayın.