Solved

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

Posted on 2013-12-26
20
595 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
  • 10
  • 6
  • 4
20 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Not sure what he was talking about.
0
 

Author Comment

by:joibrooks
Comment Utility
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
Comment Utility
NP
0
 

Author Comment

by:joibrooks
Comment Utility
This is good to go. Thank you!
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

A Change in PHP Behavior with Session Write Short Circuit (http://php.net/manual/en/book.session.php#116217) (Winter 2014)** With the release of PHP 5.6 the session handler changed in a way that many think should be considered a bug.  See the note …
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…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

728 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now