follow ehpedia.com di facebook follow ehpedia.com di twitter follow ehpedia.com di google plus

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.
Cara Membuat Formulir Kontak Pada Halaman Statis Blog




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"
Cara Membuat Formulir Kontak Pada Halaman Statis Blog
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.

Cara Membuat Formulir Kontak Pada Halaman Statis Blog

artikel terkait lainnya

0 komentar

Mari berkomentar dan berbagi info atau pengalaman Anda. Dan jangan SPAM!

Contact Form

Name

Email *

Message *