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.
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="" />
<input type="radio" name="sitesearch"
value="askdavetaylor.com" checked /> Ask Dave Taylor<br />
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">
<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 />
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
Not too hard at all!
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, when I put the Google search code on the Master Page it redirects me to the google site but with no search results. However, if i use a page that does not use the Master page it works properly. Can you please advice? Thank you.
It looks like you're still answering. I have used this code for a few years now and it has worked perfectly. Thanks so much! I have an existing site, but am upgrading from tables to CSS, new template, etc. I have a search box image that goes with my site.
My question is...When I put something in the value="" command (value="math"), I get results for math on my site. If I type in "science", it searches science on my site. As it is right now (blank), it goes to the Google homepage.
Here is my partial code:
input type="hidden" name="q" size="25" maxlength="255" value=""
(this of course, has the opening/closing brackets, this posting box keeps wiping them out.)
I hope this makes sense. Can you or someone here please tell me what I am doing wrong?
Thanks for your help.
An answer to a questio that was asked in 2006 became useful to me in 2011. please Dave dont delete old posts
I found the problem. I created a white box to replace Google’s box. I had to get my image in the right spot. Also, I had the input type as hidden instead of text. My code works fine now, even with my own search box and submit image. I wanted it to search for terms in my site only, through Google. For everyone trying to do this same thing and as new as I am at this:
Here is my HTML code (opening/closing brackets removed so it would post on here):
form method="get" action="http://www.google.com/search" id="form"
input type="text" name="q" size="15" id="white_box" class="search" maxlength="255" value="" src="images/white_box.gif"
input type="hidden" name="sitesearch" value="yoursite.com"
input name="submit" type="image" class="submit" value="Submit" src="images/go_but.gif"
I hope this helps someone. Thanks to everyone that posted on here. I learned something!
Perfect! It is really great to have a google search box on my site. I can no longer as for more. Thanks and please keep me posted for some updates on this. :)
Hi! Dave please tell me ,how we can link application softwares like ms paint in html sites
At the side of my website i had my address, phone number etc. for some reason these have gone, can you shine any light on this issue for me as i am at a loss,
Very helpful! Thank you! I even managed to adjust the size without screwing up my website! Thanks!
How can i display the search results(from the above code) on to my own(self designed) page, while as the above code redirects us to the google's page and then results are displayed there.
It is certainly a wonderful way to add search function to the site, but how Google itself (with its "Google custom search" http://www.google.com/cse/ ) will treat sites with this kind of unofficial use of google search engine ?
I mean - using "Google custom search" your site suppose to become a board for google contextual advertising and in the way that you propose google would not have any profit.
I just wants to know - is there is any risk in use of this google searchbox for free, while google selling this function.
One more thing - previous question was applied for the commercial site
As I said, I am new at this so, if there is something wrong with my code (illegally), please let me know. Dave or someone who knows absolutely for sure?
hi dave how would i change the position of the search bar for example mine is appearing on the top left and i would like it on the top right
I'll try this soon. thanks
I design a website. it centred well when you browse with internet explorer, but with firefox it is left aligned. i do i make it centre in firefos as well. also the scsript work well with I.E. but not with firefox
Thanks Dave. You are a genius, but I am sure others have already told you this. Keep up the good work. It is much appreciated.
Your goggle search Code is very excellent work.Thank u so much.It`s very helpful me.
Good stuff. Is this method legal to use on any site?
my website is in hebrew (windows-1255), and whenever I use the code, google gives me weird characters instead of hebrew.
tried to add
all I get now is question marks.
how do I get it to work?
that code that isn't displayed is
INPUT TYPE="hidden" name=ie value="utf-8"
input type="hidden" name=oe value="UTF-8"
Hey Dave, or anyone else that might be able to help. I currently have google's Custom search engine on my site. As you know, it doesn't allow you to search images. I have created an undefined list that links to google images on the same page of my search results. When the user clicks on the link it does take them to google images but they have to retype what they were searching for. Is there a way to make it so that when the user clicks images on the results page it links them to google images with the search term already submitted?
How can I minimise the box so the check box isn't shown?
My Google search bar works perfectly in Internet Explorer 8, but in IE9 the toolbar gets pushed way off to the right and only half of it displays. I tried aligning left and other tricks, but nothing works. Any ideas?
I need to pass the image keyword to google and after that I need to get the image result im my page. Not in google page
I treid to pass on the image keyword to google but somehow i dont get result in image google search. For the toolbar i use IE 8 i had trouble with the IE9 and Firefox.
Thanks Dave, it work like a charm.
Thanks Dave, just what I needed, it works beautifully.
mmm i have a question , i didn't understand what you mention , i want you to write it step by step .From the first step to the end because i'm an novice and i don't know how to do it ><
Hi Dave ,
I have similar kind of question.
1- i want to load google results in my website without even moving away from my webpage.
2 after the google results if some one click on that results it should not move to other page i wan it to load in the same page ..
step 1 am in xyz.com
step 2 i entered some keywords in search box
step 3 google search results should load in xyz.com itself
step 4 some one clicks google results page it should load in xyz.com
by this way user stay in my page it self even after he view wat ever he want..
header should always remain same ie xyz.com but results from google ...
pls give with code example..
Is there any way to display google search result in my web page and the link if it is clicked it should not go out of my site.
hi dave taylor,,
i am the owner of coolguruji.com and i want to add google auto suggestion in my search box, is there any way to add google auto complete ( for web search)in a search box,
plz help me..
thanks in advance.
Thanks for the tip Dave! I have been thinking about it for a while and now I can follow your instructions to set it up.
Many thanks for your clear and concice guides, but I was wondering if you knew of a way to amend/adjust the actual google site search provided by Google Free....It is a great tool but as always I need to do a couple of litle tweeks, namely I want to remove the little cross "clear results" from the presented search box....Any Ideas.
thanks Dave for your topic, it really avoids me useless web researches which, i am sure, would have led me to a dead end
This is just what I was looking for! Seems pretty simple, I will give it a go!
Thanks Dave But how can i show the search results in various formats rather than the usual way
Good information thanks for posting.
Thanks for nice info... i can add now google box
i added the google box already and it works perfectly thx for that :)
I wanted this for a site search. I copied the code, but where do I put it? I tried putting it at the end of the custom.css file, but couldn't see that anything happened. I entered in my home page, but that didn't work right either. I use thesis 1.8
How could it get it to work in the sidebar?
Sorry, I am such a newbie. :(
Clyde, you need to cut and paste the HTML code *exactly as shown* into an HTML page. Adding it to your CSS definitely doesn't work (as you have learned). If you're running Wordpress, you should be able to paste it into your template...
Thanks for your Search Query
I really very happy to complete my website.
Thank you Dave, popped this on my site and works a treat! Simple and actually works.
Much appreciated, thanks
Hi Dave, brilliant, simple and easy to implement.
Thanks for the headsup on this.
Thanks, searched for how to add Google to my site, and Google let me down, in that it didn't pop up a google.com link explaining how to, but your site was on the listings, and it worked.
1-how can i add videos on my web site? 2-how can i search my web site on google
Really appreciate if you could tell me why the Google search code that worked all this long gives an error message "We are sorry your computer network is giving automated queries"
Holy cow, so many silly questions. This is why I do not provide info on how to do stuff. I was considering doing programming tutorials on my programming forums but thankfully I thought twice about it.
I'm guessing that for the last 5 years you have been answering these dumb questions you probably have less than 1% actually pay you (donate) for your help too :(
Well, if I was rich I'd donate just cause' I feel sorry for ya.
Thanks for the code.
And for all you useless people who don't actually know how to use google, yet you want a google search bar.... try going to "google.com" and typing "how can google see my site?"
First 4 links you get are relevant webmaster links to google.com where everything is explained.
5th link is dave's.
...and if your reading this do the right thing and donate money if you want to waste his time. He's been answering your same dumbass questions time and time again for the last 5-6 years.
Oh and before someone all high and mighty says "oh yeah well your here too" go google "object oriented programming and code reuse"
No point writing your own when there's tons free online. I save writing my own code and using my brain for actual games programming, rather than simple html scripts, and code snipets.
Thanks again mate, and goodluck.
I just discover your web site today... It´s amazing
I have put your search script on my website and it is working perfectly.
Only one question: is it possible to hide the check box and its text?
Dave, just what I was searching for and it runs a treat! As always, many many thanks.
Vanuatu has been inhabited for centuries and these species are known to the locals. These are not "new species" at all, they are simply species that european paradigm trained so-called scientists had not seen before.
Great tutorial, simple and precise. Thanks for sharing
Adding the google serch box to the web site, save lots of time for search,Thanks Dave
hey, so i'm using a table and some iframes. i used this code and it's working great... but could i use a target tag like you were saying earlier and have the search pop up in the iframe where everything else is linked? i tried doing that, but its not working... any suggestions?
I have a question regarding whether or not it is possible to limit the search of the Google-search-box.
I.e.: if I type "42" into the search box I only want results from a specific subpage and all its subpages.
(I don't want any search results from mainpage.com/... apart from "subpage" of course)
If this is not possible do you know if it is possible with this solution: http://subpage.mainpage.com?
how can i add a search box of my site.
Hi Dave! After searching for a google search box in the web, i came across the google custom search, but when i used the code, i wasn't satisfied! So i did a search again & found your site which i was skeptical at first, but after trying it, OMG! it works perfectly just as i wanted it to be! & since i want to modify it, i would like to ask you some questions, but after reading all these comments, i guess all my questions are answered!! What else can i say....... but a big THANK YOU!!!
Hi. Firstly Dave thanks for posting this great bit of code.
One question I have. Having looked at the Google java based code for adding search to a site, is it possible to link the search code you have put above with an adsense account in the same way... i.e. to earn revenue from people using the search box, clicking ads etc?
Hi. Firstly Dave thanks for posting this great bit of code.
One question I have. Having looked at the Google java based code for adding search to a site, is it possible to link the search code you have put above with an adsense account in the same way... i.e. to earn revenue from peopole using the search box, clicking ads etc?
BigVern, yes, if you log in to your AdSense account, you'll find that Google has a search system designed to hook into your AdSense account. I haven't tried it (I use http://www.lijit.com/ here instead) but it's pretty straightforward...
Thanks Dave - it worked like a charm!
please guyz, help out. how can i add html on google account? please help me out
hi dave - thanks for this great code.
question/problem - i used the search code for a while and it works great (the code was placed at the website's "header" section). recently, i've added a "contact" feature which also use a method and when it's placed at a lower "section/content" part of the page, that 2nd form always execute the "search" function rather than the "contact" function - does it make sense what i'm trying to say?
here is the 1st / search command
form method="get" action="http://www.google.com/search" target="_blank"
and here is the 2nd / contact command
form name="contactformlite" method="post" action="lite_process.php" onSubmit="return validate.check(this)"
which end up executing the 1st / search function rather than its own.
is there a way to make each command executing its own function?
thanks for your help...
just figured out the answer: put the following between the 2 form lines -
ahhm.. can i ask a question? is it the same code if i'm creating a site like wikipedia? thanks.
Thanks man! The search box works. I have successfully added it to my website. Again, thank you
This has really helped me out. Especially the "_blank" bit when you responded to John Kiester about opening search results in a new window.
I was wondering if the code could be edited to show search results in a new (non google hosted) same site page.
Say I have the search field on my home page (sample.com) and want the results to appear on my search page (sample.com/results) instead of a google hosted page. Is this a possibility?
If so, please let me know what code to add/revise to accomplish this. THX
I use and customize too much.
Thanks : )
Can you tell me anything that search the entire web but shows results within my webpage?
It's very important for me. I don't understand what is the meaning of "q" in the google search code.
and also what is the difference between "id" and "class"? Both seems alike to me.
Please Dave, I need ur help!!
Baljeet, the 'q' is the name of the variable sent to the Google search server that contains the value of the search term. In other words, if I search for "chicken", then the variable 'q' will have the value "chicken", as in:
In terms of ID and CLASS, those are to do with Cascading Style Sheets (CSS) and are a different topic entirely. Lots of stuff online explaining the difference between the two if you look.
It works great, thank you Dave ;)
However, it would be grand if the search results popped up in my own blog instead of google page.
I've been reading for the last 5 hours on all kinds of info and guides and tutorials on how to setup your own search box. I have a blog and didn't like the navbar so I have it hidden.
Tried a lot of html boxes and they work, but they only show the newest posts. If the post is a month old the search box won't find it.
Yours however does xD
Now, if there was a way to make the results appear on my blog instead of Google, then I'd be a happy puppy :P
p.s The search box blogger widget from google doesn't work at all either, I get 0 results everytime I use it
Thank You very very much Dave........
But why "q"?
I tried different characters and words and it didn't work.
So, I think it is necessary to take the character "q". But it represents what....
Your job is very nice & don't stop it . If u show code of any website just type address on mobile"server:source" & if u show code of any website just go to view source code.
I want to see my web site first page in the google.
I want see my web site first page in the google of all over the world. please help me and show my web site for everybody first page in the google.
Thanks you very much, wonderful!
Thank you Dave, it works perfect :) Garry.
Can u please help me with the code to load a website from the server every time it loads, without being loaded from the cache memory.....
Please help me Dave!!
I will be putting a search box on our website soon - thanks alot Dave
Hello, is there a way of making the results appear on a results page in my own site, in a place of my choosing?!
Hello dave,a great post! By the way I wanted to ask you that:
I want to incorporate a search engine in my website, but I want the search results from the specific websites predefined in my database.How can that be done ?
Check the above link..I want to create a search on similar lines. Please help me..
thnks 4 this act but this search box appear on left side i want it appear on right, have you any html code??
THANKS DAVE for your valuable answers.Here is my question.
I want to display the first five page links which are searched by the google...
plzzzzz do answer for this question and give me html code..atleast idea...plzz plzz plzzz
I notice when searching your site that your picture appears beside each result - how can we do the same thing?
I am a HS teacher and creating a web site. I have a file cabinet page and would like to create a folder within a folder and can not do it. Is there a way?
Also when i create a page my google site does not give me dashboard as an option. WHy is that?
Thank you very much for your kind information.
Thanks Dave, I appreciate your responding so quickly.
The site is written in frames, can't change that unfortunatly af i'm not the only one working on the site. But here's my question:
How kan I make the results apear in a different frame? I can make it word opening the results in a new window but in an other frame, is gives a blank page.
The trick, Jan, is to give each frame its own unique name, then you can use "target=name" to point the results of a click to a specific pane of the design. Make sense?
Thanks for suggestion.........i want to add google search in my home page........plz provide me help.........
Hi, I'm a high school student in a Web Design class and my assignment was to try to figure out how to put a search bar that searches only our high school web page which we are redesigning as a group. Me and my teacher are learning as we go because we are always trying out new elements. I'm a novice so i'm doing a lot of research to try and get one that works but information is hard to find that i can actually use because i only know html and css. I tried using your code from above but when i tried using a keyword i couldn't figure out how to get the search to recognize the page. i need a lot of help! I really would appreciate your help, thanks for your time
I happened to find this post when I was googling around.
I was tempted to read it because I was familiar with your site;
it is included as a useful source on my site (http://webcreationtips.com/links.html).
A nice article, and plenty of comments.
It seems you have got a lot of fans here.
I would like to make a point about your 'Search Box'.
I don't know if someone else has already mentioned it here;
I didn't time to go through all comments.
According to the strict rules of XHTML, the "checked" attribute has to be declared as follow:
..... checked="checked" ....
Otherwise, the code won't pass 'W3C Markup Validation' test.
I have made a similar box model to yours on my site, but used a 'division' instead of a table.
I want to join this plus other websites and I would like to use the same email addressandpassword for a
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+