Anthony Ciccarello
Posted on July 4, 2023
I added the /search page to my site with a form supporting multiple search engines. The hope is to give visitors a bit more choice in what companies to interact with.
The challenge was managing different query param for different sites.
- DuckDuckGo doesn't support multiple
q=
params, but does acceptsites=
- Ecosia doesn't support a
sites=
param but does support multipleq=
params (albeit with an extra comma requiring a space) - Google does support a
as_sitesearch=
param but that was dropped with the addition of anotherq=
param.
By adding several different hidden form fields, I was able to cover each engine (almost) seamlessly.
Then the only difference was the form action would could be defined on the button.
The final result is as follows:
<form rel="search" method="get">
<input type="hidden" name="sites" value="ciccarello.me"/>
<input type="hidden" name="q" value="site:ciccarello.me "/>
<input type="text" name="q" placeholder="Search"/>
<button type="submit" formaction="https://ecosia.com/search">Search with Ecosia</button>
<button type="submit" formaction="https://www.google.com/search">Search with Google</button>
<button type="submit" formaction="https://duckduckgo.com/">Search with DuckDuckGo</button>
</form>
💖 💪 🙅 🚩
Anthony Ciccarello
Posted on July 4, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.