Cara Membuat Contact Form/Formulir Kontak di Blog

Sebagai seorang pemilik blog, menjaga silaturahim dengan pengunjung tentunya menjadi sebuah tradisi yang tidak boleh ditinggalkan, karena dari situlah aspirasi-aspirasi dan tulisan kita dapat dibaca dan diambil ilmunya oleh khalayak luas.

Oleh karena itu, sebagai pemilik blog kita harus sebisa mungkin mendekatkan diri kita dengan pengunjung, agar mereka merasa nyaman dan diberi apresiasi, selain itu kita juga bisa bertukar pikiran dengan pengunjung yang mungkin saja memiliki minat dan hobby yang sama.

Untuk itu, pada kesempatan kali ini saya akan membagikan sebuah widget yang kiranya dapat membantu menghubungkan antara pemilik blog dan para pengunjung, yakni widget contact form atau formulir kontak.

Contact form atau yang biasa disebut formulir kontak ini adalah sebuah widget yang digunakan oleh pengunjung untuk menghubungi sang pemilik blog, entah itu untuk urusan kritik, pertanyaan, personal, pemasangan iklan di blog, bahkan untuk urusan bisnis sekalipun.

Jadi widget kontak formulir ini sangat wajib sekali untuk terdapat disetiap blog mengingat kegunaan yang dimilikinya.

Dengan widget ini kita juga bisa bertukar fikiran dengan para pengunjung di blog, atau sekedar menyapa satu sama lain, bahkan hingga menjalin hubungan bisnis yang bisa menghasilkan profit bagi blog kita.

Cara Membuat Contact Form / Formulir Kontak

1. Login ke Blogger.

2. Pilih menu "Template".

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> dengan menggunakan CTRL+F, lalu letakkan kode dibawah ini tepat diatasnya.

/* CSS Contact */
#ContactForm1,#ContactForm1 br{display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:50%;height:auto;margin:5px auto;padding:10px;background:#f9f9f9;color:#666;border:1px solid #ededed;border-radius:3px;}
#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#666;font-family:'Open Sans',sans-serif;border:1px solid #ededed;border-radius:3px;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;border:1px solid #ddd;-webkit-animation: kiss-in 0.45s ease-out;-moz-animation: kiss-in 0.45s ease-out;animation: kiss-in 0.45s ease-out;}
#ContactForm1_contact-form-submit {font-family:'Open Sans';float:left;background:none;
color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;
font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;
border:2px solid #eaeaea;border-radius:4rem;background-image: linear-gradient(110deg, #f56954 0%, #f56954 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;transition: background-position .4s ease, color .4s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#f56954;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:450px;margin-top:35px;}
@-webkit-keyframes kiss-in {
  0% {-webkit-transform: scale(1);}
  66% {-webkit-transform: scale(0.9);}
  100% {-webkit-transform: scale(1);}}
@-moz-keyframes kiss-in {
  0% {-moz-transform: scale(1);}
  66% {-moz-transform: scale(0.9);}
  100% {-moz-transform: scale(1);}}
@keyframes kiss-in {
  0% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}
  66% {-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);
-o-transform: scale(0.9);transform: scale(0.9);}
  100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}}

5. Klik "Save Template".

6. Sekaran pergi ke menu "laman" atau "page".

7. Klik "Laman baru".

8. Pilih opsi postingan "HTML" (bukan "compose").

9. Letakkan semua kode dibawah ini kedalamnya.

<form name="contact-form">
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-envelope"></i> Email Adress <span style="color: red; font-weight: bolder;">*</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<span style="font-family: 'Open Sans', Arial, Helvetica, sans-serif;font-weight: 700;"><i class="fa fa-pencil"></i> Content <span style="color: red; font-weight: bolder;">*</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
<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>

10. Beri judul yang sesuai, lalu klik "Publikasikan".

Demikian informasi terbaru tentang cara membuat contact form atau formulir kontak di blog, simak juga artikel lainya seputar tutorial blog tentang cara membuat widget berlangganan email subscribe di blog, semoga bermanfaat, dan selamat mencoba!

Tweet