Set Up a Freefind Search Box on Your Website

By David Karlins, Doug Sahlin

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 >
  <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>

This is an excerpt from

This hefty, 800+ page book is your start-to-finish roadmap for building a web site for personal or professional use. Even if you're completely new to the process, this book is packed with everything you need to know to build an attractive, usable, and working site. In addition to being a thorough reference on the basics, this updated new edition also covers the very latest trends and tools, such as HTML5, mobile site planning for smartphones and tablets, connecting with social media, and more.

• Packs ten minibooks into one hefty reference: Preparation, Site Design, Site Construction, Web Graphics, Multimedia, Interactive Elements, Form Management, Social Media Integration, Site Management, and Case Studies

• Covers the newest trends and tools, including HTML5, the new Adobe Create Suite, and connecting with social media

• Offers in-depth reviews and case studies of existing sites created for a variety of purposes and audiences, such as blog sites and non-profit sites

• Walks you through essential technologies, including Dreamweaver, HTML, CSS, JavaScript, PHP, and more

Plan, build, and maintain a site that does exactly what you need, with Building Websites All-in-One For Dummies

More Web Design Coding Issues:
• What is AJAX?
• Six Ways to Center an Element on a Webpage
• Video - HTTP caching
• Seven Effective Ways to Build Your Own Web Site
• Update Your Entire Website Instantly Using Server Side Includes (SSI)
• Video - Optimizing the Order of Scripts and Styles
• Web Design Blunders That Can Cost You Lost Profits
• Website Updates are a SNAP With Server Side Includes
• How to Set Up a Google Search Box on Your Website
• Advantages and Disadvantages of Frames

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues