Add Search Bar Embed Code to Google Sites

What are your options for inserting a search bar into Google Sites?

Default Google Site Search

Every Google Site comes equipped with a search icon, search bar and site-only search engine. For free Google Sites this cannot be disabled. It always available in the top right of the website no matter if it is using a top or side navigation bar layout.

This search function only crawls and indexes content written directly into text boxes on the Google Sites property. Embedded code, gadgets, documents or folders are not accessible via this search engine. Page titles are also displayed with a short snippet of results containing your search query.

Google Cloud Search

Google Workspace accounts of Business Standard and higher have access to a new widget for a Google Cloud search bar. This can be inserted into the page and resized, or added in replacement of the default Google Site search in the top right. For more information on what data, documents and files are displayed in search results for Google Cloud please see the official support article.

Custom Search Bar Coded Widgets

This is the crux of this article since the former options are obvious for implementation. Custom Google Sites search bars are just simple HTML code which sends a query via a form to other applications like Google Drive, Google Cloud, Google Search or anything that works by adding ? URL parameters to query their databases. See examples of these gadgets below.

How does it work?

Query parameters are a way to pass data to a web server as part of a URL. They are commonly used in web applications to send information to the server, typically in GET requests. Here's how they work:

Structure of Query Parameters

   - Query parameters are appended to the URL after a question mark (`?`).

   - Each parameter consists of a key-value pair, separated by an equal sign (`=`).

   - Multiple parameters can be included by separating them with an ampersand (`&`).

Example URL:

   https://example.com/search?query=database&sort=asc&page=2

   - `query=database`: The parameter `query` has the value `database`.

   - `sort=asc`: The parameter `sort` has the value `asc`.

   - `page=2`: The parameter `page` has the value `2`.


How Query Parameters Work

Client-Side: When a user navigates to a URL with query parameters, the browser sends a GET request to the server, including the query parameters in the request URL.

Server-Side: The server processes the request, extracts the query parameters, and uses them to perform specific actions, such as filtering search results, retrieving specific data, or directing the user to a particular page.


Example Usage in a Web Application

Search Functionality: A user might search for "database" on a website. The search query could be passed as a query parameter like this:

     https://example.com/search?query=database

     The server would then use the `query` parameter to search its database and return relevant results.


Handling Query Parameters in Code**

   - In JavaScript, query parameters can be accessed using `window.location.search` or `URLSearchParams`.


Best Practices

Encoding: Special characters in query parameters should be URL-encoded to ensure they are transmitted correctly.

Security: Be cautious with sensitive data in query parameters, as they are visible in the URL and can be logged or cached.

Query parameters are a powerful way to send data between the client and server, allowing for dynamic content generation based on user input.

Google Site Search Custom Gadget Code

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Icons">

  

<form role="search" method="get" action="https://www.kirksvillewebdesign.com/_/search">

  <div class="input-container">

<input type="search" class="search-input" value="" name="query" placeholder="Search entire website..." />

    <button type="submit" class="search-submit"><i class="material-icons">search</i></button>

  </div><!-- input-container -->

</form><!-- searchform -->



<style>

html, body {

  background: #FFFFFF;

  place-items: center;

  font-family: sans-serif;

  font-size: 16px;

}


a {

  color: #D500F9;

}


a:hover {

  color: #AB47BC;

}


.input-container {

display: flex;

}


::placeholder {

  color: #757575;

  opacity: 1;

}


.search-input {

  background: #EEEEEE;

  color: #212121;

vertical-align: middle;

  font-size: 16px;

width:100%;

  line-height: 2;

  padding: 10px 20px;

  border: 0;

  outline: none;

  box-shadow: inset 0 -1px 1px -1px #CCCCCC, inset 0 1px 1px -1px #CCCCCC, inset 1px 0 1px -1px #CCCCCC;

}


.search-submit {

  background: #2d2d2d;

  color: #FFFFFF;

vertical-align: middle;

  padding: 0 20px;

  border: 0;

  outline: none;

  cursor: pointer;

}


.search-submit:hover {

  background: #AB47BC;

}


.search-submit i {

  font-size: 24px;

}

</style>

Search a Google Drive Folder from Sites

Use the code below to search specific Google Drive folders from your intranet. All you need to do is find out the folder ID and plug it in. This folder ID is visible when viewing the folder from Google Drive, just check the address bar. You could also use this method for Google Shared Drives. Therefore, you can see how beneficial this can be for finding team or project documents directly.

<head>

   <style> input:focus { outline:none; border:none; } </style>

    <script>

        function addString()

        {

            var x = document.getElementById("search");

            x.value = x.value + " in:0AM1nkGrAHo8rUk9PVA"; //Your Folder ID here

        }

    </script>

  </head>

  <body style="margin-top:0px;">

  

  

  <div style="margin:auto;height:53px;width:100%;padding:10px;display:block;background-color:#fff;box-shadow: rgba(0, 0, 0, 0.31) 0px 3px 5px;box-sizing: border-box;

padding: 15px;border: 1px solid rgb(221, 221, 221);">


<img src="https://kstatic.googleusercontent.com/files/f4b4fbcc6119576da7ab3f68270196009fc1b16f1927910842d793c385115593b6dd5fbe9a1e21fe64f3cbbc509c3a02c95ebc9635f76c355282482986f1fe7d" style="margin-right:10px;height:24px;color:#999;float:left;">



    <form class="navbar-form navbar-right" role="search"    action="https://drive.google.com/drive/u/0/search" target="_blank" style="float:left;white-space: nowrap!important; ">

      <div class="form-group">

        <input id="search" type="text" name="q" class="form-control"     placeholder="Search Intranet Files"  style="    font-size: 16px;

    width: 100%; border:none;display:inline-block;

    color:#666;

    ">

      </div>

      <button onclick="addString()" type="submit" style="display:none;" class="btn btn- default">Search</button>

    </form>

  </body>

Send a Query Anywhere from Your Intranet

You can find many examples of search bars for free online by searching services like Codepen. These will show you how to use HTML, CSS and sometimes Javascript to build a search bar which can you add using the Embed Code asset. This can especially useful to users who want to look up information from other cloud bases HR databases. 

Search Bars Examples in Google Sites

We have several options below with different code, styling and icons.

Google Drive Folder

Cloud Search

Google Site Search

Google Site Search