Add a search box to your website

duckduckgoA very common request among Sandvox users is: “Can I add a search box to my website?”. An answer to this topic is already discussed here, but I’d like to put my two cents in.

Sandvox cannot perform a search by itself: for this purpose you need a (much more complex) dynamic website. The form has to call a script, the script needs an access to a database, the database must have an index of your content and so on. Platforms like WordPress have these features, but any static website – no matter how it is created – just can’t.

We can delegate someone else to do the job for us, though. In this short tutorial we’ll use DuckDuckGo for these reasons:

  • Super-easy
  • No registration required
  • Customization
  • Privacy
  • It also looks good
  • It’s a bit geeky, but you know it only if you’re a geek – which is good ;)

DuckDuckGo is an anonymous and powerful search engine that made of privacy and respect for user data its very strong point. You can read something more here (a recommended read).

Let’s say we want to add a search box to the sidebar of our website, which is hosted at the address http://www.behindtherabbit.com/ (yes, we’ll pretend we want to search this website). We’ll be using Lithium for this example. The final page is already available here – take a look before we begin.

First of all, let’s go to DuckDuckGo “Search box” page. As you can see, it’s all very simple:

DuckDuckGo

Fill in the fields as you like. In this example I set a 200px wide form to let it fit into the sidebar and I changed the placeholder text to a shorter and simpler “Search Site”:

DuckDuckGo settings

Everything else is left as it is. If you prefer and you like to tinker, there are a lot more options available.

Copy the code and open your website in Sandvox. Create a “Raw HTML” object and move it to the sidebar. Select it and from the last tab of the Inspector (“Object”) edit its content.

Delete its default content <span>[[RAW HTML]]</span> and paste the code provided by DuckDuckGo.

Pagelet settings

Update your website and that’s it: you have now your personal search engine.