Add a simple Google search field to your site

Estimated reading time of this article: 0 minutes 57 seconds

How to add a simple and reliable search field for Drupal?

Some content management systems (CMS) do not provide good searching facilities. However, a good search is very helpful. There is a simple and free solution: Using the Google site: search parameter. Thus, the high quality Google search engine can be used.

The results are shown on Google. The Google results contain only pages form this domain.

Alternatively, there is the Google Custom Search Engine (CSE). This technique allows to show the results on the same homepage without changing to the Google site. However, CSE is more complicated and restricted.

Example:

The HTML code:

<h2 class="element-invisible simple-google-search">Search</h2>
<div class="form-item form-type-textfield form-item-search-block-form simple-google-search">
<form action="http://google.ch/search" method="get">
  <fieldset role="search">
    <input type="hidden" name="q" value="site:scito.ch" />
    <label for="google-search" class="element-invisible">Search</label>
    <input class="search form-text" type="search" name="q" results="0" placeholder="Search" value="" id="google-search" title="Enter the terms you wish to search for."/>
  </fieldset>
</form>
</div>

The search field can be styled:

/* Simple Google Search */
.simple-google-search fieldset {
  background-color: transparent;
  border: 0;
  padding: 0;
}

.simple-google-search.form-item, h2.element-invisible.simple-google-search {
  margin-top: 0;
  margin-bottom: 0;
}

The search field can be placed in the top right corner:

#block-block-14 {
    position: absolute;
    top: 0.1em;
    right: 1em;
    z-index: 10;
  }