Contact Form Dengan Iframe Preloader

Berhubung masih sangat hangat membicarakan soal Contact Form Blogger, kali ini Master Jin akan sharekan Contact Form Dengan Iframe Preloader yang dulunya pernah digunakan Master Jin (disebelah kanan kredit link Fajrin Ilham H). Tentunya masih ingat, karena saya blok warna kuning emas.

Sebelumnya silahkan kalian pasang dulu widgetnya, lalu masuk pada postingan Modifikasi Contact Form Blogger Keren yang saya share minggu lalu jika ingin tampilannya makin oke. Selesai tahap ini lanjut ke finishnya.

Pertama kode CSS

#bungkus { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); -moz-transition:all 1s linear; -o-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; z-index:9999; }
#bungkus iframe { border:0; position:absolute; top:20px; left:0; right:0; bottom:0; width:100%; height:96%; }
#bungkus .hilang { text-align:center; cursor:pointer; background:#252424; color:#E00; }

.tampil { visibility:visible; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transform:scale(1) rotate(0deg); -moz-transform:scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); -o-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
.hidden { visibility:hidden; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transform:scale(0) rotate(90deg); -moz-transform:scale(0) rotate(90deg); -ms-transform:scale(0) rotate(90deg); -o-transform:scale(0) rotate(90deg); transform:scale(0) rotate(90deg); }
.awal { display:none; }
.lanjut { display:block; }

Kedua letakkan dibawah <body>

<div id='bungkus' class='hidden'>
<div class='hilang' onclick='sembunyi();'>&#10006;</div>
<iframe id='iframe' class='awal'></iframe>
</div>

Ketiga Javascript

<script type="text/javascript">
//<![CDATA[
function tampil(obj){
var p = document.getElementById('bungkus'),
b = document.getElementById('iframe');
p.className = 'tampil';
b.className = 'lanjut';
b.src = obj.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'),
b = document.getElementById('iframe');
b.className = 'awal';
b.src = '';
p.className = 'hidden';
}
//]]>
</script>

Keempat yaitu pemanggilnya

<a href="http://link-satu.com" onclick="tampil(this);return false;">Satu</a>

Ini hanya gabungan antara Iframe milik Zhinto, lalu memanfaatkan laman sebagai wadah Contact Formnya :D jadi selamat mencoba.