An often overlooked part of any website design are the forms. As designers, we should take just as much time mocking up form elements, and creating interactivity with those forms, as we do any other part of our sites. It will add consistency to the design and enhance the user’s experience.
With pure CSS alone, there are several things you can do add visual cues to forms to show interactivity using the :focus psuedo class. Today, I want to show you how to quickly mock up, code and implement a search form for a WordPress theme doing just that. We also will be using jQuery for an IE7 fix of the :focus pseudo class.
More than likely, you will be creating your search form within your own mock up document. For the purposes of this tutorial, we are going to create just the search input field and submission button. You can then take the techniques you’ve learned and apply them to your next project.
Step 1: Set up your document in Adobe Photoshop
Launch Adobe Photoshop and select File » New (or keyboard shortcut command + N) from the top menu. You can name the document whatever you please. For dimensions, let’s enter 330px for the width, 115px for the height and, as always, 72px for the resolution.
Step 2: Mock up your search bar
Let’s create a new layer and name it “Background Color”. This will be the background color for the sidebar. From the top menu, choose Edit » Fill » Color and enter #4c2805 as your value and hit enter. You should now have a nice chocolate brown color for your background.
Finally, we are going to give ourselves some guides that will serve as our margins and padding during coding. From the top menu, choose View » New Guide. For the vertical values enter 15px and 315px. For the horizontal values enter 15px and 100px.
For my form label typeface, I am going to use Museo with the font style set at 700, the font size set at 20px and the color set at #f5d771. Select the Type Tool and type “Search” inside the upper right guide. This will automatically create a new layer for you above the background color layer.
Create a new layer above the “Search” layer and name it “Input”. Select the Rectangle Shape Tool (shortcut U) and draw out a rectangle that is 300px wide and 40px tall. Place it inside the lower left guide.
Now, let’s create the submission button by selecting the Rectangle Tool again. Create a new layer and name it “Submit Button”. You can choose any fill color you want because we are going to add a subtle gradient to give the button some depth. Draw out a rectangle that is 95px wide and 40px tall. Place it inside the upper right corner of your input field.
With the button layer selected, zoom into your document and choose the Add Anchor Point from the Pen Tool Palette. Place an anchor point on the right center portion of the button. Now select the Convert Anchor Point Tool from the Pen Tool Palette and click on the anchor point you just created. Now grab your Direct Selection Tool and grab the point and drag it to the left to create a point.
Let’s add that subtle gradient. With the button layer selected, add the following Layer Style.
All that is left to do for the button is add text. Again, I am using Museo with the exact settings as before but with white as my color. Type “Submit” and align it with your button.
I am going to add a magnifying glass to the left portion of the input field, using one of my custom made Photoshop shapes. During coding, we are going to use jQuery to change this image when the user has clicked on the field. Feel free to download my free shapes or use whatever image you would like. I am placing the Search Icon shape inside the left center of the field. The color I am using is #b2b2b2. Finally, I will add some text to the input field and we are done with the mock up.
Step 3: Slice up your images
For the search bar, I am concerned with three images: the label (because I am using Museo and will have to use the image replacement method), the submit button and the input field. You should be able to slice up the images for the label and the submit button with any method you are comfortable using. For the input field, we are going to be adjusting the background image positioning when the user focuses on the field. So, we will need an on and off state, which means the input field will have to be a sprite image.
Select the entire “Input Field” layer and crop the document by selecting Image » Crop from the top menu. Turn off all layers except for the “Input Field” and “Search Icon”. From the Image top menu, choose Canvas Size and enter 80 as the new height and move the anchor to the top center and hit enter.
Select both the “Input Field” and “Search Icon” layers and make a copy of them by dragging them to the New Layer icon in the Layers Palette window. You now have exact copies of these layers. With your copies still selected, choose the Move Tool and drag your copies below the original. Double click the search icon layer and change the color to #4c2805 and save this as a .gif image.
Step 4: Mark up your search bar
One of the things that makes WordPress so popular and easy to use it the fact that it reduces the amount of coding you have to do to accomplish certain tasks. For example, listing page titles for a navigational menu can be achieved by using the <?php wp_list_pages ?> snippet and WordPress will return an unordered list ready for you to style.
The same holds true for your search form. By simply using the <?php get_search_form ?> snippet, WordPress 2.8.4 will return a fully functioning mark up for your form, even if you do not have a searchform.php file in your theme.
While this can be helpful in many cases, I want to take a hands on approach to my search form because of some styling techniques I want to apply. This means I will be hand coding my form and calling for it using an include command.
In your editor of choice, create a new file and name it searchform.php. Enter the following code in this file.
<form id=”searchform” action=”<?php bloginfo(‘url’); ?>/” method=”get”>
<label for=”s”>Search</label>
<input id=”s” name=”s” type=”text” onblur=”if (this.value == ”) {this.value = ‘enter keywords’;}” onfocus=”if (this.value == ‘enter keywords’) {this.value = ”;}” value=”enter keywords” />
<input id=”searchsubmit” src=”<?php bloginfo(‘template_url’); ?>/images/submit.jpg” type=”image” value=”Submit” />
</form>
That wasn’t so bad, right? As you can see, we have a nicely marked up search form. You will also notice there is a little bit of inline javascripting. This code will remove the “enter keywords” text in the input field when the user clicks on the field. If the user does not type anything into the field, the javascript returns the field to its original state. You will also notice that I am using the image input type for the submit button.
Step 5: Add your CSS
Now it is time to add some CSS for presentation. In your style.css file, add the following code. Make sure the path to your images are correct. I like to keep all of my images, for a WordPress theme, inside a directory named “images”.
#sidebar {
background-color: #4c2805;
padding: 15px;
width: 300px;
}
form#searchform {
height: 85px;
position: relative;
width: 300px;
}
form#searchform label {
background: url(images/search-label.gif) no-repeat 0 0;
display: block;
height: 15px;
margin: 0 0 30px;
text-indent: -9999px;
width: 65px;
}
form#searchform input#s {
background: url(images/input.gif) no-repeat 0 0;
color: #b2b2b2;
font: 1.125em Arial, Helvetica, sans-serif;
height: 32px;
padding: 8px 115px 0 40px;
width: 145px;
}
form#searchform input#s:focus {
color: #4c2805;
}
form#searchform input#searchsubmit {
position: absolute;
right: 0;
top: 45px;
}
.focus {
background: url(images/input.gif) no-repeat 0 -40px !important;
}
What we have done here is used the image replacement method for our form label allowing us to use a non web safe font for presentation only. We have also given the search form itself a width, height and relative positioning. This allows us to absolutely position the submit button inside the input field. The input field has been styled with our selected color of gray and typeface selections of either Arial, Helvetica or the next available sans-serif typeface.
CSS allows us to use the :focus psuedo class to add additional styles when the user selects (or focuses on) the field. In this case, I want to change the color of the typeface to brown while the user is typing. When the focus has left the field, I want to return to our original state. We could also change the background position of our input field using :focus as well, but I have found that this doesn’t work the way I want it to in IE7. That is where the tiny bit of jQuery comes in.
Step 6: Add a little jQuery
This is admittedly a work around to the IE7 lack of support for the :focus psuedo class. There might be other methods that work better and I would love to see them in action.
Make sure you have a call for the current version of jQuery in your header.php file. In whatever file you have your jQuery scripts for your theme, enter the following code:
$(document).ready(function(){
$(‘input#s’).focus(function() {
$(this).addClass(“focus”);
});
$(‘input#s’).blur(function() {
$(this).removeClass(“focus”);
});
});
Simply put, when the input field (with an id of “s”) has focus, add a class named “focus”. When the focus has left the field, remove the class. You will see that the last line of our CSS has a style for the class named “focus” that changes the background position of the input field. I’ve also added the !important declaration to override all other styles attached to the input field.
Conclusion
There you have it. All of the components you need to create you own stylized search form using Photoshop, CSS and a little taste of jQuery.
Source: wearepixel8.com
