Cara Membuat Formulir Kontak Pada Halaman Statis Blog

Cara Membuat Form Kontak Pada Halaman Statis Blog - Sebagai internet marketer, halaman kontak memiliki peran yang sangat penting untuk sebuah blog atau website. Dengan adanya formulir kontak, maka pengunjung blog akan mengetahui kemana ia harus menghubungi si admin blog. Kali ini saya akan berbagi tutorial untuk membuat formulir kontak pada halaman statis blogger.
(lihat juga: Cara Membuat Privacy Policy Untuk Adsense)

Jika diterapkan maka hasilnya akan seperti ini.

DEMO

Cara Membuat Formulir Kontak Pada Halaman Statis Blog

Pertama Anda harus memasukkan widget formulir kontak di blog.

• pilih "tata letak"  >  "tambahkan gadget"  >  "gadget lainnya"  >  pilih "Formulir Kontak"

Lalu masukan elemen Font Awesome berikut dalam template Anda.

• pilih template  >  Edit HTML  >  Letakkan kode dibawah ini sebelum atau diatas kode </ head>

 <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

• kemudian letakan atau paste kode berikut ini sebelum atau diatas kode </ style>

#ContactForm1 {display: none}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {width: 300px;height: auto;margin: 10px auto;padding: 10px;background: #fdfdfd; color: #666;border: 1px dashed #ddd;transition: all 0.5s ease-in-out;}
#ContactForm1_contact-form-email-message {width: 450px;height: 175px;margin: 10px auto;padding: 10px;background: #fdfdfd;color: #666;font-family: 'Roboto',sans-serif;border: 1px dashed #ddd;transition: all 0.5s ease-in-out}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {background: #fff;outline: none;border: 1px dashed #f8a82a}
#ContactForm1_contact-form-submit {font-family: 'Roboto';font-size: 15px;width: 101px;height: 35px;float: left;color: #fff;padding: 0;margin: 10px 0 3px 0;cursor: pointer;background: #aaa; border: none;border-radius: 2px;transition: background 0.4s linear}
#ContactForm1_contact-form-submit:hover {background: #f8a82a}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message {
width: 450px;margin-top: 35px;}

• dan Simpan Template.

Kemudian buatlah halaman statis baru dan letakan kode dibawah ini pada tab HTML.

• pilih halaman  >  klik halaman baru  >  klik tab HTML (bukan compose)  >  lalu letakan atau copas kode ini ke dalamnya.

Nama<br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<br /><br />
Alamat Email <span style="color: red; font-weight: bolder;">*</span><br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<br /><br />
Isi Pesan <span style="color: red; font-weight: bolder;">*</span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<br />
<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>

• klik Publikasikan dan selesai.

Selamat, sekarang pengunjung blog anda sudah tahu kemana ia harus menghubungi Anda. Untuk akses menuju halaman kontak ini, Anda dapat membuat sebuah link Kontak di menu navigasi atau di footer yang diarahkan menuju formulir kontak.

Artikel Terkait

Cara Membuat Formulir Kontak Pada Halaman Statis Blog

4/ 5

Oleh Unknown

Unknown 08:21 Komentar