How can I add a Google search box to my website?

Asked 11/12, 2012 at 15:19 Answered 12/4, 2021 at 12:13

I am trying to add a Google search box to my own website. I would like it to search Google itself, not my site. There was some code I had that use to work, but no longer does:

<form method="get" action="https://www.google.com/search">
<input type="text" name="g" size="31" value="">
</form>

When I try making a search, it just directs to the Google homepage. Well, actually it directs here: https://www.google.com/webhp

Does anyone have a different solution? What am I doing wrong?

Pluvious answered 11/12, 2012 at 15:19 Comment(0)

Sorry for replying on an older question, but I would like to clarify the last question.

You use a "get" method for your form. When the name of your input-field is "g", it will make a URL like this:

https://www.google.com/search?g=[value from input-field]

But when you search with google, you notice the following URL:

https://www.google.nl/search?q=google+search+bar

Google uses the "q" Querystring variable as it's search-query. Therefor, renaming your field from "g" to "q" solved the problem.

Cadge answered 12/4, 2013 at 8:21 Comment(1)

can we have the search result at particular position or in a particular block – Gnu 25/9, 2019 at 7:33

This is one of the way to add google site search to websites:

<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required"  type="text">
<button class="button" type="submit">Search</button>
</form>

Cobnut answered 21/3, 2017 at 11:39 Comment(2)

This is awesome! Thank you. I'm making a start page for my local web server, so this will be great once I make it look pretty with CSS. Thanks! – Granger 22/3, 2020 at 4:0

Is there any way to Get the live Suggestions with this? – Overside 27/5, 2021 at 10:19

Figured it out, folks! for the NAME of the text box, you have to use "q". I had "g" just for my own personal preferences. But apparently it has to be "q".

Anyone know why?

Pluvious answered 12/12, 2012 at 16:2 Comment(2)

Google expects a 'q' as GET parameter and uses the value to search the internet. – Estas 16/7, 2013 at 13:4

q stands for "query", which is a common term for searching a database. – Prohibit 19/8, 2017 at 23:55

(The reason your code isn't working is because the GET request name is now "q" instead of "g".

I recommend using one of the two methods below:

Method 1: Simply send a GET request directly to Google (Best and most simple option)

<form method="GET" action="https://www.google.com/search">
    <input name="q" type="text">
    <input type="submit">
</form>

Another (more complicated) answer would be

Method 2: Use JS to redirect to Google

<textarea id="searchterm"></textarea><button 
onclick="search()">Search</button>
<script>
function search() {
var Blah = document.getElementById("searchterm").value;
location.replace("https://www.google.com/search?q=" + searchterm + "");
}
</script>

Hope this helps!

Oestradiol answered 2/3, 2020 at 21:11 Comment(0)

-1

From 13 March 2021. I make this very easy code for my website https://neculaifantanaru.com/en/how-can-i-integrate-google-search-box-to-my-website-by-implementing-custom-code.html

First Step. This is the search box. Copy this code where you want in your html/php pages. People will search here the information. This form will send the search results to another html page called search.html

    <form action="https://YOUR-WEBSITE.com/search.html" method="get" id="site-search">
        <fieldset>
            <!-- <label for="search">Search in website</label> -->
            <input type="text" name="q" id="q" value="" />
            <button type="submit" class="btn btn-inverse">search</button>
        </fieldset>
    </form>

Second Step. Create a new html page named search.html. And add this code in the <head> section, more likely before </head>:

<script>
  (function() {
    var cx = 'YOUR-NUMBER-CODE';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>

YOUR-NUMBER-CODE you can get from this link https://cse.google.com/cse/all (Here you must add your new search engine.. Also, put OFF on the option "Search the entire web" in order to find results only on your website, not the entire web)

Step Three. Copy this code in the <body> section on the same page: search.html

<div class="main-content">
<h1>Search the site</h1><p>If you want to search for our articles on a specific topic, write the search term in the form below.</p>

<gcse:searchbox-only></gcse:searchbox-only>
<gcse:searchresults-only></gcse:searchresults-only>
</div>

THAT'S ALL.

Dc answered 12/4, 2021 at 12:13 Comment(0)

Recommended topics

Hot tags