You make a website to engage users in the products and services offered by you and get higher returns on your investments. There are many things that you need to incorporate on your website to improve the look and appearance and functionality of website. One of the highly beneficial functionality that you can add to your website is the ‘search field’. It not only helps the user to search for the things he has been looking for easily, but also makes product handling easy.

Benefits of Adding Search Field To Your Website

  1. Easy Site Navigation: One of the top benefits offered by search field is that it makes easy for the web user to navigate through the website. Without a search field on your website, it can become difficult for the user to search the items easily, he has been searching for. And when a user is not able to locate what he has been looking for, he may feel tempted to leave your website and look for other options available on the Internet.  Therefore, to make users spend more time on your website and indulge in the products and services offered by you, search field is necessary.
  2. Reveals the hidden web: Most of the search engine spiders avoid dynamically generated pages. Therefore, your product information may not appear in the search engine’s index. While adding ‘search fields’ to each page of your website, you can create search engine friendly dynamic pages.
  3. Improves user experience: It takes only 30 seconds for the user to decide whether he is going to stay on your website or leave. Most of the users tend to leave website if they do not find items of their choice easily.  Therefore, search fields improve the experience of the users by improving their results and providing them what they have been looking for instantly.

Let’s find out how to add search field to your website

There are a number of benefits that search fields have to offer. Herein below, we have given the top benefits being offered by search fields to your visitors.

How to Create a Basic Search Field: This will help web users find content on your website in a simple and easy way.  You just need to put some HTML coding into your webpage where you want search field to appear.

The Html Code for the basic search field is:

<form method="get" action="yourwebsite.com/search">
<input type="text" name="q" alt="Search" value="" maxlength="256" size="32" />
<input type="submit" name="btnG" value="Search" />
<input type="hidden" name="site" value="Site name" />
<input type="hidden" name="client" value="Text" />
<input type="hidden" name="proxystylesheet" value="text3" />
<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="filter" value="0" />
</form>

You just need to add this type of form tag to add basic search field to your website. You can put these <form> tag in the <body> tag. This will give you a basic search field using which you can search for the items/products on your website. 

The above code gives you output like the screenshot given below:

Search field

You can also give the position to your search field using the CSS. With the help of CSS we can improve the design of our HTML.

Now we have an examples of the Basic search field

Suppose we have some search field in our site and the code of the search field is like above mention.

Insert the below  HTML code to your web site where you want the search field  to appear:

<form method="get" action="http://somesitename.com/search">
<input type="text" name="q" alt="Search" value="" maxlength="256" size="32" />
<input type="submit" name="searchBtn" value="Search" />
<input type="hidden" name="site" value="Sometext" />
<input type="hidden" name="client" value="sometext" />
<input type="hidden" name="proxystylesheet" value="proxystylesheet" />
<input type="hidden" name="output" value="xml_no_dtd" />
<input type="hidden" name="filter" value="0" />
</form>

Customize the following required parameters:

  • name="q" size="32"

Set the width (in numbers) for the search box. In the first line you can change the Size according to your requirements, but don’t change the maxlength value.

  • name="searchBtn" value="Search"

You can provide the nave as you want. You can also change the value of search and use some common words like Fetch, Find etc...

  • name="client" value="sometext"
  • name="proxystylesheet" value="proxystylesheet"
  • name="site" value="Sometext"

Client parameter in htmldescribes the Google frontend your search that will use.  proxystylesheet parameter in htmldescribes the XSLT stylesheet that uses in the search.

Note: In most of the cases, the client parametervalue should be identical to proxystylesheet value. You can change the value if you have some better knowledge of these parameters.

How to add Custom Google search field to your website:

  1. Open https://cse.google.com and login with your google account.
  2. Enter “Sites to search”. You can enter the website name that you want to search anything in the site. You can add multiple sites during the creation. You can add any of the following:

Individual pages: www.website.com/page.php

Entire site: www.website.com/*

Parts of site: www.site.com/page-name/* or www.site.com/page/

Entire domain: *.site.com

  1. Choose your preferred site languages from the dropdown list for your search language.
  2. After then you can fill Name of the search engine by manually or it can visible automatically in the form and then hit on Create button.

The form will look like the below screenshot:

Inserting Google search field snapshot

After filling the information you will see the three options:

  1. Add it to your site
  2. View it on the web
  3. Modify your search engine

Added site to Google search form

Add Code to the Site

After filling all the information you will have to proceed with the GCS Code.

GCS Sample Code :

You can use the V2 code for your custom search field, rather than V1 code, because of the multiple reasons:

  • V2 syntax is easy to use and it doesn’t needany knowledge of JavaScript or about its functions.
  • Custom search field elements (search boxes and results pages) are rendered based on settings stored on the custom search engine servers. so server-side changes do not require you to change the code on your site. so you do not need of any further changes or for coding to your custom search field.
  • All JavaScript is loaded asynchronously, which reduces the time to load page.

Put the following JavaScript code before the closing </head> tag in your index file. The value of cx should be replaced with your search field ID:

<script>
  (function() {
    var cx = '002562883568120509565:mbwpfevdilw';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>

Place this code where you want the search box to render:

<gcse:searchbox-only></gcse:searchbox-only>

If you want to add custom search result page to your result page then place this code to show the results to your custom result page:

<gcse:searchbox-only resultsUrl="http://domainname.edu/searchresultspage"></gcse:searchbox-only>

View it on the web

You can also view the search box before placing to your site.

Click on Public URL Button and you can see your custom search:

Custom search field Google

Modify Your search engine

You can edit your search field by clicking on Control Panel button. With the use of this you can also provide the more information about your site. Google Custom Search also allows you to make money through the search results hits on the sites.

Basic Information tab You can fill following of the information:

  1. Search engine name
  2. Search engine description
  3. Search engine keywords
  4. Edition :- free and available with Upgrade option
  5. Details like search engine id, Public url, Get code etc
  6. Image search option
  7. Speech input option
  8. Languages
  9. Sites to search
  10. Advanced setting

Also there is option for Restrict pages for search.

  • Make money Tab

With the help of this tab you can make money. You just need to add your adsense account to this tab. You will earn money when user click on an ad to your result page by connection to your Google Adsense account.

  • Admin Tab

With the help of this tab you can add the users to your search field and make the Admin to others. But when the other users added to this then the Make Money tab will not be accessible to the other users.

  • Indexing tab

With this tab you can index the urls that needs to render with your custom search field.

The below snapshot will clear you a more bit about this:

Adding custom search field with Google

Benefits of Adding Google Search Field To Your Field

Benefits to Customers

There are a number of benefits of adding Google search field to your website. Apart from simplifying the process of searching, it is believed to improve the experience of the user. You no longer need to waste your precious time in order to find the things you have been looking for. Just by typing in your query in the search bar, you will get to find what you have been looking for hassle free.

It is also known that this way user spends more time on the website, search for the products and make purchases. When their queries and questions are handled in an effective way, they feel valued and return back.

Without a search field on your website, chances are there that a user may leave your website.  Therefore, to engage customers and ensure they have pleasant experience on your website, adding a search field on your website is must.

Search Fields are Great For E-Commerce

Website developers add the search field whether basic or Google’s search field to engage potential customers for a longer time on the website. This in result decrease bounce rates and increases the time spent by the user on the website.