I need a basic search box for CPSC [The Consumer Products Safety Commission]. I tried everything I could think of, nothing seems to be working. I was going to copy their search form into my blog, but they don’t have an actual form; it’s Javascript. I tried a simple/basic search box, and added their search page URL to the action. No dice. 🙁 So, I was hoping you could help me. Help!
The US Government agency that manages product recalls, the Consumer Products Safety Commission, is a good one to help people know more about, so having a search box on your own page is a great idea. Most sites, however, would prefer if you just sent them the traffic with a link to their site, as I have in the previous sentence. That’s not so good for those of us who would like to hold on to the people that visit our site, and it’s a lot more elegant to embed a search box for another site onto your own than to keep pushing people to other sites rather willy-nilly!
Like any of these tasks, you can crack open the code to their home page and try to decipher things but it’s often easier to operate with the belief that their search system is a “black box” and that it’s your job as an HTML detective to reverse engineer what they have in place. Doing so requires some basic knowledge of HTML forms and how they work.
In this instance, if I go onto the CPSC site and search for “strollers”, here’s the URL of the resultant search results page:
http://www.cpsc.gov/en/Search/?query=strollers&filters=all
This is when I choose “All pages & Documents” from the search box. If, instead, I search “Recalls & News Releases”, the resultant URL looks like this:
http://www.cpsc.gov/en/Search/?query=strollers&filters=recalls
There are three items of information we can glean from this: the page that produces search results is:
http://www.cpsc.gov/en/Search/
The search term itself is sent as “query=pattern” and the way that the system differentiates between a site-wide search and a recalls and news releases only search is “filters=”, with the two possible values of “all” and “recalls”.
To simplify things, let’s just make any searches be of recalls only.
That means we need a form that lets the user specify the “query” variable and pushes the results to the URL specified.
This is done in HTML thusly:
Search CPSC: <input type=”text” name=”query”>
<input type=”hidden” name=”filter” value=”recalls”>
<input type=”submit” value=”search”>
</form>
What’s that look like? Let’s see:
Most importantly, give it a try. You’re safe, the addition of target=”_blank” ensures that the search results will pop up on a new page, not replace this one (a handy addition to forms of this nature that otherwise would take your visitor off to another site).
That’s it. It’s not glamorous or fancy, but I’ll let you dig into the HTML and add some CSS as desired to turn this mundane and austere search box into something more attractive for your site and consistent with your own design.
I will add one thing: If you wanted to duplicate the radio buttons alternating between “search all” and “just recalls”, you could do so with a pair of additional lines in the form that use the same value name, instead of the type=”hidden” hidden variable that we’re passing along:
<input type=”radio” name=”filter” value=”all”> all docs
<input type=”radio” name=”filter” value=”recalls”> just recalls
Not too trick. Of course, if you’re like me, you’ll now spend an hour fiddling with layout. But at least you know it all works!
OMG DAVE!!!!! Thank you sooooo much!!!!! You’re a flippin’ genius, man!!!!!
You don’t know how long I fooled around with it before I finally gave in and emailed you *hanging head in shame*. I’ve been doing HTML/CSS for 15 years, since I’m self taught, I never really learned the “rules” so I fumble around.
I wanted to add a hidden field, but wasn’t quite sure what to put. Instead, I wound up adding a Google search pointing to the CPSC website. It worked in a pinch, but this is exactly what I wanted!!!!!
I really appreciate this, Dave!!!!! Thanks ever so much!!!!! :-*
Glad to help, Lana! 🙂