So for this example I'm going to show you how to create a "Tell a Friend" box that fades in and auto populates with the page you're currently on. It's a bit of HTML & CSS, a bit of jQuery, and a bit of ExpressionEngine. Ready to get started? Let's go!

For those of you who just can't wait, here's a demo of the static version and a download of the full ExpressionEngine version.

1. Start with HTML

What we want to do first is make this work with a static HTML page. So we need an anchor for jQuery to pull off of and the pop-up box with form fields in it. Something like this:

<h1>ExpressionEngine &amp; jQuery Tell-a-friend Pop-up Box</h1>
<p class="info">Published Nov 23, 2009 <em>by</em> 
<strong>Jonathan Longnecker</strong> <em>in</em> 
<a href="#">Blogging</a></p>

 <p>It's pretty easy to setup. Just create a hidden div with the 
 appropriate fields and show it on click with some jQuery. 
 Then use ExpressionEngine to make the dynamic parts happen.</p>

 <div class="social_links">
    <ul>
       <li><a class="subscribe" href="#">Subscribe</a></li>
       <li><a class="twitter" href="#">Tweet About It</a></li>
       <li><a class="email" href="#emailpopup">Email Someone</a></li>
    </ul>
 </div>     

 <div id="tellfriend" class="contact_form">
 <a class="close" href="#close" >Close</a>
 <form id='tellafriend_form' method="post" action="#"  >

    <label for="from">Your Email: </label>
     <input class="std_input" type="text" id="from" name="from" 
     size="40" maxlength="35" value="" />

     <label for="name">Your Name: </label>
     <input class="std_input" type="text" id="name" name="name" 
     size="40" maxlength="35" value="" />

     <label for="to">To: </label>
     <input class="std_input" type="text" id="to" name="to" 
     size="40" maxlength="35" />

     <label for="subject">Subject: </label>
     <input class="std_input" type="text" id="subject" 
     name="subject" size="40" value="Check out this blog entry 
     from FortySeven Media" />

     <label for="message">Message: </label>
     <textarea id="message" name="message" readonly="readonly" 
     rows="18" cols="40">Summary of Entry Here
     Link to Entry Here
     </textarea>

     <input type="submit" name="submit" class="form_but" 
     value="Submit"/>
</form> 
 </div>

2. Throw in a pinch of CSS

Since we're going to show and hide with jQuery the CSS is just used for positioning and z-index position:

#tellfriend {
    position: absolute;
    margin-top: -300px;
    left: 400px;
    width: 380px;
    z-index: 1;
}

3. Add some jQuery

So obviously we first need to link to the jQuery library in our header (apologies for the line break):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2
/jquery.min.js" type="text/javascript"></script>

Then we can either put this bit of javascript in the header of our document or in a separate file. Whatever's most manageable for you.

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function() {
    $('#tellfriend').hide();
    $('li a.email, #tellfriend a.close').click(function() {
    $("#tellfriend").fadeToggle('slow');
  });
}); 

It basically just hides the #tellfriend box on load and shows or hides it when you click the li a.email, #tellfriend or a.close elements. At this point, we should have something like this (Static Demo). I've prettied up a bit, but the basics are there.

4. Mix it up with some ExpressionEngine

So you can see that I've manually put in the subject line and message, but I want to have those pull dynamically as well as actually send an email. Static HTML can't do that. So this is what we add:

{exp:weblog:entries weblog="your_blog" 
disable="member_data|pagination|trackbacks"}

<h1>{title}</h1>
 <p class="info">Published {entry_date format="%M %j, %Y"} <em>by</em> 
 <strong>{author}</strong> <em>in</em> {categories backspace="1"}
 <a href="{path=/blog/}">{category_name}</a>, {/categories}</p>

{body}

 <div class="social_links">
    <ul>
       <li><a class="subscribe" href="#">Subscribe</a></li>
       <li><a class="twitter" href="#">Tweet About It</a></li>
       <li><a class="email" href="#emailpopup">Email Someone</a></li>
     </ul>
 </div>     

 <div id="tellfriend" class="contact_form">
 <a class="close" href="#close" >Close</a>
{exp:email:tell_a_friend charset="utf-8" allow_html='n'}

      <label for="from">Your Email: </label>
      <input class="std_input" type="text" id="from" name="from" 
       size="40" maxlength="35" value="{member_email}" />

      <label for="name">Your Name: </label>
      <input class="std_input" type="text" id="name" name="name" 
       size="40" maxlength="35" value="{member_name}" />

      <label for="to">To: </label>
      <input class="std_input" type="text" id="to" name="to" 
       size="40" maxlength="35" />

      <label for="subject">Subject: </label>
      <input class="std_input" type="text" id="subject" name="subject" 
       size="40" value="{title}" />

      <label for="message">Message: </label>
      <textarea id="message" name="message" readonly="readonly"
       rows="18" cols="40">
         {summary}
         {url_title_path="blog/archives"}
       </textarea>

 <input type="submit" name="submit" class="form_but" value="Submit"/>

{/exp:email:tell_a_friend}    
 </div>

{/exp:weblog:entries}

First of all make sure your {weblog:entries:tag} is wrapped around the entire thing. I've left a few other goodies in the EE template, but the gist is you use short tags to call the info dynamically. Then wrap the {exp:tell_a_friend} tag around your form (replacing your form tags) and insert other dynamic variables like {member_email}, {member_name} (for those already logged in), {title}, {summary} and link to the article. The cool thing is you could put any custom field tied to this content channel that you want.

So there you have it. The box will have it's fields populated and ready to send. Easy to put together and infinitely customizable! You can download the full EE file here.

While the initial reaction for any of us would probably be thoughts of a Chuck Norris roundhouse to the face (in slow motion, of course), the whole incident made me think hard about what 47m is at it's core, and what it truly means to serve a client. I think there are two ways to serve a client:

Scenario 1: Blind Serving

In blind serving, you're always making the logo bigger or adding starbursts because the client says so. Not because it's better for them, but simply because they demand it. A lot of companies won't fight this because they're just trying to make a living. And that's ok. I think everyone starts out serving blindly. Get the job done → client happy → get paycheck.

But at some point, you come to a crossroads. At some point, your experience will tickle the back of your brain and say "That's a bad idea!" So what happens then?

Scenario 2: Passionate Serving

I think the next stage of serving your clients involves talking through those "make the logo bigger" conversations and explaining your work. Why you believe your decision is the best not only for the design, but also for the company. These conversations are still no fun, but if you're really passionate about what you do, you can't let it go. You'll win some and lose some. And occasionally, the client will come up with a better idea. Seriously, it will happen. If you've checked your ego at the door like any good designer should, you'll be open-minded enough to see it.

Is your company serving blindly or passionately?

I wish the story ended here, but it doesn't. There are those certain clients that just can't be helped. They don't listen to anything you say and destroy your designs in Photoshop and send them back to you claiming they're better. What then?

Scenario 3: The Ultimate Sacrifice

When you see a client being self-destructive in their design decisions and they won't listen to you, it's time to let them go. With that kind of drama and conflict, I can guarantee you you're not passionate about the work anymore. This will lead to a decrease in quality, and you start wasting each other's time. They're looking for a Blind Servant and you're a Passionate Servant. You may be losing money, but if you're truly thinking of the client, it's a sacrifice you have to be willing to make.

Getting back to the firing of our client; it was becoming painfully obvious that we were trying to passionately serve them and they didn't want the advice. After almost 5 years we had grown apart in a radical way. Our cultures were polar opposite. So it was time to move on. And I'm ok with that.

So is there a place for both kinds of servants? Absolutely! For your sanity, decide which one you are. And more importantly, make sure your clients know and appreciate it.

Folks, we have a winner! Scott has officially declared the final logo to be Number 3 from the last round minus the tilting. Though not apparently obvious, this version was completely redone, ensuring spacing and alignment was perfect and optimized where necessary. The Solutions font was beefed up a bit, too. Good call on that one, loyal readers! Not much else to say here, really. Since we’re starting from the ground up and have such a strong and simple mark, I’m going to tackle color alongside the website design. A little unorthodox, perhaps? Yeah, we were never the normal ones .

Thanks everyone for your input. We’re moving on to wireframing next.