Wednesday, August 23, 2017

Cara Membuat Contact Form di Menu Kontak Pada Postingan Blog

Bagi para pengunjung blog atau website, seringkalai kita membutuhkan informasi detail dan lebih. Biasanya kita akan mencari inforemasi tersebut kepada pengelola atau admin blog atau website. untuk mendapatkannya, hal yang kita cari terlebih dahulu adalah menu kontak yang terdapat di dalam web atau blog. Nah inilah salah satu fungsi keberadaan cantact form yang terdapat pada halaman postingan atau laman blog. Semua tidak lain adalah untuk mempermudah pengunjung menghubungi kita.

Contact form biasanya dibuat dengan sederhana dan mudah dimengerti baik pengirim maupun penerima. Adapun isi yang terdapat conttact form diantaranya terdapat nama, email, dan pesan yang akan di sampaikan. Setelah di kirim, pesan akan secara otomatis masuk ke email yang kita gunakan. So mudah banget kan kinerjanya.

Contoh Contact Form yang telah di buat di blog ipungberjuang.blogspot.com

Gambar di atas adalah contoh hasil contact form yang telah di buat. Nah, untuk membuat seperti yang di contohkan tersebut. Ikuti prosedur langkah-langkahnya sebagai berikut.

Langkah pertma membuat Contact Form di halaman postingan atau laman blog. di sarankan lebih baik di buat pada laman blog karena postingan ini memang edisi khusus.
  1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata letak. 
  2. Lalu klik tambahkan Gadget > Gadget Lainnya > lalu pilih Formulir Kontak > Dan letakkan di bagian sidebar paling bawah. 
  3. Selanjutnya, memasukan formulir kontak ke halaman posting. Buatlah artikel baru atau buat dilaman > Laman baru > Laman Kosong. Dan Copi kode dibawah ini lalu pastekan dibagian HTML.
  4. Terakhir beri judul dan publikasi
<form name='contact-form'><div>Nama Kamu:</div><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>Email:</div><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> 
<div>Pesan:</div> <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> <p></p><input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<div style='text-align: center; max-width: 450px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> </div></form>

Langkah ke dua: Atur tinggi dan panjang Contact Form, Nama, Email, dan Isi Pesan
  1. Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya
  2. Lalu terapkan ke blog, jika ingin merubah tingginya tambahkan kode height:100 px;.Silakan diatur sendiri.
/* untuk mengatur ukuran form name dan email*/.contact-form-name, .contact-form-email { max-width: 300px;width: 100%;}/* untuk mengatur ukuran form pesan*/ .contact-form-email-message {max-width: 300px;width: 100%;}
Comments


EmoticonEmoticon