74 Add a Lightbox-Style Contact Form to your Blog
November 15, 2010 /

While researching customization methods for my forthcoming eBook, I was really impressed at how easy it is to add a Lightbox-style contact form to our sites using ThickBox:


Using Thickbox to display a contact form in this way enables your readers to email you without having to leave the page. We can add this functionality in a simple HTML gadget, and there is no need to edit the HTML of our template at all.

In this post, I'll explain how easy it is to add a lightbox-style contact form to your Blogger blog using Thickbox and a free Kontactr account.

Create a contact form with Kontactr

At present, Blogger does not offer the means to integrate a contact form natively in our blogs. Since we cannot (easily) use PHP in our Blogger templates, the ideal solution is to use an external service to generate a contact form.

My preferred service for simple contact forms is Kontactr - I've been using Kontactr for several years now, and have found this to be both reliable and easy to implement.

So first of all, pop over to Kontactr and create your free account. It takes only a few minutes to register and set up your very own contact form which we'll be using to display in our lightbox-style display:


Once you've created an account and contact form, you'll be presented with a page like this:


Make a note of the URL for your contact form - we'll need to add this to our HTML gadget shortly.


Add "Contact Me" gadget to your Blogger template

We will be using Thickbox to generate the functionality for our lightbox-style contact form. Unlike the original Lightbox script, Thickbox enables us to embed rich content in our display. We'll be embedding our contact form within an iframe using this functionality.

On the Page Elements section of your Blogger dashboard, choose to add a new HTML/JavaScript gadget in the area you would like your "Contact Me" link to appear.

Paste the following code into your HTML gadget, replacing "URL-OF-YOUR-KONTACTR-FORM" with the URL of your own contact form, and "Send me an Email" with the text you would like to display:

<script type="text/javascript" src="http://bloggerbuster-tools.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="http://bloggerbuster-tools.googlecode.com/files/thickbox.js"></script>
<a href="URL-OF-YOUR-KONTACTR-FORM?TB_iframe=true&height=480&width=640" class="thickbox">
Send Me An Email
</a>

Beneath the code you've just edited, paste the following section of CSS code:

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
  font: 12px Arial, Helvetica, sans-serif;
  color: #333333;
}
#TB_secondLine {
  font: 10px Arial, Helvetica, sans-serif;
  color:#666666;
}
#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}
/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
  position: fixed;
  z-index:100;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}
.TB_overlayMacFFBGHack {backgroundurl(macFFBgHack.png) repeat;}
.TB_overlayBG {
  background-color:#000;
  filter:alpha(opacity=75);
  -moz-opacity: 0.75;
  opacity: 0.75;
}
* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_window {
  position: fixed;
  background: #ffffff;
  z-index: 102;
  color:#000000;
  display:none;
  border: 4px solid #525252;
  text-align:left;
  top:50%;
  left:50%;
}
* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_window img#TB_Image {
  display:block;
  margin: 15px 0 0 15px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}
#TB_caption{
  height:25px;
  padding:7px 30px 10px 25px;
  float:left;
}
#TB_closeWindow{
  height:25px;
  padding:11px 25px 10px 0;
  float:right;
}
#TB_closeAjaxWindow{
  padding:7px 10px 5px 0;
  margin-bottom:1px;
  text-align:right;
  float:right;
}
#TB_ajaxWindowTitle{
  float:left;
  padding:7px 0 5px 10px;
  margin-bottom:1px;
}
#TB_title{
  background-color:#e8e8e8;
  height:27px;
}
#TB_ajaxContent{
  clear:both;
  padding:2px 15px 15px 15px;
  overflow:auto;
  text-align:left;
  line-height:1.4em;
}
#TB_ajaxContent.TB_modal{
  padding:15px;
}
#TB_ajaxContent p{
  padding:5px 0px 5px 0px;
}
#TB_load{
  position: fixed;
  display:none;
  height:13px;
  width:208px;
  z-index:103;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -104px/* -height/2 0 0 -width/2 */
}
* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}
#TB_HideSelect{
  z-index:99;
  position:fixed;
  top: 0;
  left: 0;
  background-color:#fff;
  border:none;
  filter:alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  height:100%;
  width:100%;
}
* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
#TB_iframeContent{
  clear:both;
  border:none;
  margin-bottom:-1px;
  margin-top:1px;
  _margin-bottom:1px;
}

Save your gadget and preview your blog. You should now see a simple text link in your layout which, when clicked, brings up a lightbox-style contact form in which your Kontactr email form is embedded!


Advanced Methods

To demonstrate this method, I chose to use Kontactr for embedding a simple free contact form.

However, we can use this method to display an alternative contact form (or indeed any other webpage) in your site. Simply replace URL-OF-YOUR-KONTACTR-FORM with the URL of the page you would like to display. This technique could also be used to display large images by using the URL of a hosted image.


The scripts required to operate the Thickbox function are reliably hosted on Google Code. If you prefer to host these scripts yourself (or perhaps build upon them), you can download the scripts I have used from the official ThickBox page.

I hope you find this post useful in creating your own lightbox-style contact form for your Blogger blog. Please feel free to leave your comments below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

74 comments:

  1. Where's the CSS code we're suppose to add?

    ReplyDelete
  2. All nice and fine but where she says "Beneath the code you've just edited, paste the following section of CSS code:" there is NOthing, nada, empty white space. Now what?
    PLEASE don't tell me I have to use IE... ;(

    ReplyDelete
  3. cool, but i would like one for pics just like Kotaku xP

    Good day people!

    ReplyDelete
  4. I used Kontactr long ago, and now I'm settled with Commentluv and VisitorContact.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. Oh wow, wish I knew about this a month ago. I pay $30 a year at MyContactForm.com and it looks like this on my blog: http://mysnellvilleblog.blogspot.com/p/submit-news.html

    Basically, I have to take a whole new page for contact form.

    The one you are sharing looks very nice! I guess it's not customizable though, but still - when a person just needs a basic contact form, this looks GREAT! As always, you are just awesome. Love your blog.

    ReplyDelete
  7. Thanks for thid tip. gonna try it.

    ReplyDelete
  8. @Don Risi and Eike Heinze: I've just edited the post to add the missing CSS code. So sorry it hadn't appeared when I first published - still don't know what went wrong with that (but at least it's displaying properly now!)

    @MSB - Wow, what a lot to pay for a simple contact form! There are several free options available (as explained, Kontactr is my favourite!) so hopefully you'll now be able to save a bit of money but still have all the functionality of a contact form on your site =]

    ReplyDelete
  9. @MSB - It *would* be possible to customize the form, but it's not such a simple procedure and would involve either creating a new page and editing the JavaScript code or hacking the Thickbox script to display the form within the same page.

    If enough people would like a tutorial for this, I'll be happy to write one up!

    ReplyDelete
  10. Thank you for this great information. I've applied it on my site and it works well. By the way I find the KPU Form is too striking especially the contactr's logo unlike shown by http://kontactr.com/test/ button while the background is not transparent. Anyone can refine it?

    ReplyDelete
  11. Didn't work for me. the entire CSS code showed up on the site instead of just the "contact me"

    ReplyDelete
  12. Thanks for such an informative article, it's been very useful.

    ReplyDelete
  13. Same thing as for Veronica happened to me. The whole CSS code showed up on my blog. No matter how many ways I tried to do this, I even tried to post in in my template before /head and still no luck. I copied the codes as a new HTML gadget, followed the directions above and when i saved my page I got this


    Send Me An Email

    /* ----------------------------------------------------------------------------------------------------------------*/
    /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
    /* ----------------------------------------------------------------------------------------------------------------*/
    *{padding: 0; margin: 0;}
    /* ----------------------------------------------------------------------------------------------------------------*/
    /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
    /* etc...

    Why?

    ReplyDelete
  14. It does not work!
    Thank you :)

    ReplyDelete
  15. I;m using Kontactr and it's great, never goto any problems since a year ago.

    ReplyDelete
  16. THANK YOU for posting this!! I love your blog...

    Steve
    Common Cents
    http://www.commoncts.blogspot.com

    ReplyDelete
  17. IMT- Ghaziabad is one of the premier B- School of the country and running full time /part time/ Distance Learning Programme from last 24 years.

    ReplyDelete
  18. Hi, Your site looks great, I can tell how much time you have put into it.jade jewelry I am going to save it and will make sure to visit often.

    ReplyDelete
  19. Thanks for this post. I was looking for one of these forms for my blog and I think this suits my needs much better.

    ReplyDelete
  20. i think it's better to avoid these kind futures Coz it's reduces blogger performance..

    Cheers
    Tech Tasks

    ReplyDelete
  21. @)Amanda - Why browser does not close automatically after sending mail,it is reloading the whole page in same frame of sending mail...any clue ?

    WWW.SOULIGNITER.COM

    ReplyDelete
  22. Hi, Your site looks great, I can tell how much time you have put into it. I am going to save it and will make sure to visit often.

    ReplyDelete
  23. Amanda, nice blog..but where should I put css code? reply me at my blog HOW-TO HOUSE

    ReplyDelete
  24. it is perfectly working Amanda brother
    Brothers you have to put the css code at edit html template in css section .That's why you didn't get it.Hope it will be a helpful info for you.
    for those who doubt check at my blogspot
    http://novicetoprogramming.blogspot.com/

    ReplyDelete
  25. Isn't just simpler to add Blogger gadget for this???
    My blog: Zarada na internetu

    ReplyDelete
  26. I'm sorry I commented on wrong post.
    My blog: Zarada na internetu

    ReplyDelete
  27. Here is some more tips and tricks, check it out:
    http://www.high-on-it.co.za/2011/02/adding-lightbox-to-blogger.html

    ReplyDelete
  28. it seems that Thickbox is no longer mantained. Is it possible to do that with an alternative?

    ReplyDelete
  29. Awesome trick,I always miss contact us,shareholic and related post features in blogger platform as they are in wordpress.This post solved one however created a new page and in edit html code did as stated above but it was not displaying the form and was showing the css code below the text linked to my form on kontactr.

    Then simply copy pasted the Ajax embed widget and it is displaying on the site but if I need to display any text above or below the form its getting vanished.

    Did a test mail and still waiting and its been 15 minutes lets see how long does it take but still a good solution hope to get something official from blogger

    ReplyDelete
  30. Amanda I hope you have provided the authentic information . Whats so ever i will confirm about it

    ReplyDelete
  31. Well I love contractor but now days people using "email me form "

    ReplyDelete
  32. Thanks for the insight. You are absolutely right.

    ReplyDelete
  33. Nice post.Thank you for taking the time to publish this information very useful!

    ReplyDelete
  34. The author has written an excellent article. You have made your point and there is not much to argue about. It is like the following universal truth that you can not argue with: No truth is universal, everything has its exception. Thanks for the info penis enlargement penis enlargement pills VigRX Plus

    ReplyDelete
  35. This is pretty amazing. I noticed that adding a light box style is increasingly becoming popular these days. No question about its benefits. Thanks for the detailed explanation of the coding. I'll try this out. Thanks!

    ReplyDelete
  36. Thank you for your great tutorial. I've tried to integrate php mail form into blogger blog,but failed.THis is amazingly easy and cool.

    ReplyDelete
  37. Well your site is very informative and it will be equally worthwhile.Well thanks for this information it will really gonna help a lot of people.

    ReplyDelete
  38. Thanks for taking time for sharing this article; it was excellent and very informative. Excellent. Wonderful. What is interesting here is not just info, but style of presentation of information. Though you make some very fascinating points, you’re going to have to do more than bring up a few things that may be different than what we’ve already heard. Thank you.

    ReplyDelete
  39. Wow nice script, your site very informative thanks

    ReplyDelete
  40. No fillers, colors, and preservatives are added, and never Magnesium Stearate in any form. We are in constant research to find new ways to improve bioavailability of our organic vitamins and natural supplements.

    ReplyDelete
  41. hi great tutorial, would like to know how can i do the same for the feedback, secondly how do u right your post title in front of readmore???

    ReplyDelete
  42. Useful tutorial. I always really like to create Inclusion to my understanding and this one really fulfil my need.

    ReplyDelete
  43. discount ugg boots Yo, Stuart Martin, Hello, Hello, what brings you here it? Said Kai warm. TYbhLQ

    ugg discount outlets Special Forces operations section 53 is what?

    uggs discounted A new specialty vehicles military vehicles slowly drove into the Warriors red triple their company headquarters, the former stopped in the square, before the down guards quickly opened the door from the car down is the 39 Division Commander Zheng Hongming , see the teacher to a long and red again and again long MENG, political commissar of the meet up quickly, Zhao Chen said.

    uggs discount Xuan said that Guan, Zhang said: "I am widowed Zeizhong; will be out of Jones, only to win." Is a sub-military relations hectometer one thousand volts Shan Zuo and Zhang www.hotdiscountbootsoutlet.com

    ReplyDelete
  44. Thanks for the great piece of sharing.I have already bookmarked your blog for future references.The article was really great and that smart phone was very good looking.I am planning to buy a new phone ,so why not try the one I see here...

    ReplyDelete
  45. Well again there is no set rule as in the About us page case. All you want is to get your point across. The main point would be the contact details but the way you would present the information is worth checking. Make sure your contact form works! Whats the purpose otherwise? Beautiful looks can capture the heart? Think of it as your last chance to convince the reader to contact you. Tell him how responsive you are. How fast can you get back to him. Make the reader feel easy to send you out an email. All these factors in fact make out a great Contact Us page.

    ReplyDelete
  46. Thanks to share with us the information. I wish you good luck!

    ReplyDelete
  47. This is an interesting blog and the inputs are too bright Thanks for this quite information.
    web designing company

    ReplyDelete
  48. wah very cool contact form master

    ReplyDelete
  49. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    facebook photo gallery

    ReplyDelete
  50. I get a 403 error when accessing http://bloggerbuster-tools.googlecode.com :-(

    ReplyDelete
  51. From what I can tell, the way to customize the appearance is to add the class prefix ".mobile " to additional style statements in order to customize the appearance in mobile browsers. Not had time to try it much yet, but will do my best over the holidays so I can write up a post.

    sex video
    asian sex tube
    free teen
    latin sex porn
    secret porn
    cute porn
    sexy teen
    cd porn
    hot porn tube
    sex video
    fac sex
    sex movies
    xxx videos
    teen sex
    porn movies
    porn videos
    search porn tube
    redtube
    red tube
    xnxx
    porno
    lesben porno

    ReplyDelete
  52. A lightbox form is cool, but EmailMeForm will give you the lightbox code as one of their display options without all this code. I used to use Kontactr, but this has more options. You can have up to 5 free forms.

    ReplyDelete
  53. Wow thank you this is just what I have been looking for - great work please check my post!!!!

    Completed Essays

    ReplyDelete
  54. Wow thank you this is just what I have been looking for great work plz chek my blog

    Sample Essay

    ReplyDelete
  55. Hi Amanda,

    What if you don't have a URL, but rather (script) for the form? How would one embed this into a lightbox?

    For example:

    (script charset="utf-8" src="//js.hubspot.com/forms/current.js")(/script)
    (script)
    hbspt.forms.create({
    portalId: '206683',
    formId: 'ecaa931c-1fc4-4b96-8aea-b040169f449d'
    });
    (/script)

    Best Regards,
    JK

    ReplyDelete
  56. Your Work is exellent it's helpful for me also check my post!!!

    Education Essays

    ReplyDelete
  57. Quality posts is the main to be a focus for the users to go to see the web
    site, that's what this site is providing.

    ReplyDelete
  58. Thank you for this great information. I've applied it on my site and it works well


    web development dubai
    dubai web design

    ReplyDelete
  59. Fabulous article writing. Your article delivers varied passion therefore I bookmarked this science system for future visit that i hope can get a current content from your post and every one content unit progressing to be pleasant to scan with some new things.
    web development dubai
    dubai web design

    ReplyDelete
  60. Wow thank you this is just what I have been looking for - great work please check my post!!!!

    ReplyDelete
  61. I like your blog.Thanks for the post.I am waiting for your new post.

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy