Membuat Contact form Cantik Pada Footer Blog

Membuat Contact form Cantik Pada Footer Blog 22:36
Contact form
Hai sobat Haru semua ... masih pada semangat blogging kan ....
Oke met ketemu lagi dalam Tutorial Sesion ...
Kali ini kita bakal bahas yang namanya Contact form , tapi kali ini agak sedikit beda , yaitu Mini Contact form Cantik pada Footer Blog . 
Udah lama sebenernya saya pengin punya bginian , cuman dari kemaren saya nyari tutor buat bikin Contact form selalu aja ditunjukin ke wesite layanan Contact Form Oline . Dan disana ya kek gitu aja lah desainnya ... atau emang karena saya aja kali yak yang gak bisa ngedit tampilan contact form nya biar jadi lebih elegant atau cantik atau seenggaknya sedikit keren dan beda .
Kalo bahas soal Contact form , itu emang jadi satu sarana penting dalam blog atau website yang berguna buat Interaksi Admin website dengan para pengunjungnya , soal tampilan itu si gak terlalu penting sebenernya , cuman kalo mau terlihat lebih profesional ya mau gak mau kita musti putar otak buat bikin tampilan contact form jadi elegant dan profesional kan .
Nah sekarang coba deh liat screenshoot dari site saya ini .
Contact form pada footer blog
Liat bagian yang di kasih lingkaran merah , itu contact form cantik yang saya maksud .
Mau ? Oke langsung aja kita msuk ke point utama artikel ini .

1.Syarat bikin contact form itu adalah harus punya blog atau website sendiri .
Kalo syarat udah terpenuhi kita langsung aja masuk ke sesi selanjutnya .

2.Loggin ke Blogger sobat dan pilih Tata letak >> Tambah gadget >> HTML/JavaScript.
3. Copas Script dibawah ini .
<form action="http://www.SnapHost.com/captcha/send.aspx" id="ContactUsCaptchaWebForm" method="post" onsubmit="return ValidateForm(this);">
<input name="skip_WhereToSend" type="hidden" value="ichi.vertigo@gmail.com" />
<input name="skip_SnapHostID" type="hidden" value="YCUNN4U2ZE8M" />
<input name="skip_WhereToReturn" type="hidden" value="http://www.harunesia.com/p/terimakasih.html" />
<input name="skip_Subject" type="hidden" value="Contact Form" />
<input name="skip_ShowUsersIp" type="hidden" value="1" />

<table border="0" cellpadding="2" cellspacing="0" style="-box-shadow: 2px 2px 2px #ccc; -moz-border-radius: 6px; -webkit-border-radius: 6px; background: #transparent; border-radius: 6px; border: 0px solid #ccc; color: #666666; font-size: 13px; margin: 6px 2px 6px 2px; resize: none; width: 170px;"><tbody><tr> <td><b></b></td> <td><input maxlength="60" name="Name" style="-box-shadow: 2px 2px 2px #ccc; -moz-border-radius: 6px; -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); -webkit-border-radius: 6px; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); background: #232323; border-radius: 6px; border: 0px solid #ccc; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); color: #666666; font-size: 13px; margin: 6px 2px 6px 2px; resize: none; width: 100px;" type="text" /></td> </tr><tr> <td><b></b></td> <td><input maxlength="60" name="FromEmailAddress" style="-box-shadow: 2px 2px 2px #ccc; -moz-border-radius: 6px; -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); -webkit-border-radius: 6px; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); background: #232323; border-radius: 6px; border: 0px solid #ccc; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); color: #666666; font-size: 13px; margin: 6px 2px 6px 2px; resize: none; width: 150px;" type="text" /></td> </tr><tr> <td></td><td><textarea cols="40" name="Comments" rows="7" style="-box-shadow: 2px 2px 2px #ccc; -moz-border-radius: 6px; -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); -webkit-border-radius: 6px; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); background: #232323; border-radius: 6px; border: 0px solid #ccc; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); color: #666666; font-size: 13px; margin: 6px 2px 6px 2px; resize: none; width: 170px;"></textarea></td> </tr></tbody></table>
<a href="http://www.snaphost.com/captcha/CaptchaImage.aspx?id=YCUNN4U2ZE8M&amp;ImgType=2" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Web Form Code" border="0" id="CaptchaImage" src="http://www.snaphost.com/captcha/CaptchaImage.aspx?id=YCUNN4U2ZE8M&amp;ImgType=2" title="Anti-spam web forms" width="70px" style="border-radius: 6px; border: 0px solid #ccc; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); color: #666666;" /></a>

<input maxlength="6" name="skip_CaptchaCode" style="-box-shadow: 2px 2px 2px #ccc; -moz-border-radius: 6px; -moz-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); -webkit-border-radius: 6px; -webkit-box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); background: #232323; border-radius: 6px; border: 0px solid #ccc; box-shadow: inset 2px 2px 2px rgba(0,0,0,0.1); color: #666666; font-size: 13px; margin: 6px 2px 6px 2px; resize: none;width: 50px;" type="text" />
<input class="knetwork-emailsubmit" type="submit" value="Submit" />
</form>

4.Ganti tulisan berwarna biru dengan alamat Email sobat dan tulisan warna merah ganti dengan link redirect sobat.
note* Yang dimaksut link redirect disini adalah ketika orang klik tombol SUBMIT pada form bakal diarahin ke link merah itu .
Jadi silakan sobat bikin halaman atau posting dengan ucapan keyak misalnya terimakasih atau semacemnya yang nanti bakal kebuka pas orang klik Submit .
5.Tulisan berwarna Ungu adalah ukuran lebar Contact form , jadi silahkan sesuaikan dengan footer sobat .
6.untuk warna dan lainnya silahkan sesuaikan dengan selera sobat sehingga akan cocok nempel pada footer agan .
*Sebenernya widget ini gak harus berada di footer ko , bisa di tempel dimana aja sesuai selera , jadi silahkan berkreasi ya :D .

7.Terakhir jangan lupa simpan dan lihat hasilnya .
Tenang gan , ini kan bukan edit HTML yang ribet dan berbahaya , jadi kalo misalnya tampilan jadi kacau gara2 ni widget , tinggal apus aja atau di benerin lagi .

Okeh keknya segitu aja deh cara membuat contact form pada footer blog nya , moga bermanfaat ya ...

*ralat : Agar tampilan tombol submit sempurna silahkan Copas script di bawah dan letakkan di dalam Edit HTML diatas ]]></b:skin>

.knetwork-emailsubmit{
    background:#686868;
    cursor:pointer;
    color:#ccc;
    border:none;
    padding:3px;
    text-shadow:0 -1px 1px rgba(0,0,0,0.25);
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    font:12px arial;
    }
    .knetwork-emailsubmit:hover{
    background:#E98313;
Terimakasih .

Share this Article

Related Posts

Previous
Next Post »

Arahkan Kursor dibawah ini untuk memberikan komentar.
No HyperLink dan Komentar Hit&Run akan diacuhkan . Berkomentarlah dengan bahasa yang baik dan benar EmoticonEmoticon