How to Set Up a Search Box on Your Website - dummies

By David Karlins, Doug Sahlin

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

<!-- Google Custom Search Element →
<div id=”cse” style=”width:100%;”>Loading</div>
<script src=”” type=”text/javascript”></script>
<script type=”text/javascript”>google.load(‘search’, ‘1’);
          google.setOnLoadCallback(function(){var cse = new
          CustomSearchControl();cse.draw(‘cse’);}, true);</script>

You paste this code anywhere in the <body> element of a web page to place the search box.

Essentially, this tool is a JavaScript file loaded and run from Google’s site. The search box, embedded in your site with the preceding code, will look something like the one shown. You can apply your own CSS styles to the page that holds the Google search element. And, of course, you can add your own HTML to the page.


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.

The HTML provided by FreeFind creates a form (as opposed to the external JavaScript file that powers the Google search box). And the setup process at FreeFind makes it relatively easy to configure options like excluding some of your pages from search results, or defining the order in which search results appear.

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 >
      <td style=”font-family: Arial, Helvetica, sans-serif;
            font-size: 7.5pt;”>
        <form  id=”ffresult_sbox0” style=”margin:0px; margin-top:4px;” action=”” method=”get” 
          accept-charset=”utf-8” onsubmit=”;”>
          <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=”&#247;”>
          <input type=”hidden” name=”sbv” value=”j1”>
          <input type=”text” name=”query” size=”32” placeholder = “enter search text here” required> 
          <input type=”submit” value=”search”>
          <input type=”reset” name=”Reset” id=”button” value=”Reset”>
      <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=””  
     onmouseout=”’none’” >site search by
        <span style=”color: #606060;”>freefind</span></a>
         <a id=”ffresult_adv0” onclick=”;” href=”;pid=a&amp;