Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...

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

by nhamnga hanh | posted: 2/24/2010 | 15 comments
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 ^^
huy signature
Want to keep update ? Follow us on Facebook and Twitter to find out!

Huy Dinh Quang - administrator

Huy Dinh Quang (known as Nhamngahanh) is a blogger and founder of Simplexdesign blog . Learn more about him here and connect with SimplexDesign community in Twitter,Facebook,and Google+

Related Posts

Advertisement

15 comments

  1. Replies

    1. thnks a lot!
      It's working now properly without any hardcore coding...

      I just customized my form design.

      Delete

  3. not work :-(
    this form is cool but it doesn't open as a pop-up 4 me. hope u can help. it opens the form in the browser page

    ReplyDelete

  4. @ampjosh : maybe a problem in installing fancybox,my friend.You can go to this address and download the full package for fancybox : http://fancybox.net/ . In the page you sent me ,I don't see fancybox installed.

    ReplyDelete

  5. co the sai http://kontactr.com cung dc do ^^.
    ===========
    my blog http://www.hotfileindex.com

    ReplyDelete

  6. i need help installing fancybox. Someone help, am a novice at this.

    ReplyDelete

  8. can i use other than google docs?

    ReplyDelete

  9. I like over all your posting, that's inspirate to my blog
    thank's brother
    http://dunianya-it.blogspot.com
    http://update-berita-terbaru.blogspot.com

    ReplyDelete

  10. hy i had try this i ah put all codes according to abvoe but its not work in pop up
    and where me have to post the code
    https://spreadsheets.google.com/embeddedform?formkey=dDZsRmFiWGpRYXlLdnBYRFFJQWowNVE6MQ
    tell me its cool trick but i failed

    ReplyDelete

  11. Can you make a beautiful popup subscription box to increase subscribers for blogspot? it will be lovely.

    ReplyDelete

  12. This comment has been removed by the author.

    ReplyDelete

  13. hello sir

    pls tell me how to get a java script google ad code delay scrolling ads


    http://www.sensongs.com/sihi-muthu.html

    the above link like this see right side delay ads how to make this type for google ad code

    ReplyDelete

  14. thnks a lot!
    It's working now properly without any hardcore coding...

    I just customized my form design.

    ReplyDelete

Here are some rules for commenting on Simplex Design blog :
1, Search first ,then ask question. You will get the answer faster
2, All comments except spams are welcome.
3, Please make all requests in English.
4, Do not use generic titles such as Admin or Mod. This confuses readers