Create simple Search Form for Google Custom Search Engine

Create Simple Search Form For Google Custom Search Engine. 

A simple search form, less wait. and no need to load any dependencies to display a search form

simple search form
<div class="ht_search_form">
<form action="https://www.example.com/search"><input id="" name="q" type="search" placeholder="Search" />
<button class="ht_search" type="submit">Search</button>
</form>
</div>

This is the Form with an input filed to enter the search query, and a button to submit the query. ( button in not necessary )

two important thing have to notice here

action="https://www.example.com/search"

to where the form have to navigate ( For Dynamic Website Instead of hard-code this value, can use server side language to add dynamically, WordPress / PHP Version added later in this page )

name="q"

"q" is Google Custom Search Engine default search parameter

Now when user search for a term it will navigate to 

https://www.example.com/search?q=search-query

Google Custom Search Engine will get the Search term form URL and show search result

In the Search page where result have to show, Add Google Custom Search Engine code

When using Custom Search box, you may not need the default search box. so select "Result only" or similar at "Look and feel" settings and click on "save & Get Code"

look and feel - result only - cse

The last line, it makes to add the search result only, now Google Custom Search Engine won't Create Search box.

<gcse:searchresults-only>

If you are using WordPress, you can create the search form like above and add in a post or page.

or can change the default search form – form searchform.php

<div class="ht_search_form">
<form action="<?php echo esc_url( home_url( '/search' ) ); ?>"><input id="" name="q" type="search" placeholder="Search" />
<button class="ht_search" type="submit">Search</button>
</form>
</div>

Styles / CSS

This may not be perfect as you wish, but will give some idea

.ht_search_form button {
	color: #000;
	background-color: orange;
}

.ht_search_form input {
	max-width: 200px;
}

.ht_search_form button   –  selects the button 

color: #000;   – change the button text color

background-color: orange;  – change the button background color

.ht_search_form input  – selects the input field

max-width: 200px;  –  make the width of the input field does not exclude 200px

This syntax are added for an idea. based on this can edit the values easily. ( button text color, background color, input filed max width )

simple search form
o/p   ( image )

Add Google Custom Search Engine on you Website

Leave a Comment

Your email address will not be published. Required fields are marked *