Search code examples
google-search

Passing html form values to google search query

SIDENOTE: Before everyone tells me about google's custom search engine, I have been using that until now but i find it really hard to style that search box and it broke on my website.

Hello

I am trying to create a google search query that uses input from a HTML form. I want the search to be executed only on a specific site (for example reddit.com:elephant).

The problem I have is the "reddit.com:" part. I am able to pass "elephant" to the query, but everything i tried seems to ignore the first part.

Here is the code below

<form method="get" action="https://www.google.com.au/search?site+q">
        <input type="hidden" name="site" value="reddit.com:">
        <input type="text" value="" name="q" id="query">
        <input type="submit" value="search">
 </form>

I tried it without the "site+q", tried putting "reddit.com%3A" in the action itself (action="https://www.google.com.au/search?reddit.com%3A+q"), but only the "q" gets passed in the query. the link i get after submitting the form above looks like this

https://www.google.com.au/search?site=reddit.com%3A&q=elephant

I have done some research on google with building links like this, and the most useful site was this https://moz.com/blog/the-ultimate-guide-to-the-google-search-parameters , however, honestly, it made me really confused and i couldn't find anything there that would help me out. And it is 10 years old so I'm not even sure if thats still valid.

What am i missing? can anyone point me in the right direction?

Also im not sure about the tag for this post, please correct it if needed.

Thank you in advance

Solution

  • I have found another thread that was asking exactly what i wanted here: Add Google search in web page

    Here is the code snippet for the lazy:

    You just need to set the form method to "get", add one extra hidden element with the site you want to search and it will automatically paste it behind the URL as such:

    <form action="https://google.com/search" method="get">
    <input type="hidden" name="sitesearch" value="http://acme.com" />
    <input type="text" name="q" />
</form>

    Because that is how HTML forms work by default