48 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 {background: url(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.