How to Set Up a Search Box on Your Website
As you build a website, look at a search box as an element in enabling site accessibility and navigation. The role of a navigation system is not simply to anticipate and respond to what a user might be looking for: It is to “lead” visitors through your site.
In that context, a search box provides an alternative way for people to find things at your site. Search boxes are a more flexible, open way to provide access to your site content. But that doesn’t mean you have no freedom, or responsibility, to guide visitors, even as they look for content through your search box.
Embed a Google search box
Google packages its free Google Custom Search tools in various ways, but code to create a free Google search box for your site is available from Google Web Elements.
The code provided is
You paste this code anywhere in the <body> element of a web page to place the search box.
To test the Google Web Elements search, you must then upload your page to the web. You can’t test it just saved to your own computer.
The results, when people use the search box, are heavily weighted with external links to Google-advertised products.
Create a FreeFind search box
FreeFind offers free search boxes, with ads for sponsored products (like Google) as well as ad-free versions that are available for $19/year (for a site with up to 25,000 pages). Either version is considerably more accessible to use and configure than Google’s Web Elements tool.
Signing up for a free, or ad-free-but-for-fee, search box at FreeFind is pretty intuitive. You indicate your site URL, and you get an account. The first step is to click the Index Now link at the Welcome page, which generates the index (searchable database) that powers your search box.
You can simply accept the default options for a search box, and then copy generated HTML into your web page to create a working search box. But here are some valuable options to consider when configuring your account:
Use the options in the Build Index tab of the FreeFind site to assign a “weight” to the folders at your site. For example, if you have five pages that you really want to show up at the top of search lists, you could put those in a folder at your site, and then assign a higher relevance value to that folder.
For instructions, click the Page Relevance link at the Build Index tab.
Use options on the Customize tab to generate HTML and CSS to format your search box and results pages.
On the HTML tab, you can choose between different search boxes with different options, including adding an “advanced search” link that lets visitors configure their search in more detail, or a search-the-web option to let visitors search either your site, or the entire web.
On the Reports tab, you have easy access to reports on visitor activity so that you can find out what visitors have been searching for.
After you configure settings and generate HTML, you can paste that into your page. Because the generated HTML uses a form and form field tags, you can edit the appearance of the form, including adding a Reset button, resizing the text input field, and using HTML5 placeholder text and validation parameters.
Here is the code for a FreeFind search box:
<!-- start of freefind search box html → <table width=”400” border=0 cellpadding=0 cellspacing=0 > <tr> <td style=”font-family: Arial, Helvetica, sans-serif; font-size: 7.5pt;”> <form id=”ffresult_sbox0” style=”margin:0px; margin-top:4px;” action=”http://search.freefind.com/find.html” method=”get” accept-charset=”utf-8” onsubmit=”ffresults.show(0);”> <input type=”hidden” name=”si” value=”1870143”> <input type=”hidden” name=”pid” value=”r”> <input type=”hidden” name=”n” value=”0”> <input type=”hidden” name=”_charset_” value=””> <input type=”hidden” name=”bcd” value=”÷”> <input type=”hidden” name=”sbv” value=”j1”> <input type=”text” name=”query” size=”32” placeholder = “enter search text here” required> <br> <input type=”submit” value=”search”> <input type=”reset” name=”Reset” id=”button” value=”Reset”> </form> </td> </tr> <tr> <td style=”text-align:left; font-family: Arial, Helvetica, sans-serif;font-size: 7.5pt; padding-top:4px;”> <a style=”text-decoration:none; color:gray;” href=”http://www.freefind.com” onmouseover=”this.style.textDecoration=’underline’” onmouseout=”this.style.textDecoration=’none’” >site search by <span style=”color: #606060;”>freefind</span></a> <a id=”ffresult_adv0” onclick=”ffresults.show(0);” href=”http://search.freefind.com/find.html?si=1870143&pid=a& sbv=j1”>advanced</a> </td> </tr> </table>