Kendi iletişim formunuzu oluşturmak için harika bir yöntem

Daha önce size bir çok kez blog ziyaretçilerinizle iletişime geçebileceğiniz uygulama ve servis tanıtmıştık fakat şuan sizinle paylaşacağımız yöntem sayesinde Google Dökümanlar da oluşturduğunuz formu ,kendi blog’unuza ekleyebilir ve tasarımını da kendinize göre özelleştirebilirsiniz.

iletişim formu

 

Tasarımını kendi zevk ve beğenilerinize göre özelleştirebileceğiniz bu formda hiç bir reklam veya linkin bulunmaması da cabası.

 

Bizim test amaçlı oluşturduğumuz bu formu ziyaret ederseniz, Google Dökümanlarla oluşturulmuş bir form göreceksiniz , burada da bu formun modifiye edilmiş yani bizim tasarımını kendimize göre özelleştirdiğimiz ve jqueryle daha işlevsel hale getirdiğimiz son halini görebilirsiniz.

 

Kendi formunuzu oluşturmak içinse aşağıdaki adımları takip edebilirsiniz.

 

 

1.Adım   Google Dökümanları kullanarak bir  İletişim Formu oluşturun

Google hesabınız ile Google Dökümanlarda oturum açtıktan sonra solda bulunan oluştur butonuna basın açılan menüde form bağlantısına tıklayın.

formSizi karşılayan sayfada çift sayfa ikonuna tıklayarak iletişim formunuza istediğiniz kadar yeni bölüm ekleyebilir ve bu bölümleri yine kalem ikonuna tıklayarak düzenleyebilirsiniz.

 

Kalem ikonuna tıkladıktan sonra belirginleşen bölümde soru başlığı yazan bölümün karşısına hangi bilgiyi almak istiyorsanız onu yazıp diğer bölümleri düzenlemeye geçebilirsiniz. Burada da ayrıntılı bir görsel bulabilirsiniz.

 

Örnek: Ben ilk bölümde soru başlığı yazan bölüme Adınız yazıp diğer bölümü düzenlemeye geçiyorum ve Tüm bölümlerimi oluşturduktan sonra sağ üst köşede bulunan kaydet yazan butona basıyorum. Oluşturduğum formu görüntülemek için sayfanın en altında bulunan bağlantıya tıklamam yeterli.

 

İletişim sayfanızı oluşturduktan sonra kendi blogunuzda bir sayfa oluşturmanız gerekiyor bunun içinde sırası ile aşağıdaki adımları takip edin.

 

 

 2.Adım   İletişim sayfanızı oluşturun

 

 

İşleri sizn için kolaylaştırmak için formu oluşturacak kodları fazlalık kodlaradan temizledik ve sorunsuz çalışacak bir hale getirdik. aşağıda bulunan kodları kopyalayın.

 

<iframe id="hidden_iframe" name="hidden_iframe" onload="if(submitted){window.location='http://m.friendfeed-media.com/844a5923094c44954b26f9b01bdc705a14344406';}" style="display: none;"></iframe>
<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dEYzbnBpVnI0UkUxVmk3eVdGbDFFY1E6MQ&amp;embedded=true&amp;ifq" id="ss-form" method="POST" onsubmit="submitted=true;" style="padding-top: 5px;" target="hidden_iframe">
<label class="ss-q-title" for="entry_0">Ad&#305;n&#305;z <font color="#ff0000">*</font></label> 
<input id="name" type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">
<label class="ss-q-title" for="entry_1">E-Posta Adresi <font color="#ff0000">*</font></label> 
<input id="email" type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1">
<label class="ss-q-title" for="entry_2">Web Adresi</label> 
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2">
<label class="ss-q-title" for="entry_4">Mesaj&#305;n&#305;z <font color="#ff0000">*</font></label> 
<textarea id="message" name="entry.4.single" rows="8" cols="65" class="ss-q-long" id="entry_4"></textarea>
<input class="submit" type="submit" name="submit" value="Gönder">
</form>

 

Kodları kopyaladıktan sonra sırası ile Blogger’ın(Güncelleştirilmiş tasarım) , Kumanda panelinden, Sayfalar bölümüne geçerek Yeni sayfa ardından da Boş sayfaya tıklayın.

sayfalar

 

Açılan sayfada yazı editörünü HTML moduna getirdikten sonra kopyaladığınız kodları yapıştırın.

 

yazı-editoru-1

 

HTML Kodlarımızı ekledikten sonra bu kodlar üzerinde gerekli değişiklikleri yapmanız gerekiyor. Bunun içinde oluşturduğunuz iletişim sayfasına giderek her hangi boş bir yere tıklayarak kaynağı görüntüleyin.

 

Eklediğiniz kodlarda değiştirmeniz gereken bölümlerin araka planını sarıyla renklendirdik.

 

değisecek-bölümler

 

Bu bölümlerden ilki iletişim sayfanızın linki.

İletişim sayfanızın linkini kodlar içerisinde bulup , bloga eklediğiniz formun  kodlarında bu linki değiştirin.

sayfanın-linki

 

Sayfanızın linkini değiştirdikten sonra, zorunlu alanların   kodlarını da sırası ile aşağıdaki şekilde değiştirmeniz gerekiyor.

 

Örnek: benim ilk bölümüme yani formu dolduracak kişinin adının yazılmasını istediğim bölüme ait kodlar şöyle.

 

<label class="ss-q-title" for="entry_0">Ad&#305;n&#305;z <font color="#ff0000">*</font></label>
<input id="name" type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0">

 

Bu kodlarda sarıyla renkelendirdiiğim kodlarla iletişim formunda bu bölüme ait olan kodların aynı olması gerekiyor.

iletişim sayfasının kaynağına baktığımda sarıyla renklendirdiğim bölümün sıralaması ve kodları aynı olduğu için değiştirmiyorum.

name

 

Konuyu biraz açacak olursam benim iletişim formunda ad yazılmasını istediğim bölümün id’si ile blog’uma eklediğim iletişim formunun sıralaması ve kodlarının aynı olması gerekiyor bunun içinde iletişim sayfasının kodları içerisinde ad yazılmasını istediğim bölümün kodları içerisinde id buluyorum id="entry_0" iletişim sayfasındaki id ile bloga eklediğim id aynı olduğu için değiştirme gereği duymuyorum Google dökümanlarda oluşturduğum iletişim sayfasındaki id eğer id="entry_1"  olsaydı bloga eklediğim formdaki kodlarda id değiştirip id="entry_1"  yapmam gerekirdi.

 

Bu şekilde sarıyla renklendirdiğim diğer bölümleri de bulup sırayla değiştirmeniz gerekiyor.

 

HTML kodları üzerinde tüm değişiklikleri yaptıktan sonra artık sıra iletişim formumuzun tasarımını özelleştirebileceğimiz CSS kodlarını ve zorunlu alanların doldurulmasını sağlayacak Javascript kodlarını eklemeye geliyor.

 

3.Adım   CSS Kodlarını blog’unuza ekleyin

 

Sırası ile Blogger kumanda paneli —> Tasarım - ->  HTML’yi düzenle yolunu takip edin ve klavyenizdeki "Ctrl ve F" tuşlarına aynı anda basın , açılan arama formunda  ]]></b:skin> ifadesini aratıp bulduktan sonra, aşağıdaki CSS kodlarını hemen üzerine gelecek şekilde ekleyin.

 

#ss-form input,#ss-form textarea { background: url(http://1.bp.blogspot.com/-tS3Iqwx8UCo/TvhaYcZPoUI/AAAAAAAAADo/ngSYFIyYIfg/s1600/2011-12-26_132758.png) repeat-x; font-size:12px; line-height:18px; font-family: 'Gloria Hallelujah', cursive; border:1px solid #c7c9cd; padding:3px; outline: none; margin: 2px 0 8px; text-shadow: 0px 0px 1px #aaa; } #ss-form input { width:200px; height:20px; } #ss-form input.submit { height:30px; width:100px; font-size:18px; font-weight:400; } .ss-q-title{ font-family: 'Gloria Hallelujah', cursive; font-size:18px; font-weight:400; } #error { color:red; font-size:14px; display:none; } .needsfilled { color:#000; }


4.Adım   Javascript kodlarını ekleyin

 

CSS kodlarını şablonunuza ekledikten sonra </head> ifadesini bulup hemen üzerine gelecek şekilde aşağıda bulunan Javscript kodlarını ekleyin

 

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://m.friendfeed-media.com/d76517121fd644f0877bab1971eb70b52c778d41"></script>

<link href='http://fonts.googleapis.com/css?family=Gloria+Hallelujah' rel='stylesheet' type='text/css'/>

 

Tüm işlemleri doğru yaptıysanız artık sizin de sorunsuz çalışan bir iletişim formunuz var demektir, son olarak yapmanız gereken işlemse Google Dökümanlara geri dönerek ,size mesaj gönderildiğinde bunun e-posta adresinize bir mail olarak haber verilmesi için gerekli ayarları yapmak bunun içinde sırası ile aşağıdaki adımları uygulayın.

 

bildirim

 

Araçalara tıkladıktan sonra açılan menüde Bildirim kuralları yazan bağlantıya tıklayın.

bildrim-kuralları

 

Açılan pencerede Herhangi bir değişiklik yapıldığında ve E-posta – hemen yazan seçenekleri işaretlemeniz yeterli.

 

Konu biraz karışık göründüğü için birde videoku anlatım hazırladık, takıldığınız bölümlerde videoya bakarsanız işlemleri daha kolay bir şekilde yapabilirsiniz.

 

Bizi izlemeye devam edin Açık ağızlı gülümseme

Paylaş !

75 yorum:

  1. Biraz karışık gibi görünüyor ama değişik bir yöntem.Kullanacağımı sanmıyorum ama denemek istiyorum..Teşekkürler

    YanıtlaSil
  2. @Hakan Yılmaz bence iletişim formu kullanmak isteyenler için en güzel çözüm formda reklam veya her hangi bir bağlantı olmayacak..

    üstelik biraz CSS ve HTML den anlıyıyorsanız iletişim formunu istediğiniz gibi özelleştirmektede özgürsünüz ..tabi JQuery'in Validation eklentisi hakın da bilgisi olanlar, daha farklı formlarda ortaya çıkarabilirler hatta burada da< çok güzel bir örneğinide görebilrisiniz.

    Konun karışık olduğu konusunda da haklısın o yüzden birde video hazırladık takıldığınız konularda videoya bakarsanız eminimki çok yardımcı olacaktır.

    YanıtlaSil
  3. Tayfun bey eline sağlık.Bende bloğumda aynı konuyu bağlantı vererek yayınlamaya çalışıyorum.Ortak amaç insanların bu değerli bilgiye ulaşmalarını sağlamak.Bizlerin buradaki amacı zaten ticari değil.İnsanlar bunu çok iyi anlamaları gerekiyor.Anlayanlar için zaten sorun yok.Bende bloğumda http://guney59.blogspot.com/ aynı paylaşımları yapmaya çalışıyorum.Bir proğram hazırlamanın ne kadar zaman alıcı bir iş olduğunu biliyorum.Kodlardan fazla anlamasakta sonuçda sizlerin değerli çalışmaları sonucu bizlerde yetişiyoruz.Tek eksik bu bilgilerin çok kişiye ulaşamaması ve blogda bir köşe sıkışması.İşallah çok insana yardımcı olacaktır bu bilgiler.Bende sizden aldığım kopleri yayınlıyorum.
    Bu arada bir soru bazen yayınladıklarımı silmek zorunda kalıyorum.Nedeni html düzenle kısmında olduğu gibi göster işaretliyorum.Anacak bazen kodlarda bozulma oluyor (Yayınlandığında) bunu seçenek yani olduğu gibi göster yayına verdikten sonra bir sonraki yazıda seçeneği yorumla diye işaaretlediğimizde, bir önceki yayını bozarmı.Bunu tam anlayamadım.Açıklamalar için şimdiden teşekkürler.Tüm arkadaşların bu yazdıklarınızı uygulaması dileklerimle.Nede olsa google projeleri bunlar.Google da bunları uygalayanları çok sever diye düşünüyorum.Saygılar.Yeni yayınlarınızı bekliyoruz.

    YanıtlaSil
  4. @Adnan Güney Adnan bey tabi ki asıl amaç insanların doğru bilgiye ulaşmalarını sağlamak ama o bilgiye de bu blogta ulaşmalarını istediğimiz için bu blog'u kurduk.

    Bu yüzden saatlerce emek verip bu yazıları hazırlıyoruz ve insanların blogger hakkında aradıkları içeriği bulup bu konularla ilgili diğer konulara da daha kolay ve hızlı bir şekilde ulaşmalarını istiyoruz.

    Yazılarımız hoşunuza gidebilir ve kendi blog'uğunuzda bu yazılara yer vermekte isteyebilirsiniz ama bunlarında belirli kuralları var daha önce Gizlilik adlı sayfamızda bu kurallara yer verdik.

    bir yazıdan alıntı yapmak normaldir aman bununda internette kabul gören belirli kuralları vardır yazının tamamını yayınlamınız doğru değil ve yazıya bağlantı verirken de hata yapıyorsunuz bir yazıya bağlantı verilecekse blog'un ana sayfasına değil yazının bulunduğu sayfaya link verilir.



    Sorunuza gelecek olursak siz sadece yazıyı kopyalıyorsunuz ama onları şekillendiren css kodları burada kalıyor bunada yapabilecek bir şey yok .

    YanıtlaSil
  5. gereksiz...emailme,jotform gibi 30 saniyede daha fazlasınız yapabileceğiniz servisler varken uğraşmanın anlamı yok...

    YanıtlaSil
  6. @Sisispi e-mail me ve jotform ücretsiz sürümlerinde çeşitli kısıtlamalar var bu yöntemde her hangi bir kısıtlama yok.

    YanıtlaSil
  7. Peki google docs ta oluşturduk ve blogger a ekledik.Birisi buraya iletişim için yazdı,çizdi vs. bizi bilgilendiriyor mu yoksa manuel olarak girip kontrol etmemiz mi gerekiyor ?Teşekkürler...

    YanıtlaSil
  8. @GÖK-TÜRK manuel olarak kontrol etmene gerek yok , birisi mesaj gönderdiği zaman, e-posta adresine bildirim geliyor.

    yazının sonunda bunu nasıl yapabileceğin anlatılıyor.

    YanıtlaSil
  9. merhaba arkadaşlar,

    aynen anlattığınız yöntemleri uygulayarak yaptım ancak http://www.googlekullan.com/p/iletisim.html bu şekilde bir görünüm oldu şimdi de.ben bu hizalamayı nasıl yaparım bu bir.ikincisi iletişim sayfasının altında yeralan yorum kutucuğunu sadece iletişim sayfasından nasıl kaldırıcam ?

    YanıtlaSil
  10. merhaba Fatih
    bu kodları

    .ss-q-title
    {display:block;font-weight:normal;
    color: #45321c;}

    .submit,input,select,textarea
    {border:1px solid #c7c9cd; padding:3px; box-shadow:inset 0 2px 2px #e8e8e8; -o-box-shadow:inset 0 2px 2px #e8e8e8; -webkit-box-shadow:inset 0 2px 2px #e8e8e8; -moz-box-shadow:inset 0 2px 2px #e8e8e8;
    outline: none;
    margin: 0px 0 0;
    text-shadow: 4px 4px 4px #aaa;
    }

    CSS kodlarına ekle, sanırım sorunu çözecektir..

    diğer soruna gelecek olursak yorum kutusunu sadece o sayfada gizlemek için ,sayfayı oluşturduğun yazı panelinin sol alt köşesinde bulunan Kayıt Seçenekleri yazan bağlantıya tıkla ve yorumlara izin verme seçeneğini işaretle, böylece o sayfada yorumları gizlemiş olursun.

    YanıtlaSil
  11. Merhaba bana belki kırgınsınız ama sorun değil, tekrar izledim içeriğinizi.Güzel bir anlatım ve başarı tekrar tebrik ederim.Evet arkadaşlar Tayfun bey değerli işi bilen biri.Emeğe saygı göstermek gereken bir alt yapıya sahip.Bu nedenle içerikleri kimsenin yayınlamamasını hatta özgün kendi içeriklerinizi yayınlamayı bende teşvik ediyorum.Bende Tayfun beyin içeriklerini birebir kopyalayıp yapıştıranlardan biri idim.Ancak aramızda görüşmelerden sonra kopyalayıp yapıştırma yerine öğrenme ve özgün içeriğimi şu anda kendim hazırlıyorum.Sizde aynısını yapmaya yaptırmaya gayret gösterirseniz.Başarılarımız daha fazla olacağı kesindir.Kolay gelsin Tayfun bey sizleri izlemeye devam ediyorum.

    YanıtlaSil
  12. @Adnan Güney bizi kırılacak her hangi bir şey yok ortada , siz izin istediniz bende gerekli kuralları belirttim.

    asıl siz bu durumu saygıyla karşıladığınız için biz teşekkür ederiz.

    YanıtlaSil
  13. @Adnan Güney adnan abi olmadan bu blog olmaz :) kimsenin sana kırgın olduğu yok adnan abi

    YanıtlaSil
    Yanıtlar
    1. Burakcım samimi tavrın için teşekkür ederim.Çok geç farkettim yazdığını.Bende kırgın değilim zaten.Sadece gözlüklerimi çıkarmamı sağladığı için Tayfun kardeşimi teşekkür ederim.Tekrar başarılarınızın devamını dilerim.Bu görüşmelerden sonra bende bayağı yol aldım.
      Hepimiz ücretsiz bir amaç için çabalıyoruz.Sizleri seviyorum.
      @Tayfun Tunc @Burak Anil

      Sil
  14. Hocam Herşey İyi Güzel Tamam da bende oluşan görüntü bu şekil oldu Bir bakarmısın nasil düzeltebilirim acaba...
    http://kendidefterim.blogspot.com/p/iletisim.html

    YanıtlaSil
  15. @Urfalı sırası ile şu işlemleri yaparmısın bu kodları 3. adımda olduğu gibi CSS kodlarına ekle .

    .field{
    width:100%;
    overflow:auto;
    margin:0px 0px;
    }
    input.special{
    text-align:center;
    font-size:18px;
    float:right;
    font-family: 'Gloria Hallelujah', cursive;
    margin:10px 26px 0 0;
    padding:6px;
    line-height: 16px;
    }
    .submit
    {
    margin: 20px 0 0;
    }
    label, input[type="text"]{
    float:left;
    display:block;
    }
    label
    {
    margin-right: 5px;
    }
    .field{
    width:100%;
    overflow:auto;
    margin:5px 0px;
    }


    aşağıdaki kodları da 4. adımda eklediğin javscript kodlarının altına ekle.

    <script>
    $(document).ready(function() {
    var max = 0;
    $("label").each(function(){
    if ($(this).width() > max)
    max = $(this).width();
    });
    $("label").width(max);
    });
    </script>

    sanırım bu sorunu çözecektir , işe yaramazsa kodları yeni baştan yazarız ...

    YanıtlaSil
  16. @Tayfun TuncBiraz Düzelir gibi oldu, mozilla ve explorerda bozuk görünüyor, Birde eski kodlar ne olacak onlar silecekmiyiz?

    YanıtlaSil
  17. @Urfalı iletişim formunla reklam iç içe geçiyor yani reklam iletişim formunun üzerine biniyor.

    ekledin kodların en altına bu kodları ekle.
    <div style='clear: both'></div>

    bu reklamla formun üst üste binmesini engelleyecektir.

    eski kodlar css3 ile hazırlandı yani formun doldurlan bölümlerine gölgge yuvarlatılmış köşeler gibi özellikler ekler , explorerde gibi eski tarayıcılarda çalışmaz o kodları silersen form sade bir tasarıma sahip olur ilk eklediğin css kodlarını sil, sadece yorum formuna yazdığım kodlar kalsın ama javascript kodlarına karışma , eğer beğenirsen öyle kalsın .


    daha sonra vakit bulursam tüm tarayıcılarda aynı görünecek css kodları yazdığımda günellersin.

    YanıtlaSil
  18. @Tayfun Tunc
    Sanırım Bu Şekilde Yeterlidir, Derdini anlatmak isyeten her türlü yazar, sseni yorduğum için kuusura bakma...

    YanıtlaSil
  19. Dostum herşeyi dedigin gibi birebir yaptım ama sendeki gibi olmadı.yazılar düzensiz kaldı bunlar.bunun bir çözümü yokmudur ?

    http://strestube.blogspot.com/p/blogger-iletisim.html

    YanıtlaSil
  20. @Stres Tube sizin şablonuzdaki css kodları etkiliyor olabilir çözüm elbette bulunur , ama onun içinde kodları tekrardan elden geçirip yaınlama gerekir hatta iletişim için farklı bir blog olşturup kodları oraya ekledikten sonra nasıl iframeyle kendi blog'unuza ekleyebileceğinizide anlatabilirim ama bunun içinde biraz beklemeniz gerekir.

    YanıtlaSil
  21. @Tayfun Tunc

    tamam dostum ben problemi şimdilik çözdüm..ilgilendigin için teşekkürler.Bir siteden html kodu aldım bedava yapıyorlamış.benim kayıt oldugum maile geliyor..galiba belli sınırlamaları var ama beni idare eder :)

    YanıtlaSil
  22. Merhaba Tayfun Hocam,

    dediğin gibi verdiğin kodları aşağıdaki gibi ekledim ama yine görünüm değişmedi.
    http://www.googlekullan.com/p/iletisim_25.html bi bakabilirsen eğer aynen böyle görünüyo iletişim sayfam hala.lütfen yardımcı olurmusunuz.Teşekkürler.

    .field{
    width:100%;
    overflow:auto;
    margin:0px 0px;
    }
    input.special{
    text-align:center;
    font-size:18px;
    float:right;
    font-family: 'Gloria Hallelujah', cursive;
    margin:10px 26px 0 0;
    padding:6px;
    line-height: 16px;
    }
    .submit
    {
    margin: 20px 0 0;
    }
    label, input[type="text"]{
    float:left;
    display:block;
    }
    .ss-q-title
    {display:block;font-weight:normal;
    color: #45321c;}

    .submit,input,select,textarea
    {border:1px solid #c7c9cd; padding:3px; box-shadow:inset 0 2px 2px #e8e8e8; -o-box-shadow:inset 0 2px 2px #e8e8e8; -webkit-box-shadow:inset 0 2px 2px #e8e8e8; -moz-box-shadow:inset 0 2px 2px #e8e8e8;
    outline: none;
    margin: 0px 0 0;
    text-shadow: 4px 4px 4px #aaa;
    }
    ]]>

    YanıtlaSil
  23. Yorum formuna ait kodları tamamen değiştirdim ve tüm tarayıcılarda çalışabilecek şekilde ,yeniden yazdım daha önce blog'ugunuza eklediğiniz kodları silip yukarıdaki işlemleri doğru olarak yaparsanız siznde sorunsuz çalışan bir iletişim formunuz olabilir ..

    kolay gelsin ...

    YanıtlaSil
  24. hocam ben anlatılanları yaptım ama görüntü bu seferde bu şekilde oldu:
    http://www.googlekullan.com/p/iletisim_27.html
    sizin gösterdiğiniz gibi olmuyo bi türlü sebebi nedir anlayamadım.
    2. sorumda gönder butonuna bastıktan sonra "mesajınız başarıyla ulaşmıştır teşekkürler" gibi bir uyarı gelmiyo sayfaya.ve mail hesabıma da herhangi bir uyarı gelmiyo.e posta gelsin diye yapılması gereken ayarları yapmama rağmen gönder butonuna bastığımda hiç bir uyarı gelmiyo ekrana ve gönderilenler e mail adresime gelmiyor ?

    yardımcı olursanız çok sevinirm...

    YanıtlaSil
  25. @Fatih yaptığım yorumu dikkatli okursan aslında , kolayca yapabilirsin..

    "daha önce blog'ugunuza eklediğiniz kodları silip yukarıdaki işlemleri doğru olarak yaparsanız"

    YanıtlaSil
  26. yahu kardeşim çok zahmetli. off. :/ ama güzel paylaşım teşekkürler. 2 saattir uğraştım yapamadım. neyse vazgeçiyorum. yapanlara helal olsun.

    YanıtlaSil
  27. merhaba
    enim bir blog sitem var fakat diğer bloglardaki gibi izle paylaş kötü içerik bildir düğmelerinin yer aldğı çubuk yok bunu nasıl ekleyebilirim şimdiden teşekkür ederim

    YanıtlaSil
  28. rahatsız ettim kusura bakmayın ben buldum ve yaptım yinede teşekkürler

    YanıtlaSil
    Yanıtlar
    1. rica ederiz ..sorunu çözmek için demek ki buraya yazmanız gerekiyormuş :)

      Sil
  29. Tayfun kardeşim seni ilgiyle izliyorum.Faydalı paylaşımların için teşekkürler.Form konusunda daha basit bir yol buldum.Css ile uğraşmıyoruz.Formu oluşturduktan sonra başlıksız forma tıklıyoruz burada araçların hemen yanında Form yazıyor.oraya tıklayınca formu bir web sayfasına göm diye bir seçenek çıkıyor.buraya tıkladığında size verdiği kodu sayfa oluşturdan eklediğimizde form blogunuz için hazır durumda.örnek görüntü için <a href="http://www.sikayetkutusu.org/p/sikayet-kutusu.html>buraya tıklayabilirsiniz.</a></div>

    YanıtlaSil
    Yanıtlar
    1. bence bizim formumuzla kendi hazırladığın formu bir defa daha incele, bizim formumuzda bağlatılar yok ayrıca mail yollandığı zaman bizim istediğimiz sayfaya yönlendiriyor.

      Sil
  30. Girdiğim link çalışmadı galiba.amacım link bırakmak değil sadece formun eklediğimizde nasıl çalıştığını anlatmak.aşağıda linki kopyalayıp tarayıcınıza yapıştırark formun yeni halini görebilirsiniz.

    YanıtlaSil
    Yanıtlar
    1. Merhaba özgür paylaşmak istediğin link, yaptığın yorumla olduğu sürece sorun değil, yazdığın yorumun altında olursa, yorumunu yayınlanmış ve bahsettiğin sayfaya gitmek için yukarıdaki link yeterli, ayrı bir yorum yapıp link bu diye yazmana gerek yok, bu şekilde konu dağılıp gidiyor.

      Sil
  31. Merhaba Tayfun,

    Konu ile alakalı bulduğum en yakın yazın bu oldu.
    Bu adreste (http://michaeljacobdavis.com/) karşılaştığım iletişim formu çok hoşuma gitti ve görünümünü değiştirerek kullanmak istedim. İstediğim gibi de ayarladım herşey mükemmel görünüm süper ama asıl işlevini yerine getirmiyor yani bana mail yollamıyor :)

    Şaka bir yana kodlar arasında dolaştım ve kendi email adresimi nereye girmem gerektiğini bulamadım. Sanırım burada (http://michaeljacobdavis.com/js/v2/load.js) url: "mail.php", yazan alana girmem lazım ama olaya yabancı olduğum için atladığım birşey var sanırım ne yazarsam yazayım iletişim formu doğru çalışmıyor

    Vakit bulup yardımcı olursan sevinirim

    Selamlar...

    YanıtlaSil
  32. Tekrar merhaba Tayfun,

    Atlamış olabileceğini düşünerek cevabını halen beklediğimi belirtmek istedim

    Kolay gelsin...

    YanıtlaSil
    Yanıtlar
    1. aynen dediğin gibi bazen atladığımız sorular oluyor, senin sorununa her ne kadar cevap olmayacaksa da ben sana durumu anlatayım.

      Diyelimki senin ücretli bir hostun var ve siteni kurdun bir de iletişim formu istiyorsun bunun için ilk olarak "cig" ayarlarını yaparsın PHP biliyorsan iletişim formunun kodlarını yazarsın, daha sonra HTML kodlarını ve bunları şekillendirecek CSS kodlarını kod bilgin yoksa bile hazır kod bulabilirsin ama başta dediğinidiğim gibi cig ayarı myscoll gibi karmaşık ayarlarıda yapman gerekir, sen o siteden sadece HTML kodlarını ve css kodlarını eklemişsin belki jquery kodları sayesinde açılır kapanır özelliğide eklemiş olabilir sin ama PHP kodunu yükleyecek cig ayarlarını yapacak hostun yok o yüzden sadece mail adresi yazarark başka sitelerin iletişim formlarını kendi sitende çalıştıramazsın, ne yapabilirsin varsa kod bilgin bizim gibi yukarıda da anlattık google dökümanları kullanarak bir form oluşturup bu karmaşık ayarlardan ve hosting derdinden kurtulup kendi iletişim formunu oluşturup özelleştirebilirsin kkod bilgin yoksa bu kategoride bulabileceğin farklı servislerden birini kullanarak bir iletişim formu hazırlayabilirsin, tabi servislerde haklı olarak ücretsiz kullanım karşılığı bazı sınırlamalar ve kendi reklamlarını bu formalara ekleyebiliyorlar.

      Sil
    2. Tekrar merhaba,

      Bu gün 2. mesajı yazdıktan sonra oturup konuyu araştıdım ve mantığını anladım
      Sayfayı oluşturma konusunda bir sıkıntı yok istediğim gibi ayarlayabiliyorum
      mail gönderme konusuna gelince onu da hallettim fakat ufak bir sorun var :)
      Mail yollanıyor ama gönderinin başarılı olduğu tepkisini alamıyorum. Burada deneme sayfamda görebilirsin: http://npediletisim.blogspot.com/

      Sonuç olarak önümde tek engel bu mail.php dosyasını daha düzgün bir şekilde oluşturmak ve Gönder butonuna basıldığında orjinalindeki gibi tepki almak kaldı. Elimde bu arkadaşın mail.php dosyası olsa olayı çok kolayca halledeceğim bu yüzden mail atıp referans olarak alabilmem için bu dosyayı istedim cevap gelir mi bilemiyorum

      kullandığım PHP dosyası bu; http://www.box.com/s/278c0f92234d1449ec36

      Tabii sorun 1-2 kodla çözülebilecek gibi ise yardımını bekliyorum Uğraştıracak birşey ise hiç önemli değil kendini sıkma :)

      Kolay gelsin

      Sil
    3. o arkadaşın mail php dediğin dosyayı göremezsin, farzet ki gördün yine işine yaramaz "cig" diye bir ayar yapman gerekir onuda box.net gibi ücresiz servislerde yapamazsın, yaptığın tek şey bana aynı şeyleri yazdırmak.

      Sorularını cevaplamak istiyorum ama cevapladığımda da ciddiye alınmak isterim bilmediğim bir konu olsa zaten bilmiyorum der geçerim böyle yaparsan farklı profillerle :) sorman bile işe yaramayacak..

      Sil
  33. Tekrar merhaba,

    Doğrudur daha önce eşimin bilgisayarını kullanırken soru sordum ve şifrelerimi aklımda tutmadığım, bunun için bir şifre yöneticisi kullandığım için kendi hesabıma geçemedim. Bunu sorun edeceğini veya kurnazlık olarak göreceğini düşünmemiştim. Zaten kimliğimi saklamak gibi bir kaygım olsa gerekli önlemleri alır ve saklardım :)

    Tekrar tekrar aynı şeyleri yazdırmak demişsin ama bir önceki mesajında;

    "sadece mail adresi yazarark başka sitelerin iletişim formlarını kendi sitende çalıştıramazsın"

    demiştin şu anda çalıştırdım ve takıldığım ufak bir nokta kaldı sadece bu konuda yardımın olabilir mi diye tekrar soru yönelttim. Zaten "yapılabilir ama çok uğraşmak gerekir benimde vaktim yok babında bir cevap verseydin 2. soruyu yöneltmezdim.

    Neyse şimdiye kadar ki yardımların için teşekkür ederim

    Kolay gelsin...

    YanıtlaSil
    Yanıtlar
    1. çalıştırdım dediğin nedir ben ordan sana mail yollarsam mail alıyormusun bunumu demeye çalışıyorsun ....

      Sil
    2. senin yaptığın sadece tasarımını almak mesaj attığımda sana gelmiyorsa çalışmıyor demektir sana anlatmaya çalıştığımda bu yöntemle bu formu çalıştırmazsın..

      Sil
    3. Bir iletişim formuyla mesaj gönderilemiyecekse tasarımını alıp eklemen hiç bir işe yaramaz sadece süs diye kullanırsın.

      İlk yorumuma dikkat et senin sorduğun tüm soruların cevabı var aslında aynı şeyleri yazdırıyorsun dediğimde bundan..

      " sen o siteden sadece HTML kodlarını ve css kodlarını eklemişsin belki jquery kodları sayesinde açılır kapanır özelliğide eklemiş olabilir sin"

      " varsa kod bilgin bizim gibi yukarıda da anlattık google dökümanları kullanarak bir form oluşturup bu karmaşık ayarlardan ve hosting derdinden kurtulup kendi iletişim formunu oluşturup özelleştirebilirsin"

      buradaki özelleştirmeden kasıt aldığın o tasarımı google dökümanlarla oluşturduğun formada uygulayabilirsin ama sen hala bana PHP den bahsediyorsun...

      Sil
  34. Tekrar merhaba,

    Sanırım ben anlatamadım :(
    Evet aynen dediğin gibi şu anda oraya yazılan her mesaj bana mail olarak geliyor.Yani çalışıyor. (İstersen bir şey yolla bu şekilde çalıştığını kanıtlayabilirim :D) Tek sorun orjinalinde send butonuna bastıktan sonra mesaj gönderme başaılı deyip kutu aynen açıldığı gibi geri kapanıyor. Oysa bende send butonuna bastığında loading.gif resmi dönmeye başlıyor ve öyle kalıyor.
    Yani mail.php dosyasında bu kapanış eylemini jq dosyası üzerinden (http://michaeljacobdavis.com/js/v2/load.js) tetikleyen bir satırlık tek kelimelik bir kod var onu bulamıyorum orada takıldım :)


    Selamlar...

    YanıtlaSil
    Yanıtlar
    1. sana yolladığım mesajı aldın mı ? şimdi submite tıklanıldığında javascripte id atanmış mail boşmu dolumu sorguluyor, fakat mail gönderildiğinde php kodlarında #submit yerine başka bir id atanmış olabilir onu değiştirmen gerekebilir..

      Sil
  35. Mailini aldım;


    bu windows yedili senin blogmu? oradaki yorumları sayfalayabileceiğini biliyormusun ?

    dediğin üzerinde çalışacağım ama şu anda çıkmam gerekiyor sonuç olumlu olursa paylaşırım. Benim ilgi alanımda olmadığı için yazısını da sen yazarsın :) Bu şekilde 3. parti her hangi bir araç veya hizmet kullanmadan iletişim formu oluşturmak ve kısıtlamalardan kurtulmak en ideal yöntem olacaktır diye düşünüyorum

    Selamlar...

    YanıtlaSil
    Yanıtlar
    1. olumlu olursa sen yaz bizim blogta yayınlarız :)

      Sil
  36. Tekrar merhaba Tayfun,

    Blogda yayınlaman için bir engel yok zaten düzgün bir şekilde çalışıyor. Benim yaşadığım problem sadece benim fazla şey istememden kaynaklanıyor. Yani şu kapanma animasyonunu bir türlü tetikleyemememden :)

    Yazı yazabilmen için bir demo blog hazırladım: http://phpformdemo.blogspot.com/

    Bu sistemle iletişim formu oluşturmanın birçok yolu var ama ben 2 tanesini anlatayım:

    1- ya blogspot üzerinde bir sayfa oluşturarak (Örnek: http://phpformdemo.blogspot.com/)

    2-yada direk ücretsiz host servisimizde bir sayfa oluşturarak. (Örnek: http://nnpsrn.comule.com/phpform.xml) (Ben aceleyle XML olarak attım sen onu HTML e çevirirsin)

    Her iki yöntemde de hiçbir sınırlama, reklam vs. yok. sınırsız mesaj, ağ genişliği ve dosya depolama alanı mevcut.

    Nasıl yapılacağına gelince;

    her iki yöntemde de öncelikle bir ücretsiz host bulmamız gerekiyor. Ben http://www.000webhost.com/ u kullandım.


    1. yöntem blogger da sayfa oluşturmak;

    a-) Gerekli üyelik işlemlerini yaptıktan sonra CPanel de oturum açıyoruz ve indirme linkini vereceğim mail.php dosyasını /public_html klasöründe oluşturuyoruz yada upload ediyoruz.

    b-) Blogger da iletişim adında bir blog oluşturup linkini vereceğim basit bir şablonu yüklüyoruz.

    c- Başka hiçbirşeye gerek yok. Yeni oluşturduğumuz bloga kendi blogumudan iletişim adıyla bağlantı veriyoruz.

    2- Direk host alanımızda sayfa oluşturmak için;

    a-) 1/a adımına ek olarak şablonumuzu da /public_html klasörüne upload edyoruz.

    b-) Başka hiç birşeye gerek yok. bu sayfaya blogumuzdan iletişim adıyla bağlantı veriyoruz.

    Ancak dikkat etmeniz gereken şu; Adres örneğin, http://nnpsrn.comule.com/public_html/phpform.xml gibi görünsede aradaki /public_html yi çıkarıp http://nnpsrn.comule.com/phpform.xml olarak kullanacaksınız.

    PHP ve Blogger şablonunun indirme linki ise bu: (Beni oku dosyasını okumayı unutmayın) http://www.box.com/s/a46750f1cab256c612bb

    Ben iptidai bir şekilde anlattım artık sen düzgün bir şekilde yazarsın :)

    Selamlar...

    YanıtlaSil
    Yanıtlar
    1. Neyse bir ortak noktada buluşalım çalışıyor ama eksiği var diyelim, mail gittiğinde uyarı mesajı yani mail alınmıştır filan tarzında bir uyarı gerekir.

      ama bununla farklı uygulamalarda geliştirilebilir örnek yazıların altında yer alan arkadaşlarına mesaj olarak gönder tarzında.

      ben aslında yazı olarak yaz, misafir yazar olarak (senin adınla) yayınlayalım demiştim..

      neyse vakit bulursam senin yöneteminle bir uygulamada ben hazırlarım jquery ile daha işlevsel hale getiririz..

      Sil
  37. Tekrar merhaba,

    Bu konuda yazı yazabilecek kadar bilgili değilim ben haddimi bilirim :)

    Ama sen de formu incelemeden cevap yazmışsın :)
    Form dediğin gibi çalışıyor; Yani mail yollandığına dair kullanıcı ile etkileşime geçiyor. Ancak tek bir kusuru var o da blogspotta isen "Email gönderme işlemi tamamlanmıştır!" mesajı (Benim örneğim için tabii) http://nnpsrn.comule.com/1mail.php adresinde görüntüleniyor. Sayfa benim bıraktığım gibi basit bırakılırsa arkaplan beyaz olduğu için kullanıcı bunu fark etmiyor bile. Ama zaten sen bunu kolayca halledersin diye düşünüyorum. Sayfayı host alanında oluşturduysan zaten sorun yok.

    Formun nasıl çalıştığı ve kullanıcıyla nasıl etkileşime geçtiğini burada görebilirsin: http://youtu.be/n-CobOAoDO8

    Mailin bana geldiğinin kanıtı ise burada; http://i.imgur.com/Tpwb7.png

    Taktir edersin ki birazcık HTML bilgisiyel bu form çok güzel şekillere sokulabilir ve blogger lar için kullanışlı olabilir diye düşünüyorum

    İyi çalışmalar, selamlar...

    YanıtlaSil
    Yanıtlar
    1. php kodlarını webhosta yklediğinde bir süre sonra ücretli sürüme geç diyor ben daha önce hesap açmıştım şimdi ücret istiyor, o yüzden tamamen ücretsiz bir servis bulman gerekir..

      ben yukarıdaki anlatıma göre yaptım google olduu için hem güvenli hemde tamamen ücretsiz, tabi tercih sana kalıyor kolay gelsin, sendeki bu azim olduktan sonra eminim ona da bir çözüm bulursun :)

      Sil
  38. Hocam ellerine sağlık. Videolu anlatımda çok güzel olmuş. Benim Sorunum yazı tiplerinle ilgiliydi hangi kodlardan düzeltebilirim yardım edersen ben bulamadım. Şu an ki durumu bu:
    http://denizinblogu.blogspot.com/p/iletisim.html

    YanıtlaSil
  39. Tekrar merhaba Tayfun,

    Daha önce 1-2 defa yardımını istemiştim ve yardımcı olmuştun bunun için teşekkür etmek istedim :)
    Sana 2 şey sormuştum. Biri hanımın hesabı ile idi (Seren Aksu) ve bana küçük ama yol almamı sağlayacak bir kod yardımında bulunmuştun. (http://bit.ly/Ku5NZK)

    İkincisi ise buradaki iletişim formu ile ilgili fikir alışverişinde bulunmuştuk.

    Sonuçlarını görmeni istedim:

    http://metro.enpedi.com
    http://iletisim.enpedi.com

    Tekrar teşekkürler ve iyi çalşmalar

    YanıtlaSil
    Yanıtlar
    1. merhaba .. her iki sitede de çok fazla emek var ve güzel olmuş, özellikle metro anladığım kadarıyla tüm bloglarınaa buradan bağlantı veriyorsun.... ana sayfa gibi bişe olmuş ve tasarımıda çok ve modern olmuş tebrikler..

      Sil
  40. Evet tam 2 aydır uğraşıyorum :)

    Dediğin gibi Metro alternatif, eğlenceli ve önemli konuları tek sayfada görme şansı veren bir alternatif arayüz. Windows 8 den esinlenerek oluşturdum. 1-2 sorun var tamamen istediğim gibi olmadı. Örneğin sayfa yeniden yüklenmeden her katmanın ayrı adresi olsun istiyordum. (http://metro.enpedi.com#1, http://metro.enpedi.com#2 vs gibi) Bu hem Bookmark, hem tıklanma sayısı hemde reklamcılık açısından daha verimli olacak. Nasıl yapacağımı da buldum ama henüz sorunsuzca çalıştırmaya muvaffak olamadım. (Burada nasıl yapılacağı var ama ben benim akordiyonuma uyarlayamadım henüz :( http://bit.ly/JQjobi )

    Uğraşınca oluyor anlayacağın
    Neyse kolay gelsin

    Selamlar...

    YanıtlaSil
  41. Tayfun hocam sizin sayenizde bir şeyler yapmaya çalışyorum ben de bloguma daha acemiyim baya. http://violeteticaret.blogspot.com/p/girisimlerinizi-anlatn.html
    Bu sayfadaki problemi zaten girince siz de farkedeceksiniz acaba nasıl çözebilirim bu konuda yardımcı olabilirseniz çok sevinirim. Teşekkürler

    YanıtlaSil
    Yanıtlar
    1. hazırlaığın iletişim sayfasının genişliği çok fazla eklediğin kodlarda width="760" yazan bölümü bul ve buradaki 760 değerini kendi sayfana sığacak şekilde düşür.

      Sil
  42. Tayfun bey ben yaptım fakat Web adresi kısmının olmamasını istiyorum nasıl yapıcam acaba ?

    YanıtlaSil
  43. Tayfun abi benim sitede yazılar thumbnail şeklinde.İletişim formunu yaptığımda sadece Yükleniyor... diye bi yazı çıkıyor.Çaresi yok mudur?

    YanıtlaSil
  44. Bende İşe Yaramadı , Daha Doğrusu Deneme için

    Bastığımda butona sayfa ilerlemiyor. Bi Yardımcı olurmusunuz

    YanıtlaSil
  45. Teşekkürler gayet faydalı oldu :)

    İşe yaramıyor diyenler tekrar denesinler aynen uyguladığınız da sorun yok :)

    YanıtlaSil
  46. Bu yorum yazar tarafından silindi.

    YanıtlaSil
  47. Hocam bloggunuzda kullandığınız iletişim sayfasıdna denemek için bir mail attım size mail iletildi yazısından sonra tekrar blogunuza otomatik dönülüyor. konu içindeki Javascipt kodları ile mi oluyor. Bende java kodları çalışmadı deneyemedim

    YanıtlaSil
  48. google.sites oluşturduğum sayfaya iletişim penceresi ekledim
    veriler https://docs.google.com/spreadsheet/formResponse?formkey= geliyor. input type=submit tıklandığımda form action çalışıp veriler düzgin gidiyor ama

    form action="https://docs.google.com/spreadsheet/formResponse?formkey=" method="POST" koduyla

    https://docs.google.com/spreadsheet/formResponse?formkey= => bu sayfa açılıyor
    yapmak istediğim
    =>açılan sayfa otomatik kapansın veya hiç açılmasın. Bunu nasıl yapabilirim?

    YanıtlaSil
  49. bütün herşeyi doğru yaptığıma eminim. ama işte tam formu bloga gömecem olmuyor :( tam çıkmıyor. yazılar sorunlu gibi çıkıyor. butonlar falan gözükmüyor :( neden anlamadım. acaba temadan olabilir mi?
    http://secretmobil.blogspot.com/

    YanıtlaSil
  50. Tayfun bey herşey tamam da cevapları E-Maile yönlendiremedim. Siz makaleyi yazdıktan sonra tasarım değişmiş. Googgle Dökümanları Google Drive'e bağlamış. Yani form oluşturma işini Google Drive'dan yaptım, fakat ayarlar kısmında bildirimleri maile gönder diye bir seçenek yok. Yardımcı olursanız memnun olurum.

    YanıtlaSil
    Yanıtlar
    1. Google drive girdikten sonra hazırladığın forma tıklıyorsun ve yine yukarıdaki adımları takip ediyorsun bildirim kuralları için değişen bir şey yok.

      Sil
    2. Ya pardon ben gönderilen forumun içeriği mail olarak geliyor sanmıştım meğer sadece haberi geliyormuş :) Neyse bu şekilde de olur tıkır tıkır çalışıyor teşekkür ederim.

      Sil
  51. yaa ben bazı şeyleri beceremedim yani anlamadım sizin yukarıda verdiğiniz kodları ben yazdım ama sizin ki gibi çıkıyor benim istediklerimi bloga nasıl ekleyebilirim

    YanıtlaSil
  52. Video gitmiş ve takıldığım yerler vardı. Tekrar yükleme imkanınız var mı?

    YanıtlaSil
  53. Merhabalar, kolay gelsin öncelikle... Form'dan kullanıcıların gönderdiği yazılar çok iğrenç bir excel tablosunun içine geliyor, bunun (yazının tamamanın) maile gelmesi veya da güzel bir tabloya gelmesi mümkün mü, ben bulamadım?

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz