• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 654
  • Last Modified:

Use Google Search Engine in a website via a form get action method

How would I use Google search engine tools to create a form action? I purchased a template that includes a CSS search box, but it doesn't include an action method. I did a little research and found the Custom Search Engine Tools from Google. That is probably the best way to go, unless experts have a better suggestion.

Here's the search box CSS code provided by the template:

<form action="#" id="searchform" method="get">
                            <span class="bg-left"></span>
                            <div class="bg-right">                            <input type="text" name="s" id="s" value="Search Form" onFocus="if (this.value == 'Search Form')this.value = '';" onBlur="if (this.value == '')this.value = 'Search Form';" /> 
                            <input type="submit" class="searchbutton" value="" />
                            </div>
                        </form>

Open in new window


Thank you,
JB
0
joibrooks
Asked:
joibrooks
  • 10
  • 6
  • 4
2 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
If you don't care about the sites that come up you can use

https://www.google.com/search?q=the_searched_term  Noticed I changed the input name from s to q

<form action="https://www.google.com/search" id="searchform" method="get">
                            <span class="bg-left"></span>
                            <div class="bg-right">                            <input type="text" name="q" id="s" value="Search Form" onFocus="if (this.value == 'Search Form')this.value = '';" onBlur="if (this.value == '')this.value = 'Search Form';" /> 
                            <input type="submit" class="searchbutton" value="" />
                            </div>
                        </form>

Open in new window


If you want control of the search, you need google custom search https://developers.google.com/custom-search/
0
 
joibrooksAuthor Commented:
Hi, thank you. I'm reading through the documentation and will come back once I've reviewed to close this exchange out or post any other questions.

Hope you are enjoying the holidays!
JB
0
 
joibrooksAuthor Commented:
Here's a page that has not been developed for the site, but I'm instead using to test out this Google search.

It has both the Google Search and CSS Search that came with the template. Neither have functionality.

I know that Google spends a lot of time documenting their free tools, but I am having a rough time putting implementation together.

I would like to use the CSS Search bar with the Google functionality. Is that at all possible?

http://deerparkravioli.com/single-search-test.html
0
Put Machine Learning to Work--Protect Your Clients

Machine learning means Smarter Cybersecurity™ Solutions.
As technology continues to advance, managing and analyzing massive data sets just can’t be accomplished by humans alone. It requires huge amounts of memory and storage, as well as high-speed processing of the cloud.

 
Scott Fell, EE MVEDeveloperCommented:
The search box that came with your template is just a place holder.  You still have to program it by using your own serverside code or something like google custom search https://www.google.com/cse/  https://www.google.com/cse/docs/all  You can start here to create a basic search https://www.google.com/cse/create/new
0
 
joibrooksAuthor Commented:
Yes, I know that the CSS Search bar has no functionality because it needs server-side code. My question is how I manipulate the Google search. I have read through the documentation and I can't seem to make sense out of it. I was hoping that someone could help.

The code that Google provides and the instructions that tell you to place between div tags doesn't function "out of the box". Obviously it is me. I apologize if I'm asking to be spoon fed.

JB
0
 
Scott Fell, EE MVEDeveloperCommented:
No problem.  

Start here https://www.google.com/cse/create/new

Type in the name of  your site that you want to search.

Click the create button.

You are now on a page with 3 buttons. Click the Get Code button. It will look like this
<script>
  (function() {
    var cx = '123456:-abc123';
    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>
<gcse:search></gcse:search>

Open in new window


Then place that code inside the div where you want to search to be.  

<div>
<!-- place google code here -->
<script>
  (function() {
    var cx = '123456:-abc123';
    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>
<gcse:search></gcse:search>
<!-- place google code above -->
</div>

Open in new window

See if that works
0
 
joibrooksAuthor Commented:
Thank you once again.

The following page already has the code inserted within div tags. But it doesn't function. So, what have I done or not done?

http://deerparkravioli.com/single-search-test.html

<div class="three columns">
                        <script>
  (function() {
    var cx = '015284939025568081785:yub1_6jvnbw';
    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>
<gcse:searchresults-only></gcse:searchresults-only>
                        
                        
                        
                        
                        <form action="#" id="searchform" method="get">
                            <span class="bg-left"></span>
                            <div class="bg-right">
                            <input type="text" name="s" id="s" value="Search Form" onFocus="if (this.value == 'Search Form')this.value = '';" onBlur="if (this.value == '')this.value = 'Search Form';" /> 
                            <input type="submit" class="searchbutton" value="" />
                            </div>
                        </form>
                    </div>

Open in new window

0
 
GaryCommented:
Remove this

                    <form action="#" id="searchform" method="get">
                            <span class="bg-left"></span>
                            <div class="bg-right">
                            <input type="text" name="s" id="s" value="Search Form" onFocus="if (this.value == 'Search Form')this.value = '';" onBlur="if (this.value == '')this.value = 'Search Form';" /> 
                            <input type="submit" class="searchbutton" value="" />
                            </div>
                        </form>

Open in new window

0
 
GaryCommented:
Try moving <gcse:search></gcse:search>  so it is just after <div class="twelve columns"> which is just below the script

The search script requires a minimum width and I wonder if this is what is hiding it from view.
0
 
joibrooksAuthor Commented:
Is there any way to incorporate the existing CSS search bar with Google functionality?

I commented out the CSS search, and moved "<gcse:searchresults-only></gcse:searchresults-only>" where you recommended. That created a large white box from the top of the web page down to the main navigation menu. I put the gcse back to where it was.

Either way, the Google search isn't functioning.

<div class="three columns">
                        <script>
  (function() {
    var cx = '015284939025568081785:yub1_6jvnbw';
    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>
<gcse:searchresults-only></gcse:searchresults-only>
                        
                        
                        
                        
                     <!--   <form action="#" id="searchform" method="get">
                            <span class="bg-left"></span>
                            <div class="bg-right">
                            <input type="text" name="s" id="s" value="Search Form" onFocus="if (this.value == 'Search Form')this.value = '';" onBlur="if (this.value == '')this.value = 'Search Form';" /> 
                            <input type="submit" class="searchbutton" value="" />
                            </div>
                        </form>-->
                    </div>

Open in new window

0
 
Scott Fell, EE MVEDeveloperCommented:
You said the search code came with your theme.  Is the api code  yours?  

Have you been to https://cloud.google.com/console and turned on the custom search api?
0
 
joibrooksAuthor Commented:
Yes, the CSS search function that I commented out came with the template.

Forgive me for asking, where are you seeing API code? So, the answer would be, no I haven't been to the cloud to turn on the custom search API.
0
 
GaryCommented:
Can you create a new custom search script at the link padas gave you above - it's like that script is not recognising the domain.
0
 
joibrooksAuthor Commented:
That's brought some life into it. It works, it just needs to be formatted.

Any chance that I can include the Google Search function into my existing CSS search bar? Without overstaying my welcome with experts exchange, that is?
0
 
GaryCommented:
No, the search box is created at page load.
You can use CSS to style it a bit more to your liking.
0
 
joibrooksAuthor Commented:
Yes, it appears too small at this point! But it isn't completely unattractive, in general.

What was the discussion on the API that Padas mentioned? Any advantage to further discussion on that?
0
 
GaryCommented:
Not sure what he was talking about.
0
 
joibrooksAuthor Commented:
Okay. Thanks for the help. Do you mind if I keep the ticket open while I style, in case I reach another road block.
0
 
GaryCommented:
NP
0
 
joibrooksAuthor Commented:
This is good to go. Thank you!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 10
  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now