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://forms.brace.io/your@email.com" method="post"><!-- Brace Forms kapandığı için alternatif olarak Formspree hizmetini kullanabilirsiniz. -->
<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.
Taşınmış veya silinmiş olabilir.
ERR_FILE_NOT_FOUND
Ayrıntıları gizle
hocam bu uyarıyı alıyorum ?
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
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 "Referrer" header.
Nedir sorun ?
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?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 "Referrer" header.
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
Burda tam olarak ne anlatmak istediniz acaba. Ne yapmalıyız tam olarak anlayamadımda.
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.
$(document).ready(function() {
var $form = $('.contact-form');
$form.submit(function(e) {
$.ajax({
url: "https://formspree.io/your@email.com",
method: "POST",
data: $form.serialize(),
dataType: "json"
});
e.preventDefault();
});
});
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.1. Eğer sitenizde birden fazla sayfada form kullanıyorsanız hepsi için ayrı ayrı doğrulama yapmanız gerekiyor. Örneğin iletişim sayfasında bir form ve yorumlarda bir form kullanıyorsanız ikisi için ayrı ayrı doğrulama isteniyor.
2. Mailinizde gereksiz klasörünü kontrol ettiniz mi? Doğrulama maili gereksize düşmüş olabilir.
3. Eğer iki seçenekte sorunu çözmediyse https://formspree.io/unblock/<your@email.com> (kendi mail adresinizi yazmayı unutmayınız) adresini ziyaret ediniz ve mail adresinizde bir bloklama varsa kaldırınız veya yeniden doğrulamasını sağlayınız.
Thanks!
The form was submitted successfully.
yazısını görüyor musunuz? Eğer görmüyorsanız formunuzda bir hata var demektir. Eğer bu yazıyı gördüğünüz halde bilgiler mailinize gelmiyor ise (mail hiç gelmiyor ise) ücretsiz hesaptaki aylık 50 mail alma limitini doldurmuş olabilirsiniz.
Eğer mail boş olarak geliyorsa formunuzdaki inputlara name ile isimlendirme yapmamış olabilirsiniz.
Thanks!
The form was submitted successfully.
Yazısını gönder butonuna bastığımda site içinde almıyorum direk iletisim.html in başına tekrar atıyor. html in form bölümündeki kodları burdan yada size mail yoluyla atsam bana yardımcı olabilir misiniz hocam. Bu işi halletmem gerekiyor çünkü ay sonuna üniversite bitirme projemin sunumu var...
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.
Dipnot: hocam bu konu ve başlıkla alakası yok ama sorabileceğim kimse yok çevremde ve bu konuda bilgili olduğunuz için size sormak istiyorum bunu yanıtlamanız benim için elzem. Siteye ek olarak rezervasyon eklemek istiyorum rezervasyona girilen bilgiler programdaki database e aktarılmalı database imiz filan hazır ancak bunu html kod diliyle yapmak mümkünmü yani siteden girilen rezervasyon bilgilerini programa ait olan microsoft sql express servera bağlayabilir miyim bağlanabiliyorsa nasıl bağlayacağım. Çok araştırdım ve hiç bir forumda bulamadım... Şimdiden ve tekrardan yardımlarınız için çok teşekkür ederim.
Hosting hizmeti veren firmalar aynı zamanda e mail hizmeti de veriyor diye biliyorum. Böyle bir hizmet aldığımızda ,yukarıda vermiş kodda ,olacaksa nasıl bir değişiklik olacak. örnek: "form action="https://info@siteminadı.com" method="post" mı? olacak.
Saygılar
"This form isn't set up yet
Do you own this website?If so, please login and create a form. Then update your HTML or JavaScript with the new form endpoint. More information here."
Formspree bir kod veriyor bu kodu kullandığım taktirde mail başarılı bir şekilde form mesajları içine düşüyor ( kendi sayfası içinde) bana mail olarak düşmüyor.
_status
mail@gmail.com: Could not send email " diyor. durum kısmında ama form sayfasına kadar düşüyor bu bilgi.
Do you own this website?
If so, please login and create a form. Then update your HTML or JavaScript with the new form endpoint. More information here.
Bu hatayı neden alıyoruz üye mi olmalıyız
Formunuzda action parametresini aşağıdaki şekilde kullandınız mı? (Kendi mail adresinizi yazarak.)