Add Google search box on master page with asp.net?

You keep visiting sites and see that cool Google search boxes that let you either search your entire site or search the entire Google database, all without leaving your site’s page! If you also want to have something like this, then I am sure you would have already got the Google Search Box for Adsense or have got the paid Google search box for your website.

The code works fine if your website has simple HTML or HTM pages. The moment you have master page (Which 99% of you would have in case your web site has been built using asp.net), the code provided by Google will throw an error if you place it on your master page.

What is the reason for Google search box error with Master Page in asp.net?

The master page by default contains a form tag and your google search box code also contains a form tag. The error is thrown because a single page cannot contain more than one form tag.

What is the solution to get rid of the error and show Google search box using master page?

Google search box in asp dot net master page

Here are the complete steps in words:

  1. The solution is to create a new separate HTML/HTM page and place the Google Search box rendering code on this page instead of master page. For example, We have created an HTML page with the name “GoogleSearch.htm” and added the following Google Search Box code. This HTM page can be placed anywhere on your web site.
    <html xmlns=”http://www.w3.org/1999/xhtml”>

    <body style=”margin-top:0px;padding-top:0px;”>

    <form action=”REPLACE WITh YOUR SITE’s SEARCH PAGE ADDRESS” id=”cse-search-box” target=”_top”>
    <div>
    <input type=”hidden” name=”cx” >

  2. Generally, the above code will be provided to you by Google and you would not need to make any changes to it. In case you make some changes, just take care of following points:
    • Form Action= Should be your web site’s search page created for showing the Google’s search results. I will talk more about this step later in article.
    • The input tag with name=”cx” should have the value of the partner code provided by Google.
  3. Now, to display search box on Master page, we should create an iFrame tag and point the ‘src’ attribute of iFrame tag to the path of your GoogleSearch.HTM file like this:
    <iframe id=”IFGoogleSearch” src= “http://[YOUR SITE NAME]/GoogleSearch.htm”
    frameborder=”0″ scrolling=”no”
    style=”padding-top:0px; height: 29px;width:260px; margin-top: 0px;”>
    </iframe>
  4. Create a new page (it can be any page on your web site) to show the actual Google search results. This page will normally be your aspx page and can have any name. For example, we have kept the name of this page as ‘Search-G.aspx’. This page should have the following code (Note that this will also be provided to you by Google and you would not be required to make any changes to it):
    <div id=”cse-search-results”></div>
    <script type=”text/javascript”>
    var googleSearchIframeName = “cse-search-results”;
    var googleSearchFormName = “cse-search-box”;
    var googleSearchFrameWidth = 1024;
    var googleSearchDomain = “www.google.com”;
    var googleSearchPath = “/cse”;
    </script>
    <script type=”text/javascript” src=”http://www.google.com/afsonline/show_afs_search.js”></script>

    That’s it. You are done!.

    Just run your website and the Google search box will be shown on your master page (And off-course on all pages which are inherited from this master page).

    When you write something in search box and click search, it will open the search results in your search page (From step 3 above).
    Also, the multiple form error will also be solved using the above method.

    Google custom search box

ENJOY!!

Related: Add voice search to your Google Adsense Search Box

Disqus Comments Loading...