Avoid Multiple Form Tags To Add Google Search To ASP.Net Page

Last week I was updating the site to include some new features. I realized that I was missing a very important component on the blog and that was google search box. I had this search on my other sites for quite some time. I remember that I had to deal with the fact that Google Custom Search script is implemented as a POST FORM with the action set to a URL that will be used to display results.

First you have to deal with the fact that ASP.Net framework does not allow you to have multiple FORM tags on the page. But if you want have more than one then only one can have runat='server' attribute on it. And then you have to make sure that your FORM tags are not nested. Well, depending on your layout of the site and implementation, you may or may not be able to control location of this google search form. Here is the solution that I implemented few years ago and deployed on this site as well.

Use of iform

Yes, took the Google Custom Search script and put it in a static HTML page. And then put an IFRAME on the page where I wanted to display the search box. This is where you will have to be little careful. You will have to make sure that style of the HTML page matches your main site. Next make sure that height and width of iframe is big enough to accomodate the search box otherwise you will end up with horizontal and vertical scroll bars around the frame and that will not be a pretty sign for site users. You want to give the illusion to users that this search box is sitting on the page itself. Now perform search and it works. But there is a problem. Search result target URL is being opened in the frame where search box is. Well that is a little problem.

Fix target of FORM

This is where you will have to make a change in the script that Google Custom Search generated for you. In FORM tag, set target to _top. Now when this form is submitted, the action is sent to page contained this iframe. The following snippet is what I have in my HTML page.

<div class="cse-branding-bottom" style="background-color:#FFFFFF;color:#000000">
  <div class="cse-branding-form">
    <form action="http://localhost/ByteBlocksWeb/SearchResults.aspx" 
      id="cse-search-box" 
      target="_top">
      <div>
        <input type="hidden" name="cx" value="partner-pub-xxxxxxxxxxxxx:wcbg5i-ahdn" />
        <input type="hidden" name="cof" value="FORID:11" />
        <input type="hidden" name="ie" value="ISO-8859-1" />
        <input type="text" name="q" size="60" />
        <input type="submit" name="sa" value="Search" />
      </div>
    </form>
  </div>
  <div class="cse-branding-logo">
    <img src="http://www.google.com/images/poweredby_transparent/poweredby_FFFFFF.gif" alt="Google" />
  </div>
  <div class="cse-branding-text">
    Custom Search
  </div>
</div>

Now perform a search and you will notice that your results show up in main page and not in iframe anymore. Give it a try right here in this site by using search at top of the page and see how it works.