Adding a Custom DuckDuckGo Search Bar to Your Site

Since writing this article, I’ve built a tool that makes it easy to design a customized DuckDuckGo search box for your website.

My friend and colleague Ben Brooks is tired of Google, and I can’t blame him. In an effort to reduce the number of Google services he’s beholden to, Ben asked me to update his site’s search with the DuckDuckGo search service.

Previous to this change, I’d used a simple form that pointed to google.com/search, with some additional parameters to limit the search to Ben’s site. With this form, I was able to style it using CSS to make it match the site’s design, as well as remove any Google branding.

To make the switch to DuckDuckGo, Ben first replaced the custom Google search form with a search box he made using DuckDuckGo’s Search Box Wizard. While this provided the functionality Ben was looking for, it was a long way from the nice design I’d come up with for the former search bar.

I started digging into the old code I’d made for the Google search form, to see if I could simply replace a few parameters to make it work on DuckDuckGo. I got close, but wasn’t able to pass both the search term and limit the search to Ben’s site; I could only do one or the other.

A quick email to the support team at DuckDuckGo resulted in a small modification to my code to make it work, as well as an introduction to the other custom URL parameters available to customize the search experience even further. Using a few of these parameters I was able to change the font to Helvetica, match the link colour on the search page to the links on Ben’s site, and turn off their sidebar.

I’ve included some of these parameters in the code below, which you can modify and use to add a custom DuckDuckGo search to your own site. To see what the codes used in the “name” attribute, be sure to read through DuckDuckGo’s URL Parameters page.

<form method="get" id="search" action="http://duckduckgo.com/">
  <input type="hidden" name="sites" value="YOURDOMAIN.COM"/>
  <input type="hidden" name="k8" value="#444444"/>
  <input type="hidden" name="k9" value="#D51920"/>
  <input type="hidden" name="kt" value="h"/>
  <input type="text" name="q" maxlength="255" placeholder="Search&hellip;"/>
  <input type="submit" value="DuckDuckGo Search" style="visibility: hidden;" />
</form>

※