- Form action
- The form action is set to "http://smugedit.com/keywordsearch/", which is the page hosted on my server which does the work of redirecting your visitor to the right page.
- Form method
- Must be set to "get" (not "post").
- Hidden field "site"
- You must set this to your SmugMug site's domain name. If you've got a custom domain name, you can use that, otherwise just use your .smugmug.com domain name.
- Text field "q"
- You can include a text field called "q" to allow the visitor to type in keywords.
Always add keywords to the user's search
Let's say that you want to restrict your search to photos taken this year, and you've keyworded all your photos with the year they were taken. You can automatically add the keyword "2013" to searches by adding a hidden field called "keyword" whose value is "2013", like so:
That code needs to be added somewhere next to the other <input> tags in the sourcecode. Here's the search box with that tweak, I've also changed the "placeholder" text to read "search this year":
If you only want to search photos which have both the keywords "may day" and "2013", you can add code like this:
Or you can combine those two keywords together into one field:
This is the result:
Use a drop-down box to pick keywords
Sometimes your customers aren't sure what your keywords are, and would get tired of trying to guess them. You can provide a drop-down list of keywords to search for instead. This example code:
Produces this search box:
Basically, you add a <select> tag with a name of "keyword" for each drop-down box you require. Inside the select tag are <option> tags which show the keywords to pick from. You set the "value" on these tags to the keyword that will be searched for, and then write the text to display to the user after the tag.
To create a choice which doesn't add a keyword to the search (e.g. an "any" option), just add an option tag with an empty "value".
Host the tool on your own server (optional)
This search box requires a page on my server to perform the work of joining the search keywords together. If you'd prefer to host this part on your own server, you can do that with one of the options below.
If your webhost supports PHP, this is the best option as it avoids a brief "loading..." screen appearing while the search is performed. Create a file called "search.php" with this content:
Upload search.php to your webhost, then change the "action" in your <form> tag to point to it.
This version briefly shows a "loading" screen while the user is redirected, so if you can use PHP you should choose that version instead. Create a file called "search.html" with this content:
Upload search.html to your webhost, then change the "action" in your <form> tag to point to it. Here's a search box that uses the HTML/JS method, so you can see what the brief search delay looks like: