Website Builder Search Bar
Add a search bar on your website so visitors can search to find content using Google Custom Search Engine.
* These add-ons are from a 3rd party therefore we are not responsible for how they will work. We are also not able to provide technical support for them.
›› View it live by our very own ewisoft.com website at the top right hand corner of the page.
Step 1:
Step 2:
- In your Ewisoft-built website, create a new page called Search "search.php". When you ceate a new page in Ewisoft, the default filename extension is .htm. You will need to change this extension to .php in order for the codes to work.
- Right click the search page (left windowpane) and select Properties. Change the filename to search.php.
- (optional) Hide the search page so it doesn't show in your navigation menu. Right click the search page (left windowpane) select Propertes > Advanced > select "not using menus".
Step 3:
- On the search page, you will need to paste in the code for the Google Custom Search Engine. Sign into your Google Custom Search Engine account and have it generate the code.
- On the Google page, look for the link called Switch to Search Element V1 code. Click it and copy that code. It works better for the search bar.
- Open your search page, click the HTML tab and paste the generated code.
- In the generated code, add the following lines that are highlighted in red. I just put the markers there to show you the lines that you need to add.
- Where it says XXXXX you need to put your unique google search control number found in your original generated Google search code:
<div id="cse" style="width: 100%;">Loading</div>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('jquery', '1');
google.load('search', '1');
google.setOnLoadCallback(function(){
var customSearchControl = new google.search.CustomSearchControl('XXXXX');
customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse');
$(".gsc-input").val("<?php echo $_POST['q']; ?>");//insert into search field requested search text
$(".gsc-search-button").click();//call button click event, show results
}, true);
</script>
Step 4:
- To create the search bar for the top of your website, place this field code where you want the search bar to appear.
- Make sure you have updated the "form action" to point to where your page will be (marked in red)
<form action="http://www.yoursite.com/search.php" method="post">
<input type="text" name="q" />
<input type="submit" name="search" value="Search" />
</form>
Step 5:
- You will need to publish your website in order to see the results because it needs to use the PHP ability from your web hosting server.
- Please also keep in mind that in order for the search to show pages, your website will need to already be indexed by Google. So, for brand new websites, you may need to wait up to 2 weeks for your website pages to be indexed by Google.
| 
Ewisoft Website Builder
