Blogger Formspree Öneri/Şikayet/Destek Formu Ekleme (2026)

Blogger İçin Şikayet Formu, ziyaretçilerinizin web sitenizdeki içerik hatalarını, teknik sorunları veya genel önerilerini doğrudan size iletebilmeleri için blogunuza eklediğiniz etkileşimli bir iletişim aracıdır.

Ziyaretçiler bu form aracılığıyla adlarını, e-posta adreslerini, şikayet konusunu ve mesajlarını girerek size gönderebilirler.

Nasıl Eklenir?

  1. Blogger Paneli'ne gidin ve Sayfalar bölümünden Yeni Sayfa oluşturun.

  2. Sayfa düzenleyicisinin sol üst köşesindeki kalem simgesine tıklayıp HTML Görünümü'nü seçin.

  3. Aşağıdaki kod bloğunun tamamını kutunun içine yapıştırın.

  4. action kısmındaki EPOSTA_ID_BURAYA bölümünü kendi Formspree ID'nizle değiştirmeyi unutmayın. (Formspree ile ilgili detayları kod'un altına yazdım)

<style>
  /* Formu kapsayan ana alan */
  .blogger-sikayet-container {
    max-width: 650px;
    margin: 30px auto;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    font-family: inherit;
    box-sizing: border-box;
  }

  .blogger-sikayet-container h2 {
    font-size: 1.6rem;
    color: #1e293b;
    margin-bottom: 8px;
    font-weight: 700;
  }

  .blogger-sikayet-container p.form-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    margin-bottom: 24px;
    line-height: 1.5;
  }

  .form-group {
    margin-bottom: 18px;
    text-align: left;
  }

  .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 6px;
  }

  .form-group input, 
  .form-group select, 
  .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.95rem;
    color: #334155;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-sizing: border-box;
    transition: all 0.25s ease;
  }

  /* Odaklanma (Focus) efektleri */
  .form-group input:focus, 
  .form-group select:focus, 
  .form-group textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  }

  .form-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2364748B" viewBox="0 0 16 16"><path d="M8 10.5l-4-4h8l-4 4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
  }

  .form-group textarea {
    resize: vertical;
    min-height: 110px;
  }

  /* Gönder butonu tasarımı */
  .submit-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    background-color: #3b82f6;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }

  .submit-btn:hover {
    background-color: #2563eb;
  }

  .submit-btn:disabled {
    background-color: #94a3b8;
    cursor: not-allowed;
  }

  /* Durum mesajları */
  #formStatus {
    display: none;
    margin-top: 15px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.9rem;
    line-height: 1.4;
  }
</style>

<div class="blogger-sikayet-container">
  <h2>Şikayet ve Öneri Formu</h2>
  <p class="form-subtitle">Lütfen siteyle ilgili şikayetlerinizi veya önerilerinizi aşağıdaki formu doldurarak bize iletin.</p>

  <form id="sikayetForm" action="https://formspree.io/f/EPOSTA_ID_BURAYA" method="POST">
    
    <div class="form-group">
      <label for="adSoyad">Adınız Soyadınız</label>
      <input type="text" id="adSoyad" name="AdSoyad" placeholder="Ad Soyad" required="" />
    </div>

    <div class="form-group">
      <label for="email">E-posta Adresiniz</label>
      <input type="email" id="email" name="Eposta" placeholder="ornek@alanadi.com" required="" />
    </div>

    <div class="form-group">
      <label for="konu">Şikayet / Konu Türü</label>
      <select id="konu" name="Konu" required="">
        <option value="" disabled="" selected="">Konu türünü seçiniz...</option>
        <option value="İçerik Hatası">İçerik Hatası</option>
        <option value="Teknik Sorun">Teknik Sorun</option>
        <option value="Öneri ve Geri Bildirim">Öneri ve Geri Bildirim</option>
        <option value="Diğer">Diğer</option>
      </select>
    </div>

    <div class="form-group">
      <label for="mesaj">Mesajınız</label>
      <textarea id="mesaj" name="Mesaj" placeholder="Şikayet veya önerinizi detaylıca yazın..." required=""></textarea>
    </div>

    <button type="submit" class="submit-btn" id="submitButton">Formu Gönder</button>
    
    <div id="formStatus"></div>
  </form>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const form = document.getElementById("sikayetForm");
    const status = document.getElementById("formStatus");
    const submitButton = document.getElementById("submitButton");

    form.addEventListener("submit", function(event) {
      event.preventDefault();

      submitButton.disabled = true;
      submitButton.innerText = "Gönderiliyor...";
      status.style.display = "none";

      const data = new FormData(form);

      fetch(event.target.action, {
        method: form.method,
        body: data,
        headers: {
          'Accept': 'application/json'
        }
      }).then(response => {
        if (response.ok) {
          status.style.display = "block";
          status.style.backgroundColor = "#ecfdf5";
          status.style.color = "#059669";
          status.style.border = "1px solid #a7f3d0";
          status.innerHTML = "Mesajınız başarıyla iletildi. Teşekkür ederiz!";
          form.reset();
        } else {
          response.json().then(data => {
            if (Object.hasOwn(data, 'errors')) {
              status.style.display = "block";
              status.style.backgroundColor = "#fef2f2";
              status.style.color = "#dc2626";
              status.style.border = "1px solid #fca5a5";
              status.innerHTML = data["errors"].map(error => error["message"]).join(", ");
            } else {
              status.style.display = "block";
              status.style.backgroundColor = "#fef2f2";
              status.style.color = "#dc2626";
              status.style.border = "1px solid #fca5a5";
              status.innerHTML = "Beklenmedik bir hata oluştu. Lütfen tekrar deneyin.";
            }
          });
        }
      }).catch(error => {
        status.style.display = "block";
        status.style.backgroundColor = "#fef2f2";
        status.style.color = "#dc2626";
        status.style.border = "1px solid #fca5a5";
        status.innerHTML = "Ağ hatası: İnternet bağlantınızı kontrol edin ve tekrar deneyin.";
      }).finally(() => {
        submitButton.disabled = false;
        submitButton.innerText = "Formu Gönder";
      });
    });
  });
</script>


Formspree, HTML formlarınızı herhangi bir arka plan (backend) kodu yazmadan doğrudan e-postanıza bağlamanızı sağlayan bulut tabanlı bir form yönetim servisidir.

Formunuza gelen mesajları alır, doğrular, spam koruması (CAPTCHA) sağlar ve belirlediğiniz e-posta adresine güvenli bir şekilde iletir. Ücretsiz sürümü ayda 50 forma kadar ücretsiz mesaj alma imkanı sunar.

Formspree ID'si Nasıl Alınır?

Formspree'yi kullanıp kendi benzersiz form ID'nizi almak için aşağıdaki adımları sırasıyla uygulayabilirsiniz:

  1. Hesap Oluşturun:

    • Formspree web sitesine gidin ve ücretsiz bir hesap oluşturun.

  2. Yeni Bir Form Oluşturun:

    • Panele giriş yaptıktan sonra sağ üstteki "New Form" (Yeni Form) butonuna tıklayın.

    • Formunuza bir isim verin (Örn: Sikayet Formu).

  3. E-posta Adresinizi Onaylayın:

    • Form ayarlarında ve hesap kurulumunda size gelen aktivasyon veya doğrulama adımlarını tamamlayın.

  4. Form ID'nizi Kopyalayın:

    • Oluşturduğunuz formun "Integration" (Entegrasyon) sekmesine gidin.

    • Burada size aşağıdaki gibi bir uç nokta (endpoint) URL'si verilir: https://formspree.io/f/xbjvykmz (Bu sadece bir örnektir)

    • Bu URL'nin sonundaki harf ve rakamlardan oluşan kısım (örn: xbjvykmz) sizin Form ID'nizdir.

Blogger Koduna Nasıl Entegre Edilir?

Blogger'da oluşturduğunuz sayfadaki form kodunda yer alan action kısmını şu şekilde düzenlemeniz yeterlidir:

<form id="sikayetForm" action="https://formspree.io/f/EPOSTA_ID_BURAYA" method="POST">

Örnek: Formspree size https://formspree.io/f/xbjvykmz linkini verdiyse, kodunuzdaki ilgili alanı action="https://formspree.io/f/xbjvykmz" şeklinde güncellemelisiniz. Formu kaydedip test ettikten sonra ilk mesajınızda Formspree sizden e-posta onayı isteyecektir.

formspree, sikayet, form

Hiç yorum yok:

Yorum Gönder