Cara Membuat Contact Form/Formulir Kontak di Blog
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!
