Web Dünyası

Blogger İletişim Sayfası Oluşturma

Blogger platformu gün geçtikçe gelişiyor ve yeni özellikler ekleniyor. İlk kurulduğunda Blogger kendine ait iletişim eklentisi ile hizmet veriyordu tabi bu iletişim eklentisi pek kullanışlı değildi. Ama artık dışardan kodlarla kullanışlı ayrı bir iletişim sayfası oluşturabilirsiniz.

Bu yazımda size Blogger’da nasıl ayrı iletişim sayfası oluşturacağınızı anlatacağım böylece daha kullanışlı ve gadget değil, (Kenar Çubuğunda değil) sayfa şeklinde bir iletişim sayfasına sahip olacaksınız. Haydi o zaman başlayalım.

Blogger Ayrı İletişim Sayfası Nasıl Oluşturabilirim?

İletişim Formunu ayrı bir sayfa olarak oluşturmak için aşağıdaki adımları izleyin. Bir ön izlemesini görmek istiyorsanız, örnek olarak oluşturduğum iletişim sayfayı kontrol edebilirsiniz.

1-) Sayfalara gidin yeni sayfa ekle ile Aşağıdaki kodu yeni oluşturduğunuz İletişim sayfası HTML bölümüne yapıştırın.

2-) ÇOK Önemli: Ardından kod içindeki https://formspree.io/Mailadresiniz yeri bulun ve Mailadresiniz yazan yere mail adresinizi yazın. Buraya kendi mail adresiniz yazmazsanız mailler gelmez.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style type="text/css">
#contactForm input:focus ~ label,#contactForm textarea:focus ~ label,#contactForm input:valid ~ label,#contactForm textarea:valid ~ label{font-size:0.75em;color:#D35400;top:-2.25rem;-webkit-transition:all 0.125s ease;transition:all 0.125s ease}
#contactForm .styled-input{float:left;width:33.3333%;margin:2rem 0 1rem;padding:0 10px 0 0;position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm .styled-input-in{position:relative}
#contactForm{margin-right:-10px}
#contactForm .styled-input label{color:#999;padding:1rem;position:absolute;top:0;left:0;-webkit-transition:all 0.25s ease;transition:all 0.25s ease;pointer-events:none;line-height:1}
#contactForm .styled-input.wide{width:100%}
#contactForm input,#contactForm textarea{padding:1rem 1rem;border:1px solid #ddd;width:100%;font-size:1rem;background:#fafafa;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#contactForm input ~ .span1,#contactForm textarea ~ .span1{display:block;width:0;height:3px;background:#D35400;position:absolute;left:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ .span2,#contactForm textarea ~ .span2{display:block;width:0;height:3px;background:#D35400;position:absolute;right:50%;-webkit-transition:width 0.4s ease-in-out;transition:width 0.4s ease-in-out}
#contactForm input ~ span{bottom:0}
#contactForm textarea ~ span{bottom:5px}
#contactForm input:focus,#contactForm textarea:focus{outline:0}
#contactForm input:focus ~ .span1,#contactForm textarea:focus ~ .span1,#contactForm input:focus ~ .span2,#contactForm textarea:focus ~ .span2{width:50%}
#contactForm textarea{width:100%;min-height:15em}
#contactForm .btn{font-family:"Helvetica","Arial",sans-serif;text-transform:uppercase;font-size:14px;font-weight:800;letter-spacing:1px;border-radius:0;padding:0 25px;height:51px;line-height:51px;color:#333;background-color:#fafafa;border:1px solid #ddd;cursor:pointer;margin:20px 0 0;background-image:none}
#contactForm .btn-default:hover,#contactForm .btn-default:focus{background-color:#D35400;border:1px solid #0400bf;color:white}
</style>

<br />
<form action="https://formspree.io/Mailadresiniz" id="contactForm" method="POST" name="sentMessage" target="_blank">
<div class="styled-input">
<div class="styled-input-in">
<div style="text-align: left;">
<input name="name" required="required" type="text" />
<label>İsim</label></div>
<span class="span2"></span></div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input name="email" required="required" type="email" />
<label>Email</label>
<span class="span1"></span><span class="span2"></span> </div>
</div>
<div class="styled-input">
<div class="styled-input-in">
<input name="_replyto" required="required" type="Konu" />
<label>Konu</label>
<span class="span1"></span><span class="span2"></span> </div>
</div>
<div class="styled-input wide">
<div class="styled-input-in">
<textarea required="required"></textarea>Mesajınız</div>
</div>
<button class="btn btn-default" type="submit">Gönder</button>
</form>
</div>

3-) Şimdi sayfayı yayınlayın.

Not: İletişim Formumuz yenilenmiştir.

İletişim Formu Onaylama

Son olarak iletişim formumuzu yani mail adresimizi onaylamamız gerekir. Bunun için deneme bir mail gönderin. gönderdiğiniz bu mail ile sizi başka bir sayfaya yönlendirecek. Aşağıda gördüğünüz bir pencere açılacak.

Burada ben robot değilim deyip onaylayın.

Ardından size bir onaylama maili yollanacak. E-postanıza gelen bu maili onayladıktan sonra artık bu formu kullanabilirsiniz.

Bu yazıda size iletişim sayfasının nasıl oluşturacağınızı anlattım umarım işinize yaramıştır. Takıldığınız bir yer varsa yorum bölümünden bana bildirebilirsiniz.

Bunlarda işinize gelebilir.

⇒ Ücretsiz Blogger Temaları

⇒ Blogger Temel Ayarları

⇒ Adım Adım Ücretsiz Blog Kurmak Blogger (Görsel Anlatım

İlgili Makaleler

6 Yorum

  1. reCAPTCHA kodu nasıl eklenir bu oluşturduğunuz iletişim formuna. Son zamanlarda bloggerda spam mailler arttı. Onune geçmemiz lazım

  2. iletişim formunuzu sitemde uyguladım spam koruma onayı geldi aktif ettim ancak bir başka mail ile deneme yaptığımda ” Geçersiz e-posta adresi
    [email protected], iletişim formunu girdiniz . Bu geçersiz bir e-posta adresidir. Lütfen formu düzeltin ve buraya tekrar göndermeyi deneyin .

    Bu, formla ilgili bir sorun da olabilir. Örneğin, _replyto veya e-posta adı özniteliğine sahip iki alan olabilir . Formun bozulduğundan şüpheleniyorsanız, lütfen form sahibiyle iletişime geçin ve araştırmalarını isteyin ” hatayı almaktayım yardımcı olurmusunuz.

    1. Yorumunuz için teşekkürler. hatayı düzelttik. input name=”_replyto” required=”required” type=”email” email yazması gereken yere _replyto yazmışız.

  3. Kullanıcının mesajında ne yazdığı belirlenmiyor. Epostada sorun yok ama ne yazdığı boş görünüyo

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı

Reklam Engelleyici Algılandı

Lütfen Reklam Engelleyiciyi devre dışı bırakınız.