?
Solved

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

Posted on 2013-12-26
20
Medium Priority
?
647 Views
Last Modified: 2014-01-15
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
Comment
Question by:joibrooks
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 10
  • 6
  • 4
20 Comments
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39740703
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
 

Author Comment

by:joibrooks
ID: 39740748
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
 

Author Comment

by:joibrooks
ID: 39766358
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
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39766407
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
 

Author Comment

by:joibrooks
ID: 39766581
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
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1000 total points
ID: 39766927
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
 

Author Comment

by:joibrooks
ID: 39769759
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
 
LVL 58

Expert Comment

by:Gary
ID: 39769830
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
 
LVL 58

Expert Comment

by:Gary
ID: 39769919
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
 

Author Comment

by:joibrooks
ID: 39771010
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39771104
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
 

Author Comment

by:joibrooks
ID: 39771198
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 1000 total points
ID: 39771263
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
 

Author Comment

by:joibrooks
ID: 39771344
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
 
LVL 58

Expert Comment

by:Gary
ID: 39771373
No, the search box is created at page load.
You can use CSS to style it a bit more to your liking.
0
 

Author Comment

by:joibrooks
ID: 39771394
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
 
LVL 58

Expert Comment

by:Gary
ID: 39771412
Not sure what he was talking about.
0
 

Author Comment

by:joibrooks
ID: 39771441
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
 
LVL 58

Expert Comment

by:Gary
ID: 39771447
NP
0
 

Author Comment

by:joibrooks
ID: 39783421
This is good to go. Thank you!
0

Featured Post

Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Wufoo.com provides powerful tools for surveying targeted groups, and utilizing data from completed surveys to find trends, discover areas of demand or customer expectation, and make business decisions on products or services.

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question