Mailto formu mu, form backend mi? Ne seçmeli

Mailto formu aslında ne yapar?

Normal bir form alanları bir web adresine gönderir. Mailto formunun action özniteliğinde ise bir e-posta adresi vardır. HTML standardı tarayıcının bu durumda ne yaptığını tanımlar. Tarayıcı e-postayı sizin yerinize asla göndermez.

• method="GET" ile tarayıcı alanları yeni bir e-postanın konusuna ve başlıklarına dönüştürür.
• method="POST" ile alanlar e-postanın gövdesine yazılır. enctype="text/plain" varsa metin okunabilir. Yoksa adres çubuğundaki gibi kodlanmış gelir.

Her iki durumda da tarayıcı, taslakla birlikte ziyaretçinin e-posta uygulamasını açar. Ziyaretçinin o uygulamada ayrıca Gönder'e basması gerekir. Sayfanıza yanıt dönmez, bu yüzden mesajın gidip gitmediğini bilemez.

Mailto formu neden mesaj kaybettirir?

Tıklamadan sonraki her adım ziyaretçinin cihazına bağlıdır. Mesajlar tam da orada kaybolur:

• E-posta uygulaması yok. Pek çok kişi e-postasını tarayıcı sekmesinde okur. Varsayılan uygulama ayarlı değilse tıklama hiçbir şey yapmayabilir. Ya da sistem bağlantıyı hangi uygulamayla açacağını sorar.
• Gönder'e basılmadı. Taslak açıldı, ama ziyaretçi kapattı, dikkati dağıldı ya da formun zaten gönderdiğini sandı.
• Onay yok. Sayfanız "Teşekkürler, mesajınızı aldık" diyemez, çünkü sonucu bilmez.
• Kopya yok. Hiçbir şey kaydedilmez, kaybolan mesaj tamamen gider.
• Adresiniz açıkta. E-posta adresiniz sayfa kodundadır ve spam botları onu oradan toplar.
• Okunması zor metin. text/plain olmadan gövde name=Ayse&message=Merhaba%20 gibi gelir.

Ayrıca ziyaretçi kendi kişisel adresinden yazar. Herkes bu adresi henüz tanımadığı bir firmayla paylaşmak istemez.

Mailto bağlantısı ne zaman yeterli?

Mailto bağlantısı ile mailto formu aynı şey değildir. Bağlantı dürüsttür: ziyaretçi "Bize e-posta gönderin"e tıklar ve e-posta uygulamasının açılmasını bekler. Formun yanında ikinci bir iletişim yolu olarak iyi çalışır.

Bağlantıyla konuyu ve gövdenin ilk satırını önceden doldurabilirsiniz. Biçim RFC 6068'de tanımlıdır. Türkçe karakterleri, boşlukları ve satır sonlarını kodlayın, yoksa bazı uygulamalar metni keser.

<!-- Türkçe karakterler, boşluklar ve satır sonları UTF-8 olarak kodlandı. -->
<a href="mailto:hello@example.com?subject=Proje%20hakk%C4%B1nda%20soru&body=Merhaba%2C%0D%0A%0D%0A%C5%9Fu%20konuda%20bilgi%20almak%20istiyorum%3A">
  Projeniz için bize yazın
</a>

Mailto formunu çalışan bir formla değiştirin

Alanlarınız aynı kalır. İki şeyi değiştirirsiniz: action ve gizli bir anahtar. Form artık verileri bir form backend'ine gönderir. Backend mesajı saklar, size e-posta atar ve ziyaretçiye bir teşekkür sayfası gösterir. Hiçbir şey ziyaretçinin e-posta uygulamasına bağlı değildir.

Aşağıdaki örnek Formgong kullanır. fk_your_access_key yerine panelinizdeki anahtarı yazın. _lang alanı teşekkür sayfasının dilini, _subject ise bildirim e-postasının konusunu belirler. Gizli botcheck alanı basit botları yakalar. Adresiniz artık sayfa kodunda görünmez.

<!-- Önce: <form action="mailto:you@example.com" method="POST" enctype="text/plain"> -->
<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="tr">
  <input type="hidden" name="_subject" value="Web sitesinden yeni mesaj">
  <label>Ad <input type="text" name="name" required autocomplete="name"></label>
  <label>E-posta <input type="email" name="email" required autocomplete="email"></label>
  <label>Mesaj <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
    <input type="text" name="botcheck" tabindex="-1" autocomplete="off">
  </div>
  <button type="submit">Gönder</button>
</form>

Form verilerini almanın diğer yolları

• Form backend'i. action'ı değiştirirsiniz, o kadar. Formgong, Formspree, Web3Forms ve diğerleri böyle çalışır. Limit ve özellik farklarını form servisleri karşılaştırmasında bulabilirsiniz.
• Kendi betiğiniz. Bir PHP dosyası ya da sunucusuz fonksiyon formu alır ve e-postayı gönderir. Her şey sizin kontrolünüzdedir, e-posta teslimi ve spam de öyle.
• Barındırılan hazır form. Google Forms ve benzerleri bir bağlantı ya da gömme kodu verir. Hızlıdır, ama sitenize değil onların ürününe benzer.

Eksiksiz bir formu adım adım backend'siz HTML iletişim formu yazımızda anlatıyoruz. Formgong'un tanıdığı tüm gizli alanlar HTML belgelerinde listelenir.

Yayınlamadan önce formu kontrol edin

Formunuzun HTML kodunu ücretsiz form denetleyicisine yapıştırın. Denetleyici, mailto: gibi web adresi olmayan bir action'ı hata olarak işaretler. Alan adlarını, yöntemi ve bal küpü alanını da kontrol eder.

Ardından yayındaki sayfadan, telefonda ve dizüstünde gerçek bir test mesajı gönderin. Mesajın geldiğinden ve ziyaretçinin net bir teşekkür sayfası gördüğünden emin olun.