Search Boxes - Site Search Boxes

If you have a large site, you want to consider adding a search box to your site. There are a number of free ones available or if you are using paid hosting, there may be one available through the host. The free ones I have used are listed below. Each is customizable to reflect the "look" of your site.

Add a Search Box

  • FreeFind Here you sign up to "Add a search engine to your site." You will need to enter your page URL and your e-mail address.. Your password and setup instructions will be e-mailed to you.
  • PicoSearch Here you sign up for your search engine. You will need to set up all the requested information. You'll then see the web page from which you manage and customize the Picosearch tool for your website. I have used this in the past.
  • Atomz Search  - Just fill in your email address and you will receive instructions via return email.
  • Google Free - With Google Custom Search, you can harness the power of Google to create a customized search experience for your own website.
  • Bing is the current web search engine from Microsoft. You can see an example of this search box and the instructions on how to install it Adding the Bing Search Box Code. At this time Bing will not work with Opera.
  • Zoom Search is a commercial product which does offer a free version for small sites of 50 pages or less. It will NOT work with any of the Rootweb servers. This site is now using Zoom Search.

Once you decide which of the search engines you want to use and have the code to paste into your page, where should it go? I would place the code for your search box on every page of your site in a conspicuous place near the top.

Validating your Search Box

You will probably find the search box will not validate without your "tweaking" the code.  Each of the boxes below has been tweaked so the code will validate as xhtml transitional. For html code, you will need to delete the closing /. xhtml coding requires an element to be self-closing or opened and then closed.

I prefer to place the search box at either the top of the page or as part of the left side navigation using a very simple box styled using css. Examples of the search box inserted into a left navigations <div>

Google Search Box

only search Genealogy Web Creations

<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em; margin: 0px auto 0px auto">
<table border="0" cellpadding="0" >
<tr><td class="center">
<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="checkbox" name="sitesearch"
value="genealogy-web-creations.com" checked="checked" /> only search Genealogy Web Creations<br />
</td></tr></table>
</div>

</form>

Atomz Search Box

Search:

<p class="center"><strong>Atomz Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<form action="http://search.atomz.com/search/" method="get">
<input name="sp_a0" type="hidden" value="sp10038698" />
<input name="sp_advanced0" type="hidden" value="1" />Search:
<input name="sp_q0" size="10" />
<!-- The "Search" button --><input type="submit" value="Go" />
</form>
</div>

FreeFind Search Box


powered by FreeFind

<p class="center"><strong>FreeFind Search Box</strong></p>
<div style="border: 1px solid black; padding: 4px; width: 20em; text-align: center; margin: 0px auto 0px auto">
<form action="http://search.freefind.com/find.html" method="get" target="_self">
<input name="id" type="hidden" value="39665208" />
<input name="pageid" type="hidden" value="r" />
<input name="mode" type="hidden" value="all" />
<input name="n" type="hidden" value="0" />
<input name="query" size="15" type="text" />
<input type="submit" value=" Search " /> <br /><span class="smalltext">powered
by <a href="http://www.freefind.com">FreeFind</a></span></form>
</div>

 

Bing Site Search


Styling the Search Box

Once you have added the code for your search box and validated it, you can then add some styling to it. This is more easily done if the search box is placed inside <div> tags as is the one at the top of the page  on http://huuweb.org/

<div id="logoright">Code for search box</div>

The id of logoright is then styled by the following style rules

#logoright { float: right; width: 150px; margin: 30px 20px 0px 0px; font: bold .85em Georgia, "Times New Roman", Times, serif; background-color: #FFF; color: #6295C6; text-align: right; }

The search button itself is styled by adding a class to the code class="search"

<input class="search" name="Action" type="submit" value="Go" />

and adding style rules for the class

.search { background-color: #3E719E; color: #FFFFFF; font-weight: bold; }

If you want the input box to have a background image (which appears as a solid color), create a small seamless image to use as the background. Then create a style rule to use.

.gwc { background-color: #BDC7C6; background-image: url('../images/form-background2.jpg'); background-repeat: repeat; }

Apply the style to the code <input class="gwc" maxlength="30" name="query" size="10" value="" />

A search box added to the left side navigation would be done basically the same way. The code for the search is placed inside a <div> with the id search

<div id="search">Code for Search box </div>

Style rules added to your style sheet

#search { text-align: center; margin: 3px auto 8px auto; font-size: .8em; }
#search p { margin-bottom: 0px; } This removes the bottom margin so the Search This Site sits just above the search box itself.

An image was created for the background of the input box and a style created

.cf { background-image: url('../images/form-bg.jpg'); background-repeat: repeat; }

and the class added to the code <input class="cf" maxlength="30" name="query" size="10" value="" />

No class was created for the button styling as I wanted the default color for this particular one.

Making the Search Box Accessible

To maintain accessibility, each form element should have an associated label that identifies that element’s purpose. Label your input elements with meaningful and descriptive text. This makes it clear to the user what information they should be providing.

Pat Geary.
Updated and Revised May 2010