Modifikasi Contact Form Dengan Style UI

Modifikasi Contact Form UI Style - Dengan adanya penambahan fitur baru blogger yaitu Contact Form ( send feed back ), maka banyak sekali para blogger yang sudah memodifikasinya dengan tampilan yang berbeda dan menjadikannya widget unik blog. dan untuk kali ini saya juga akan mencoba membuat sedikit efek contact me ( contact form ) dengan sedikit nuansa metro UI style.

DEMO

Komponen Dasarnya adalah sebagai berikut :

CSS

Code:

.ContactForm, .ContactForm .title {
display: none;
}
.floating-ct {
position: fixed;
width: 250px;
right: 0;
bottom: 0;
z-index: 999;
}
.floating-ct-head a:hover {
color: #fff;
background: #2c3e50;
}
.floating-ct-head a {border-radius:8px 0 0 0;
text-decoration:none;
padding: 5px 10px;
background: #16a085;
color:#fff;
font-weight: bold;
display: inline-block;
zoom: 1;
}
.floating-ct-body {
height: 311px;
background: #FD6CA3;
border: 1px solid #FD6CA3;
padding: 10px;
display: none;
}
.floating-ct-head {
text-align: right;
}
.floating-ct-body .ContactForm {
margin: 0;
display: block!important;
}

Javascript

Code:

//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact Me</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
if (!slide_up_ct) {
slide_up_ct = true;
$('.floating-ct-body').slideDown();
} else {
slide_up_ct = false;
$('.floating-ct-body').slideUp();
}
});
//]]>

SOURCE

 

Wah btw Demonya kok saya klik nggak ada yang demo untuk contact formnya ?

 

Itu demonya di pojok kanan bawah blog

 

iya bener gan udah ketemu, letaknya agak susah dilihat ya. mungkin kalau contact lebih baik berada di page

 

Namanya juga floating widget Mas

 

Keren gan... patut dicoba nih

 

keren gan. sepertinya warna flast memang sedang populernya saat ini.

 

sip gan.... ntar tak coba