Build a Simpler Google Search Form

Build a Simpler Google Search Form

September 15, 2007 ( 6 )

These days, every site I build is CMS-driven, which usually means a native search utility is included. Once in awhile I still update smaller flat sites for clients who want site-search functionality but don’t care where the results are hosted. Without exception, they all ask for Google by name, maybe thinking a little Google namecheck will help the site’s credibility.

Back Then

Around 2002-2005, Google offered this bit of HTML for webmasters:

<!-- SiteSearch Google -->
<FORM method=GET action=http://www.google.com/search>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF=http://www.google.com/>
<IMG SRC=http://www.google.com/logos/Logo_40wht.gif border="0" ALT="Google"></A>
</td>
<tr><td>
<INPUT TYPE=text name=q size=15 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Search">
<font size=-1>
<input type=hidden name=domains value="YOUR DOMAIN HERE"><br>
<input type=radio name=sitesearch value="" checked> Web Search <br>
<input type=radio name=sitesearch value="yoursite.com"> YOUR DOMAIN HERE <br>
</font>
</td></tr></tr></TABLE>
</FORM>
<!-- SiteSearch Google -->

Tables, font tags… half the attribute properties didn’t have quotes around them and the markup ignored XHTML specs. I also never really understood the need for radio buttons to distinguish “Search Site” vs. “Search Web”. Why would I go to some guy’s blog only to search the web? This is especially unlikely with GoogleBar’s prevelance in most modern browsers.

Nowadays

Google’s Custom Search Engine suite currently offers a much more extensive variety of tools. You can make style modifications, include “Add to Google” gadgets, edit refinement labels, incorporate Adsense, collaborate with developers, specify annotations. The resulting webmaster code is now all wrapped in javascript and looks like this:

<script
src="http://gmodules.com/ig/ifr?url=http://www.google.com/coop/api/00723129930728
2962450/cse/xxdmock2gly/gadget&synd=open&w=320&h=75&title=Darren+
Hoyt&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
But I just want a damn search field

At the end of the day, the only bit of code I ever need is what I’ve cleaned up and simplified here:

<form method="get" action="http://www.google.com/search">
<a href="http://www.google.com/>
<img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google"></a>
<input type="text" name="q" maxlength="255" />
<input type="submit" value="Google Search" />
<input type="hidden" name="domains" value="*.darrenhoyt.com" />
<input style="visibility:hidden" type="radio" name="sitesearch" value="*.darrenhoyt.com" checked="checked" />
</form>

One field, one button, just change the URIs and it’s ready to go. You can view a live demo here, minus the branding. It doesn’t follow all of Google’s specifications, but it works, and unlike Google’s code, it validates.

Popularity: 1% [?]

6 Responses
  1. Matt Dawson said:

    That “domains” input used with the hidden radio is a trick I hadn’t seen. Nice!

    For what it’s worth, you can shave the code for a google Custom Search form down to almost nothing. On my work-a-day site, I’m using something like this:

    <form id="search" action="http://www.google.com/cse"/>
    <input type="hidden" name="cx" value="017374647398649697676:tk5sxl4ijgc" />
    <input id="search_field" name="q" type="text" />
    <input type="image" name="submit_button" id="submit_button" src="/images/search.jpg" />
    </form>

    In action (at the bottom of the right column).

    I don’t remember if I got this from the google Custom Search FAQ or not. If memory serves, I just kept deleting elements from their suggested code until it didn’t work - then I just added back in the last thing I took out. ;)

    9 / 15 / 2007 at 10:21 pm
  2. Darren said:

    If memory serves, I just kept deleting elements from their suggested code until it didn’t work

    That is precisely what I’ve done, bit by bit, since implementing the code originally back in 2002-ish ;) But your superior example got me thinking and I’ve got it stripped down even more (demo here):

    <form id="search" action="http://www.google.com/cse">
    <input type="hidden" name="cx" value="007231299307282962450:xxdmock2gly" />
    <input name="q" />
    <input type="submit" value="Google Search" />
    </form>

    (Regarding that long numerical value, it can be found under the “Control Panel->Code” tab once you’ve signed up for a Custom Search Engine).

    9 / 15 / 2007 at 10:34 pm
  3. Matt Dawson said:

    Beautiful. If trimmin markup is wrong, I don’t wanna be right.

    9 / 16 / 2007 at 9:02 pm
  4. Swany said:

    Great write up. I never used search boxes all that much.. but with adding my Google Adsense to my search and incorporating it into a new website i’m working on, I’m feeling a bit more Web 2.0 friendly…

    …who knows this could actually lead to me adding rss feeds and more social networking options… ughhh but it’s all so much work and I love the outside!

    Thanks for the info!!

    Swany
    Portfolio Site
    Swany and Rick’s Road Trip Site

    11 / 7 / 2007 at 4:14 am
  5. bayardo aleman villarreal said:

    quiero que el buscador google aparezca en mi web

    2 / 22 / 2008 at 12:45 pm
  6. James said:

    Trying to work out if it’s possible to mod the google cse code so that it’s just the search form with no button so a user simply has to press enter. That would be much cleaner.

    Someone?

    5 / 8 / 2008 at 10:25 am