ile

İletişim bölümünü oluşturalım ve HTML formlarını anlayalım

Tek ürün gösteren veya sipariş vermeyi sağlayan sayfayı yapmadan önce, saitemizin belki de en önemli bölümü olan iletişim bölümümüzü yapmamız gerekiyor.

İletişim bölümü sitemizin en önemli bölümüdür. Genellikle firmaların internet sitelerine giren insanlar sadece bu bölüm için sayfayı açarlar. Aradıkları şey genellikle telefon numarası, adres, e-posta veya daha da önemlisi mesajlarını direk yollayabilecekleri bir iletişim formudur.

Bu bölümü oluşturmak için ihtiyacımız olan bilgiler neler?

  1. Adres
  2. Telefon
  3. E-posta adresleri
  4. İletişim Formu

İletişim formunda ihtiyacımız olan nedir?

  • Gönderen kişinin adı, soyadı
  • Geri dönüş yapmak için e-posta adresi
  • Gönderilecek mesaj

İletişim ile ilgili bilgileri vereceğiz. Burada çok önemli bir noktaya geldik. Meta etiketleri bölümünde belirttiğimiz anahtar kelimeler Google veya diğer arama motorları tarafından o kadar da dikkate alınmıyor. Şaşırdınız değil mi? Maalesef öyle. Meta description yani açıklama dikkate alınıyor, ama anahtar kelimelere ne kadar önem addedildiği meçhul. Google kullanmadığını söylüyor, ya da çok suistimal edildiği için böyle bilinmesini istiyor.

Peki biz internet sitemizdeki bilgiyi olduğu gibi Google’a nasıl anlatacağız? İnsan olmadığı, bir makine olduğu için anlamakta zorlanacaktır. Örneğin, neyin adres, neyin firma ismi,neyin yorum olduğunu bilemeycektir.

İşte tam da bunun için yeni bir şey icad edilmiş adı da microdata. Biz iletişim sayfamızdaki adresi bu şekilde ekleyeceğiz. Google da bunun adres olduğunu şıp diye anlayacak. Yazalım;


<div itemscope itemtype="http://schema.org/LocalBusiness">
  <span itemprop="name"><h3>Kızılyıldız Matbaacılık A.Ş.</h3></span>
<h4>İletişim Bilgileri:</h4>
  <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    <h5>Adres:</h5>
      <p><span itemprop="streetAddress"> Denizler Mah. Eren Sok. No:68</span><br/>
      <span itemprop="addressLocality">Sireci, Fatih</span>
      <span itemprop="postalCode">34110</span><br/>
      <span itemprop="addressCountry">İstanbul, TÜRKİYE</span></p>
  </div>
    <strong>Tel:</strong><span itemprop="telephone">+90 212 444 19 17</span><br/>
    <strong>Fax:</strong><span itemprop="faxNumber">+90 212 444 19 05</span><br/>
    <strong>E-mail:</strong> <span itemprop="email">iletisim(at)kizilyildizbaski.com.tr</span>
</div>

Burayı çok fazla açıklamaya gerek yok sanırım. Metin içinde verdiğimiz bilgileri, schema.org‘da bulunan bilgi kalıpları içine yerleştirmekle işe başlıyoruz. Daha fazla bilgi için schema.org‘u incelemenizi tavsiye ederim.

Adres bilgisi şu şekilde görünmeli:

İşte şu anda bizim görüp anladığımız bilgiyi Google’da anlayacak ve sayfalarında bu bilgiye de yer verecek. Bu ekstra bilgi üstelik bizim sayfamızın arama sonuçlarında daha yukarılarda yeralmasını da sağlayacak.

Sıra geldi formumuzu tasarlamaya. Bunun için ilk iş olarak form etiketiyle işe başlıyoruz.


<form action="iletisim.html" method="post">
    <fieldset>
        <legend>Gönderen Bilgisi</legend>
        <label for="">Adı Soyadı:</label>
        <input type="text" id="adSoyad" name="adSoyad" placeholder="Adınız Soyadınız" />
        <label for="">E-posta Adresi:</label>
        <input type="email" id="ePosta" name="ePosta" placeholder="E-posta adresiniz"/>
        <label for="">Mesaj:</label>
        <textarea id="formmesaj" name="formmesaj">Mesajınız</textarea><br />
        <input type="submit" value="Gönder" />
    </fieldset>
</form>

Formda yaptığımız işlere kısaca bir göz atmakta yarar var:

  • İlk önce action özelliği ile formumuzun hedefini belirledik. Şu anda değil ama Php’de sunucu tarafında veri işlerken buna ihtiyacımız olacak. Verilerin URL’de ?gonderen=Mutlu+Kocak şeklinde gözükmesini istemediğimiz için de gönderim şeklini post olarak belirledik.
  • fieldset ile yeni formumuzun etrafını çizdik, başlık olarak legend etiketini kullandık, buna şimdilik gönderen bilgileri dedik.
  • input etiketlerini kullandık. Placeholder özellikleriyle tıklandığı anda yokolan ipucu bilgilerini girdik
  • type=”email” özelliği ile tarayıcının, girilen bilginin eposta olup olmadığını kontrol etmesini sağladık.
  • textarea girdisiyle birden çok satır içerebilen bir form alanı yarattık.
  • Submit girdisiyle form gönderme butonunu yarattık ve üzerindeki yazıyı value özelliği ile “Gönder” yaptık.

Şimdi sonucu görelim:

Tüm bu yaptıklarımızı sayfamızın içine yerleştirelim. Twitter bootstrap kütüphanesi ile daha önce yaptığımız gibi sayfamızı 3 birim e 8 birimlik iki bölüme ayıralım. Birinci kısımda bölüm başlığı, diğer kısımda ise bölüm içeriği olsun. Belki daha sonra bu kısımları section etiketi ile yeniden düzenleyebiliriz.

Kodumuzun son hali şöyle. Yer kaplamaması açısından sadece içerik section etiketinin içeriğini yazıyorum.


<section id="icerik" class="container">
    <div id="row">
        <div class="span3"><h3>İletişim Bilgileri:</h3></div>
        <div class="span8">
            <div itemscope itemtype="http://schema.org/LocalBusiness">
                <span itemprop="name"><h4>Kızılyıldız Matbaacılık A.Ş.</h4></span><hr>
                <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
                    <h5>Adres:</h5>
                    <p><span itemprop="streetAddress"> Denizler Mah. Eren Sok. No:68</span><br/>
                        <span itemprop="addressLocality">Sireci, Fatih</span>
                        <span itemprop="postalCode">34110</span><br/>
                        <span itemprop="addressCountry">İstanbul, TÜRKİYE</span></p>
                    </div>
                    <strong>Tel:</strong><span itemprop="telephone">+90 212 444 19 17</span><br/>
                    <strong>Fax:</strong><span itemprop="faxNumber">+90 212 444 19 05</span><br/>
                    <strong>E-mail:</strong> <span itemprop="email">iletisim(at)kizilyildizbaski.com.tr</span>
                </div>
                <hr>
            </div>
            <div class="span3"><h3>İletişim Formu:</h3></div>
            <div class="span8">
                <form action="iletisim.html" method="post">
                    <fieldset>
                        <legend>Gönderen Bilgisi</legend>
                        <label for="">Adı Soyadı:</label>
                        <input type="text" id="adSoyad" name="adSoyad" placeholder="Adınız Soyadınız" />
                        <label for="">E-posta Adresi:</label>
                        <input type="email" id="ePosta" name="ePosta" placeholder="E-posta adresiniz"/>
                        <label for="">Mesaj:</label>
                        <textarea id="formmesaj" name="formmesaj">Mesajınız</textarea><br />
                        <input type="submit" value="Gönder" />
                    </fieldset>
                </form>
            </div>
        </div>
    </section>

Sayfamız da şu şekilde:

Müşteriye adres veya iletşim formu ararken saç baş yoldurmayacak, gayet kullanışlı ve estetik bir sayfa oldu. Şimdilik bu kadar. Daha sonraki yazılarda diğer bölümlerle devam edeceğiz.

Dayanışmayla!
Meraklı Bilişimci

Yorumla

Yorum