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

by Jonathan Longnecker

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.

December 10, 2009

Design, Tutorials, ExpressionEngine

Comments

  1. So Helpful. Thanks for the post.

  2. Thanks Jeremiah! Love your work, btw.

  3. Hi, exactly what i was searching for! but unfortunately can get it working,
    here is my testing link:  http://www.gruppoimmobiliarecasa.com/gelone/dettagli_immobile/
    Please advice.

  4. Hi, sorry, but i left a comment yesterday and no reply?

  5. @Lincoln, there’s nothing in your #tellfriend div. Patience there, buddy; we’re all busy wink

  6. Hi Jonathan,
    sorry for putting pressure on you, it wasn’t my intention, so please when you have time can you please help me to sort this issue.
    once again, i’m sorry.
    Thanks

  7. No problem. Like I said; it doesn’t look like there’s anything in your #tellfriend div. It’s empty. That’s why nothing is firing.

  8. nice.
    but is there a way to ajaxify the form action as well?
    so that it doesn’t go to the EE response page
    but just displays a confirmation message in the “tellafriend"div (replacing the form)?

    thanks!

  9. @pirco, I’ve been thinking about that a lot lately myself, trying to save on page loads and stuff. The problem is if they’ve left something out it might go to the error message template instead of the “return page” that EE sends you to. I’m sure it would be easy if I actually knew enough about AJAX smile. Believe me, if I figure it out, I’ll do a post on it or update this one.

    Thanks for reading!

  10. I’m running into a neat issue. I had tell a friend running fine and wanted to add a nominate form as well. So i basically duplicated my tell a friend code and renamed everything to nominate a friend. Everything works until i decide I don’t want to nominate anyone and close the form, the form doesn’t close but it fades into the tell a friend form??? It’s like on close it conflicts with the second form somewhere.

  11. @j2eee Yeah if you’re telling jQuery to close that ID and they’re both named the same ID you will have overlap issues like that. Just make sure your ID’s are unique and you have an unique expression in your jQuery for each.

  12. Hi Jonathan. Im trying to implement this tell-a-friend popup form into my design but having some issues. should the server be configured to run the “exp”  code?
    Here is testing link
    http://www.impumelelo.net/oliverawards/awards-overview.php

    Its now messing up my layout awell. You can view on any of the other pages how the popup form should look with the EE. Any help would be appreciated

  13. @Gfunk this is only if you’re using ExpressionEngine (thus the exp code). Though you could strip out everything in {} and it might still work provided you have your own form post programmed.

  14. Hi Jonathan

    I’m trying to use your the form. I have everything set up but when I click the submit button it does not send the email. The popup just disapear.

    Any ideas why?

    Thanks
    Joe

  15. @Joe Are you using ExpressionEngine? the CMS is what interacts with the server to send the email. If not you’ll need to program the mailing part yourself.

  16. Thank you. Works perfectly. Finnally found working script on your website.

  17. @Sara You are welcome! Glad we could help.

  18. Hey Jonathan, this is looking pretty awesome and useful. However, I’m not quite able to get it rolling. Can you take a look and see if you have thoughts on where I might be going wrong? Much appreciated!

    http://2013.trumpetgroup.com/includes/_tell_a_friend

  19. @Wes I’m still seeing ExpressionEngine code - that should be parsing. Are you using EE?

  20. @Jonathan Longnecker

    @Wes I’m still seeing ExpressionEngine code - that should be parsing. Are you using EE?

    Yeah, man. I just wanted to print that out to the screen so you could see what’s happening - didn’t think I could paste template code in here.. The form just isn’t rendering at all.

  21. @Wes If your weblog EE tags aren’t rendering I’m not sure what to tell you - maybe check for spacing issues or curly vs. straight quotes. Sometimes copying/pasting does weird things. If you’re in EE2 you should change it to exp:channel:entries and channel =”“. Also, I think tell a friend module has to be enabled - but first get your channel tag working.

  22. Hi there,
      I was considering using the tell-a-friend tool, however, it seems it would be extremely easy for anybody to hijack the form (remove the ‘readonly’ attribute from the textarea) and use the form to send email to just about anybody, from your server. Is this a problem you have somehow gotten around? Thanks!

    Gary

  23. @Gary Reckard I’ve never really had that happen to be honest…

  24. DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD

  25. As I stated to start with, this methodology of earning cash on-line must be thought of supplemental solely.



Behold our Amazing Portfolio

Check it Out