How can I add a Google search box to my Web site?
Dave, I keep visiting sites and seeing these cool search boxes that let you either search their entire site or search the entire Google database, all without leaving that page! I want to have something like this and would appreciate your helping me figure out the code needed.
Dave's Answer:
This is a question that's going to result in some HTML listings. You know that, so there's no reason to panic!
First off, the good news. Google itself actually has a nice page offering you HTML code you can just cut and paste onto your own Web pages to produce the search box you seek, and some variants beside. Just check out Google Free.
Instead of relying on the bright sparks at Google, though, let's go through the steps of building our own search box instead, so you'll be able to see how it works.
Also, not to pick on Google because I think the world of those folk, but their HTML samples could be cleaned up a bit, usually, so I've also recast it as proper XHTML rather than somewhat sloppy HTML. Just don't tell Larry and Sergey, okay?
The basic technique involved here is to be able to manipulate one of the variables handed to the Google search engine, a variable called sitesearch. Set it to a null value and you're searching the entire World Wide Web, but set it to a specific domain and it's constrained exactly as if you had typed in the Google special notation site:domain.
In addition to that, you need an input field and a submit button. Put them all together and here's the minimalist Google search form that lets the user alternate between just your site (well, in this case just my site) or the entire Web:
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="31"
maxlength="255" value="" />
<input type="submit" value="Google Search" />
<input type="radio" name="sitesearch" value="" />
The Web
<input type="radio" name="sitesearch"
value="askdavetaylor.com" checked /> Ask Dave Taylor<br />
</form>
There are some additional tweaks we can apply to make it a bit more fancy, including changing the radio buttons to a single check box, and aligning things a bit more nicely using a table and some simple CSS:
<form method="get" action="http://www.google.com/search">
<div style="border:1px solid black;padding:4px;width:20em;">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="q" size="25"
maxlength="255" value="" />
<input type="submit" value="Google Search" /></td></tr>
<tr><td align="center" style="font-size:75%">
<input type="checkbox" name="sitesearch"
value="askdavetaylor.com" checked /> only search Ask Dave Taylor<br />
</td></tr></table>
</div>
</form>
Here's how that renders when included on an HTML page:
If you'd like to use this on your own site, simply change the occurrences of askdavetaylor.com as appropriate.
Not too hard at all!
Related HTML, JavaScript and Web Site Programming articles:
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help
right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
Reader Comments To Date: 817
Dave... Please man just put a simple code in your blog here for people who just want a simple code for just the search box and the button. Not much to ask huh? Thanks big guy appreciate it much.
I recently got sick and tired of all the constant changes on my Google homepage. I like a nearly blank page to start with when I start surfing, because every site is trying to distract you with nonsense mostly. Now Google is constantly putting up new suggestions to try this and that, so I created my own home page with the simple search box you provided and I modified the links down to three: web, images and maps. What a beautiful and relaxing page (with my own background image) and no clutter! Thank you thank you, you're a life saver.
I tried using this code and it looks fine in iweb but when I load it to the internet it's shows up as a hit counter that I used to have on the page. Any suggestions on how to fix?
Thank very much for your info
Hi Dave. Thanks for this tip on making a search box that ACTUALLY works well on Blogger. I have tried a number of different ones that didn't work or worked poorly. Sending the search for my site only to Google search is a fantastic way of doing it. Once again Thanks Heaps!!!
Hey Dave! Thank you so much for this, it is awesome!
I just wonder if you can make a search box that ONLY search on my website? With no check box or radio botton?
Thank you, again!
Thanks Dave
You are a star..simple info and explained well
Cheers
Paul
is there any way i can put the code into my own search box i did?, if so please help
dude,
really looooooooooooong time passed for posting this article.......
7 years....ha.....
:)
i like it you post thank you very much
Hi there Dave
First of all may I say many thanks for a brilliant site, especially about about using the google search.
I have one little niggle that you may be able to help with (well I have another actually but am seeing a doctor about that one!) When I have put in what is being searched for and get the results (opens in a new page) when I go back to the main page the search words are still there. The question is "Is there a way of automatically clearing the box ready for the next one?"
TIA
Martyn
Hey! Dave I want that on clicking 'about me' the link directs the viewer to a page suggested by me.How could it be possible? Please reply me soon.
Very helpful. I was getting a blank page because (I think) my site is using frames. I added the suggested line: target= "_blank" and all was good again.
Hi Dave,
Is there such a thing as a Latest Google Search Results Box that displays results for a pre-determined search string, i.e. U2?
A new search would be done and the results refreshed whenever the page reloads and contain, say, 10 results.
Thanks,
Tom
Is there a way to make it so that you do not need check box and that it will only search your site?
What is the difference between this and google's sitesearch program. When I fill theirs out it looks the same then it says there is a yearly charge on the last page. Thx
Hey Dave!!!! Thanks for the code. It really works..
hi Dave,
I am doing my post graduation in India.My project domain is web mining.I have some doubts regarding coding...
1.I should design a web search engine that should display the google results in my web site itself.
2.Along with the google results i should be able to show my query recommendations when the user clicks a link.
3.The most important is that my recommendations along with user query should be again fed into the google search engine and the results should be displayed to the user.
What i have done is:
1.I have created a search engine.After the query is given it is getting redirected to the google search engine.
2.I have used an algorithm for providing query recommendations.I just want to be displayed in a separate web page when a user clicks through a link.Please do help me...
Thanks in advance...
Hi Dave
I am trying to customise a web host search box for my website, the facility works well, but the look does not! (hence why I haven’t uploaded to the site yet)
[form action="http://www.bellewaarde1915.co.uk/search/ksearch.cgi" method="get" name="search"]
[p align="center"][input type="text" size='15' name="terms" value="" onFocus="select(this);"/]
[input type="submit" value="Search"/][/p]
[/form]
Every time I try and change things I mess it up so that it doesn’t work.
What I want to do is colour the border #cc9933, change the background to #4b3e11.
The page that the results populate has been set so that the background colour matches the form and I have set all font colours to render #cc9933, however, only some do this, others are the standard colours of links.
I would appreciate any help at all.
Hi, I Installed Google search in my website landing page , i want to display search result in searchresult.hmtl
please send in detail
Hi
I was just juggling around with adding the google custom search + adsense code on my site and I found your post. Now, I tried both the adsense code and your code for search results and found that your code gives better results as compared to the adsense. Is there any way of combining yours and adsense code so that ads revenue is earned as well as I get better results on my search queries. Also, is adsense not giving good results because of its need to crawl the site thoroughly??? I have a new adsense account so I don't think it has crawled my site entirely. What's your advise?
Thanks
hi dave ..
I embedded the site search code
it works fine ..
thanks..
The best way is to use Google Custom Search !
Hi Dave,
First of all, thank you for your help. If you'll look at the Web site I've attached (still working on it), you'll be able to see the search bar I'm working with. It is part of the design so all I was trying to do was set it up to actually WORK and it does with your help, BUT since adding the value="iwarmbars.com" so it only does a site search, it actually adds those words over the design (I know, I know, this is purely superficial). Is there any way to make that hidden?
Thanks in advance!
Chelsea
Additional note:
If I do "input type=hidden" it removes the words AND the magnifying glass icon (still able to search). It's not crucial, I suppose, but I'd also like to have the magnifying glass icon. Is it possible that I will have to tinker around in the css and/or js files or is there a simple solution?
Thanks again!
Chelsea
DAVE,
How do I change the font color of the "Only search dave taylor" in your code?
Thanks.
Tim
Chelsea, it is indeed possible that you'll end up messing around with CSS. There's a CSS attribute called "crosshair", as described here: http://www.w3schools.com/cssref/pr_class_cursor.asp
Tim, what you seek is really easy because the words "only search Ask Dave Taylor" isn't part of any form tag. So leave the <input> as is, but wrap the "only search..." element with something like this:
<span style="color:green; font-weight:bold;">only search Ask Dave Taylor</span>
Should be straightforward!
Dave,
I figured out an alternate solution of hiding both the magnifying glass icon and the words. Now my final problem is that it is not doing a full site search.
I set the sitesearch to "iwarmbars.com" and it is only searching the index page, not additional pages connected to the site (/faq, /contact, /about, etc.).
Did I miss something?
Thanks again!
Chelsea
If I have a website named PetShopsInSanDiego.com, for instance, and when someone visited my site they would see a Google Search showing the Pet Shops only in San Diego without them typing anything into a Search Box; how would I do that?
I've been searching for code to do that with no results and I ran across your site, hoping for some insight - or code. Any help would be appreciated.
Larry, I don't really understand. If you're going to have a page that just shows search results, why wouldn't people just go to Google and get the results straight from the source?
Hi there, Dave,
I used your google search box, with some modifications and noticed that the check box is on by default and when searching my page it cannot find pages with in my main page. Any suggestions?
Cheers!
Javi
Sir is thier any way top get the reults in my web page only is their any way to migrate the results into my webpage
Site is here:-
http://www.clannersarena.com
Sir please help me as i am very much in need of this information.............
Vaibhav dev
Hi Dave,
How can i open top 5 searches in new window when i click **Google Search** from my website.
Hi, what I'd like is to add a specific phrase to searches. So if viewer types 'Washington' the search results are for 'Washington "Pet Supplies"'. Likewise, if the viewer types 'Boston', the results are for 'Boston "Pet Supplies"'.
I'd be really grateful for any guidance on how to do this. Thanks
Hi, I've created acustom search engine in Google to look up websites that I want in it, I copied the code they gave me and put it onto a website called RM Platform, it worked for one area of the site, but I can't make it work in any other page. The code is as follows:
Loading
google.load('search', '1', {language : 'en', style : google.loader.themes.ESPRESSO});
google.setOnLoadCallback(function() {
var customSearchOptions = {};
var customSearchControl = new google.search.CustomSearchControl(
'006699539649831328642:kkdv_pqcshw', customSearchOptions);
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
}, true);
When a user enters a query in my output screen it must be directed to the google search engine and only the "Searches related to" terms should be displayed to the user in turn.Please provide me the coding.It will be very much helpful if you provide it.
Hi Dave....
This is Kumargaurav from Master in computer application i want to know
1.How i can create a google document ?????
2.Create a blog & give a post on it....???
Hey Dave,can you please tell me why 'name="q"'has been used as I have used this bar in my assignment ?
Hi. The above information has been very useful for me. The only thing I am concerned with is --- Can i place an Image of magnify glass instead of search button. If so can anyone please help me with the same.
I purchased the google search engine, went through the setup steps, copied the code into my test page. Put it on my server and when I go to that page, it says "Loading" for a second, then nothing.
When I view the source code the code they supplied is there, just nothing on the page.
I looked at their "support forum" and almost nobody has posted in almost a month. And I was logged in, submitted my post. Saw it in that forum category, now I go back to make an edit, and my post is gone.
Thanks Google. Almost no support and the simpliest test does zilch.
Anyone have any ideas or links I can go to work through this?
Thanks in advance,
Don
Hi Don
> Anyone have any ideas or links I can go to work through this?
BTW there're other services that have better support and more interesting features. Like for example http://getwebsitesearch.com/
Hi this is my 1st website
Can I use this code on a subdirectory within my main domain? Or better yet can this code be used to only search a specific html page and not the whole domain?
This is my version for mobile sites...
<form method="get" action="http://www.google.com/m/search">
<input type="text" name="q" size="19"
maxlength="255" value="Google it" style="font-size:x-small" /><br/>
<select name="site" style="font-size:x-small">
<option value="mobile">mobile</option>
<option value="universal">net</option>
<option value="images">image</option>
</select>
<input type="submit" value="Go" style="font-size:x-small" />
</form>
Nice job with that, KKreiven!
thanx its grear to us this script its v simple and easy to use best wishes to script writer
i want to search top t0 tweats with the keyword i enter on my website and the results should be display on my website..??
can u show how can i do it???
Hi, I would like to add a search that only returns .co.uk sites. Is this possible please??
Thank you
TP, yes. What you need to do is append " site:co.uk" to the end of the search pattern the user enters before you actually submit the search. I imagine the easiest way to do that would be to slip it into an OnClick event handler in the submit button. Good that phrase, you'll see examples of what I'm talking about. :-)
Why should we only use name="q" for the text input,
i tried to change but the search is not working when i change it, So can any one tell me why we should use "q" only.
I need the information because i am using this search box in my assignment.
Thank you.
Ravi, it's because the program on the server that gets the search query is looking for 'q' as the name of the variable that contains the search word or term that you seek. Change it on the page and you also have to change the program to match.
I want to add my company name in google autocompletion search box. how can i?? for example, my company name is 'fast ride calltaxi', i want this in the autocompletion google search if i type just fast....
hi, i put the following codes into my website, and i intend to let people search a product in my site only.. please let me know if the following codes are correct for that???? plz do reply me..i badly need your reply...
Hello, very nice, thanks, But can i also use this on offline pages? For html pages on my harddisk?
i want to create a small search engine and wants to display the search result from the google or any other search engine into my search engine.... does anyone knows how to do that?
Thanks for providing the code to help us improve our Web site. It's through generous people like you that we've been able to avoid paying lots of money for programmers. Thanks!
Dave, I really like your site. I have found that the way you present information is a lot easier to follow and use than other places. Thank you for the help!
Hello Dave,
I have placed google search in my website, but its showing only index page when i type some keywords, Can you help me how to list more than 3 pages while search button is clicked, Please check this website (zeusmedcare.com)
Hello Sir,
i have to appear the results of the search in my own website on a specific div then, how to do it?
Thanks man! This is helpful.
dude,you realy are good!thank you ,
Thanks a lot for this useful information. You deserve a thumbs-up.
HI, Dave I have cpy/pstd your code in my site, its working fine, but can I show the results in my own page like mydomain.com/results.html.
Previously I was using a google code that had this option to show search results in desired page..
any suggestion appreciated
Regards
Hi Dave,
I want to add the search capability to my website, but when I copy your code and put it on my front page and do a preview, all I see is the code and not the search box like you show. Any help will be appreciated.
Thanks,
Stan
Very help full. exactly what i was in search. thanks you
Hi, I am trying to integrate it into the search field of the following template but without any success! Here is the template: http://www.templatescreme.com/demo/fashion-magazine/104
The search field must not change! I like it the way it is!
Also I like it to direct the visitor to a search page that looks similar in look and feel to my page
Will appreciate your help. Thanks & Love
Stanley and others who are finding that you see the *source code* to the search box, rather than the box itself in your web page editor, you need to enter the code when you're looking at the *code* to your existing page. Most of these web page editors have a "raw html" mode: that's what you need to use. Then it should work just fine. Good luck!
Absolutely clean and beautiful.
Thank you so much!!! Don't tell Google but yours is far superior.
i prepared code in html.i get the webpage how can use those web pages for creating website.please send me further process creating website.
Hi Dave, great bit of code that works a treat.
I've used the top code to add a search box to a new site I'm currently building but just wondered if it was possible to tweak the code to remove the radio buttons completely and for the search box to only show the text box and search button but nothing more and show results from my site only. Any help would be greatfully appreciated.
Thanks once again for the code and for making my life much simpler.
I had always preferred a native search box for my site to installing Google Search box. And the reason basically is that readers (especially the techies) tend to see Google search box as been a monetization scheme, so seldom uses it.
This is a great article ! Thank you :)
Hi Dave, i have a question to ask... its related to google search but not serach box.
I have developed a site for someone (an artist from CA). when she searches her site on google, on page 2 or 3 few search result comes up showing only the menu flash or the main flash (.swf) file but not any page. I found similer thing happens with other site also (i tried with yahoo, barbarabarry etc). my question is: is this normal? is there any security issue involved in such case? if so what i need to do to prevent this?
I'm a designer turned developer and novish, not have much idea on SEO. Any idea/suggestion will be highly appeciated. Thanks a lot in adv.
THIS IS A BEST WAY...
THANKSSSSS FOR HELP ME
i like this box for search... simple and powerfull... thank
hi dave
what do i need to do if i want the results to appear on my site
Many Thanks
Dave
Nice sample code for Adsense search box.
thnx for this box . it simple and nice, i will add to my blog.
ur code is realy nice
thanks a lot...
Hi, I created a search box like yours, but I was wondering if there is any way I can make the search results to appears in my sime site instead of going to google?
Thanks so much Dave, you just made my day!
When I add the coding it 1) creates a sort of "page break" between it and the rest of the site. And 2) trying to search only sends you to the home page, regardless of searching my site or the world wide web.
Hi, I'm concerned about a search box created by my website designer. He says is a google search bar. It works, shows results from google and our website, but when you click on any of our website links, it does not work, it takes you to an ERROR PAGE NOT FOUND.
Please let me know what should we do or if it takes time for it to work (website went live 3 days ago).
Thank you in advance for your help. I really appreciate it.
thanks alot, at least now i can add a search box to my site.
Hello Dave!
The tutorial is really nice and helpful, but it can be improved. I would like to know how can I integrate the search results page into my website.
Ca you tell me?
Thank you!
this html tag is quite good but i want a deferent one...this serch tag for google but i want a search tag that only shows the result of my personal site...please tell me
Dave,
Do I have to put the "value ="ask...." line?
is there a way to make the following code also show pictures on the search?
also, is there a way to make it so that you DO NOT have to check the site seach box... in other words, so that it automatically searches your site and NOT google? thank you, you are awesome
Image inclusion is a function of the results Google finds. If it's a search of just your own site, I don't think it'll include images by default. And in terms of having it automatically just choose your own site, that's doable by turning the "type=checkbox" into "type=hidden" (which then lets you clean up the code a bit too:
<input type="hidden" name="sitesearch" value="askdavetaylor.com" />
See what I mean? Easily done once you know how to tweak the HTML.
Like this you can also create a twitter search box within ur site! This is codded by myself. Its so easy if you know it!
<form method="get" action="http://twitter.com/search" target="_blank"><input type="text" name="q" alt="Search" value="" maxlength="256" size="32" /><input type="submit" value="Search" /></form>
its nice but i want to add a search box in my site it and i want it to search only within my site. i don't want it to search anything rather the info in my site. pls help me.
Is there any way to point the search to my own PC, as well as the internet?
Thanks.
 |
I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by
buying you a cup of coffee! |
|
Follow Me on Pinterest
Find Me on Google+
ADT on G+
|
Dave... Please man just put a simple code in your blog here for people who just want a simple code for just the search box and the button. Not much to ask huh? Thanks big guy appreciate it much.