Make a pop-up contact form for Blogger using Fancy Box and Google Docs

There's a request for making pop-up contact form in my blog. So in this post ,I will show you the tip to make a contact form for Blogger ,using free service Google Docs and a Jquery Plugin name Fancy Box .
Here is screenshot :


Live demo



Here is the tip :
1,Go to Layout ,continue to Edit HTML ,check on Expand Widget Templates
2,Insert this code right after ]]></b:skin>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="http://dinhquanghuy.110mb.com/contactform/jquery.fancybox-1.3.0.css" media="screen" />

3,Go to this address ,paste script bellow to text area in the page ,and click encode :
<script type="text/javascript">
        $(document).ready(function() {
                        
            $("#contact_form").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'         : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });
            
            
        });
    </script>   
Copy the result and paste to template file right after the code in step 1 .
3, In previous post ,I told you tip to make Contact form for Blogger using Google Docs . You can read it here
When you created a contact form in Google docs ,it give you a link to form like this : http://spreadsheets.google.com/embeddedform?formkey=dGF2d0VzaXJfMUx3WWpaOXpJc1FKOWc6MA

Now ,what we need to do is add a link to pop-up contact form . Add this code to your template file where you need a 'contact me' link
<a id="contact_form" href="http://spreadsheets.google.com/embeddedform?formkey=dGF2d0VzaXJfMUx3WWpaOXpJc1FKOWc6MA">Contact me</a>
Remember to change the link to contact form in script above to your contact form link
Save template !
Ok,we are done.
So anytime we click on 'contact me' link ,a pop-up window which contain Google Docs contact form will appear .
Enjoy it ^^