Ads Top

Sabit İletişim Sayfası Nasıl Yapılır?-İletişim Sayfası Yapımı


Merhaba blog dostları bu makalemde sizlere iletişim sayfası sorunsuz bir şekilde nasıl oluşturulur onu göstermeye çalışacağım. Kuşkusuz her site veya blog için vazgeçilmez bir sayfadır iletişim sayfası hal böyle olunca her blogcunun karşısına çıkıyor bende sizlere nasıl yapıldığını anlatmaya karar verdim. 

Öncelikle yapmamız gereken işlem iletişim eklentisini blogumuzun slider kısmına eklemek olacak bunun için yönetim panelinden girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetler yolunu takip ederek İletişim Formu gadgetini ekleyin.

Yahu arkadaş ben iletişim formunu gadget alanında istemiyorum ki diyen sabırsız blogcuları duyar gibi oldum :)

İletişim formunu bir eklenti olarak değil sabit bir sayfada kullanmak için bazı kod değişikliklerine ihtiyacınız olacak. Bir sonraki adıma geçmek için Şablon > HTML'yi Düzenle adımlarını izleyerek gelen kod ekranının üst tarafında bulunan Widget’a Atla > ContactForm1 butonuna basıyoruz. Bu sayede iletişim formunun olduğu kodlara geldik. Burada bulunan kodların solunda bulunan   işaretine basarak kodları genişletin. Genişletme işlemini başarı ile gerçekleştirdiğinizde kodlar aşağıdaki gibi gözükecektir.

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'> 
    <b:includable id='main'> 

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/> </b:includable> 

  </b:widget>
̇
Burada gösterdiğim kırmızı kodları silerseniz artık iletişim formunu aktif hale getirmiş olursunuz. Buraya kadar yaptığımız işlemler iletişim formunun çalışması için uygulanan adımlardı bu adımdan sonra yapmanız gereken size ve temanıza uygun bir iletişim formu kodunu sayfanıza eklemek ben bu makalemde sade ve kullanışlı bir form kodu vereceğim. Dilerseniz diğer iletişim eklentilerinin kodlarınıda kullanabilirsiniz.


Uyarılarımı da yaptıktan sonra sıra iletişim sayfasını oluşturma aşamasında, Sayfalar > Yeni Sayfa dedikten sonra açılan pencereden HTML bölümüne aşağıdaki kodları yapıştırıyoruz.





<form id="kontak-bloggereklentileri" name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Adınız *" size="30" type="text" value="" /> <input id="ContactForm1_contact-form-email" name="email" placeholder="E-posta adresiniz *" size="30" type="text" value="" /> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesajınız *" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> <div style="max-width: 222px; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> <style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-bloggereklentileri{margin:auto;max-width:640px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0} .contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>

Önizleme diyerek iletişim sayfanızı kontrol edin. İşlem bu kadar basit artık sizin de bir iletişim sayfanız var. Bu bölümden yazılan mesajlar size e-mail olarak gelecek ve böylece ziyaretçilerinizle hızlı ve kaliteli bir ilişki sağlayacaksınız.

Hiç yorum yok:

Blogger tarafından desteklenmektedir.