|
|
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="" /> 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: 817wayne said, on February 23, 2007 1:16 PM:
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,
If you could get back to me that would be most appreciated. Wayne Karen said, on February 26, 2007 10:53 AM:
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: *.puddleofmuddfanpage.* 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! www.puddleofmuddfanpage.com
Dave Taylor said, on February 27, 2007 9:19 AM:
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... wani said, on February 28, 2007 2:04 AM:
Hi Mr.Dave thanks a lot for the great codes. dana toppinen said, on February 28, 2007 6:36 PM:
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 Colleen said, on March 3, 2007 5:45 PM:
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? Thanks... Colleen Dave Taylor said, on March 3, 2007 8:45 PM:
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.. jon said, on March 6, 2007 7:54 AM:
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. Damian said, on March 6, 2007 9:19 AM:
Thanks works a treat Cain said, on March 7, 2007 11:36 PM:
Hi Dave, 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.. Cain said, on March 8, 2007 12:26 AM:
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 Ramesh Kumar said, on March 8, 2007 6:54 AM:
Hi,Dave. Note: The google have sent me the key code, even though,i cant search what i want exactly. naveed said, on March 8, 2007 1:38 PM:
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 Dave said, on March 8, 2007 7:57 PM:
Thanks Dave. I'm using your code on my site and it works great. Todd said, on March 14, 2007 9:20 AM:
Dave, recep said, on March 22, 2007 4:30 PM:
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 ? Atiq Warraich said, on March 29, 2007 11:33 AM:
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, Regards, BillinDetroit said, on April 6, 2007 10:41 PM:
Dave, 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. Tom said, on April 11, 2007 4:41 AM:
Hi i have the box on my web page but you can not search in in what do i do here? Tauseef said, on April 16, 2007 5:55 AM:
Hie I have a search option. In which there is a textfield and Submit Button. Before i press the button, i have two Radio Buttons. 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. Lourdes Metz said, on April 20, 2007 8:40 PM:
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. Lourdes Metz sami said, on April 21, 2007 9:44 PM:
Thanks !!! its work !!!!!! nijyar said, on April 25, 2007 6:19 AM:
hi every body David Cox said, on April 25, 2007 2:57 PM:
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? Dave Taylor said, on April 25, 2007 3:40 PM:
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: #!/bin/sh exit 0 [caveat: not tested!] David Cox said, on April 25, 2007 7:02 PM:
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 Internet Marketing Tools said, on April 30, 2007 2:02 PM:
Just dropping by to say thanks for the great and thorough information, as usual. You are obviously a very dedicated and hardworking individual. David Cox said, on May 1, 2007 4:55 AM:
Thanks Dave I will try this but I am not linux aware. mahamoud said, on May 1, 2007 6:30 AM:
ku soo dhawoow website ka maxamuud, daurie said, on May 10, 2007 11:13 AM:
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. Guitar man said, on May 17, 2007 9:15 AM:
Hey Dave, 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? Dave Taylor said, on May 17, 2007 12:17 PM:
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;") Guitar Man said, on May 18, 2007 10:00 AM:
Thanks Dave! It worked great! You are definitely a gentleman and a scholar. Thank you for all your help, Have good one! mike said, on May 21, 2007 3:19 PM:
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? Thanks! Badshah said, on May 24, 2007 2:08 AM:
Hi Dave 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. Greg Smith said, on May 28, 2007 9:20 AM:
Dave, 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? Much Appreciated. Dave Taylor said, on May 29, 2007 12:07 PM:
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. osama said, on June 4, 2007 4:36 AM:
how can i search in my website by using google search Badshah said, on June 13, 2007 7:36 AM:
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 EJIRO said, on June 27, 2007 8:09 AM:
Hi dave, am having problems in locating html of my site, how do i go about it. Thanks Peter Armenti said, on June 27, 2007 7:16 PM:
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 fred s. hobbs said, on June 30, 2007 2:13 PM:
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. mastermind said, on July 11, 2007 9:59 PM:
hey. this is so cool. super. thank you very much for this info. cool cool cool! :D Lou said, on July 12, 2007 5:14 PM:
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. Martin LS said, on July 15, 2007 4:28 PM:
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). Dave Taylor said, on July 15, 2007 8:58 PM:
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. :-) Jeff Stevens said, on July 16, 2007 10:18 AM:
do you know how I can make the google search box search a mysql database? mmguuleed said, on July 18, 2007 3:07 AM:
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. Kenneth said, on July 19, 2007 1:22 PM:
How can I make this search box code, have google search two or three sites, instead of one? thanks, Kenneth Tom S said, on July 21, 2007 5:52 AM:
Hi, Thanks a lot for the feature, but how can I add a Google Image search? Thanks, Tom Broken Pixels said, on July 31, 2007 10:03 PM:
Thanks Alot Dave ..... May God Bless U lolman said, on August 5, 2007 3:50 AM:
how do i not give the user the option to search google.com, only my site? Gail said, on August 15, 2007 6:46 PM:
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. Sajad Ghaffoor said, on August 15, 2007 11:26 PM:
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 Arshad said, on August 20, 2007 10:05 AM:
Deve Great job, Dean said, on August 21, 2007 5:14 AM:
Hi Dave, Many thanks for this, it's helped alot! Cheers Kawaljit Nagi said, on August 21, 2007 8:30 AM:
Do I need Google's permision to add google search on my site? mujeeb said, on August 23, 2007 1:05 PM:
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 PPC4YOU said, on August 23, 2007 8:59 PM:
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 matt said, on August 25, 2007 11:31 PM:
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". Dave Taylor said, on August 27, 2007 10:34 AM:
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... :-) avinas dwivedi said, on August 31, 2007 2:19 AM:
Thanks Allen said, on September 5, 2007 10:02 AM:
hello u nailed my qustion right! saigonman26 said, on September 23, 2007 1:13 AM:
Hi Dave, Alex said, on September 24, 2007 2:05 PM:
Thanks ALOT....I was looking for that... Bryan A. said, on October 2, 2007 6:46 PM:
How does one use a graphic as the input button/ submit button? I'd rather not have the Submit button but a gif instead. Amy said, on October 5, 2007 3:57 PM:
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)? vinaym said, on October 19, 2007 11:18 AM:
Hi Dave, Sean James Cameron said, on November 3, 2007 6:49 AM:
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? Bob Nordele said, on November 11, 2007 12:40 PM:
How do I make a comment box like yours? Janine said, on November 20, 2007 3:16 PM:
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! Victoria said, on November 21, 2007 11:38 AM:
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. leo r. said, on November 28, 2007 2:24 PM:
Thanks this code, i shall add this to my limo hire site shortly Discover Nepal Exports said, on December 4, 2007 6:55 AM:
We want to add our pages in googlr pages because please guide to us. Lesley Critton said, on December 4, 2007 10:11 AM:
Thank you, Dave Taylor for this website of yours. Humbly, a shy devotee Saheer.N said, on December 9, 2007 11:33 AM:
Thank you Dave Taylor...For days I'm searching for this code. Finally you gave it..!! Thank you. Tom said, on December 10, 2007 3:40 AM:
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? Dave Taylor said, on December 10, 2007 12:00 PM:
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. Lorinda said, on December 14, 2007 8:16 AM:
Hi Dave, 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? Brandon said, on December 20, 2007 12:46 AM:
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? ila said, on December 25, 2007 10:26 PM:
Hi Dave, i need to display the search result in my website itslef. Can you help me? Charlie said, on December 28, 2007 10:38 PM:
Dave, Victoria said, on January 3, 2008 4:11 PM:
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. Thanks Dave Taylor said, on January 4, 2008 8:25 AM:
Victoria, I've pulled your question into its own posting: http://www.askdavetaylor.com/how_to_google_site_search_look_constrain_subdirectory.html Hopefully that'll help you out! Grace said, on January 8, 2008 9:36 PM:
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? Many thanks Dishon said, on January 13, 2008 8:09 AM:
Hi,thanks alot for ur help. Regards, Dishon. Elsa said, on January 14, 2008 11:56 PM:
Thanks Dave, you've saved me!!! Your site is one of my favorites now :) Joe Holmes said, on January 17, 2008 10:21 PM:
I placed your google search on two of my web sites and they are great. Finditmall.com and citizenhealthwatch.com
Mutahar said, on January 29, 2008 12:44 PM:
Dave, 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. cally said, on January 29, 2008 9:47 PM:
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. Dave Taylor said, on January 29, 2008 11:37 PM:
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... Fawzer Faiz said, on February 2, 2008 10:54 PM:
Hi dave, 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. Regards Andrew said, on February 4, 2008 12:13 AM:
Brilliant!!!! Robert said, on February 10, 2008 8:51 PM:
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? Alex said, on February 11, 2008 5:25 PM:
Hey Dave, For example: They type in "pit bull" and it actually searches for "dogs pit bull". Elissa said, on February 11, 2008 10:16 PM:
Hi Dave, jack said, on February 15, 2008 3:53 PM:
Can you make the search result pop up in another window, like this HTML code for a link: target="_blank" Dave Taylor said, on February 15, 2008 10:53 PM:
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" you have FORM METHOD="get" ACTION="xxx" TARGET="_blank" tina said, on February 21, 2008 2:44 PM:
value="askdavetaylor.com" checked /> only search Ask Dave Taylor
I do have a comment, now that you mention it!Check This Out Too... |
Recent Entries
Look for Answers
Recommended
All Our Categories
Apple iPad Help
Articles and Reviews Auctions and Online Shopping Blogs and Blogging Building Web Site Traffic Business and Management Computer and Internet Basics d) None of the Above Facebook Help Google Gmail Help Google Plus Help HTML, JavaScript and Web Site Programming Industry News and Trade Shows iPhone and Cell Phone Help iPod, Sony PSP and MP3 Player Help Kindle Fire Help Mac OS X Help Pay Per Click (PPC) Advertising Pinterest Help Search Engine Optimization (SEO) Shell Script Programming Tech Support Video Help The Writing Business Twitter, LinkedIn and Social Network Help Unix and Linux Help Video Game Tips and Help Windows PC Help Find Me on Google+ ADT on G+ |
How do you make a "Submit" button automatically pop up?