close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Web development tutorial

Getting started with Google Search

Tutorial created by Team WebAssist

Categories: Free Tools, Dreamweaver


Enable your website visitors to search your website to find what they are looking for. In this tutorial, we demonstrate how to use the Google Search tool in Free Tools to add a Google search form and display results on a web page.

For the sake of this tutorial covering everything, we're going to add search and results to one page. We suggest following along with this tutorial exactly to familiarize yourself with the process, but once you're comfortable, feel free to choose different options and apply search and results to your website the exact way you want it.

arrow downWhat you need to start

  1. Dreamweaver CS4 or newer
  2. WebAssist Free Tools extension installed
    - Own it.
    - Download it.
    - Learn how to install a Dreamweaver extension.
  3. PHP/MySQL Testing Server
    For more information, see Setting up a Testing Server on Windows or Setting up a Testing Server on Mac OS X.
  4. Dynamic Site defined in Dreamweaver
    For more information see Defining a dynamic site in Dreamweaver.

arrow downGet Your Google API Key

  1. Go to the Google API Console
  2. Log in with the Google Account you wish the map to use.
  3. Click the 'Create project...' button if needed.
  4. Click the Services link in the left side menu.

  5. If not already activated, activate the Google Maps API v3 service. You do this by clicking the ON/ Off status and accepting the terms of service if you haven't already.

  6. If not already activated, activate the Custom Search API service. You do this by clicking the ON/ Off status and following the on screen steps.

  7. Click the API Access link in the left side menu.

  8. Copy the API key from the Simple API Access section.

  9. Paste the API key in a text document for later use.

arrow downGetting Your Unique ID

Now we need to create a new Google Search Engine instance.

  1. Go to the Google Search Engine Control Panel
  2. Log in with the Google Account you wish the search engine to be attached to.
  3. Click New search engine.
  4. Enter all required information and click the Create button.

  5. Click Search Engine ID in the Details section and copy the Search engine unique ID value.

  6. Paste the value in a text document for later use.

arrow downAdd the search functionality to your site

  1. In Dreamweaver, open the page where you want to display search and results.
  2. In Design view, click where you want to add the search text field.
  3. Click WebAssist > Google > Search

  4. Choose the Add Search and Results radio button and click OK.

  5. On the Account Tab, enter your own API key and Unique ID we copied into your text document earlier.

  6. Click the General Tab.
  7. Change the Search Name to "my_search".
  8. Set the Maximum Rows to 10. and the Navigation Pages to 10.
    These two fields need to equal 100 when multiplied together. Since Google will only return 100 results for free, this keeps the pagination looking its best.

  9. Click the Design Tab and configure the design to your heart's content and click Finish.

  10. Give your design preset a name and click OK.

  11. Save your search form and preview it in a browser.

arrow downFor more...

View the Google Search help documentation to accomplish even more with this tool.

Visit the Free Tools support page for more Free Tools tutorials and documentation.

If you're looking to develop more robust forms, you may be interested in Data Bridge.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question





Ease of use


security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.