Cara Membuat Formulir Kontak di Blog dengan HTML

Tutorial Newbie - Cara Membuat Formulir Kontak di Blog dengan HTML Pada kesempatan hari ini saya akan membagikan artikel tentang blogging yaitu mengenai cara membuat formulir kontak di blog dengan HTML, Formulir kontak ini berfungsi sebagai alat untuk pengunjung blog menyampaikan pesannya kepada admin blog, entah itu saran atau tujuan" tertentu yang ingin pengunjung sampaikan.

Ada dua cara yang dapat digunakan dalam membuat formulir kontak untuk blog ini yaitu dengan menggunakan layanan pihak ketiga dan membuatnya dengan fitur bawaan blogger.

Oke langsung saja kita mulai, tapi pada kesempatan hari ini saya akan membuat yang versi bawaan blogger saja karena caranya lebih mudah yaitu menggunakan fitur Edit HTML pada blogger. Baiklah berikut ini akan saya bagikan tutorial membuat formulir kontak ini melalui fitur bawaan blogger.

1. Pertama silahkan anda login ke akun blogger anda terlebih dahulu.

2. Setelah masuk, buka menu "Tata Letak". Perhatikan gambar di bawah ini.

3. Setelah membuka menu "Tata Letak" selanjutnya anda klik Tambahkan Gadget >> pilih Formulir Kontak kemudian klik Simpan.
 

4. Setelah menambahkan Gadget Formulir Kontak langkah selanjutnya yang harus anda lakukan adalah membuka menu Halaman untuk membuat halaman Formulir Kontak. Perhatikan gambar di bawah ini.

5. Klik Halaman Baru untuk membuat halaman Formulir kontak.

6. Setelah masuk, anda harus mengalihkan dari Compose ke HTML karena disini kita akan membuatnya dengan kode HTML. lihat gambar di bawah ini.

7. Lalu Copy kode di bawah ini dan tempelkan ke dalam Halaman Formulir Kontak tadi.

<form name="contact-form">
<b>Harap gunakan formulir kontak ini dengan baik dan benar.</b>

Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
Alamat Email
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Pesan Anda
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Klik simpan lalu Publikasikan.


 8. Setelah itu anda buka menu "Tema" lalu pilih "Edit HTML". lihat gambar di bawah ini.

9. Setelah masuk ke dalam halaman Edit HTML anda cari kode ]]></b:skin> , lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin>.

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Setelah itu klik simpan tema.

Selesai, sekarang formulir kontak anda sudah selesai di buat, untuk melihatnya anda perlu membuka menu Halaman di Dashboard Blogger lalu lihat pada halaman Contact Form.

Akhir Kata :
Oke, itulah artikel yang dapat saya bagikan hari ini, semoga dapat membantu kegiatan para sahabat blogger untuk membangun blognya agar dapat berkembang dan menjadi lebih baik lagi.

Cukup sekian dari saya.
Terima kasih.


Suka Artikelnya? Share Ya!!

Share this post