Oleh alasannya yaitu itu, sebagai pemilik blog kita harus sebisa mungkin mendekatkan diri kita dengan pengunjung, biar mereka merasa nyaman dan diberi apresiasi, selain itu kita juga sanggup bertukar pikiran dengan pengunjung yang mungkin saja mempunyai minat dan hobby yang sama.
Untuk itu, pada kesempatan kali ini aku akan membagikan sebuah widget yang kiranya sanggup membantu menghubungkan antara pemilik blog dan para pengunjung, yakni widget contact form atau formulir kontak.
Contact form atau yang biasa disebut formulir kontak ini yaitu sebuah widget yang dipakai oleh pengunjung untuk menghubungi sang pemilik blog, entah itu untuk urusan kritik, pertanyaan, personal, pemasangan iklan di blog, bahkan untuk urusan bisnis sekalipun.
Kaprikornus widget kontak formulir ini sangat wajib sekali untuk terdapat disetiap blog mengingat kegunaan yang dimilikinya.
Dengan widget ini kita juga sanggup bertukar fikiran dengan para pengunjung di blog, atau sekedar menyapa satu sama lain, bahkan sampai menjalin hubungan bisnis yang sanggup menghasilkan profit bagi blog kita.
Cara Membuat Contact Form / Formulir Kontak
1. Login ke Blogger.
2. Pilih hidangan "Template".
3. Klik Edit HTML.
4. Cari arahan ]]></b:skin> dengan memakai CTRL+F, kemudian letakkan arahan dibawah ini sempurna 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 hidangan "laman" atau "page".
7. Klik "Laman baru".
8. Pilih opsi postingan "HTML" (bukan "compose").
9. Letakkan semua arahan 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, kemudian klik "Publikasikan".
Demikian gosip terbaru wacana cara menciptakan contact form atau formulir kontak di blog, simak juga artikel lainya seputar tutorial blog wacana cara menciptakan widget berlangganan email subscribe di blog, semoga bermanfaat, dan selamat mencoba!