Cara membuat Contact form di blog

Cara membuat halaman contact form di blog , Contact form adalah suatu halaman yang di mana halaman tersebut bisa di pergunakan oleh pengunjung untuk mengirimkan pesan kepada admin atau pemilik website atau blog tersebut
Contact form ini biasanya di tempatkan dalam halaman Hubungi kami atau Hubungi saya atau Countact us

cara membuat contact form yang akan saya berikan ini adalah fasilitas yang sudah di sediakan oleh blogger
dan contoh dari halaman contact form yang akan saya berikan panduanya sekarang seperti pada gambar di bawah ini


cara membuat halaman contact form

kalau di lihat tampilanya memang terkesan biasa saja kalau di bandingkan dengan halaman contact form yang saya buat panduanya terdahulu , akan tetapi contact form ini adalah fitur yang di berikan langsung oleh Blogger , jadi yang blognya blogspot atau url domain TLD tapi dari awalnya dari blogspot bisa menggunakan halaman contact form ini

Cara membuat Halaman Contact Form
1.buka blog anda lalu login
2.pada dashboard blog anda pilih tata letak dan selanjutnya klik Tambahkan gadged
3.lalu pilih gadged Formulir kontak contohnya seperti pada gambar di bawah ini

cara membuat halaman contact form

4.setelah memilih gadged formulir kontak lalu simpan gadged nya
5.selanjutnya anda membuat halaman baru dan silahkan di kasih judul Hubungi saya atau hubungi kami atau contact us dan selanjutnya copi kode di bawah ini dan pastekan dalam halaman baru tersebut ( halaman hubungi saya tersebut ) Tapi jika anda sudah membuat halaman hubungi kami anda tidak usah membuat halaman baru tapi anda bisa mengedit halamanya saja
Ingat : Sewaktu mempastekan kode di bawah ini posisi penulisan dalam halaman nya pada posisi HTML bukan compose

<div class="widget ContactForm" id="ContactForm1">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Name
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Message *
<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="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>

</form>
</div>
</div>
</div>

6.setelah mempastekan kode di atas dalam halaman hubungi saya selanjutnya publikasikan halaman tersebut
7. selesai

Sampai pada tahap ini artinya ruang atau halaman Contact form sudah jadi atau sudah selesai hanya saja tempat untuk mengirim pesan Contact form nya ada dua tempat yaitu :
  • di dalam halaman / page hubungi saya yang barusan anda buat 
  • di dalam widged yang tadi anda menambahkan widged Formulir kontak 
keterangan :
jadi kedua tempat tersebut bisa di gunakan oleh pengunjung untuk mengirim pesan ke pada pemilik blog / admin blog

Akan tetapi jika anda hanya menginginkan satu tempat contact form yang ada dalam halaman hubungi saya , artinya contact form yang ada dalam widged harus di hapus , hanya saja anda tidak bisa langsung menghapus widged dari tata letak atau dari halaman blog , namun anda harus menghapus dari Html Template

Keterangan :
- kalau menghapus langsung widgednya ada kemungkinan contact form yang ada di dalam halaman hubungi saya tidak bisa konek ( jadi harus menghapus dari Kode yang ada dalam HTML

Cara menghapus widged contact form
1.buka blog anda lalu login
2.dalam dashboard blog pilih Template dan klik Edit Html
3.lalu cari kode seperti di bawah ini

<b:widget id='ContactForm1' locked='false' title='kontak saya' 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>

4.dan hapus kode yang ada di dalam kode di atas yang saya tandain warna merah
5.lalu simpan Template nya
6.selesai


Demikian cara membuat contact form di blog , semoga berguna

No comments:

Post a Comment