Search boxes for your site (for use with Zoom)

We have had many users ask us for advice on creating attractive search boxes for their web sites, so we decided to put this page together with some examples to help you out. Feel free to use these search boxes as they are, or they can serve as a starting point for your own customizations.

Note that these are only HTML search boxes that you can copy and paste on to the pages of your website so that your visitors can enter a search query from any page on your website.

 

These search boxes do not provide search functionality by themselves. You will need to first have a working search page created with the Zoom Search Engine package.

Note also that you do not need to add this to the search template by default (unless you want to). The search page will have an automatically generated search form which you can customize with CSS. More information here.

Straight search box

This is a straight lined box with a square button at the end.

You can download the button image from here (right-click and select "Save Target as..."). This button image is free for your use.

HTML source code: <form method="get" action="http://www.mysite.com/search.php">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
</td>
</tr>
</table>
</form>

Round buttons

These are simple search boxes with a round search button (you can replace the button image with anything you like):

You can download the green button image from here (right-click and select "Save Target as..."). This button image is free for your use.

HTML source code: <form method="get" action="http://www.mysite.com/search.php">
<table cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:solid;border-color:#CCCCCC;border-width:1px;">
<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;">
</td>
<td style="border-style:solid;border-color:#CCCCCC;border-width:0px;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton2.gif') no-repeat; width: 24px; height: 22px;">
</td>
</tr>
</table>
</form>

Curved search box

This uses a background image to create a curved search box:

You can download the curved text field from here and the blue button image from here (right-click and select "Save Target as..."). These images are free for your use.

HTML source code: <form method="get" action="http://www.mysite.com/search.php">
<table bgcolor="#FFFFFF" cellpadding="0px" cellspacing="0px">
<tr>
<td style="border-style:none;">
<div style="background: url(roundbox.gif) no-repeat left top; padding: 0px; height: 22px;">
<input type="text" name="zoom_query" style="border: none; background-color: transparent; width: 106px; padding-left: 5px; padding-right: 5px;">
</div>
</td>
<td style="border-style:none;">
<input type="submit" value="" style="border-style: none; background: url('searchbutton1.gif') no-repeat; width: 24px; height: 22px;">
</td>
</tr>
</table>
</form>

 

Return to the Zoom Search Engine Support page