How to add Google search form to a site

It basically comes to reverse-engineering Google URL and constructing a form based on it:

  • URL before question mark, becomes “action” of the form
  • All properties after question mark, become inputs of the form, with the name that corresponds the name of the property. You may need several types of inputs:
    • Text field, which allows the user to input free text
    • Hidden input, where you can pass some parameters for the query without showing any choice to the user.
    • Other types of inputs, e.g. checkboxes, radio buttons, or lists.
  • Finally you need an input of type “submit” – that’s a search button

So a simple Google Search URL http://www.google.ca/search?q= converts into the following form:

<form method="get" action="http://www.google.ca/search"/>
    <input name="q" maxlength="255" value="" />
    <input type="submit" value="Search"/>
</form>
Next, it may be required to limit search to only specific site, which can be done in 2 different ways:
  • Without giving user an option (always search specific site). As I said above, this is done using “hidden” input:

    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
  • By showing 2 radio buttons: one allowing to search the entire Web, and the other limited to your site. In the following example, by default the site is searched:
    <input type="radio" name="sitesearch" value=""/>
    <input type="radio" name="sitesearch" value="yoursite.com" checked="checked"/>

In either case this input needs to be added to the form, wherever the design of the form makes sense, e.g.:

<form method="get" action="http://www.google.com/search"/>
    <input name="q" maxlength="255" value="" />
    <input type="submit" value="Search"/>
    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
</form>

And finally, many other arguments can be added, which will influence search results. The best way is to tweak your search options in Google (using advanced search for example), and then transform this URL into a form, as described above. For example, the URL

http://www.google.ca/search?q=whatever&lr=lang-en&as_sitesearch=mysite.com&as_qdr=w

can be broken down into:

  • Search where: http://www.google.ca/search
  • What are we looking for: q=whatever
  • Language: lr=lang-en
  • Search on site: as_sitesearch=mysite.com
  • Search only pages from past week: as_qdr=w

Which can be converted to a form, which implicitly sets a few search parameters:

<form method="get" action="http://www.google.ca/search"/>
    <input name="q" maxlength="255" value="" />
    <input name="lr" type="hidden" value="lang-en" />
    <input name="as_qdr" type="hidden" value="w" />
    <input name="as_sitesearch" type="hidden" value="yoursite.com" />
    <input type="submit" value="Search"/>
</form>
Advertisements
How to add Google search form to a site

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s