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:

✔ How to Create Predefined Google Image Search Links?

Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....

✔ Can I embed a Facebook search box on my blog site?

I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...

✔ Can I use CSS for drop shadows on my blog?

I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....

✔ How can I embed interactive photo panoramas on my site/blog?

I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...

✔ How can I create a Twitter search URL shortcut?

I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...

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!

Categorized: HTML, JavaScript and Web Site Programming (Article 3802, Written by Dave Taylor)
Tagged:
Previous: Selling jewelry on eBay, does it need to be appraised?
Next: Should students use Google for research?

Reader Comments To Date: 817

weyons said, on January 11, 2009 9:11 AM:

add google to my site

Michael Claymore said, on January 29, 2009 8:46 PM:

Thanks for this, i wasted a lot of time before coming here. very cool.

Richard Sweeney said, on February 4, 2009 8:56 AM:

Nice. I (and I'm pretty sure LOADS more people) really appreciate these simple, concise tutorials.

Cheers mate.

kyle said, on February 8, 2009 2:46 PM:

when i tick the box it makes no difference it still searches google

waisuddin said, on February 14, 2009 10:33 PM:

hello dave
i a problem please help me my family are using my computer and they download everything from it so i decide to locke download could you please tell me how i can lock download .thanks

james said, on February 17, 2009 9:07 AM:

Hi Dave, Is it possible to display the google search results within a window on my website?

Brett said, on February 17, 2009 10:03 AM:

Hi Dave, Awsome stuff. I was wondering how you get a comment box at the bottom of the site like this one. How would I go about putting that on my site?

manu said, on February 18, 2009 10:55 PM:

thank u Dave! Its simple and it just works.
The box was a bit big on my Indian defence news site www.8ak.in, so I changed the size value and the em value, so its all looking nice and clean now!

Gordon Johnston said, on February 19, 2009 6:16 AM:

Hi DAve, I added a Google search on my web site, but my site index page is made up with frames, so when the search is used the google search opens up in just that frame, how can I make it open on top please

Dave Taylor said, on February 19, 2009 6:37 AM:

Gordon, add target="_top" to the FORM tag and it should do what you want. In other words:

That should do the trick!

Colin said, on February 20, 2009 11:00 PM:

hello, i'm new to google search, i did added the search box in my web site, when i key in some keywords there some can pop up result and some cannot, and these items are on the same web page, why this will happen? and also sometimes when i search an item that is let say on page 3 of my catalog, but the goole search result showing that is page 2, why??
thank you

Louki said, on February 24, 2009 10:50 AM:

Thanks for your tips..!

Aamir Hasan said, on March 2, 2009 5:12 AM:

Thank U Mr Dave taylor i hv successfully added Google search in my web page
ThanX again

Ahmed said, on March 9, 2009 5:02 AM:

thanks , worked like a treat!

mrityunjay said, on March 14, 2009 6:21 AM:

THANX a lot..you made it easy to add google toolbar to my site..

Emir said, on March 16, 2009 6:43 AM:

How can you list your website with Google?

Craig said, on March 16, 2009 9:17 PM:

Hi Dave

I can't access Google Apps because my domain host suddenly is no more. I am currently trying to find a new host for accommodationalbany.co.nz.

In the meantime, because Google Apps only applies to existing sites, I went to Google Sites and set up what I thought was a web page, fairviewheightsbb@gmail.com. I cant find it on the web. I think there is another step involved to attract search engines. I am not familiar with HTML but does you advice about adding a google search box apply?. Do Google Sites attract search engines? Do I need a host?

Ab Razak said, on March 19, 2009 2:39 AM:

I need help for custom search engine html code that have by store, by brand & by category search button special for all my 70 online stores. Please help me!

Ab Razak said, on March 19, 2009 2:44 AM:

I got problem with my button. I already put the hyperlink but it seem unfunctional. Please give me a complete html code for button with hyperlink function.

rahim said, on March 24, 2009 1:02 AM:

how do i display the google search result in a same page? with the exact header and footer at my page..

Karim said, on March 30, 2009 4:59 AM:

Thank you brother

Gus said, on April 2, 2009 10:55 AM:

Hi,
I would like to add your code for this Google search but I was wondering if it is possible to not have the search web check option. I want to only allow searches on my website.
Is this possible and how can it be done. Thanks for the code I have learnt a lot form your website.

marius said, on April 11, 2009 4:34 PM:

Can anyone tell me if is possibile to make the search bar search in my password area?

Like the protected pages? I tipe a name on that protected page but nothing:(

So anywone ... Thanks in advanced !

ray said, on April 17, 2009 1:43 PM:

please tell me how to use the search box to search for more than 1 site at 1 time.
pLEASE tell if its possible or not. its really urgent.

Thank you

Mudassir Javed Khan said, on April 22, 2009 3:45 AM:

Dave
i have query form in my website but i dont know how to link that form with my email.

can you guide me?

Iqra said, on April 23, 2009 3:32 AM:

Dave

It works..........

Thanks a lot!

Mike S said, on April 25, 2009 4:58 PM:

Thank you, that was very clear and very helpful.

Eugene said, on April 26, 2009 8:32 AM:

Dear Dave,

Please help me understand what's wrong with my Google Search.

Google offers three alternatives, two of which work properly and the third one (the one that I need) - does not work at all.

1. search results in new window on Google site - works
2. search results in current window on Google site - works
3. search results in current window on page Search of my site - does not return results at all.

I am using iWeb widget to create SearchBox and SearchResults area.

Is it a problem of Apple's iWeb or is it a problem with Google code? Or am I a complete idiot?

quickcode said, on April 28, 2009 6:51 AM:

Dave,

Thanks for the solutions u've provided thus far.How do I add a search box to my website such that it conducts word search only within the website even when i'm not online.

nadeem said, on May 8, 2009 2:56 AM:

When I complete put the search box on my web site then the result show on new Google page and new out site my website theme. I want the search result show on my web site in ifram.
So can you give me solution on search result on my web page in ifram.
Thank you.

sartopsm said, on May 10, 2009 5:44 AM:

please help me

naresh said, on May 14, 2009 4:28 AM:

want 2 put add on googel.com

mojtaba said, on May 15, 2009 10:47 AM:

Thank you

vikalp said, on May 21, 2009 6:13 PM:

thanks a lot for your help.

Phenom? said, on May 23, 2009 9:29 AM:

Dude, WHY is question I made here not here??

Dave Taylor said, on May 25, 2009 6:55 AM:

Probably because it wasn't relevant to the topic at hand, so I either moved it or deleted it. Trying to keep things coherent and logical. :-)

Anonymous said, on May 25, 2009 9:59 AM:

"Probably because it wasn't relevant to the topic at hand, so I either moved it or deleted it. Trying to keep things coherent and logical."
What the hell are you saying?? It's completely about the topic, coherent and logical!

I have a Google search boX in my website, the first one Dave gave in the top of this page. It has two options, search The Web and Ask Dave Taylor with two input radio buttons before each one. You can chose which one you want to search.

Now I would like to know if this is possible and if it is how it's done: make the first option search the web only and the second option search google images only. Without having two different search boXes.

How is that not related to the topic nor logical??

Dave Taylor said, on May 25, 2009 1:53 PM:

Easy does it. I get a lot of comments and don't always recall why I do or don't moderate specific entries. Your question seems like a reasonable one and since the two use a very similar format, I expect it's doable too.

For example, here's a search URL:

http://www.google.com/search?q=my+search

and the same search on Google images:

http://images.google.com/images?q=my+search

So all you'd need to do is change the "action" field of the form if someone indicated they wanted to search images, not the full Google search. Let me poke around, see if I can come up with the necessary Javascript... :-)

Shaival Mehta said, on May 26, 2009 9:52 AM:

Thanx a lotttttt
It's great
and it do works........

Danielle said, on June 2, 2009 3:18 AM:

how can i improve my website please help!

david said, on June 3, 2009 10:33 AM:

dave, i tried your box but no search results came up. i just recently posted my site up. does this mean that the search engine hasn't crawled my site yet?

thanks

Dave Taylor said, on June 3, 2009 11:02 PM:

David, sounds like Google hasn't indexed your site yet. The easy way to find out is to search for your domain name prefaced by "site:" (I'd use "site:askdavetaylor.com" for example) and see if there are any matches. Then compare the total number of matches (you can find that in the top right) to the number of pages you know comprises your Web site.

Reny said, on June 8, 2009 8:07 AM:

I want to add google search bar at my website. I have created my website (www.autoasia.net) using front page. When I paste the code of Google Search Bar wherein I want to put the Google Search Bar, only the codes are shown in design mode. No logos and no search bar is shown there. How can I do that, please advise SIR.

James said, on June 15, 2009 5:44 PM:

hey there dave!
im currently using the google search code on my website, basicly i got bored and ended up makeing a home page how i wanted it which included google search, is there any way to get the search box to focus when the page loads (focus onload i belive this is called) every attempt ive tried its been able to focus however for some reason it disrupts the search angine and wont connect to google :/

vikas kumar said, on June 16, 2009 3:19 AM:

sir,
i want to know how to add in google.i want to launch a webside and using ur this search engine.what is benifit for me? plz tell me soon.

Amy said, on June 20, 2009 2:54 AM:

Hey Dave-
Thanks for this script- it's slick.
I have a problem... I just changed from a blogspot.com to my own domain. I put a robot.txt in my root folder to stop my old site from showing up in google searches. I also did a mass url removal (per google crawler access)...
here is my question... since I went from blogspot to my own domain, and I have blocked google from crawling my files by putting the robot.txt in my root folder, am I now unable to have my own google search in my website? Will these blocks affect my own personal site search?

Thanks!!

Dave Taylor said, on June 20, 2009 7:07 AM:

Vikas, the benefit to using Google as a search engine is that it does all the work for you and you don't have to worry about a site-specific search engine and maintaining it locally...

Amy, you're right that if you are blocking Google from spidering your site by use of a robots.txt then this script will be useless to your visitors because it won't be able to search what you're not making available. You might check out http://www.lijit.com/ instead as a third-party blog search engine instead.

Muhammad Ismail said, on June 21, 2009 9:43 PM:

Thanks a lot it is very useful God bless you.

Ericard Production said, on June 22, 2009 10:41 PM:

Thank you! It works alot and very useful for my homepage. ericard.webs.com

jennifer said, on June 24, 2009 6:07 PM:

Hi dave. I am having a lot of difficulty with my website. I signed up with google adsense and i followed the steps. When I got to copying and pasting my html code they gave me, I get error on my page. I have tried created side bars and saving it and publishing it that way and I have been trying to add widgets and i copy my code but nothing. I am seeing ads by google on my site but no code. Its really werid and fustrating. I have been trying to do this for 2 weeks and been trying to get some online help and posting questions on the net. I am getting nowhere. Can you help me?

freddy said, on June 27, 2009 11:25 AM:

Thanks for the code - it works great - better than the standard google widget offering and I have started using it on my sites

Freddy

rochelle said, on June 28, 2009 7:50 PM:

thank you you just help me better working on my website.

Mr.Me said, on July 7, 2009 7:35 AM:

Hi Dave,

Thanks for the code, but can you tell me how place an image search button on the same page as a normal search button, I have tried myself but I can't seen to crack it.

Thanks, Sam

Dave Taylor said, on July 7, 2009 8:20 AM:

Sam, not sure what you're asking. If you want *buttons* then you can easily have something pointing to images.google.com. If you want multiple search boxes, that's easy too, just make sure that you have each form (that produces the input area and button) end with the </form> tag: many web site builders seem to be predicated on you having no more than one form on a page.

Anonymous said, on July 15, 2009 5:43 AM:

"Let me poke around, see if I can come up with the necessary Javascript... :-)"

Do you have anything?

Scott Herman said, on July 15, 2009 2:05 PM:

Hi Dave: Please don't post my website in your public response. I am trying to add a search function using lotus notes (not my choice). We have a document library that is an https site. Ideally we'd like the search engine to go there. When I write this code in lotus notes - it appears fine. But when I search either "the web" or internally, I get the following error: HTTP Web Server: Invalid URL Exception -- can you explain why? And honestly, more importantly, how I can fix/work around this? Thank you! Scott

Dave Taylor said, on July 15, 2009 10:13 PM:

Scott, I'm afraid I don't know enough about Lotus Notes to be able to assist. Seems like if you can create a search box on a blank page, though, you should be able to cut and paste that same code onto any page on your site. Good luck!

Mark said, on July 25, 2009 8:41 PM:

Dave, in your reply to John Kiester, you said " just needs to have target="new" added and it'll redirect the result of that form to a new window called "new"". If you always...."

My question, How you change the Google search box and it is violate the Google policies?

Dave Taylor said, on July 26, 2009 12:03 AM:

Mark, we're not tweaking the search results window, we're just ensuring that it shows up in a separate window, rather than the same one. I really can't imagine Google caring (or even having any control over it). I'm sure it's not a terms of service problem.

Mary said, on August 4, 2009 4:38 PM:

I tried the free site search instructions on your url:http://www.askdavetaylor.com/how_can_i_add_a_google_search_box_to_my_web_site.html
and it does not work. Is this an old suggestion now that Google charges to have an individual site search button? Wish it worked!! It just goes to the traditional google search page and you have to just enter what you want, no mention of my website..bummer!

Dave Taylor said, on August 4, 2009 5:09 PM:

The first question to ask, Mary, is whether your site is in Google in the first place. If so, then try doing some searches like

site:yourdomain.com test words

(where "yourdomain.com" is your actual domain). Do they work? Do you get results? Then you should definitely be able to get the search box here to work.

Paul said, on August 7, 2009 10:50 PM:

I have just tried your search box and it works fine on my site. Just wondered what code I need to add, so as to center the entire box instead of it being on the left

Yolanda said, on September 2, 2009 10:25 AM:

Many thanks. Works perfectly.

Jim said, on September 12, 2009 9:11 PM:

I have seen the question asked many times but I haven't seen a response. Is ther any way to eliminate the advertisements in the results?

Thanks

Dave Taylor said, on September 13, 2009 12:03 AM:

Jim, why would you think that there was a way to avoid having the advertisements on the search results page? :-)

Ken said, on September 13, 2009 9:20 AM:

I just wanted to say thanks for the great tip on the HTML code for the Google Search Box. I could have figured it out but this made it much easier.

Now I have it implemented on a custom start page for direct searches and to avoid their enlarged text and text box search page.

Jim said, on September 15, 2009 8:54 AM:

I found how to eliminate the advertisements. You need to pay $250.00 per year or more depending on your requirements.

Eli said, on September 17, 2009 12:42 PM:

Dave,
How would I turn the google search bar into a link? For example, I would want anything you put in the search bar and what you press to not matter, but only to send you to another page. Please get back to me soon.
-Elias

Tamar said, on September 18, 2009 1:24 PM:

thanks for telling me how to add a search box to a website. Been wanting to add one to the Barradrum Farm (www.barradrumfarm.ie) website for ages. In my tests it is working perfectly, Thanks again, Tamar

Dave Taylor said, on September 22, 2009 6:34 AM:

Elias, I don't know how you would access the information someone has typed into their Google search bar, so I dunno how to do that.

Gail issen said, on September 23, 2009 1:47 AM:

Thank you for a great script!

Now, I would like an enhancement. Is there any way I can have the results of the search display within a page on my site?

Diana said, on September 24, 2009 9:50 AM:

Thank you Dave!

vijaykumapeta said, on September 26, 2009 11:02 AM:

thanks dave. you made my life easier. I have been looking for this for ages.

Ingo said, on September 28, 2009 4:04 PM:

Thank you for the code to start a Google search. Worked on first try. Was using free Pico Search but they don't search pdf files unless you pay.

Allana C said, on October 2, 2009 4:27 PM:

Hi Dave, perhaps you can help me - I have added a Google custom search box to my homepage, and redirected the results to a page called /searchresults.aspx. When I try the search, it goes to the right page, but doesn't show any text at all.

If you are able to take a moment to look at the code, you will see the only difference there is to the code google issued me with is the "defer" command, which microsoft office live added itself.

Thanks in advance!

bursa said, on October 4, 2009 5:41 AM:

thanks dave. you made my life easier. I have been looking for this for ages.

Big John T said, on October 4, 2009 6:43 AM:

Dave,

This is exactly, well almost exactly but close enough to what I was looking for. Excellent, clean, short nice. The only improvement I did was to move the "search" button to the right of the text box. Sometimes when suggestions pop up they cover the search button.

Thanks for sharing this.

John

satish said, on October 4, 2009 10:35 PM:

I added the google search box!SUCCESSFULLY..... THANK YOU SOO MUCH!!!!!!!!!!

Tamar said, on October 5, 2009 6:45 AM:

Have published the site now with the search box, thanks again Dave, Tamar (www.barradrumfarm.ie)

alvin said, on October 6, 2009 9:27 AM:

Hi Dave,
i still have one question.Your program works fine but how do i get rid of the checkboxes and force the user to only search for my sitedomain?
Thanks.
alvin

alvin said, on October 6, 2009 8:26 PM:

Sry,another question...
Can i search for information only in a certain folder under my domain? Example testing.com/Folder?

Jaivardhan Joshi said, on October 8, 2009 3:52 AM:

Thanks Dave 4 the article. I was wondering if i could redirect the output of search to some div in my webpage rather than making the whole page redirect to google. I need help on this.

Thanks in advance

bursa haberleri said, on October 8, 2009 8:34 AM:

Sry,another question...
Can i search for information only in a certain folder under my domain? Example testing.com/Folder?

gaste bursa said, on October 9, 2009 3:21 AM:

Have published the site now with the search box, thanks again Dave, Tamar (www.barradrumfarm.ie)

Jaivardhan Joshi said, on October 10, 2009 3:28 AM:

Hi Dave, I have managed to do some tweaking with javascript so as to enable muliple forms in a page, so as to enable the page to do some other postback also rather than just searching.

function abcd()
{
var i = document.getElementById('A1');
var j = document.getElementById('q');

if( j.value !="")
{
i.href = "http://www.google.co.in\\search?q=" + j.value + "&sitesearch=cyborgit.in";
}
}

Where A1 is the link

I hope it helps some one....

but my question remains...... can i redirect the google search to some div within my form

elric said, on October 10, 2009 3:58 PM:

hi dave I found this very useful. Please email me after looking at the website and rate it. Speaking of rate you should show how to put a comment box or a 5 star rate system thanks alot

guduru phani kumar said, on October 14, 2009 10:17 PM:

hi dave, my doubt is how to link my hyperlinks to my google adsense search box and it should get the result page.
example: when visitors click hyperlink of wallpapers on my website it should get the search results from my google adsense for search.
please provide solution for this problem.
thank u

Rob said, on October 25, 2009 4:10 AM:

Hi,
I want the results to appear in an ifram on another page on my site .. how do i do this. I have tried using target="iframe_name" but it just opens the results in a new window. I use Webplus X2

Emmanuel Acquah said, on October 28, 2009 6:03 AM:

Thanks Dave. Helped a lot!!!

Heather G said, on October 28, 2009 2:22 PM:

Hi,
Thank you for having this website and continuing to answer questions on this topic. I have a google search box on my website and I am wondering if there is a way to have a hidden search term which will always be included in the search. For example, if you wanted to always include the word "wiki" as a search term. Is there a way to add this as a search term so that when a user types "puppies" it actually searches on "puppies wiki"? Thanks.

Andy said, on October 30, 2009 5:55 PM:

Thanks for the help this is useful.

aakif said, on October 31, 2009 7:09 AM:

I want to add a radio tab along with others for image search, please help!

G. Subhra Isaac Stein said, on November 2, 2009 11:10 AM:

Dear Dave,

You are doing a great job for web professionals. I have one small doubt, please guide me. I have one website named www.logontowww.com . (1) In this site can i use the code shown below?

[form method="get" area target="_blank" action="http://www.google.com/search"]

[input type="text" name="q" size="31"
maxlength="255" value="" /]
[input type="submit" value="Google Search" /]
[/form]

(2) Is there any terms or rule violation for using this feature ?

Andreja said, on November 5, 2009 6:51 AM:

Dear Dave,

only Research page of my site is in search results... why is this happens?

All the best!

Linda Smythers said, on November 19, 2009 5:22 AM:

i have tried it and it works very well.

CHILLAPPLE said, on November 19, 2009 8:41 AM:

ya its very useful for me... thanks a lot...

Kevin Daniel said, on November 20, 2009 5:17 PM:

Dear Dave,
I was flipping through the web pages while looking for a search engine I found your website to be very interesting
I have my website which is under construction, I have a search engine installed into it but getting that into function is the big problem can you please help me in regards to this.

Thanks.

pc stomp said, on November 21, 2009 7:05 AM:

how do i get a thumnale photo to showup on google
next to my url can you help me thanks.
p.s i am willing to ad your url to my website if
you whant as a link so otheres can fined you thanks

Long Islander said, on December 4, 2009 9:23 PM:

Dave, you rock. Thanks for the quick and easy code, which works great!

JOSE said, on December 5, 2009 9:04 PM:

WE CAN DO WHATEVER YOU WANT!

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!

« First | Previous | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | All 9 Pages | Next | Last »

I do have a comment, now that you mention it!

How can I add a Google search box to my Web site?

Reader Comments To Date: 817

I do have a comment, now that you mention it!

Check This Out Too...