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
How do you make a "Submit" button automatically pop up?
Hi I just wanted to say thanks for the code, I am currently having a problem getting the code to search my whole site though, here is my form,
It seems that it only wishes to search my index.html page and not search through all of my .html pages.
If you could get back to me that would be most appreciated.
Wayne, that is the problem I had in the beginning, trying to get it to searc all of my pages. With more reading into the how to section, I found I had to add under the control panel/sites, some wildcard entries to have it hit all of my pages.
Fill in your site name and add each URL:
I have those 3 listed and it searches all of my pages. So it appears you should have a minimum of those 3 versions. It works with no problems, I added it to my front page in the left column if you want to take a look. Also if you type in a keyword, such as Chicago, if you view it in cached option, it highlights it to make finding the keyword easier. I have a lot of text on my pages, so I added those directions above the search box so users would be able to find what they are looking for easily. Hope this helps!
Wayne, is it possible that your site simply isn't fully indexed by Google? Try doing a search like site:askdavetaylor.com (with your domain name rather than mine) and see how many pages match. That's an easy way to see what's in the index...
Hi Mr.Dave thanks a lot for the great codes.
It works fine on my site.but i dont understand why it still return the old contents.
But im not deleted yet the old file in my domain.
I just replace with the new contents and interfaces.
How can i solved this problem..thanks in advance
what does script error 95 mean plz help it keeps coming up on mii piczo site i wanna no how to deletye it cause i can not edit anything plz help ..... thankz for the help .... xx dana
re: Kontera and multiple web pages
If a person has a website with many many pages, what is the easiest method or manner to insert Kontera code on to each of those webpages?
Colleen, I hope that you have some sort of template or other system built around a content management system (a blog, something like Article Manager, whatever) so that you can apply changes quickly? Failing that, some server-side includes (SSI) that lets you change one file and deliver up the changes to all of your pages? Otherwise, well, you have a tedious task ahead of you..
Hi Dave I would like to add google search to my companies intranet homepage to search the internet, do you know how to do this using xml? Our intranet home page was built using flex2.
This code is great, thanks. One question though: Is it possible to have only the text input field and submit button and it still search only our website, not the world wide web? I have no use for the radio buttons or the check box..
Nevermind! I used a hidden input type with our site address as the value and the "sitesearch" as the name and it works fine. :D
We are one of the manpower agency and we would like to install Google search
engine in our website (www.jobonhand.com)to search suitable resume for our
employer view.I found that one of the web site installed the google
search engine on their site,
(www.amrood.com) please help me to avail the
Note: The google have sent me the key code, even though,i cant search what i want exactly.
I have a major problem i add google search box in my site but it only search for few static page of my site not for whole site .please tell why it is happening
Thanks Dave. I'm using your code on my site and it works great.
How do you put a search box on a web page that will search ONLY that page?
Thanks in advance!
dave, there are some of the strange google search box, like there is a backround int he search box, how can we do that ? l mean a backround image in search box and a default text "search in google" or some special features, can u teach us pls ?
Dave, I was just wondering how do I take out the ads from google search? it's working fine but I don't want to have ads displayed on the University developed web site. any suggesions? comments?
Thanks in advance,
Very much appreciate the code. I narrowed the box and input field and dropped the border and it looks like it just grew there :-)
Now if I could just find some people who want to buy wooden pens, bowls or keychains ...
Oh well, Adsense won't pay the mortgage on my house yet, but it's almost to the point of paying for the website rent. Progress ... not perfection.
Hi i have the box on my web page but you can not search in in what do i do here?
I have a search option. In which there is a textfield and Submit Button. Before i press the button, i have two Radio Buttons.
1: Site Search
2: Google Search.
I want to have a check that when 2nd radio button is pressed it should go to google for search. Otherwise it should search within the website.
Can you help me implimetning these two?
Help much appriciated.
This web site is to search for words within the web site, so I would like to use my own search button like I've seen everywhere on other sites. I have seen the Google Search that gives you two options, to search thru Google or thru the web site itself, but when you chose to search thru the web site Google jumps in and the words you selected are listed with your web site link at an outside Google listing. I would like for people to type a word inside the search box and to jump straight to where that first word is and so forth. Is there an easy way to achieve this?
I'm not technical at all and time is of the essence to get this set up for our members and everyone out there. We conduct paranormal research and educate the community in the paranormal field.
I can even go as far as letting someone design my search button with that purpose and give him/her credit on the web site... This is an extension of a non-profit organization, Paranormal Awareness Society, Corp. and we need help.
Please help me.
Thanks !!! its work !!!!!!
Thank goodness I found this answer I had done all sorts of searches and could not find code I wanted. Now the hard part. The code works fine. But is there a way to get the terms that people searched for from this form. That way I can learn better what they are looking for and tweak the content. This would be great! I am running on windows server and did not know if have to have database set up or could just get e-mail?
If you had access to your server, you could write a rudimentary CGI script that simply logged the search string and then bounced it to Google. That's probably a three line shell script in Linux, for example:
echo $QUERY_STRING >> $logfile
echo "Location: http://www.google.com/search?$QUERY_STRING"
[caveat: not tested!]
I set up an Access database on my site, but not sure how to get form to also place info into it. I am using dsn
Just dropping by to say thanks for the great and thorough information, as usual. You are obviously a very dedicated and hardworking individual.
Thanks Dave I will try this but I am not linux aware.
ku soo dhawoow website ka maxamuud,
does this google search tool work on a password protected site? or does that mess things up since the site is not available to all? thanks! d.
I just wanted to know if theres was any way that I can take out the padding on the search box? I want to put it in between my columns but I want it to fit snug tight without padding on top or bottom? Is that posssible?
You bet. Simply change that first DIV to remove the "padding" parameter:
<div style="border:1px solid black;width:20em;">
You can also tweak the width to fit your constraints too, including using a pixel count instead (e.g. "width:100px;")
Thanks Dave! It worked great! You are definitely a gentleman and a scholar. Thank you for all your help, Have good one!
Dave: I tried your example and it worked like a charm. The question I have is there a way to convert the results to an iframe without the google search bar showing up?
I Have the same query as that of nick,
"I added the Google site search to my site last year. But it does not find new content.
For example, I added the terms "yankee doodle dandy" to a test pagee recently, However, upon a "site" search, it does not locate the page with that term.
Can I assume that my site must be re-indexed by Google before any new content will be found? "
if so please suggest some simpler and faster indexing method as my website content changes frequently.
Great site for those of us starting a website for the first time. My question: When someone does a google search from my site, can I have it first open a new tab if using tab browsing and if they don't have tabbed browsing, then open a new page?
Badshah, you need to wait until the Google spider sees your new pages. One way for that to happen more quickly is to frequently update your site with new content, which teaches it to visit you more often.
Greg, yes, you can do that. Add "target="_blank" within the FORM tag and you'll find that the search results pop up in a new window.
how can i search in my website by using google search
thanks dave for the reply, i am not exactly getting your point that site should be updated daily, does it mean i need to add pages to website or just update/change the contents of the pages/pages already present?, now in either case whatever your reply is like adding pages/changing page content , if i do it on daily basis , does that mean google will eventully index my site daily as my site is should change almost daily and customers should see changes on daily basis too , waiting for ur
reply dave, Eagerlyyyyy
Hi dave, am having problems in locating html of my site, how do i go about it.
Hello Dave.. I'd like to have 2 buttons instead of a google button and a checkbox.. how can I do this without the 2nd button having the full URL as it's face (value). In other words.. I would like the button face to say "LI Online" instead of www.longislandonline.com
When I click on a location from Google's search, a different website shows up. It says "jump" and then loads a website i didn't click.
hey. this is so cool. super. thank you very much for this info. cool cool cool! :D
Like Fred recently queried when I click on a location from Google's search, a different website shows up. It says "jump" and then loads a website i didn't click.
Hi Dave this is great thank you very much. Just wondered if you get could the search result to open a new window or tab (same as Greg Smith at May 28, 2007 9:20 AM).
Martin, as I said earlier in this stream of comments, yes, you can do that. Add "target="_blank" within the FORM tag and you'll find that the search results pop up in a new window. :-)
do you know how I can make the google search box search a mysql database?
We, as HornAfrik webmasters, are glad to join to the Google host page, please help us to find the easest way we can our website in an automatically?
So that, how can we deal with this matter?
Wish you the best.
How can I make this search box code, have google search two or three sites, instead of one?
Hi, Thanks a lot for the feature, but how can I add a Google Image search?
Thanks Alot Dave .....
May God Bless U
how do i not give the user the option to search google.com, only my site?
How can I create a sign up box on my web site? All I want is to collect the name and email address of visitors who wish to participate.
You Rock Dave!!!!!!!!!!!!! Tanx a lot, I have a cool Search Box now on my site www.sajadghaffoor.blogspot.com tanx 2 you!keep up da good work
Deve Great job,
I was using your control on my site(old site all html pages) and it was working fine today i upload the new site but the search my site is getting me old site results can you help me.
Many thanks for this, it's helped alot!
Do I need Google's permision to add google search on my site?
Dear contributor, copies the codes from this site and pasted it straight into a blank document under the body tag...unfortunately it was displaing the code i pasted under the preview.....PLS HELP ME OUT
My web site is www.ppc4you.blogspot.com. I cannot make my site on the google search even though i have submit my site into the google site map
Just wanted to point out that the checked/selected attributes as used here are not actually XHTML compliant, as they are not well-formed. A well-formed attribute is in the form selected="selected".
Absolutely true. It's been a constant frustration that the code offered up by sites like Google and Amazon are often sloppy and need to be cleaned up to be standards compliant. Y'd think they could do better... :-)
after all you are master
hello u nailed my qustion right!
pls how do i have the google search results display on my site with out the google logo
How to put the Google search (powered by Google)in my website like the www.cnn.com? Thanks
Thanks ALOT....I was looking for that...
I was wondering if I can add buttons to my search box like in google, I.E. image search Images News And Web...Thanks a lot again.
How does one use a graphic as the input button/ submit button? I'd rather not have the Submit button but a gif instead.
Thank you so much for this awesome code!! Unfortunately, I am using this within a company intranet and when I click the search button, it tries to load in our intranet url and causes an error. It will not open in the web. I tried changing the code to open in a new window and it doesn't make a difference, our company url is still at the beginning of the address. Can you help (hope this makes sense)?
Found your site and the excellent code snippets are great. Your teaching is very clear too. I thank you sincerely,
I'm making a page and on the top left is the name of the site and I want the search box on the top right. I've tried doing it but it then doesn't work because its outside the red box. How do I also move the red box so that the search box appears top right?
How do I make a comment box like yours?
I am adding a google search and want an new window with a fixed width (say 600px wide)w ith the search results to open over the top of the website. How do I do that? Thank you so much for your help!
When I run the search on my own site, I get results, great. But when I go to those pages, I get the text, but the images don't show. Any idea why? I added your search to a page in my help file, which I created in FrontPage (that has a sucky search feature), and my help file is hosted on a google-registered site.
Thanks this code, i shall add this to my limo hire site shortly
We want to add our pages in googlr pages because please guide to us.
Thank you, Dave Taylor for this website of yours. Humbly, a shy devotee
Thank you Dave Taylor...For days I'm searching for this code. Finally you gave it..!! Thank you.
Dave, I've followed your instructions. However, the search term(s) do not transfer to the Search Page. I do get redirected to the search page, but then have to retype the serach terms. I am using my own search engine and NOT Google. Is the code different?
Tom, undoubtedly your search engine doesn't work the same way that Google does. Most importantly, you need to do a search and then look at the URL your search engine uses to identify the *name of the search term variable*. With Google, it's "q", and that's what this script produces too. If your system uses, say, "searchterm", then just tweak my script to use that variable name instead.
thanks for your code. I fairly new in this field and sometimes when i am stuck it takes for ever to figure it out. I have added a search to my site and changed the stle of it with some css, but it just won't work properly. i am looking up things that I know are in teh site, but it doesn't find them. Can you help?
Dave, I have been pouring over this code and I can't seem to figure out why my search box won't fill the google search textbox when I click on the button. Do I have to use a submit button? Right now I am using an image for my button and I think that may be what it has to be. I am using IE7 and when I copy and paste your code it still doesn't work. They only difference in my code is the CSS id's, etc. That won't affect the functionality of the form.
What am I doing wrong?
Hi Dave, i need to display the search result in my website itslef. Can you help me?
I was able to add the HTML by way of your instructions regarding adding a web-site specific as well as google search engine. When I do so all I get are no finds on either the website or the net. Any ideas what is going wrong?
Hi Dave. Maybe I've missed this somewhere, but how do I get the search to only look at one directory in my domain? I'm looking for it to only search files in my help file, but not to look in the rest of the site. I'm unsuccessful. I looked at that bot thing, and i didn't see an answer.
So, for example, it currently looks at www.mywebsite.com, but I want it to look at www.mywebsite.com/directoryA
Is there a way to do that? Entering that path simply returns o results.
Hi Dave. Thanks for this information, I have the google engine on my website ( www.mytravelicious.com) now. Just have a question- how do I put it on the center?
Hi,thanks alot for ur help.
How do i pu the word (GOOGLE) b4 the textfield?
Thanks Dave, you've saved me!!!
Your site is one of my favorites now :)
I placed your google search on two of my web sites and they are great. Finditmall.com and citizenhealthwatch.com
Thanks for being a sharing person. The world needs more like you.
My website's html layouts are fine in IE but in firefox there are some layout issues.
Can you please tell me how i can validate my website's html according to firefox and IE. The perfect solution which u recommend.
dave, you seem to be telling alot of people who ask about opening a search in a new TAB, the "_blank" html code, which is to open up a new window... is there one for opening a new TAB. I can't seem to find a code anywhere, and a client has requested I incorporate this kind of feature in their site search.
As far as I can tell, Cally, there *is* no way to actually have a target= value that opens up a new tab; that's up to the browser software and indeed there are browsers that don't support tabs (for example, cell phone browsers).
Further, the entire target attribute is deprecated in the XHTML standard, so we should theoretically have stopped using it anyways...
I need some advise regarding adding google adds on to my website.
I have given my URL above, and i got all the codes from Google and pasted on my website, but the adds doesnt seem to appear on my page, I managed to get the google search box on to my site. please help me with this.
Thank you so much
Hi Dave, recently my Google image search button has stopped working. If I click the button leaving the query blank I get the Google image search page, but if I search for a picture it returns the regular Google results page, not the image results. It worked for months. Do you know what happened?
Do you happen to know of a way to add to the query string when the user types in a search?
For example: They type in "pit bull" and it actually searches for "dogs pit bull".
Thanks so much for helping the HTML-inexperienced (like me) with these helpful posts!
My site is hosted on freewebs (http://www.freewebs.com/routedog) and when I search site:freewebs.com/routedog on google nothing happens. Is this because my site is new, or is it that freewebs sites never come up?
Can you make the search result pop up in another window, like this HTML code for a link:
Jack, yes you can do just that by adding that attribute to the FORM tag. So instead of having something like
FORM METHOD="get" ACTION="xxx"
FORM METHOD="get" ACTION="xxx" TARGET="_blank"
you said if l want to use this code l should simply change the occurrences of askdavetaylor.com as appropriate.only search Ask Dave Taylor
do l have to put my url here too? or what do l do .
value="askdavetaylor.com" checked /> only search Ask Dave Taylor
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+