How to Make a Customizable Google Custom Search Engine Box
Google Custom Search Engine is a great service when you have to implement a search functionality to as website and do not spend too much time. However, the default way of implementing it restricting us to have a certain search box design that might not blend well to our website. In this post, I’ll show how I found a workaround solution and actually implement on this very blog.
1. Get Google CSE code and make a results page
I’ll skip how to go and register you website to Google Custom Search Engine. Use the official Custom Search Engine guide here to do it. What you need is;
- Get the HTML code for placing search results to a page from Google Custom Search Engine service, say it’s
Below find a minimal
input tag in a
form, I’m also putting a
button but typing search query and hitting
Enter will work fine.
<!-- minimal & customizable Google CSE search box form --> <form class="search-form"> <input type="text" name="q"> <button type="submit">Search</button> </form>
You can add styles, classes, a placeholder, anything. Below are the minimal requirements:
/blog/search/for my website
That’s it. Now, you have a minimal search box that works and you can customize it in any ways.