Add a Simple Google, Yahoo! or Bing Search Box to Your Website

‘Search’ is the web’s most utilized and essential function. The major search engines process billions of keyword requests daily, but there are still some websites and blogs that have yet to incorporate the vital feature.

While customized search box solutions are offered by various business entities, I prefer to use only the results from major engines: Google, Yahoo!, or Bing. Many of the commercial packages employ a free trial period to entice buyers, which tends to include very prominently placed ads, a possible turn off for some of your site visitors.

Basic Google Search Box

If space is an issue on your website or blog, you can easily fit in a small Google search box that will suit your needs. The coding solution involves a combination of HTML and Javascript:

<form method="get" action="">

<div style="border:2px dotted black;padding:4px;width:15em;">
<table border="0" align="center" cellpadding="0">
<input type="text"   name="q" size="25" style="color:#808080;"
maxlength="255" value="Google site search"
onfocus="if(this.value==this.defaultValue)this.value='';'black';" onblur="if(this.value=='')this.value=this.defaultValue; "/>
<input type="submit" value="Go!" />
<input type="hidden" name="sitesearch" value="" /></td></tr>


When the above coding lines are uploaded, the resulting search box will look like this:

As shown in the graphic, there are different border options that can change the cosmetic appearance of the search box. The “dotted” style appears in the second line of the above code. You can easily adjust it to: dashed, solid, or double.

This search box is ready to work almost immediately. Just change “” in the third-to-last line to your own domain. Other adjustments, such as to the width of the box, the amount of cell padding, and the initial message that appears in the box, can quickly be made before the final upload of the script to your site.

Google Search Box with Radio Buttons

The above search box only allows for locating content within the designated website. However, some site owners might want to give visitors the option of looking for a keyword on the wider web, as well.

In that case, the simplest solution is to provide a search box with two radio buttons; one for the web, and the other for the site, as shown below:

The coding for the search box is as follows:

<form method="get" action="">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<input type="text"   name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="radio"  name="sitesearch" value="" />The Web
<input type="radio"  name="sitesearch"
value="" checked /> Only Your Site<br />


As in the previous example, just change “” to the correct domain name, and the search box will be ready to perform. Note that the option to search within your site is selected by default.

Bing Search Box with Radio Buttons

To incorporate an identical search box as above, but one that utilizes Bing as the search engine, utilize the following coding lines:

<form method="get" action="">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<input type="text"   name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Bing Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="radio"  name="q1" value="" />The Web
<input type="radio"  name="q1"
value="" /> Only Your Site<br />


In this instance, neither radio button option is selected by default. If a site visitor enters a word or phrase into the search box, the default results will be from the wider web.

Yahoo Search Box with a Checkbox

The last simple search box contains a bit of a twist, as it only includes one checkbox, rather than two radio buttons, as shown below:

The relevant coding lines are:

<form method="get" action="">

<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<input type="text"   name="p" size="25"
maxlength="255" value="" />
<input type="submit" value="Search Yahoo!" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox"  name="p"
value="" checked /> Only Search Your Site<br />


The option to search within the designated domain is selected by default. When a user de-selects the checkbox, he or she can search the wider web for the desired keyword or phrase.


‘Search’ is one of the most important elements for a website to incorporate. Even if a web designer has done an outstanding job of linking all of the major subject areas from the home page, ample opportunity still exists for information to be overlooked.

Given the ubiquitousness of search, users will expect to see the feature prominently displayed on your site, and are likely to be disappointed if it isn’t there. Adding search also engenders ‘stickiness’, in that visitors will tend to stay around longer if they can find more items to occupy their attention.

All in all, the simple search box solutions outlined in this article are ready to use and easy to incorporate into just about any site. Given the slight differences in features, you can feel free to take what is desired from one style, and apply it to another.

David is a long-time journalist and editor, who also has over 10 years of experience as a freelance Web developer, specializing in online newspaper design and maintenance. More articles by David Elliot
  • Thx a lot. I need something like that. I put second code on my site

  • N Livingstone

    Why not style everything with css, instead of using inline styling?

  • steven denger

    All this information that is intended to be helpful is fine except for one minor detail: it does not work! The desired tabs appear an undesirable 2- ugly brown patches that you type on but does not work or doesn’t link or anything else! I have an automatic html box to add code to my site. Other things have worked fine but these search box codes that you people list to ” help people” is of no value. Check your coding before you show these things because they must only work under certain wierd circumstances but do not help.

    • Mid West

      Google has AdSense. It is their offering now. It ties you in to an account, and gives them another bilboard. But if you believe it, it can search only your site, providing you don’t alter their code. The code displayed here will learn not to search your site in two hits. Or deliver achive pages that no longer exist. Basically they want you to ptovide their advertising space. Quid Pro Quo.

    • chris

      I suspect the automatic html box you are using is the problem because these work fine.

  • starfall zone

    this is so simple and so good. i’ll try it. hope the result on search will provide the best result on a certain engine search and website search itself. nice. good job for you admin.

  • gottasay2u

    This is exactly what I was looking for. A lot of people know how to do things but they haven’t a clue how to “make it simple enough to understand” You’re the best!

  • Wande

    Please, how can I get the search result to show within the layout of my website.

  • wouuh… finally, I find the article to solve my problem. Thanks David

  • Wesright

    The HTML code worked great for me! All I had to change was the default radio button and I was off to the races. Thanks siteop!

  • noura

    Thank you very much!!! but I have a Q … How can i align it to the center or right??

  • Rajeshkumar

    Thx u so much…………….

  • nikhil shende

    i have make website . where i used carousel for use social website hyperlink . there are no. of social sites screen shot images , like facebook gmail orkut linkedin rediff and more , when we click that image new tab goes to that appropriate site , that is when we click on facebook image, then new tab will goes to facebook ,
    any one can tell me such type of using hyperlink is legal or not?
    please help me

  • Emily

    How can I have the search results display within my website? An iframe??

  • I want to add google search box with my own website name is that possible..?

  • I just need the code, I would modify it without against TOS .. thanks 😀


    nice! thank you

  • abc

    thank you, however i wish to know how can i run it on a local server

  • Robert

    Thank You David! I wanted to know, what do I need to add to these codes in order to open the Search Results in a new window? Now, it just displays everything in that tiny search field window.

  • Wayne

    How do I set this so it loads the Search results in a new window, allowing my website to say open?

    • M.S


      Just add target=”_blank” in the first line before “action=””

      the whole line should look like this:

      • Arun

        Thank you very much, it worked.

  • Wayne

    Works great. But how to I adjust the code to make the search results appear in a new window, keeping my website open.

  • Pillion Mac

    Sitelinks Search Box
    With Google Sitelinks search box, from search results. Search users sometimes use navigational queries, typing in the brand name or URL of a known site .

    How to do it in Bing / Yahoo ???

  • tim brauer

    i have an updated and slightly more fancy version of this i’ve made that works with all 3 search engines and is completely free to use you can find it here

  • To have it search on your site by default, use:

  • Rapheal Ogundiran

    Please can anyone help me with this i need a search button that can search a particular file name (selecting a format), then the search return the name with the format type for download .

  • hi..

  • Dev Manohar

    where exactly should we implement the bing custom search CODE on the website ?

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress