-->






cara membuat halaman contact form

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

sebenarnya cara membuat semacam contact form ini dulu saya sudah membuat juga artikel semacam ini yaitu Cara membuat halaman Hubungi kami akan tetapi disini walau fungsinya sama yaitu sama-sama halaman untuk mengirimkan pesan atau sarana komunikasi antara admin blog dengan pengunjung tapi disini bedanya kalau postingan ku cara membuat halaman hubungi saya yang terdahulu itu menggunakan pihak ke tiga dan kali ini cara membuat contact form langsung dari fasilitas 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 dari blogger 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

Sampai Tahap ini artinya tempat Contact Form hanya ada satu tempat yaitu dalam halaman hubungi saya

Sampai disini panduan Blog blogger wonogiri Tetang Cara membuat halaman Contact Form blogger 
semoga panduan ini bisa bermanfaat dan jika masih kesulitan dalam menerapkan nya silahkan bertanya saja
Baca juga Cara menambah 2 kolom widget di footer

Komentar

Tampilkan

No comments:

Post a Comment

sejarah

+