Cara Membuat Contact Form Blogger Dan Menyembunyikan Tampilannya Di Blog Atau Blogger

Kali ini saya akan membagikan sebuah tutorial tentang cara membuat laman contact form di blogger dan menyembunyikan tampilannya di blog
Pertama kita buat halaman contact form terlebih dahulu ya sob...cara masuk ke blog kalian lalu pilih halaman dan buat halaman baru dengan judul Contact form

bisa lihat gambar di bawah ini

jika sudah copy kode di bawah ini dan masukan di halaman contact form kalian ya sob

<style>

.page-contact-form input,

.page-contact-form textarea {

width: 100%;

max-width: 100%;

margin-bottom: 10px;

}

​

.page-contact-form input.contact-form-button.contact-form-button-submit {

padding: 10px;

background: #000; /* Button background color */

color: #fff; /* Button text color */

border: none;

}

​

.page-contact-form input.contact-form-button.contact-form-button-submit:hover {

background: #777; /* Button background hover color */

color: #fff; /* Button text hover color */

}

​

</style>

​

<div class="contact-form-widget page-contact-form">

<div class="form">

<form name="contact-form">

Name:<br />

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

E-mail: <span id="required">*</span><br />

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

Message: <span id="required">*</span><br />

<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" />

<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>

</form>

</div>

</div>

dan rubah ke mode tampilan menulis maka hasilnya akan seperti gambar di bawah ini sob

Untuk download Scriptnya Disini

Setelah itu klik pada bagian Pengaturan atau pilihan pada sebelah kanan teks,untuk komentar pembaca kalian pilih jangan di izinkan,terus klik Publikasikan

Untuk Langkah selanjutnya kita Menambahkan Gadget formulir kontak caranya masuk ke tata letak terus kita tambahkan gadget formulir Kontak atau contact form maka tampilannya akan seperti ini

Dan tampilan blog nya masih seperti ini, masih kelihatan kan dan kurang efisien

Untuk menyembunyikannya dan bisa mengirim pesan kalian masuk ke thema dan edit Html dan cari kode di bawah ini dengan tekan CTRL+F cari  ]]></b:skin> dan masukan kode di bawah ini

#ContactForm1{display: none !important;}

 tepat di atas kode tersebut Ya sob

Untuk Download Scriptnya Disini

maka tampilannya akan seperti di bawah ini

Selanjutnya kalian klik simpan dan refresh blog kalian maka tampilan kontak form hilang

Kalian uji coba untuk mengetes apakah form kontak kalian bisa mengirim pesan atau tidak,,,kalian masuk ke blog kita trus geser ke bawah cari form kontak yang sudah di buat tadi

Lalu isi form kontak tersebut dan kirim kan ke email yang terdaftar di blog tersebut jika berhasil maka pesan tersebut akan masuk di kotak masuk email kalian

contohnya seperti ini

Ini contoh pesan yang sudah masuk di email kita

demikian untuk membuat form contact di blog dan menyembunyikan tampilannya serta bisa kirim pesan langsung... semoga dengan saya memberikan tutorial ini bisa bermanfaat untuk semuanya

Terima kasih sudah berkunjung di blog saya!!!!!!!!!!!