Yahya Effect

Berbagi Info, Tips Seputar Blogging & Internet

Wednesday, March 14, 2018

Cara Gampang Membuat Contact Form di Halaman Blog

Cara Mudah Membuat Kontak Form di Halaman Blog


Widget di blogger ada banyak, salah satunya adalah widget contact form. Contact form merupakan salah satu komponen penting untuk melengkapi suatu blog, sitemap, privacy policy, about dan disclaimer. Biasanya berisi informasi mengenai penulis baik tentang email, nomor hp dan alamat email. Widget kontak form berfungsi untuk memudahkan pengunjung menghubungi pemilik blog tanpa perlu repot repot login ke akun gmail terlebih dahulu untuk mengirim pesan kepada yang punya blog. Untuk membuat form kontak ini sebaiknya kita memasangnya di halaman statis saja, agar blog tidak menjadi terbebani. Email akan terkirim ke email blog yang sebagai admin tanpa harus nunggu lama, bisa dicek di inbox email kita.


Bagaiman cara mebuat kontak form? pemasangan widget form di blogger sangat anda hanya perlu mengikuti langkah langkah yang ada di bawah ini
sebelum memasuki langkah pertama, akan saya tunjukan tampilan kontak form yang akan kita buat adalah sebagai berikut


Bagaimana bagus kan? pasti bagus deh.

Langsung saja masuk ke langkah yang pertama

1. Tentunya anda harus masuk akun blogger terlebih dahulu
2. Masuk ke tata letak terlebih dahulu


3. kemudian klik tambahkan gadget dimana saja, anda boleh menempatkan dimana saja karena widget kontak form ini akan kita sembunyikan atau dibuat tidak tampil. Setelah muncul pop up klik gadget

4. Jika sudah klik tambahkan Folmlir Kontak.
5. Langsung menuju tema kemudian klik edit html

<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<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="" />
        </data:contactformnamemsg><br />
<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="" />
        </data:contactformemailmsg><br />
<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 + "_contact-form-submit"' 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 + "_contact-form-error-message"'/>
<p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
</textarea></data:contactformmessagemsg><br />
<br />
</form>
Hapus kode di atas yang ada pada bagian edit html

6. Jika langkah di atas sudah anda lakukan kemudian masuk ke halaman lalu klik halaman baru.
pada bagian html masukkan kode berikut
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<i class="fa fa-user"></i> Name: <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
        <br />
<br />
<i class="fa fa-envelope-o"></i> E-mail:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
        <br />
<br />
<i class="fa fa-pencil-square-o"></i> Message:
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br />
<input class="contact-form-button contact-form-button-submit fa-user" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
        <br />
<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>
<br /></form>
</div>
</div>

7. Klik publikasikan


Silakan cek kontak form anda. Meskipun anda sudah mengikuti langkah langkah diatas di blog anda tentu masih ada tulisan "Formulir Kontak". Untuk menyembunyikan formulir kontak yang ada pada sidebar atau bloga anda. Simak langkahnya di bawah ini

1. Masuk ke Tema kemudian klik edit html
2. Cari <style> dengan menggunakan ctrl+f pada keybord
3. Di bawa kode <style> pastekan kode css berikut
#ContactForm1 { display:none; }
4. Klik simpan

Setelah membuat kontak folmulir sebaiknya anda langsung melakukan percobaan dengan menggunakan email anda sendiri untuk mencegah terjadinya eror yang tidak diinginkan. Demikian postingan cara membuat contact form. Kalau sudah berhasil jangan lupa untuk meninggalkan jejak di kolom komentar. Semoga bermanfaat.

No comments:

Post a Comment