Creating a Tell-a-friend Pop-up Form with jQuery and ExpressionEngine

I recently had a reader ask about the pop-up contact forms and lightbox scripts we’ve used on some of our client sites - were they built into ExpressionEngine and how did we get them to work? Well the answer to the first question is generally no. EE lets you setup whatever js effects with whatever libraries you want. So can choose exactly how you use it. It really is a different way of thinking about putting together dynamic websites, especially if you’re used to most of the other CMS’s out there.

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.