{"id":974,"date":"2018-03-14T17:15:40","date_gmt":"2018-03-14T11:45:40","guid":{"rendered":"http:\/\/holithemes.com\/blog\/?p=974"},"modified":"2018-03-14T17:15:40","modified_gmt":"2018-03-14T11:45:40","slug":"simple-search-form-for-google-custom-search-engine","status":"publish","type":"post","link":"https:\/\/holithemes.com\/blog\/simple-search-form-for-google-custom-search-engine\/","title":{"rendered":"Create simple Search Form for Google Custom Search Engine"},"content":{"rendered":"\n
Create Simple Search Form For Google Custom Search Engine.\u00a0<\/p>\n\n\n\n
A simple search form, less wait. and no need to load any dependencies to display a search form<\/p>\n\n\n\n<\/figure>\n\n\n\n
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 )<\/p>\n\n\n\n
name="q"<\/code><\/pre>\n\n\n\n
"q" is Google Custom Search Engine default search parameter<\/p>\n\n\n\n
Now when user search for a term it will navigate to\u00a0<\/p>\n\n\n\n
Google Custom Search Engine will get the Search term form URL and show search result<\/p>\n\n\n\n
In the Search page where result have to show, Add Google Custom Search Engine code<\/p>\n\n\n\n
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"<\/p>\n\n\n\n<\/figure>\n\n\n\n<\/figure>\n\n\n\n
The last line, it makes to add the search result only, now Google Custom Search Engine won't Create Search box.<\/p>\n\n\n\n
.ht_search_form button<\/strong>\u00a0 \u00a0–\u00a0 selects the button\u00a0<\/p>\n\n\n\n
color: #000;<\/strong>\u00a0 \u00a0– change the button text color<\/p>\n\n\n\n
background-color: orange;<\/strong>\u00a0 – change the button background color<\/p>\n\n\n\n
.ht_search_form input<\/strong>\u00a0 – selects the input field<\/p>\n\n\n\n
max-width: 200px;<\/strong>\u00a0 –\u00a0 make the width of the input field does not exclude 200px<\/p>\n\n\n\n
This syntax are added for an idea. based on this can edit the values easily. ( button text color, background color, input filed max width )<\/p>\n\n\n\n\n o\/p\u00a0 \u00a0( image )<\/figcaption>\n<\/figure>\n\n\n\n\n\n\n\n
![\"simple](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/image-14.png\")
<\/figure>\n\n\n\n![\"look](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/look_and_feel_-_results_only.png\")
<\/figure>\n\n\n\n![\"\"](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/result_only_-_code.png\")
<\/figure>\n\n\n\n![\"simple](\"https:\/\/holithemes.com\/blog\/wp-content\/uploads\/2018\/03\/simple_form.png\")
\n