Merhaba. Sizlere HTML form ile nasıl mail gönderileceğini anlatmaya çalışacağım. Statik sitelerin kullanımının artmasıyla birlikte bazı sorunlar da meydana geldi. Bunlardan biri de statik bir sayfada nasıl iletişim formu kullanıllacağı. İşte burada imdadımıza Brace Forms Formspree yetişiyor. Brace Forms Formspree sayesinde rahatlıkla statik bir form aracılığıyla mail gönderebilirsiniz. Bunun için ilk önce HTML form oluşturmanız gerekiyor. Daha sonra bir defaya mahsus formunuzu doldurup gönder diyerek sitenizin ve mail adresinizin onaylanması için gerekli işlemi gerçekleştirmiş oluyorsunuz. Mail adresinize onay maili geliyor ve bağlantıyı tılkladığınızda onay işlemi tamamlanıyor. Bu aşamadan sonra form her doldurulduğunda forma girilen bilgiler belirttiğiniz mail adresine geliyor. Görüldüğü gibi kullanımı gayet kolay bir uygulama. Aşağıdaki örnek HTML formunu kullanarak bir form oluşturabilirsiniz.
<form action="https://formspree.io/your@email.com" method="post"> <!-- your@email.com yerine kendi mail adresimizi yazıyoruz. -->
<div class="input-block">
<label for="contact_author">
<strong>Ad Soyad</strong> (gerekli)</label>
<input type="text" name="contact_author" id="contact_author" required>
</div>
<div class="input-block">
<label for="_replyto">
<strong>E-Posta Adresi</strong> (gerekli)</label>
<input type="email" name="_replyto" id="_replyto" required>
</div>
<div class="input-block">
<label for="contact_subject">
<strong>İleti Konusu</strong> (gerekli)</label>
<input type="text" name="contact_subject" id="contact_subject" required>
</div>
<div class="textarea-block">
<label for="contact_content">
<strong>İleti</strong> (gerekli)</label>
<textarea name="contact_content" id="contact_content" required></textarea>
</div>
<input type="hidden" name="_next" value="https://site.io/thanks.html"> <!-- Form formspree.io adresine gönderildikten sonra tekrar sitenize dönüş yapılarak sitenizdeki thanks.html dosyasının görüntülenmesini sağlıyor. -->
<input type="submit" value="GÖNDER">
</form>PHP ile kodlanmış bir blog kullanmama karşılık neden statik bir sayfa ile mail göndermeyi araştırdığımı soracak olursanız cevabı: Jekyll. Jekyll statik site oluşturulmasını sağlayan Ruby ile yazılmış bir uygulama. Jekyll'nin ne olduğunu ve nasıl kullanılacağını daha sonra ayrı bir makalede anlatacağım. İyi günler.
Güncelleme: Brace Forms kapandığı için alternatif olarak Formspree hizmetini kullanabilirsiniz.
YORUMLAR (140)
Tesekkur ederim bu kadar hizli bir sekilde donus yaptiginiz icin formspree yi
seklinde mi yazcam?
Form etiketi şu şekilde olacak:
Lütfen HTML kodunuzu tekrar gözden geçiriniz.
Merhaba, burdaki gibi denemeye çalıştım.
yaptım fakat formu çalıştırdığımda file://formspree.io/your@email.com dosyanız bulunamadı hatası veriyor. Yardımcı olabilir misiniz ?
şeklinde deneyebilir misiniz? Yani "//formspree.io" yerine "https://formspree.io" yazıp deneyebilir misiniz?
Evet ondanmış deneme amaçlı hosting alınca oldu. Çok teşekkürler. Yalnız şimdi de
şu kısma dönmüyor. Ben thanks.html diye bişey ayarlamadım tekrar domain adresimi yazdım fakat yüklenmiyor site tekrar. Neden olabilir?
ben işlemleri yaptım ama mail adresime mail geliyor ama mailin içinde formdan gelen bilgiler yok
Abi ben formspreenin kendi kodlarını kullandım olmadı neden acaba.? Şu kodları kullandım.. your@email.com yerinide kendi emailim yaptım olmadı..
Nedeni nedir.? Şimdiden teşekkürler..
Çok teşekkürler süper çalışıyor. Büyük bir yükten kurtardınız. Tek problemim Türkçe karakter
kodunu tam olarak nereye girmeliyim. Teşekkürler.Head kısmına
kodunu ekleyerek deneyebilir misiniz?Sunucuya yüklediğim halde bu hatayı alıyorum.
Unable to submit form Make sure you open this page through a web server, Formspree will not work in pages browsed as HTML files. Also make sure that you're posting to https://formspree.io/your@email.com.
For geeks: could not find the "Referer" header.
Bu kodları nerede çalıştırıyorsunuz? Kodların çalışabilmesi için bir web sunucusu (Apache, Nginx, IIS vb.) üzerinden çalıştırılması gereklidir.
Eğer bir web sunucusuna yüklediğinizden eminseniz formunuzun bulunduğu sayfanın <head> kısmına
etiketini ekleyip deneyebilir misiniz?kodu az birşey değiştirdim yalnız mesajları almak istiyorsanız önce test olarak kodları kullanarak mesaj yollayın sonra mesajlar rahatlıkla gelecektir
Abi spama baktım o block şeyinide yaptım hala olmuyor gelmiyor
kodlar bunlar ben css ile düzenledim sayfayı acaba burda mı bir sorun var diye düşündüm cevaplarsınız sevinirimFormunuzda hata var. İlk olarak iki adet action var. Bir tane olmalı. En yukarıdaki
satırını kaldırınız. Sadece kendi mail adresinizin yazdığı action etiketi kalsın.Gene yaptım ama gene olmadı kesin birşeyi gene yanlış yaptım
HTML dosyanızın head kısmına
kodunu ekleyerek deneyebilir misiniz?Merhaba. Ajax form kullanarak sayfanızdan yönlendirme olmadan formu gönderebilirsiniz. Formunuzun class'ını
şeklinde yaparsanız veya class ismini kendi class'ınıza göre değiştirirseniz aşağıdaki jQuery kodu çalışacaktır.
Formun son hali şu şekilde (mail adresi doğru girildi ancak kodda belirtilmedi)
Jquery kodunu da aynı şekilde aldım <script> tagi içinde sayfanın alt kısmına ekledim ve mail kısmına dikkat ettim. Ancak F12 ile consoledan kontrol ettiğimde "gönder" tıklandığında gelen hata şu şekilde;
Formspree sitesine üye olup mail adresinizi doğrulayın. Daha sonra ayarlarda Integration sekmesinde AJAX seçeneğini seçtiğinizde aşağıdaki resimde görüldüğü gibi AJAX form için reCAPTCHA'nın devre dışı bırakılması gerektiğini söylüyor.
Aşağıdaki resimde de görüldüğü gibi Settings sekmesinden reCAPTCHA'yı devre dışı bırakınız.
hocam selamlar, form çalışıyor fakat
bu kısımda göndere basınca tesekkurler.html sayfama dönmüyor.Formunuzda hiçbir input elemanına isim vermemişsiniz. Örnek olarak
yerine
şeklinde name="input_ismi" şeklinde form elemanlarına isim vermeniz gerekiyor. Çünkü Formspree form elemanlarının değerlerini name belirtecine göre okuyup size gönderiyor.Sorunu buldum. Formunuzda
şeklinde iki adet form etiketi kullanıyorsunuz ve bu nedenle form onaylanmıyor. Lütfen
etiketini kaldırıp tekrar deneyebilir misiniz? Tabii formun sonunda form etiketini
şeklinde iki kez kapatmış oluyorsunuz. Bunlardan birini de kaldırınız. Ben formunuzu anlattığım şekilde denediğimde sorunsuz olarak çalıştı.Etiketleri şu şekilde birleştirebilirsiniz.
Formunuzda action parametresini aşağıdaki şekilde kullandınız mı? (Kendi mail adresinizi yazarak.)