Sure, you can have your Facebook fans hunt for a way to contact your business by assuming they will go to your website and hope they find the contact option (if there is one), a phone number (if there is one), you can make them read through the Info tab (did you put a contact email address there?), or hope they will make an educated guess and send an email to support@, webmaster@ or info@.

"Oh, if they really want to get in touch with us, they will find a way." (A true quote from a client)

What happened to convenience? What happened to making it easy for customers, clients and visitors to get in touch with you?

If you had a real brick-and-mortar store, would you board up the front door and instead send your customers on a wild goose chase around the building, to the back alley, up a ramp and still assume they will shop with you?
Yes, we’re open, but we’re not going to tell you how to get to our store.

Just because it’s Facebook doesn’t mean that everything that applies to actual storefronts and *regular* websites suddenly doesn’t matter anymore or that the rules simply don’t apply.

As Facebook becomes more and more of a business tool, businesses slowly realize it is becoming a quasi-necessity to be present on Facebook.
But almost like 15 years ago, when the web first became popular and a website became a must-have — most of them rush in, create a Facebook page because someone told them they had to, and then they don’t care about it anymore.

Sure, Facebook is (still) a new medium (yes, I dare call Facebook a medium here), and there are no real guidelines on how to do it right, there are a couple of things every business should consider when deciding to Go Facebook:

- Branding: Make your Facebook Page look somewhat like your website. At least upload your Company Logo & edit the Info tab. Tell users what they can expect, what business you are in, tell them about the services you provide, your products, etc.
- Interactivity: Facebook has the administrative interface built in. Post updates on your Wall! You do not have to call your web designer to do it. Nobody wants to see a stale Facebook Page (e.g. last update 10 months ago).
- Customization: Default settings are just that. Not changing them is like buying a new house and never furnishing it. Remove unnecessary items from your Page’s navigation, re-order the tabs, add new ones by installing Apps that add value to your Page.

- Must-Haves: As already mentioned above; Facebook Pages do not provide an option to contact the owner or admin directly. Users can only post on your Wall and hope that you are actively monitoring the newsfeed. Give them the opportunity to contact you!
To accomplish this (and to create other Tabs on your Page), you have to use a Facebook App – one like the Contact Form for Facebook by inlineVision.

Their App not only allows you to add a Contact Form to your Facebook Page in 2 simple steps, the Premium Version also allows you to customize and brand the App to your liking — for a one-time-payment of $49 — via a very easy to use Admin Panel (comparable Apps usually come with a subscription fee of around $10/month).

You can upload your Company Logo, customize the colors, add your business address, the phone number, customize the headline and the tagline and specify the recipient of the submitted data. The Premium version also gives you the opportunity to download the submissions in *.csv format so you can import them into your CMS or your mailing list software.

There are no hidden fees and there is no subscription necessary for the service – once your payment has been processed and you have been upgraded, all the Premium Options are immediately available.

$49 is very small price for an App that might prove invaluable for all Facebook Page owners.

Get the Free Version of the Contact Form here.
Upgrade or buy the Premium Version here.

3) Dress up your textareas: rounded corners, changing background & fixed scrolling background IE bug

Adding a sprite with rounded corners to add textarea field is almost the exact same procedure as described in Dress up your text fields.

With one exception: In Internet Explorer 7 the whole background image (in our case the sprite with both states) in the textarea scrolls by when a user enters text below the specified amount of rows.

An example form without the workaround is here: IE7 textarea scrolling background bug (you have to use IE 7 to see the effect).

Create a basic textarea and apply a class (don’t worry about setting rows and cols, as we will override the settings via CSS):

The following CSS is what causes the bug in IE to appear:

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

As seen in previous posts, we are simply applying some basic CSS to our textarea: we set the border to 0 to prevent the browser from displaying it, we set the desired font style and size, etc.

By using the pseudo-class :focus which is triggered when the user clicks inside the textarea to enter text, we expect the background to change as specified in line 13. Which happens without a problem in Firefox & Safari, but not in Internet Explorer 7.

IE 7 ignores the pseudo-class :focus, but this doesn’t seem to be the problem, as ignored declarations are simply dropped. In this case, the whole sprite we’re using as background starts scrolling, from top to bottom, eventually showing the element’s actual background color.
You can see the scrolling background effect on this page (use IE 7 to access it).

A quite simple workaround is to wrap another div around the textarea and apply the initial sprite to the outer div instead of the textarea:

#txt_cont {
	height:140px;
	width:300px;
	margin-top:10px;
	background:url("path-to-your-image-file") no-repeat scroll 0 0;
}

textarea.txtcomment {
	border:0;
	overflow:hidden;
	color:#FFFFFF;
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	height:120px;
	width:300px;
	padding:13px;
}

textarea.txtcomment:focus {
	background:url("path-to-your-image-file") no-repeat scroll 0 -140px;
}

We’ve removed the background-image definition from the textarea, assigned the ID #txt_cont to the outer div and set the background-image of that div to the upper portion of the sprite we initially used as a background-image for the textarea. Everything else stays the same.

2) Dress up your input/text fields: rounded corners, changing colors: The easiest way ever

What you need:
a) An image sprite (if you want the colors to change)
b) A CSS class to apply to your text fields
c) The :focus pseudo-class

Basically we are using almost the same method as in the first part of the series, Dressing up your Submit button in which we use the :hover pseudo-class to change the background image for the submit button when the users moves the mouse over it.

We cannot use the :hover class for text fields, we will be using the :focus pseudo-class instead. :focus gets triggered when a user places the cursor inside a text field (related to JavaScript’s focus() method).

The sprite we are using is the following:

Let’s create a simple text input field and assign the class “txtfld” to it:

The CSS gives the field its refined look:

.txtfld {
	font:1.1em  Verdana, Arial, Helvetica, sans-serif ;
	width:274px;
	height:24px;
	border:0;
	background:url("path-to-your-image-file") no-repeat 0 0;
	color:#FFFFFF;
}

1: Define the txtfld class
2: Font declaration shorthand:
enlarge font size to 1.1
use Verdana, Arial, Helvetica and make sure if none of these are available that we are still using a font without serifs (sans-serif)
3: Set the width of the field
4: Set the height of the field
5: Set the border to 0, otherwise the browser will display the default border around the element
6: Shorthand background definition:
Set the path to the sprite
Don’t repeat the image
Start displaying the image 0px from the top and 0px from the left (you can always use “top” and “left” instead of 0px — without the quotes)
7: Set the font color for the text inside the field (white)

Similar to the technique used to change the background image for the submit button, we use another pseudo-class to change the background image when the user places the cursor inside:

.txtfld:focus {
	background:url("path-to-your-image-file") no-repeat 0 -30px;
}

All this code does is tell the browser to display a different part of the sprite, starting at 0px from the left (like before) but only show the part of the image starting 30px from the top. You can use “left -30px” to achieve the same result.

You can see the effect when you click in one of the field in the comment form at the bottom of this post.

Note/Disclaimer:
IE 6 AND IE 7 will display the background image, but since they don’t recognize the :hover pseudo-class the background does not change.
IE 7 finally does understand Alpha transparency in PNG files, but again, if you do want your form fields to look halfway decent in IE 6, create the images with a matching background.

We are not designers, we just like pretty things (and pretty code). And we like it best if it all is functional and adds to the experience without limiting it. And while we do use jQuery for certain effects on other sites, these a pure CSS solutions.

Everything described here we are using in the comments form at the bottom of this page.

1) Dress up your Submit button (without using input type="image"): The easiest way ever

What you need:
a) an image sprite
b) a class/id to identify your submit button
c) the pseudo-class :hover

We are using a sprite (an image containing our button’s two *states*) to avoid loading another image (plus we promised not to use any JavaScript); we are simply shifting the visible part of the image when :hover is called (the user moves the mouse over the button).

We are using a blank sprite (without any text); this way we can simply assign what we want to appear *on the button* to the button’s value in our HTML code instead of having to create a variety of different images. We are NOT using the sliding doors technique (first introduced in 2003) to create variable width buttons.

Our sprite is 150×50 and will definitely accommodate the text *submit comment*:

We create a submit button, and (we like it simple) add an id with the value *submit*. If you have more submit buttons on your site, create a class for them and automatically apply the definitions to all your submit buttons. Remember: an id must be unique to the page.

The HTML:

We need some CSS:

#submit {
	border:0;
	width:150px;
	height:25px;
	color:#111111;
	font-size:11px;
	background:url("path-to-the-image-file") no-repeat 0 0;
}

What is happening here?
1: Add a selector for the previously assigned id “submit” (#submit).
2: Set the border to 0. Otherwise, your browser will display the default border around the element.
3: Set the width of the button (150px – same width as the sprite)
4: Set the height of the button (50px – 50% of the sprite’s height)
5: The color for the foreground font (the color you want the text on the button to be)
6: The font size
7: Shorthand background definitions:
Path to the sprite (url)
do not repeat the image
start displaying the image starting at 0 px from the left and 0 px from the top (You can also use “top left” instead of 0 0).

In the :hover declaration for the id “submit” (#submit) we change the foreground color (the color for the text) and tell the browser to display a different part of the image: start at 0 px from the left (same as above) and 25 px from the top:

#submit:hover {
	color:#a2eb41;
	background:url("path-to-the-image-file") no-repeat 0 -25px ;
}

Note/Disclaimer: While IE 6 will display the background image, it does not recognize Alpha transparency in PNG files. If you need to match the background-color of your element, create your sprite with a matching background.
IE 6 also does NOT recognize the :hover pseudo-class. Font color and background image do not change in IE 6. IE 7 does recognize :hover, but still doesn’t recognize :focus (which we will use in the next part).