-->


Css3 Form Kirim Email ke Admin

Form Kirim Email ke Admin udah sering banget kita temuin di halaman depan blog. Fungsinya untuk mengirim pesan singkat ke pemilik blog lewat layanan elektronik mail, bukan lewat comment form yang ada di display blog bagian bawah postingan. Dan biasanya mereka, para blogger menggunakan teknik ini dengan bahasa javascript yang telah dulu ada. Sedangkan dengan kemajuan teknologi, CSS3 pun ikut ambil bagian, dan sekarang telah mengambil alih para designer web dan designer blog untuk menggunakan Cascading Style Sheet yang udah sangat mumpuni dalam bidang design ini. Tentu saja membuat form kirim email ini tidaklah mudah. Tapi dengan belajar teratur, bukan hal yang tidak mungkin itu akan terlaksana. Mengingat CSS3 sekarang udah menjadi hal yang mutlak di dunia design web.

Dan dibawah ini aku akan mencoba memberi kalian sesuatu yang mungkin bisa menjadi acuan untuk membuat form kirim email ke admin blog dengan CSS3. Meski sebelumnya aku telah memposting yang pake java di tulisan dengan judul ini Form Kirim Email Ke Admin Blog.

Tutorialnya liat di Spoiler.






Masuk ke Edit HTML
Cari kode ]]></b:skin>

Taruh kode CSS3-nya persis diatasnya ::

#form-wrapper
{
width: 350px;
height: 300px;
margin: 0 auto;
padding: 20px;
position: relative;
border: 1px solid #ddd;

background-color: #fff;
background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
#fff 50px, #fff 150px,
#3e4996 100px, #3e4996,
#fff 200px, #fff 300px);

background-image: -webkit-gradient(linear, left top, right bottom,


color-stop(5%, #fff), color-stop(5%, #fff),
color-stop(15%, #844049), color-stop(15%, #fff),
color-stop(25%, #fff), color-stop(25%, #fff),
color-stop(35%, #3E4996), color-stop(35%, #fff ),
color-stop(45%, #fff), color-stop(45%, #fff),
color-stop(55%, #844049), color-stop(55%, #fff),
color-stop(65%, #fff), color-stop(65%, #fff),
color-stop(75%, #3E4996), color-stop(75%, #fff ),
color-stop(85%, #fff), color-stop(85%, #fff),
color-stop(95%, #844049), color-stop(95%, #fff));


background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
#fff 50px, #fff 150px,
#3e4996 100px, #3e4996,
#fff 200px, #fff 300px);

background-image: -o-repeating-linear-gradient(135deg,#844049,#844049,
#fff 50px, #fff 150px,
#3e4996 100px, #3e4996,
#fff 200px, #fff 300px);

background-image: -ms-repeating-linear-gradient(135deg,#844049,#844049,
#fff 50px, #fff 150px,
#3e4996 100px, #3e4996,
#fff 200px, #fff 300px);

background-image: repeating-linear-gradient(135deg,#844049,#844049,
#fff 50px, #fff 150px,
#3e4996 100px, #3e4996,
#fff 200px, #fff 300px);
}


#form-wrapper:before, #form-wrapper:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}

#form-wrapper:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}


#form-wrapper .button
{
float: right;
margin: 10px 0 0 0;
padding: 7px 15px;
cursor: pointer;
color: #fff;
font: bold 13px Tahoma, Verdana, Arial;
text-transform: uppercase;
overflow: visible; /* IE6/7 fix */
border: 0;

background-color: #7089b3;
background-image: -moz-linear-gradient(#a5b8da, #7089b3);
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b8da), to(#7089b3));
background-image: -webkit-linear-gradient(#a5b8da, #7089b3);
background-image: -o-linear-gradient(#a5b8da, #7089b3);
background-image: -ms-linear-gradient(#a5b8da, #7089b3);
background-image: linear-gradient(#a5b8da, #7089b3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#a5b8da', EndColorStr='#7089b3');

-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

text-shadow: 0 1px 0 rgba(0,0,0,.3);

-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 0 rgba(0, 0, 0, 0.7);
}


#form-wrapper .button:hover
{
background-color: #a5b8da;
background-image: -moz-linear-gradient(#7089b3, #a5b8da);
background-image: -webkit-gradient(linear, left top, left bottom, from(#7089b3), to(#a5b8da));
background-image: -webkit-linear-gradient(#7089b3, #a5b8da);
background-image: -o-linear-gradient(#7089b3, #a5b8da);
background-image: -ms-linear-gradient(#7089b3, #a5b8da);
background-image: linear-gradient(#7089b3, #a5b8da);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#7089b3', EndColorStr='#a5b8da');
}

#form-wrapper .button:active
{
background: #64799e;
position: relative;
top: 2px;

-moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
-webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.7) inset;
}


Terus pasang HTML-nya di Postingan atau Sidebar ::

<div id="form-wrapper">
<form>
<div id="form-inner">

<label for="name">Nama:</label>
<input type="text" class="input" id="name" placeholder="AgungDev">

<label for="email">Email:</label>
<input type="email" class="input" id="email" placeholder="AgungDev@email.com">

<label for="message">Pesan:</label>
<textarea class="input textarea" id="message" placeholder="Teks Kalian Disini"></textarea>

<input type="submit" class="button" value="Kirim Pesan">

</div>
</form>
</div>
Blogger Yang Baek, Meninggalkan Jejak Berupa Komentar

Agan jadi Cuapers ke 0, CONGRATULATE !

:10 :11 :12 :13
:14 :15 :16 :17
:18 :19 :20 :21
:22 :23 :24 :25
:26 :27 :28 :29
:30 :31 :32 :33
:34 :35 :36 :37
:38 :39 :40 :41
:42 :43 :44 :45
:46 :47 :48 :49
:50 :51 :52 :53
:54 :55 :56 :57
:58

Jangan lupa ada emo Kaskus diatas CommentBox Ini. Langsung dicoba gan ? Entar ane kasih cendol dah.

Protected by Copyscape Web Plagiarism Software
English French German Spain Italian DutchRussian Portuguese Japanese Korean Arabic Chinese Simplified