How to Redirect a Search Form to a Site-Scoped Google Search

Avatar of Chris Coyier
Chris Coyier on

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

This is just a tiny little trick that might be helpful on a site where you don’t have the time or desire to build out a really good on-site search solution. Google.com itself can perform searches scoped to one particular site. The trick is getting people there using that special syntax without them even knowing it.

Make a search form:

<form action="https://google.com/search" target="_blank" type="GET">

  <label>
     Search CSS-Tricks on Google: 
     <input type="search" name="q">
   </label>

  <input type="submit" value="Go">

</form>

When that form is submitted, we’ll intercept it and change the value to include the special syntax:

var form = document.querySelector("form");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  var search = form.querySelector("input[type=search]");
  search.value = "site:css-tricks.com " + search.value;
  form.submit();
});

That’s all.