Saturday 18 February 2012

Adding a Google Custom Search Form Without JavaScript

If you set up a Google Custom Search for your website, on the final step, 'Get Code,' it will give you some JavaScript code to paste into your site's source code.  There are a number of reasons why this may not be possible, including using a CMS that strips JavaScript or having existing JavaScript on your site that conflicts with it, but Google doesn't offer any alternatives on the 'Get Code' page.  It's a bit limited, but the following should work.
After you set up your Google Custom Search, click on 'My search engines' in the left navigation and then click on the name of your search engine. You will be taken to a URL similar to http://www.google.co.uk/cse/home?cx=018436150521358100921:ih9nk8v0psa. It is the bit after cx= that is unique to your search engine and required for the next step.

Simply paste the following code, where you want the search box to appear, replacing the value in the cx input with the one for your search engine.

<form action="http://www.google.co.uk/cse" id="cse-search-box" target="_blank">
<input name="cx" type="hidden" value="018436150521358100921:ih9nk8v0psa" />
<input name="ie" type="hidden" value="UTF-8" />
<input name="q" size="30" />
<input name="sa" type="submit" value="Search" />
</form>
This will only work if you want Google to host your results for you. Obviously you can use CSS to style it to fit in with your website's design.

17 comments:

  1. Hi Tracey! That was a nice one. But you didn't talk much about styling your blog. Hope you will when next i check back?

    Regards: WorldWebSurfers.com

    ReplyDelete
  2. *I mean styling the Google custom search and not blog. Cheers!

    ReplyDelete
  3. Hi Emmanuel

    Thanks for your comment. You can apply classes to all the input fields and then use CSS to change the style.

    Thanks
    Tracey

    ReplyDelete
  4. Got it! Tracey, Thanks one more time.

    ReplyDelete
  5. i really liked that code and all i was looking for that
    But i am havin two inquiries

    First I am from Pakistan so we Use www.google.com.pk
    so whenever i type on url www.google.com
    it will give me this url in the end

    https://www.google.com.pk/?gws_rd=cr&ei=YV4wUp2xF8OE4ASkpIDIDg


    now if i m search any word suppose "maria"
    new url will b like that

    https://www.google.com.pk/webhp?source=search_app&gws_rd=cr#q=maria

    I can see only similier address is

    https://www.google.com.pk/

    :(
    how to handle that:)

    second if You share Logic of code or lil bit explanation of this i could b Very thankful :)

    ReplyDelete
    Replies
    1. This post is about adding a custom Google search to your website, not a full Google search. Have you set up your Google Custom Search Engine? What is the URL of it?

      Delete
    2. Well Hi i wasnt expecting fast reply:)anyways frist wana apologizing to being such a newbie in web designing

      anyways Your Question itself solved my problem i set up google custom search:)

      url was "https://www.google.com/cse/publicurl?cx=018350115645669168157:26eg2jezweu"

      (slaphead)
      than i used ur Code.
      Big Thankx cheers:D Thankx for Code and answer .Tc

      Delete
    3. No problem. Glad you got it working. :-)

      Delete
    4. :) yes and Thankx To ur Guideness My tuitor was impressed With me lol

      Delete
  6. Thank you so much Tracey. Your code worked like a charm

    ReplyDelete
  7. I’m happy you found it helpful. Thanks for suggestions!

    ReplyDelete
  8. Wow! Thanks a LOT! This is great! MUCH better than the mess of scripts, code, and rigid not customizable Google solution.

    ReplyDelete
  9. Wow Wow Tracey!!!! Thanks a TON.. Really a TON.. i was breaking my mind to get this done! YOU ARE A GENIUS

    ReplyDelete
  10. Thank you for the excellent information and facts, this was a very good piece of writing.
    best website development services | affordable seo services

    ReplyDelete
  11. Great ! Very nice blog and excellent things exist in your blog content. thanks for sharing...
    Digital Marketing Agency Sydney

    ReplyDelete

  12. Nice Blog, Keep sharing your ideas and information.I would like more information about this, because it is very nice...Thanks for sharing. Thanks a lot
    Anika Digital Media
    seo services in UK
    web design development company in UK

    ReplyDelete