Solved

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

Posted on 2013-12-26
20
609 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 52

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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
LVL 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 250 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 52

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

Question has a verified solution.

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

Suggested Solutions

Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
The purpose of this video is to demonstrate how to set up the WordPress backend so that each page automatically generates a Mailchimp signup form in the sidebar. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome…
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

726 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