Cara Membuat Halaman Contact Us atau Hubungi Kami di Blog | Bangdjae

Bangdjae ~ Kemarin kita sudah membahas tentang beberapa pengenalan dalam membuat blog, untuk tahap ini kita akan membahas tentang contact us / halaman hubungi kami. contact us berisikan informasi / formulir pada blog yang bisa di katakan sebagai halaman yang harus di sediakan pada blog. jika blog anda merupakan blog pemasaran maka pemasangan contact us menjadi syarat utama untuk di pasang agar mempermudah calon pembeli menghubungi anda. untuk membuat halaman contact us sangat mudah, untuk langkah pemasangan widget bisa anda ikuti langkah di bawah ini

Pemasangan widget:

-masuk tata letak pada blog anda

-klik jendela opsi widget~formulir kontak~jendela konfigurasi widget

-anda memastikan pemasangan wdiget dengan benar, terserah anda tempatkan dimana

anda juga bisa mengganti kode widget anda, cara di bawah ini

-masuk xml editor, cari contactform

-ganti semua kode widget dengan kode yang baru di bawah ini

kode widget baru

<b:widget id='ContactForm1' locked='false' title='Formulir Kontak' type='ContactForm' version='2' visible='true'>

  <b:includable id='main'>

<b:attr name='id' value=''/>

<b:attr name='class' value=''/>

<b:attr name='style' value='display:none'/>

  </b:includable>

  <b:includable id='content'>

<!--removed-->

  </b:includable>

</b:widget>

-simpan perubahan

untuk cara membuat halaman menjadi statis, caranya di bawah ini

-masuk ke laman editor untuk membuat halaman statis yang baru, beri nama contact us/ hubungi kami

-beralih ke tampilan html, copy dan paste html formulir kontak

html formulir kontak

<p>Tambahkan text pembuka untuk formulir kontak versi anda sendiri disini</p>

<br/>

<br/>

<!-- Contact Form by wiBlogger.com -->

<style type='text/css'>

  .contact-form-field{margin-bottom:20px;}

  .contact-form-field-message{margin-bottom:0;}

  .contact-form input,

  .contact-form textarea{border:1px solid #e0e0e0;border-radius:3px;}

  .contact-form-label{margin:0 0 10px 0;}

  .contact-form-label span{color:red;}

  #ContactForm1_contact-form-name,

  #ContactForm1_contact-form-email {

    width: 300px;

    height: 20px;

    max-width: 95.5%;

    padding: 2%;

  }

  #ContactForm1_contact-form-email-message {

    width: 93.5%;

    height: 150px;

    padding: 3%;

    resize: none;

  }

  #ContactForm1_contact-form-submit {

    border:none;

    padding:10px 30px;

    font-size:20px;

    background:#3bbd1b;

    color:#fff;

    margin-top:20px;

    border-radius:3px;

    width:auto;

    font-size:15px;

    font-family:inherit;

  }

  #ContactForm1_contact-form-error-message {

    text-align:center;

    padding:0px 20px;

    margin-top:15px;

    color:#D41C1C;

  }

  #ContactForm1_contact-form-error-message img {

    display:none;

  }

</style>

<div class='widget contact-form ContactForm' data-version='2' id='ContactForm1'>

  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>

        <div class='contact-form-field contact-form-field-name'>

          <div class='contact-form-label'>

            Nama

          </div>

          <div class='contact-form-input'>

            <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>

          </div>

        </div>

        <div class='contact-form-field contact-form-field-email'>

          <div class='contact-form-label'>

            E-mail <span>*</span>

          </div>

          <div class='contact-form-input'>

            <input placeholder="Email balasan akan dikirim ke sini" class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>

          </div>

        </div>

        <div class='contact-form-field contact-form-field-message'>

          <div class='contact-form-label'>

            Pesan <span>*</span>

          </div>

          <div class='contact-form-input'>

            <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>

            <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Kirim Pesan'/>

          </div>

        </div>

        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>

        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>

      </form>

    </div>

  </div>

</div>

-selesai dan terbitkan halaman

itu tadi cara membuat halaman contact us atau hubungi kami, semoga bermanfaat

 baca juga : Panduan Lengkap Belajar HTML Blog Secara Gratis dan Mudah