Web Sitesine İletişim Formu Nasıl Eklenir? HTML Kodu, WordPress ve Shopify

Web sitenizde bir iletişim formu bulundurmak, kitlenizle sağlam ilişkiler kurmanın iyi bir yoludur. Ziyaretçi geri bildirim vermek ya da ürün veya hizmetleriniz hakkında soru sormak istediğinde size pratik bir yoldan ulaşır. İletişim formu kullanarak e-posta adresinizi dolandırıcılardan da koruyabilir ve tüm soruların tek bir yerde toplandığından emin olabilirsiniz.

Ancak web sitenize nasıl bir iletişim formu ekleyebileceğiniz konusunda kararsız olabilirsiniz. İyi haber şu ki seçeneğiniz bol. Ekim 2026 itibarıyla çalışan yöntemleri tek tek anlatıyoruz: form backend'iyle düz HTML (kendi yazıp test ettiğimiz kodla), WordPress, Shopify, Wix, Squarespace ve gömülü bir form oluşturucu. Ardından her formun sayfaya eklendikten sonra ihtiyaç duyduğu üç şeye geçiyoruz: gönderimlerin gideceği yer, spam koruması ve KVKK'ya uygun bir bilgilendirme.

Siteniz için hangi iletişim formu yöntemi uygun?

Cevap, sitenizin nerede çalıştığına bağlı. Site oluşturucularda açıp kullanabileceğiniz hazır bir iletişim formu vardır. Elle kodlanmış bir sitede ise HTML formuna ve onu karşılayacak bir backend'e ihtiyacınız olur.

HTML ile iletişim formu ekleme

HTML iletişim formu, ziyaretçinin adını, e-posta adresini ve mesajını toplayıp action niteliğindeki URL'ye gönderen bir koddur. HTML'in e-posta gönderme yeteneği yoktur; bu yüzden o URL bunu yapabilen bir şeye ait olmalı: kendi sunucunuzdaki bir betik ya da form endpoint'i de denen barındırılan bir form backend'i. Backend gönderimi saklar, size e-postayla iletir ve ziyaretçiye bir teşekkür sayfası gösterir.

HTML ile bir iletişim formu oluşturmak istiyorsanız, temel kodlama bilgisine sahip olmanız gerekir. Basit HTML iletişim formları oldukça temel olmalarına rağmen, bu yöntemi kullanmayı düşünebilirsiniz; her alanı siz belirlersiniz ve sayfa hafif kalır.

action="mailto:siz@ornek.com" yazmak e-posta sorununu çözmez. Tarayıcı mesajı ziyaretçinin kendi e-posta uygulamasına aktarır, o da kuruluysa; pek çok mesaj cihazdan hiç çıkmaz. Pek çok kişi buna takılıyor: Ekim 2026'da Google'da "html contact form" aramasının üst sonuçlarından biri, "Making a Functional HTML Contact Form" başlıklı bir Reddit başlığıydı.

Web sitenize bir iletişim formu eklemek için form endpoint/form backend aracını kullanabilirsiniz. Bu rehberde, yazının önceki sürümünde olduğu gibi bunu Formcarry ile nasıl yapacağınızı açıklayacağız. Belgeleri günceldir (Ekim 2026'da kontrol edildi). Formspree ve Web3Forms da kendi endpoint URL'leri ve alan adlarıyla aynı şekilde çalışır. Aşağıdaki kodu kendimiz yazdık ve 10 Ekim 2026'da Chromium 153 ile Safari'nin motoru WebKit 26.6'da test ettik: her motorda 28 kontrolün tamamı geçti; buna axe-core 4.14'te sıfır erişilebilirlik ihlali, yalnızca klavyeyle kullanım, 375px telefon ekranı ve JavaScript kapalıyken gönderim dahil.

HTML kullanarak iletişim formu eklemenin yolu şöyle. Aşağıdaki kodu web sitenize eklediğinizde, biri formu hatalı gönderdiğinde sonuç böyle görünecektir:

Adım 1: Form oluşturun ve endpoint'ini kopyalayın

Not: Bu yöntem için HTML kodlarına biraz aşina olmanız gerekir, ama aşağıdaki her bloğu olduğu gibi kopyalayabilirsiniz.

Formcarry'ye kaydolup Create Form butonuna tıklayarak bir form oluşturabilirsiniz. Bu şekilde form backend URL'inizi alabilirsiniz. Formunuzu oluşturun, ad verin ve kaydedin; adı yalnızca siz görürsünüz. Ardından formun Setup sekmesini açın ve https://formcarry.com/s/AbC123xyz gibi görünen form endpoint'inizi kopyalayın. Alıcıları değiştirene kadar bildirim e-postaları hesabınızın adresine gider.

Adım 2: HTML formunu ekleyin

Kod girişinizi işlemek için <form> etiketini kullanmanız gerekiyor ve iletişim formunuzun kodu şöyle görünebilir. Bu, ad, e-posta ve mesaj alanlarına ve bir gönder butonuna sahip temel bir iletişim formu sağlar. Form endpoint'inizi kopyalayıp form kodunuzun action kısmına yapıştırın: aşağıdaki kodda action içindeki YOUR_FORM_ID kısmını endpoint URL'nizin sonuyla değiştirin. Sonra kodu formun görünmesini istediğiniz yere yapıştırın.

<form id="contact-form" class="contact-form" action="https://formcarry.com/s/YOUR_FORM_ID" method="POST">
  <div class="field">
    <label for="cf-name">Your name</label>
    <input id="cf-name" name="name" type="text" autocomplete="name" required aria-describedby="cf-name-error">
    <p id="cf-name-error" class="field-error"></p>
  </div>

  <div class="field">
    <label for="cf-email">Email address</label>
    <input id="cf-email" name="email" type="email" autocomplete="email" required aria-describedby="cf-email-error">
    <p id="cf-email-error" class="field-error"></p>
  </div>

  <div class="field">
    <label for="cf-message">Message</label>
    <textarea id="cf-message" name="message" rows="6" maxlength="5000" required aria-describedby="cf-message-error"></textarea>
    <p id="cf-message-error" class="field-error"></p>
  </div>

  <!-- Honeypot: people never see it, bots fill it in, and the backend marks those submissions as spam -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" hidden>

  <p class="form-note">We use your details only to reply to this message. Read our <a href="/privacy-policy">privacy policy</a>.</p>

  <button type="submit">Send message</button>
  <p id="cf-status" class="form-status" role="status"></p>
</form>

Ardından, iletişim formunuzun verilerini istediğiniz alanları ekleyerek yapılandırırsınız. Bu formdaki her tercihin bir nedeni var:

• Her alanın bir name niteliği var. Alanlarınızı isim niteliklerini kullanarak adlandırırsınız. Tarayıcı name olmayan bir alanı göndermez, dolayısıyla backend'e hiç ulaşmaz. Bu yazının eski sürümündeki ilk Formcarry örneğinde bu hata vardı.
• method="POST". Bu olmadan tarayıcı GET isteği gönderir ve Formcarry "GET is not allowed" sayfasıyla yanıt verir.
• E-posta alanının adı email. Formcarry bunu bildiriminizin yanıt adresi olarak kullanır; Yanıtla'ya basıp doğrudan cevap verebilirsiniz.
• Her alanın görünür bir <label> etiketi var ve for ile id üzerinden alana bağlı. W3C'nin form eğitimi (Mart 2026'da güncellendi) etiketler, talimatlar ve hata ile başarı durumları için net mesajlar istiyor. Yazarken kaybolan bir placeholder etiket yerine geçmez.
• autocomplete, tarayıcının ad ve e-posta adresini doldurmasını sağlar.
• _gotcha, Formcarry'nin bal küpü (honeypot) alanıdır. Ayrıntısı spam bölümünde.
• Son paragraftaki role="status", betik oraya "Sending" ve "Thank you" yazdığında ekran okuyucuların bunu seslendirmesini sağlar.

Kod blokları İngilizce sürümle birebir aynıdır. Etiketleri ve mesajları Türkçeleştirmek isterseniz yalnızca tırnak içindeki metinleri değiştirin.

Adım 3: CSS ile stil verin

İletişim formunuzun stilini ayarlamak için CSS ekleyebilirsiniz. İletişim formunuzu web sitenizin marka ve tarzına uygun şekilde değiştirebilirsiniz. Birçok widget ve eklenti, özelleştirme imkanları sunar ve formunuzu manuel olarak kodladığınızda, istediğiniz görünümü ve hissiyatı elde etmek için HTML ve CSS'yi değiştirebilirsiniz. Başlangıç noktası olarak CSS kodunuz şöyle görünebilir. Etiketler alanların üstünde durur, parmakla dokunmak için her öğe en az 44px yüksekliktedir, klavye odak çerçevesi görünür kalır ve hata kırmızı çerçevenin yanında kırmızı metinle de gösterilir; böylece renk tek işaret olmaz.

.contact-form {
  max-width: 32rem;
  font: 1rem/1.5 system-ui, sans-serif;
}

.field {
  margin-bottom: 1.25rem;
}

.contact-form label {
  display: block;
  margin-bottom: 0.375rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 0.625rem 0.75rem;
  border: 1px solid #6b7280;
  border-radius: 6px;
  font: inherit;
}

.contact-form input[type="checkbox"] {
  width: 1.25rem;
  min-height: 0;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
}

.contact-form input[type="checkbox"] + label {
  display: inline;
  font-weight: 400;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible,
.contact-form button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.contact-form [aria-invalid="true"] {
  border: 2px solid #b91c1c;
}

.field-error {
  margin: 0.375rem 0 0;
  color: #b91c1c;
}

.field-error:empty {
  display: none;
}

.contact-form button {
  min-height: 44px;
  padding: 0.625rem 1.5rem;
  border: 0;
  border-radius: 6px;
  background: #1d4ed8;
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.contact-form button[aria-disabled="true"] {
  opacity: 0.6;
  cursor: progress;
}

Adım 4: Sayfadan ayrılmadan gönderin (isteğe bağlı JavaScript)

Form JavaScript olmadan da çalışır. Tarayıcı zorunlu alanları kontrol eder, formu gönderir ve ziyaretçi Formcarry'nin teşekkür sayfasına gider. Bu betik ise ziyaretçiyi sayfanızda tutar, düzeltilmesi gereken her alanın altına sade bir hata mesajı koyar ve sonucu duyurur.

const form = document.getElementById("contact-form");
const statusBox = document.getElementById("cf-status");
const button = form.querySelector('button[type="submit"]');
const checkedFields = form.querySelectorAll("[aria-describedby]");
let sending = false;

// With JavaScript on, we show our own messages. Without it, the browser validates.
form.noValidate = true;

function setError(field, message) {
  document.getElementById(`${field.id}-error`).textContent = message;
  if (message) field.setAttribute("aria-invalid", "true");
  else field.removeAttribute("aria-invalid");
}

form.addEventListener("input", (event) => {
  const field = event.target;
  if (field.getAttribute("aria-invalid") === "true" && field.checkValidity()) {
    setError(field, "");
  }
});

form.addEventListener("submit", async (event) => {
  event.preventDefault();
  if (sending) return;

  let firstInvalid = null;
  for (const field of checkedFields) {
    const valid = field.checkValidity();
    setError(field, valid ? "" : field.validationMessage);
    if (!valid && !firstInvalid) firstInvalid = field;
  }
  if (firstInvalid) {
    statusBox.textContent = "";
    firstInvalid.focus();
    return;
  }

  sending = true;
  button.setAttribute("aria-disabled", "true");
  statusBox.textContent = "Sending your message…";

  try {
    const response = await fetch(form.action, {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const data = await response.json();

    if (data.code === 200) {
      form.reset();
      statusBox.textContent = "Thank you. Your message has been sent.";
    } else if (data.code === 422 && data.errors) {
      for (const [name, error] of Object.entries(data.errors)) {
        const field = form.elements[name];
        if (field && field.id) setError(field, error.message);
      }
      statusBox.textContent = "Please correct the fields marked above.";
    } else {
      statusBox.textContent = data.message || "Your message wasn't sent. Please try again.";
    }
  } catch {
    statusBox.textContent = "Your message wasn't sent. Check your connection and try again.";
  } finally {
    sending = false;
    button.removeAttribute("aria-disabled");
    // A Turnstile token works once, so ask for a new one after every attempt.
    if (window.turnstile) window.turnstile.reset();
  }
});

Kodu uyarlayacaksanız şu ayrıntılar önemli:

• Accept: application/json başlığıyla Formcarry JSON (code, status, title, message) döndürür. Başlık olmadan yanıt teşekkür sayfasının HTML'i olur ve response.json() hata verir.
• Betik HTTP durumunu değil data.code değerini okur. 10 Ekim 2026'da var olmayan bir form kimliğine test gönderdiğimizde HTTP durumu 500'dü, gövde ise "code":401 ve "Make sure you are using the correct form ID" diyordu. Betik bu mesajı gösterir; kurulum sırasında işe yarar.
• 422 yanıtı, Formcarry'de doğrulama kuralları eklediyseniz bir errors nesnesi taşır; betik her mesajı kendi alanının altına yazar.
• Mesaj gönderilirken tekrarlanan tıklamalar yok sayılır. Formcarry form ve IP adresi başına 15 saniyede bir gönderim kabul eder, ikincisine 429 ile yanıt verir.
• Hatalar alanlara bağlıdır: aria-invalid ve aria-describedby kullanılır, odak düzeltilmesi gereken ilk alana geçer.

Adım 5: Yayına almadan önce test edin

Bu beş kontrolü yalnızca kendi bilgisayarınızda değil, canlı sayfada yapın:

1. Formu boş gönderin: her zorunlu alan bir mesaj göstermeli ve imleç ilk alana gitmeli.
2. ada@ gibi eksik bir adres yazın: e-posta alanı uyarı vermeli.
3. Gerçek bir mesaj gönderin, sonra gelen kutunuzu, spam klasörünüzü ve Formcarry panelindeki form sayfasını kontrol edin.
4. Formu yalnızca klavyeyle (Tab, Boşluk, Enter) doldurup gönderin.
5. Sayfayı telefonda açın ve hiçbir şeyin yana kaymadığını kontrol edin.

Formunuzu oluşturmayı tamamladınız ve iletişim formu gönderimlerini toplayabilirsiniz! İzlemek isterseniz, Formcarry kontrol panelinize gidip spam'i varsayılan olarak gizleyen Submissions kısmından kontrol edebilirsiniz. Eğer bir HTML form kodunuz yoksa ve özelleştirilebilir bir form kullanmak isterseniz, Formcarry'nin İletişim Formu Oluşturucusunu kullanabilirsiniz. Bu oluşturucuyu ayarlayarak formunuzu oluşturabilir ve form kodunu alabilirsiniz; uyarlarken etiketleri ve name niteliklerini koruyun.

HTML iletişim formu eklemek bazı insanlar için sınırlayıcı olabilir. Kodlama bilmeyenler için bu yöntem zorlayıcı görünebilir; aşağıdaki platform seçenekleri ise hiç kod gerektirmez.

WordPress'te iletişim formu ekleme

WordPress'in kendisinde iletişim formu bloğu yoktur, bu yüzden formu bir eklentiyle eklersiniz. Aşağıdaki kurulum sayıları her eklentinin WordPress.org sayfasından, 10 Ekim 2026'da okundu.

Jetpack'in Form bloğuyla

Jetpack (3 milyondan fazla aktif kurulum) editöre bir Form bloğu ekler. İletişim sayfanızı açın, /form yazın ya da blok ekleyiciden Form'u seçin ve Contact desenini seçin. Form notifications altında Send email notifications to alanına adresleri girin ve yayınlayın.

Jetpack her yanıtı WP Admin'de Jetpack > Forms > Responses altında saklar; saklama varsayılan olarak açıktır. Sitede Akismet etkinse gönderimler spam kontrolü için ona gider. Bu adımlar Jetpack'in Form bloğu rehberini izler.

Contact Form 7 ile (kopya tutmak için Flamingo)

Contact Form 7 10 milyondan fazla aktif kuruluma sahip. Etkinleştirdikten sonra Contact > Add New yolunu izleyin: varsayılan form zaten ad, e-posta, konu ve mesaj ister. Alıcıyı Mail sekmesinde belirleyin, kaydedin ve formu Contact Form 7 bloğuyla iletişim sayfanıza ekleyin.

İnsanları iletişim formu gönderimlerini aramaya iten nokta şu: Contact Form 7 onları saklamaz. Readme dosyası, varsayılan yapılandırmada eklentinin "write any user personal data to the database" yapmadığını, yani kişisel veriyi veritabanına yazmadığını söylüyor. E-posta ulaşmazsa mesaj gider. 800 binden fazla aktif kurulumu olan Flamingo'yu ekleyin; kendini "Contact Form 7 için oluşturulmuş bir mesaj saklama eklentisi" olarak tanımlıyor ve her mesaj WP Admin'deki Flamingo ekranında görünür.

Diğer form eklentileri

WPForms Lite (5 milyondan fazla aktif kurulum) şablonlardan sürükle bırak ile form oluşturur ve readme dosyası spam seçenekleri arasında Cloudflare Turnstile, hCaptcha ve reCAPTCHA'yı sayar. Fluent Forms (700 binden fazla) ve Forminator (600 binden fazla) da ücretsiz sürümü olan diğer form oluşturuculardır. Hangisini seçerseniz seçin, yalnızca e-postaya güvenmeden önce kayıtları nerede tuttuğuna bakın.

Bildirim e-postalarının ulaştığından emin olun

WordPress form bildirimlerini wp_mail() ile gönderir ve WordPress'in bu fonksiyon için kendi başvuru sayfası şunu söyler: "A true return value does not automatically mean that the user received the email successfully." Yani olumlu bir dönüş değeri, e-postanın alıcıya ulaştığı anlamına gelmez. Form "Teşekkürler" derken e-posta hiç gelmeyebilir.

Kendinize bir test mesajı gönderin. Gelmiyorsa ya da spam'e düşüyorsa, WordPress e-postalarını WP Mail SMTP (4 milyondan fazla aktif kurulum) gibi bir SMTP eklentisiyle gerçek bir e-posta sağlayıcısı üzerinden gönderin.

Shopify'da iletişim formu ekleme

Her Shopify temasında hazır bir iletişim formu vardır; Shopify'da iletişim sayfası hiç kod gerektirmez. Bu adımlar Shopify'ın iletişim sayfası yardım makalesini izler (10 Ekim 2026'da okundu):

1. Shopify yöneticinizde Online Store > Pages yolunu izleyin ve Add page'e tıklayın.
2. "Bize ulaşın" gibi bir başlık ve formun üstünde görünmesini istediğiniz metni girin.
3. Theme template menüsünden contact'ı seçin, ardından Save'e tıklayın.
4. Müşterilerin bulabilmesi için sayfayı mağazanızın menüsüne ekleyin.

Formu başka bir sayfada göstermek için, temanız destekliyorsa tema editöründe o sayfaya Contact form bölümünü ekleyin.

Shopify iletişim formu mesajlarını nereye gönderir?

Shopify'ın iletişim formu her gönderimi mağazanızın gönderen e-posta adresine yollar; bu adresi Notifications ayarları sayfasında değiştirirsiniz. Konu satırını değiştiremezsiniz. hCaptcha varsayılan olarak açıktır (Online Store > Preferences > Spam protection) ve her gönderimde görünmez bir kontrol yapar. Shopify'ın filtreleri mesaj alanını da tarar ve şüpheli mesajların konusuna "[SPAM]" ekler. Bu mesajlar yine size ulaşır; o kelimeye bir gelen kutusu filtresi kurarak onları ayırabilirsiniz.

Shopify iletişim formuna alan ekleme

Shopify'ın hazır formundaki alanlar sabittir; Shopify'ın Horizon temasında bunlar ad, e-posta, telefon ve mesajdır. Sipariş numarası gibi başka bir şey sormak için temanın iletişim formu kodunu düzenleyin (Horizon'da blocks/contact-form.liquid) ve {% form 'contact' %} içine bir alan ekleyin. Shopify'ın geliştirici belgelerine göre özel alanların adı contact[information_id] biçiminde ve form içinde benzersiz olmalı; bu başlık bildirim e-postasında görünür.

<label for="ContactForm-order">Order number (optional)</label>
<input type="text" id="ContactForm-order" name="contact[order_number]" autocomplete="off">

Girdiye temanızın diğer alanlarda kullandığı class değerini verin ve düzenlemeden önce temayı çoğaltın; tema güncellemesi düzenlenen dosyaların yerine yenisini koyar. Koda dokunmak istemiyorsanız, Shopify'ın ücretsiz Forms uygulaması (Shopify App Store'da 747 değerlendirmeden 4,5 puan, 10 Ekim 2026'da okundu) yanıtları müşteri profilinde saklanan popup ve satır içi formlar oluşturur. Ne soracağınıza dair fikirler için Shopify form örneklerine bakın.

Wix, Squarespace ve diğer siteler

Site oluşturucularda iletişim formu hazır bir öğedir:

• Wix: Wix Editor'da Add Elements > Contact & Forms yolunu izleyin, sayfaya bir form sürükleyin ve alanlar için Edit Form'u kullanın. Gönderimler panelinizdeki Forms & Submissions bölümünde görünür ve her biri site sahibine e-postayla gelir.
• Squarespace: Sayfayı düzenleyin, Add block'a tıklayın ve Form'u seçin. Gönderimler formu ekleyen kişiye e-postayla gider; ek depolama olarak Google Drive, Mailchimp veya Zapier ekleyebilirsiniz (Mailchimp ve Zapier için Core, Plus, Advanced ya da bazı eski planlar gerekir).

Her site için: Jotform gibi bir form oluşturucuyu gömün

Bir no-code form aracı kullanarak da iletişim formu ekleyebilirsiniz. Farklı form oluşturma araçları bulunmaktadır ve hepsi sitenize yapıştıracağınız bir kod parçasıyla biter. Aşağıdaki hızlı adımlarla Jotform ile nasıl iletişim formu ekleyeceğinizi öğrenebilirsiniz; adımlar Jotform'un gömme rehberini izler (30 Eylül 2026'da güncellendi):

1. Hesabınıza kaydolup giriş yaptıktan sonra formlarınızı My Workspace'te görürsünüz. Bu kılavuz için bir şablon seçeceğiz, ancak sıfırdan bir form da oluşturabilirsiniz. Şablonlar sayfasından iletişim formlarını bulabilir ve Use Template butonuna tıklayabilirsiniz.
2. Şablonu Build bölümünden özelleştirebilirsiniz.
3. İletişim formunuzun ayarlarını Settings bölümünde yapabilirsiniz.
4. Ardından, Publish bölümüne gidip formunuzun gömme kodunu almak için Embed seçeneğine tıklayabilirsiniz.
5. Copy Code'a tıklayın. Kodunuzu kopyalayıp web sitenizin kod enjeksiyon bölümüne ya da formun görünmesini istediğiniz bir HTML bloğuna yapıştırabilirsiniz.

Jotform her gönderimi Jotform Tables'ta saklar; buradan okuyabilir, Excel, CSV ya da PDF olarak dışa aktarabilirsiniz.

İletişim formu gönderimleri nereye gider?

Bir iletişim formu gönderimi, formun backend'i onu nereye yolluyorsa oraya gider: genellikle size bir e-posta ve araç saklıyorsa bir kopya. Kurulumunuz için bu iki yeri yayına almadan önce bilin. Tek gelen kutusu, tek hata noktası demektir.

Mesajları bir CRM'e, destek aracına ya da tabloya aktarmak için formu ona bağlayın: Formcarry'de Zapier ve webhook'lar, Squarespace'te Zapier var; WordPress eklentilerinin çoğunun da eklentileri bulunur. Mesajları birden fazla kişi yanıtlıyorsa onları tek bir kişinin posta kutusuna değil ortak bir gelen kutusuna yönlendirin.

İletişim formu spam'i nasıl engellenir?

İki katman kullanın: botların doldurduğu ama insanların hiç görmediği bir bal küpü alanı ve backend'inizin sunucuda kontrol ettiği Cloudflare Turnstile veya reCAPTCHA gibi bir doğrulama. Platform formlarında filtre zaten vardır. Shopify, Wix ve Squarespace'te işiniz çoğunlukla onu açık bırakmaktır.

Bal küpü alanı ekleyin

Yukarıdaki koddaki _gotcha alanı gizlidir ve klavyeyle atlanır, bu yüzden insanlar onu hiç doldurmaz. Pek çok bot ise bulduğu her alanı doldurur. Formcarry _gotcha alanı dolu gelen her gönderimi spam olarak işaretler, panelinizde bir spam filtresinin arkasında tutar ve varsayılan olarak bunun için bildirim e-postası göndermez. Formcarry'nin ücretsiz planında spam yine de aylık gönderim limitinden düşer; ücretli planlarda düşmez.

Cloudflare Turnstile ekleyin

Turnstile, Cloudflare'in ziyaretçinin insan olduğunu CAPTCHA olmadan kontrol eden çözümüdür. Ücretsiz bir planı vardır (hesap başına 20 widget'a kadar) ve Cloudflare'in belgeleri onu WCAG 2.2 AA uyumlu olarak tanımlar. Site anahtarı ve gizli anahtar almak için Cloudflare panelinde alan adınıza bir widget oluşturun, ardından sayfaya iki satır ekleyin:

<!-- In the <head>, once per page -->
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<!-- Inside the <form>, just above the submit button -->
<div class="cf-turnstile" data-sitekey="YOUR_SITE_KEY"></div>

Gizli anahtarı Formcarry formunuzun ayarlarında Form Security altına yapıştırın. Widget tek başına hiçbir şeyi korumaz: Cloudflare her token'ın Siteverify API'siyle doğrulanması gerektiğini, her token'ın 300 saniye geçerli olduğunu ve yalnızca bir kez kullanılabildiğini söylüyor. Bu kontrolü Formcarry sizin yerinize yapar; 4. adımdaki betik de her denemeden sonra turnstile.reset() çağırır, böylece ikinci mesaj yeni bir token alır. Cloudflare'in test anahtarlarıyla yaptığımız testte token backend'e ulaştı, Siteverify onu kabul etti ve widget her gönderimden sonra yeni bir token üretti.

Formcarry ayrıca reCAPTCHA v2 Checkbox ve v3'ü (v2 Invisible hariç) ve hCaptcha'yı da aynı şekilde destekler.

Platformunuzun filtresini kullanın

• Shopify: İletişim ve yorum formlarında hCaptcha, varsayılan olarak açık.
• Wix: Form oluşturucuda Settings > Spam filter settings; üç seviyenin hepsi reCAPTCHA içerir.
• Squarespace: Form bloklarında reCAPTCHA varsayılan olarak açık.
• WordPress: Akismet (5 milyondan fazla aktif kurulum) Jetpack formları ve Contact Form 7 ile çalışır; Contact Form 7'nin ayrıca bir Turnstile entegrasyonu var.

İletişim formu ve KVKK: onay kutusu ne zaman gerekir?

Size yazan birine yanıt vermek için çoğu zaman açık rıza kutusuna gerek yoktur. Gereken, kişileri verileriyle ne yapacağınız konusunda bilgilendirmek, yani aydınlatma yükümlülüğünü yerine getirmektir. Ayrı ve işaretsiz bir onay yalnızca bülten göndermek gibi ek bir amaç için istenir.

6698 sayılı Kişisel Verilerin Korunması Kanunu, açık rıza dışında da işleme şartları sayar; örneğin "bir sözleşmenin kurulması veya ifasıyla doğrudan doğruya ilgili olması" ya da "veri sorumlusunun meşru menfaatleri için veri işlenmesinin zorunlu olması". Kişisel Verileri Koruma Kurulu'nun 18.02.2026 tarihli ve 2026/347 sayılı ilke kararı da aydınlatma metni ile açık rıza metninin ayrı ayrı düzenlenmesini istiyor. Başka bir işleme şartına dayanılan durumlarda yalnızca aydınlatma yükümlülüğünün yerine getirilmesini ve ilgili kişilere ayrıca açık rıza metni sunulmamasını, aydınlatma metnindeki ifadeler için de onay istenmemesini söylüyor. Kurallar duruma göre değişebilir. Bunu genel bilgi olarak okuyun, hukuki tavsiye olarak değil.

Formda yapmanız gerekenler:

• Butonun yanında kısa bir bilgilendirme, yukarıdaki koddaki satır gibi, aydınlatma metninize ya da gizlilik politikanıza bağlantı veren.
• Yalnızca yanıt vermek için gereken alanlar. "Belki lazım olur" diye eklenen bir telefon alanı, korumanız gereken bir veridir.
• Bir saklama süresi. Eski mesajları düzenli olarak silin; Formcarry her form için 30 gün ile süresiz arasında bir süre belirlemenize izin verir.
• Verinin nerede saklandığını bilin. Örneğin Formcarry, gönderimleri AB'deki veri merkezlerinde tuttuğunu ve bir veri işleme sözleşmesiyle veri işleyen olarak çalıştığını söylüyor. Türkiye'den bakınca bu bir yurt dışı aktarımıdır: Kanun'un 9. maddesi yeterlilik kararı ya da standart sözleşme gibi uygun güvenceler arar ve standart sözleşmenin imzadan itibaren beş iş günü içinde Kuruma bildirilmesini ister. KVKK'nın yurt dışına aktarım sayfasına göre Kurul henüz bir yeterlilik kararı vermedi.
• Pazarlama onayı için ayrı bir kutu, işaretsiz ve mesaj göndermek için zorunlu olmayan:

<div class="field">
  <input id="cf-newsletter" name="newsletter" type="checkbox" value="yes">
  <label for="cf-newsletter">Also send me the monthly newsletter (optional)</label>
</div>

Onay kutusu yalnızca işaretliyse değerini gönderir; newsletter=yes içeren bir mesaj, onayın kaydıdır. Bunu da aynı testte kontrol ettik. Türkiye'de bülten gibi ticari elektronik iletiler için 6563 sayılı Kanun ayrıca önceden onay ister ve Ticari İletişim ve Ticari Elektronik İletiler Hakkında Yönetmelik'e göre İYS dışında alınan onaylar üç iş günü içinde İleti Yönetim Sistemi'ne (İYS) kaydedilmelidir.

Dönüşüm oranı yüksek iletişim formları için ipuçları

• Basit tutun: Bir iletişim formu zor kullanılmamalı veya çok fazla alan ya da karmaşık sorular içermemeli. İsteklere düzgün yanıt verebilmek için gerekli verileri isteyin ve formunuzu kısa ve basit tutun.
• Açık talimatlar verin: İletişim formunuzun nasıl kullanılacağına ve hangi bilgilerin gönderileceğine dair açıklamaların net olduğundan emin olun. Ziyaretçiler bu sayede formu daha rahat kullanır ve doğru bilgi girme olasılığı artar.
• Sonra ne olacağını söyleyin: Genellikle ne zaman yanıt verdiğinizi başarı mesajında ya da butonun yanında belirtin.
• Formunuzu düzenli olarak test edin: İletişim formunuzun doğru çalıştığından ve tüm gönderimlerin alındığından emin olmak için sık sık test yapın. A/B testleri ile farklı form düzenlerini ve metinlerini test ederek hangisinin daha başarılı olduğunu belirleyebilirsiniz.
• Çekici ve etkileyici bir stil kullanın: Görseller ve marka logonuzu ekleyebilir ve tutarlı renkler kullanarak formlarınızın marka kimliğinize uygun olmasını sağlayabilirsiniz.

Bu hızlı ipuçlarını takip ederek, kullanıcı etkileşimini artıran ve kitlenizle daha derin bağlar kurmanızı sağlayan etkili bir iletişim formu oluşturabilirsiniz. İşe yarayan düzenler ve metinler için 15 web sitesi iletişim formu örneğine (İngilizce) bakın.

Popupsmart ile iletişim formu popup'ı ekleme

İletişim formu popup'ı, sayfanın üstünde açılan ve form alanları olan bir popup'tır; örneğin biri "Bize ulaşın" butonuna tıkladığında açılır ve ziyaretçi bulunduğu sayfadan ayrılmadan soru sorabilir. İlgi çekici form popup'larını web sitenize ekleyerek ziyaretçilerinizin dikkatini çekebilir ve iletişim formunuzu doldurmalarını teşvik edebilirsiniz. Popupsmart ile iletişim formu popup'larını kod yazmadan ekleyebilirsiniz ve Popupsmart'ın ücretsiz bir planı vardır. Popupsmart her gönderimi toplar ve iletir; diğer formlarınızın arkasındaki backend'in yerini tutmaz. Bunu hızlı adımlarla nasıl yapabileceğinizi görün:

1. Panelin sol altındaki Hesap menüsünden Web siteleri bölümüne gidin, Yeni web sitesi seçeneğine tıklayın ve web sitenizi yazın. Embed kodunu web sitenizin kod ekleme bölümüne kopyalayıp yapıştırabilirsiniz: web sitenizin yönetici paneline gidin ve embed kodunuzu kapanış </body> etiketinden hemen önce yapıştırın (embed kodunu sitenize yerleştirme).
2. Kampanyalar bölümüne gidin, Yeni Kampanya butonuna tıklayarak yeni bir kampanya oluşturun ve kampanyanıza bir isim verin. Hazır bir popup şablonu seçebileceğiniz şablon sayfasına yönlendirileceksiniz. Bu rehber için, iş hedefimiz olan form gönderimlerini toplamaya uygun bir iletişim formu popup şablonu seçtik. Dönüşüm odaklı popup şablonlarını popup şablonları sayfasından inceleyebilirsiniz.
3. Popup şablonunuzu seçtikten sonra, ihtiyaçlarınıza ve web sitenizin tarzına göre özelleştirebilirsiniz. Form öğesini seçerek yeni form öğeleri ekleyebilir ve hedeflerinize göre ayarlayabilirsiniz; ihtiyacınız olan her alan için Yeni bir form girişi ekle'yi kullanın. Ayrıca Özelleştir adımında yeni öğeler ekleyebilir ve popup'ınızı istediğiniz gibi ayarlayabilirsiniz.
4. Form öğenizin Bildirimler bölümüne giderek, iletişim formunuz hakkında bildirim almak için kişisel e-posta bildirimlerini ayarlayabilirsiniz (kişisel e-posta bildirimleri).
5. Ardından, Entegrasyon bölümünden favori e-posta hizmet sağlayıcınızı bağlayabilirsiniz. Entegrasyon Ekle butonuna tıklayın ve doğrudan entegrasyon seçeneklerinden birini seçin veya Make.com ve Zapier entegrasyonları ile istediğiniz uygulamayı bağlayın. Her gönderim ayrıca panelinizdeki Leads bölümüne düşer.
6. Popupsmart'ın Segment bölümünde bulabileceğiniz çeşitli hedefleme çözümleri sayesinde, iletişim formu popup'ınızı doğru kişilere doğru zamanda gösterebilirsiniz; örneğin iletişim butonunuza tıklandığında (butonla açılan popup).
7. Tüm ayarlamaları tamamladıktan sonra, popup kampanyanızı yayınlamak için Yayınla adımına geçin.

İşte bu kadar! Bu adımları izleyerek, herhangi bir tasarım veya kodlama deneyimine ihtiyaç duymadan ziyaretçilerinize çekici iletişim formu popup'ları gösterebilirsiniz.

Popup sürümünü kısa tutun. Popupsmart'ın 2026 kıyaslamasında bir veya iki alan isteyen popup'lar %0,88 ve %0,94 dönüştürüyor, üç alanda bu oran %0,56 (medyan kampanya; çarkıfelek ve diğer oyunlaştırılmış popup'lar ayrı sayıldı). Bu oranlar popup gösterimi başınadır ve e-posta ya da telefon numarası toplayan popup'lardan gelir; iletişim sayfanızdaki bir form hakkında bir şey söylemez. Kurulumun tamamı için popup formu oluşturma rehberimize bakın.

Uzun lafın kısası

Web sitenize bir iletişim formu eklemek ziyaretçilerinizle yakın bir ilişki kurmanın önemli bir ilk adımıdır. İster bir popup oluşturucu ister form oluşturma aracı kullanıyor olun, ister formunuzu manuel olarak kodluyor olun, süreç oldukça basittir. Bu blog yazısında verilen talimatları takip ederek, profesyonel görünen ve site ziyaretçilerinizin sizinle kolayca iletişime geçmesini sağlayan bir iletişim formu geliştirebilirsiniz. Hangisini seçerseniz seçin, gerçek bir test mesajı gönderin, onu ulaşması gereken iki yerde de bulun ve spam filtresini açık tutun.

Sıkça sorulan sorular

Web siteme ücretsiz iletişim formu nasıl eklerim?

Platformunuzdaki formu kullanın: Shopify'ın iletişim sayfası, Wix Forms, Squarespace form bloğu ya da WordPress'te ücretsiz Contact Form 7 veya Jetpack eklentisi. Elle kodlanmış bir sitede HTML formunu yapıştırıp ücretsiz planı olan bir form backend'ine, örneğin Formcarry'ye bağlayın. Spam bal küpü alanından geçerse ücretsiz planı olan Cloudflare Turnstile'ı ekleyin.

HTML formu backend olmadan e-posta gönderebilir mi?

Hayır. HTML alanları toplar ama POST isteğini alıp e-postayı gönderecek bir şey gerekir: kendi sunucunuzdaki bir betik ya da barındırılan bir form backend'i. action olarak mailto: yazmak mesajı yalnızca ziyaretçinin kendi e-posta uygulamasına aktarır; bu yüzden pek çok mesaj cihazdan hiç çıkmaz.

İletişim formu gönderimleri nereye gider?

Formun backend'i onları nereye gönderiyorsa oraya: size bir e-posta ve çoğu araçta saklanan bir kopya. Formcarry, Jetpack, Wix, Squarespace ve Popupsmart bir panelde kopya tutar. Contact Form 7, Flamingo eklemezseniz yalnızca e-posta gönderir; Shopify ise iletişim formu mesajlarını mağazanızın gönderen e-posta adresine yollar.

İletişim formunda KVKK onay kutusu gerekir mi?

Yalnızca bir mesaja yanıt vermek için genellikle hayır. Aydınlatma yükümlülüğünü yerine getirin ve butonun yanına aydınlatma metninizin bağlantısını koyun. KVKK Kurulu, başka bir işleme şartına dayanılan durumlarda ayrıca açık rıza metni sunulmamasını istiyor. Bülten gibi ek bir amaç için ayrı ve işaretsiz bir kutu ekleyin. Bu genel bilgidir, hukuki tavsiye değildir.

İletişim formundaki spam nasıl engellenir?

Botların doldurduğu ama insanların hiç görmediği bir bal küpü alanını, backend'inizin sunucuda doğruladığı Cloudflare Turnstile veya reCAPTCHA gibi bir doğrulamayla birlikte kullanın. Platform formlarında filtre hazırdır: Shopify'da hCaptcha, Squarespace ve Wix'te reCAPTCHA, WordPress eklentilerinde Akismet. Panelinizdeki spam klasörüne arada bir göz atın.

Web Sitenize İletişim Formu Eklemek İçin Teknik Becerilere İhtiyacım Var mı?

Seçiminize bağlıdır. Kodlama gerektirmeyen bir araç ya da platformunuzun hazır formunu kullanıyorsanız, genellikle teknik becerilere ihtiyacınız yoktur. Formunuzu manuel olarak kodluyorsanız HTML ve CSS gibi kodlama bilgisi gerekir, ama bu rehberdeki test edilmiş kodla başlayabilirsiniz: tek bir URL'yi değiştirdiğinizde çalışır.