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 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="" 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" />
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.


  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?


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

  3. Hi Emmanuel

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


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

  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
    so whenever i type on url
    it will give me this url in the end

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

    I can see only similier address is

    how to handle that:)

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

    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?

    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 ""

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

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

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

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

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

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

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

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

  11. I would like more information about this, because it is very nice...Thanks for sharing.Great Article it its really informative and innovative keep here: laravel development company with new updates. Its was really valuable. Thanks a lot.
    iPhone app development london

  12. Its very helpful information and Thanks for the great article.
    Techtiq solutions is leading best seo company london offering various integrated IT Services including SEO Services & Digital Marketing Services.

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