Cara Mudah Membuat Layanan Contact Us di Blog - Tutorial kali ini saya akan sedikit memberikan Cara Mudah Membuat Layanan Contact Us di Blog.
Sama dengan judul yang saya berikan pada tutorial kali ini yang mengandung kata "Mudah", kenapa saya bilang mudah? karena pada tutorial kali ini kita tidak akan melibatkan pendaftaran ke website pihak ketiga (yang kadang kadang didalam widgetnya terdapat iklannya dan link yang keluar).
Membuat layanan contact us di blog merupakan salah satu bagian yang penting karena contact us berfungsi sebagai media korenspodensi formal maupun personal.
Cara Mudah Membuat Layanan Contact Us di Blog
 |
| Gambar 0.1 |
Contact Us merupakan bagian penting untuk wajOni maupun para pembaca karena jika mereka ingin menyampaikan sesuatu entah itu, keluhan, pertanyaan, pendapat ataupun hal lainnya yang ingin mereka sampaikan kepada pihak website/blog mereka tingga mengirimnya melalui layanan Contact Us.
Pada tutorial kali ini saya akan membuat layanan contact us kurang lebih seperti gambar di atas.
Fitur dari layanan contac us ini:
#1. Responsive
#2. Terlihat lebih profesional
#3. CSS design
#4. Menggunakan i-con dan font yang bagus
Memasang Widget Contact From di Blog
Kita harus menambahkan Widget Contact From kedalam halaman yang akan kita buat. Caranya, buka halaman Layout/Tata Letak > Add Gadget/Tambahkan Gadget > Gadget > Contact From/Formulir Kontak
 |
| Gambar 0.2 |
Kemudian masuk ke halaman Dashboard > Template > Edit HTML cari kode ]]></b:skin> letakan kode dibawah ini tepat di atas kode ]]></b:skin>
div#ContactForm1{
display: none !important;
}
Kemudian cari kode <head> dan letakan kode di bawah ini tepat dibawah kode <head>
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
Save template
Membuat Laman Contact Us
Silahkan anda masuk ke halaman Dashboard > Laman > Laman baru
 |
| Gambar 0.3 |
Kemudian silahkan anda isi judul sesuai kebutuhan anda, tapi seringkali judul yang digunakan untuk membuat contact us biasanya adalah Contact, Contact Us, Hubungi Kami, dan masih banyak lagi.
 |
| Gambar 0.4 |
Kemudian di form HTML
<style>
/*wajOni*/
div#twist_blogger_cntct_form{
padding: 50px 0px;
border-radius: 2px;
color: #fff;
font-size: 15px;
font-weight: bold;
background-color: #424242;
font-family: sans-serif;
}
div#twist_blogger_cntct_form .wrap-me{
margin: 0 auto;
display: block;
padding: 30px 20px;
background-color: #BBDEFB;
max-width: 440px;
width: 100% !important;
border-top: 65px solid #42A5F5;
box-sizing: border-box;
}
div#twist_blogger_cntct_form .wrap-me:before{
content: '\f0e0';
position: absolute;
font-family: FontAwesome;
font-weight: normal;
margin-top: -88px;
margin-left: -23px;
left: 50%;
display: inline-block;
font-size: 28px;
width: 53px;
height: 53px;
border-radius: 50px;
text-align: center;
color: #FFFFFF;
box-sizing: border-box;
border: 2px solid #FFFFFF;
line-height: 49px;
}
input#ContactForm1_contact-form-name,#ContactForm1_contact-form-email,#ContactForm1_contact-form-email:hover,#ContactForm1_contact-form-email:active{
padding: 5px;
margin-top: 4px !important;
box-shadow: none! important;
max-width: 300px;
width: 100%;
border: 1px solid #42A5F5;
line-height: 1em;
min-height: 31px;
background: #E3F2FD;
font-family: sans-serif;
margin-bottom: 15px;
}
.contact-form-email-message,.contact-form-email-message:active,.contact-form-email-message:hover{
padding: 5px;
margin-top: 4px !important;
box-shadow: none!Important;
max-width: 400px;
width: 100%;
border: 1px solid #42A5F5;
line-height: 1em;
min-height: 80px;
background: #E3F2FD;
font-family: sans-serif;
margin-bottom: 10px;
}
/***** Focus *****/
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
outline: none;
background: #FFFFFF !important;
color: #444;
border-color: rgb(236, 235, 235) !important;
box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;
transition: all 0.3s ease-in-out !important;
}
/**** Submit button style ****/
.contact-form-button-submit:hover {
color: #FFFFFF;
background: #1565C0!important;
}
.contact-form-button-submit{
background: #19B3EA;
display: table;
font-size: 17px;
margin: 0 !important;
border-radius: 0 !important;
max-width: 100%;
width: 100%;
min-width: 100%;
height: 32px;
letter-spacing: 0.5px;
font-family: sans-serif;
font-weight: normal;
cursor: pointer;
outline: none!important;
color: #FFFFFF;
border: 1px solid #fff !important;
text-align: center;
padding: 0px 0px 0px 15px;
text-transform: capitalize;
transition: all 300ms ease-in-out;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
}
/**** Submit button on Focus ****/
.contact-form-button-submit:focus,.contact-form-button-submit.focus{
border-color: #FFFFFF;
box-shadow: none !important;
}
/**** Error message ****/
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 100%;
margin-top: 35px;
}
.contact-form-error-message-with-border .contact-form-success-message{
background: #8BC34A;
border: 1px solid #CDDC39;
bottom: 0;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
color: #424242;
font-size: 12px;
font-weight: bold;
padding-bottom: 10px;
line-height: 19px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
}
/**** Submit Button On Success Message ****/
.contact-form-button-submit.disabled,.contact-form-button-submit.disabled:hover,.contact-form-button-submit.disabled:active{
opacity: 0.9;
}
/****** Success Message *****/
.contact-form-error-message-with-border{
background: #8BC34A;
border: 1px solid #CDDC39;
bottom: 0;
box-shadow: none;
color: #424242;
font-size: 15px;
font-weight: normal;
line-height: 35px;
margin-left: 0;
opacity: 1;
position: static;
text-align: center;
height: 35px;
margin-top: 45px;
}
.contact-form-cross{
height: 14px;
margin: 5px;
vertical-align: -8.5%;
float: right;
width: 14px;
border-radius: 50px;
border: 0 !important;
cursor: pointer;
}
.contact-form-success-message-with-border{
font-weight: normal;
background-color: #CDDC39;
border: 1px solid #8BC34A;
color: #FFF;
line-height: 35px;
margin-left: 0;
font-size: 13px;
opacity: 1;
position: static;
text-align: center;
height: 35px;
margin-top: 45px;
}
/* Extra Stuff */
div#twist_blogger_cntct_form span.name-bg{
background-color: #90CAF9;
}
div#twist_blogger_cntct_form span.email-bg{
background-color: #EF9A9A;
}
div#twist_blogger_cntct_form span.name-bg, div#twist_blogger_cntct_form span.email-bg{
display: inline-block;
max-width: 300px;
line-height: 21px;
width: 100%;
color: #696969;
padding: 3px 5px;
margin: 0px 0px 4px;
box-sizing: border-box;
height: 30px;
border: 1px solid #E4E0E0;
padding-left: 39px;
}
div#twist_blogger_cntct_form span.name-bg:before{
content: '\f007';
background-color: #60A2FF;
}
div#twist_blogger_cntct_form span.email-bg:before{
content: '\f1fa ';
background-color: #FF530B;
}
div#twist_blogger_cntct_form span.name-bg:before, div#twist_blogger_cntct_form span.email-bg:before, div#twist_blogger_cntct_form span.message-bg:before{
font-family: FontAwesome;
text-align: center;
margin: -4px 0 0px 0px;
font-weight: normal;
padding: 0;
line-height: 27px;
width: 28px;
height: 28px;
display: table;
position: absolute;
margin-left: -40px !important;
border: 1px solid rgba(0, 0, 0, 0.1);
border-right: 0 !important;
color: #FFFFFF;
}
div#twist_blogger_cntct_form span.message-bg{
background-color: #C5E1A5;
display: inline-block;
max-width: 400px;
line-height: 21px;
width: 100%;
color: #696969;
padding: 3px 5px;
box-sizing: border-box;
height: 30px;
border: 1px solid #E4E0E0;
padding-left: 39px;
margin: 0px 0px 4px;
}
div#twist_blogger_cntct_form span.message-bg:before{
content: '\f0e0';
background-color: #20CC00;
}
div#twist_blogger_cntct_form span.send-bg{
margin-top: 15px;
max-width: 45%;
width: 100%;
float: left;
display: inline-block;
}
div#twist_blogger_cntct_form span.send-bg:before{
content: '\f1d8';
}
input.contact-form-button.contact-form-button-submit.send-button:hover{
background-color: #1565C0!important;
}
div#twist_blogger_cntct_form .send-button{
color: #FFFFFF;
border: 1px solid #FFF !important;
background-color: #E53935;
float: right;
display: table;
height: 32px;
}
div#twist_blogger_cntct_form span.send-bg:before{
font-family: FontAwesome;
text-align: center;
font-weight: normal;
margin: 0;
background-color: #1E88E5;
padding: 0;
line-height: 27px;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
border: 1px solid #fff;
border-right: 0 !important;
color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg:before {
font-family: FontAwesome;
text-align: center;
font-weight: normal;
margin: 0;
background-color: #E53935;
padding: 0;
line-height: 27px;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
border: 1px solid #fff;
border-right: 0 !important;
color: #FFFFFF;
}
div#twist_blogger_cntct_form span.clear-bg {
display: inline-block;
float: right;
margin-top: 15px;
max-width: 45%;
width: 100%;
}
div#twist_blogger_cntct_form span.clear-bg:before {
content: '\f021';
}
input.contact-form-button.contact-form-button-submit.clear-button:hover {
background-color: #C62828!important;
}
div#twist_blogger_cntct_form .clear-button {
color: #FFFFFF;
border: 1px solid #FFF !important;
background-color: #1E88E5;
float: right;
display: table;
height: 32px;
}
.sidebar, #footer-wrapper, #blog-pager, h2.post-title, .comments {
display: none !important;
}
</style> <div id="twist_blogger_cntct_form">
<div class="wrap-me">
<form name="contact-form">
<span class='name-bg'>Your Name</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Enter your name here..." size="30" type="text" value="" />
<span class='email-bg'>Your Email*</span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Enter your email here..." size="30" type="text" value="" />
<span class='message-bg'>Your Message*</span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Write your message here..." rows="5"></textarea>
<span class='send-bg'><input class='contact-form-button contact-form-button-submit send-button' id="ContactForm1_contact-form-submit" type="button" value="Send"/></span> <span class='clear-bg'><input class='contact-form-button contact-form-button-submit clear-button' type='reset' value='Clear'/></span>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>Itulah tutorial saya kali ini Cara Mudah Membuat Layanan Contact Us di Blog
Note: Gambar di atas saya buat menggunakan Adobe Ilustrator CC 2015
- Jika anda suka dengan gambar yang saya buat dan ingin memesan gambar, silahkan hubungi saya disini
ConversionConversion EmoticonEmoticon