Tell A Friend popup form

This will create the popup form to the user to share the website link to their friend. The concept of this plug-in is to open the Tell a Friend form in the popup window by clicking the button from the page (Sidebar, End of the post, pages). Plug-in automatically pick the post link and send it to their friend as well as website admin (Optional) along with the entered message.


Here’s the step

  • Click Tell A Friend Button.
  • It will open the form in the popup window.
  • Fill your name and friend email.
  • Enter the short message.
  • Click the send button.

Live Demo (Click the button to see Live Demo)

tell a friend Tell A Friend popup form

Plug-in features

  • Open form in popup window
  • Option to send the mail copy to admin.
  • Option to customize the mail content.
  • Option to set the from email address.
  • Ajax submission.
  • Unblock able.
  • Movable popup.


Installation instruction

Method 1

  1. Download the plugin wp-tell-a-friend-popup-form.zip from download location.
  2. Unpack the wp-tell-a-friend-popup-form.zip file and extract the /wp-tell-a-friend-popup-form/ folder.
  3. Drop the wp-tell-a-friend-popup-form folder into your wp-content/plugins folder.
  4. In word press administration panels, click on plug-in from the menu.
  5. You should see your new wp tell a friend popup form plug-in listed.
  6. To turn the word presses plug-in on, click activate.

Method 2

  1. Go to Add New menu under Plugins tab in your WordPress admin.
  2. Search wp tell a friend popup form plugin using search option.
  3. Find the plugin and click Install Now link.
  4. Finally click activate plug-in link to activate the plug-in.

Method 3

  1. Download the plugin wp-tell-a-friend-popup-form.zip from download location.
  2. Go to Add New menu under Plugins tab in your WordPress admin.
  3. Select upload link (top link menu).
  4. Upload the available wp-tell-a-friend-popup-form.zip file and click Install Now.
  5. Finally click activate plug-in link to activate the plug-in.

Plugin admin customization

After activated the plug-in and navigate to the below mentioned menu on your dashboard. there we have option to configuration the plug-in.

Dashboard → Settings → Tell a friend

If the popup window is hidden or open under the menu, just increase the z-index value in the CSS file.

Plugin front end customization

Drag and drop the widget: Go to widget menu and drag and drop the Tell A friend widget to your sidebar location.

Paste the PHP code to your desired template location: Copy and past the below mentioned code to your desired template location (ie in PHP file).

<?php TellAFriend(); ?>

Short code for pages and posts: Copy and paste the give short code into your posts and page to display the tell a friend button.

[tell-a-friend id="1" title="Tell a friend"]

Frequently asked questions

Q) How to change/update the form style?

Edit the CSS file tell-a-friend.css

Q) How to change/update the form client validation?

Edit the JS file tell-a-friend-form.js

If you got any error or mail issue, just comment the below mentioned two lines in the JS file popup-contact-popup.js and try again. so it will display the exact error on the popup.

//alert(http_req.readyState);
//alert(http_req.responseText);

Q) How to change the contact us button image?

In the administration page we have text box option “Link Button/Text:” to update this value.

Download location

http://www.gopiplus.com/work/wordpress-plugin-download/

121 Responses to“Tell A Friend popup form”

  1. AST
    May 21, 2012 at 11:54 pm #

    Can u please tell the download url for this widget. I cannot find it on you site.

    AST

  2. AST
    May 26, 2012 at 3:56 am #

    Thank you so much for your last reply.

    i have one more question…is there any way of moving the icon to central location or to the right of the sidebar area.
    thanks in advance

    • Gopi R
      May 26, 2012 at 4:29 am #

      icon? u mean button? its depends on your theme CSS.

  3. John
    May 28, 2012 at 11:52 am #

    Seems to be just the plugin im looking for. But i can’t find the PHP code so I can put it direct in the template. Can you guide me or give me the code?

    • Gopi R
      May 28, 2012 at 1:05 pm #

      <?php TellAFriend(); ?>

  4. John
    May 29, 2012 at 12:23 pm #

    Thank you, works perfect!

  5. Matt
    May 30, 2012 at 8:09 pm #

    Please, where is the specific wordpress “template” that I put the PHP code in? and exactly where in the template code, thanks! This looks great!

  6. Lollo
    June 1, 2012 at 8:56 am #

    What is “the desired template”. I dont understand where to put the code. Please help.

    • Admin
      June 1, 2012 at 9:01 am #

      that mean in your PHP theme files. you can add the given PHP code in your PHP files.

  7. Lollo
    June 1, 2012 at 5:59 pm #

    Ok.. thanx.. but sorry.. Im a beginner. If I want to have this widget in my sidebar1..where do I put the code:

    /L

  8. fatih
    June 3, 2012 at 6:06 pm #

    cant you please generate a shor code for this plugin ?

  9. Joe
    June 8, 2012 at 2:21 pm #

    I am using WP Multisite and cannot reach the server. my onreadystate = 1 instead of 4… What can I do to change this?

  10. Gopi R
    June 9, 2012 at 2:47 am #

    Plugin version 2.0 available with short code option, please have a look and post your comments..

  11. nick
    June 9, 2012 at 4:05 pm #

    Do you have a setup procedure for WP multisite?
    I am unable to get this to work properly under that setup.

    Thank you.

  12. Joe
    June 11, 2012 at 1:39 pm #

    First off, Awesome plugin, and I believe I fixed the issue with our multisite environment. Turns out it was an AJAX security bug that a few little tweaks calling the tell-a-friend-save.php file fixed up.

    My next thought on this is the email address on the email being sent. Is there any way to link the email tied to the users account? That way if John Deere wants to send an email to Henry Ford, Henry will receive it with the sender being John.Deere@USA.com instead of a static email address such as the noreply one?

    • Gopi R
      June 12, 2012 at 1:27 am #

      Please check the admin option, there we have option to update the email content with Keywords.

      Please help to send the fixed code, so i can update the plugin.

  13. Rainer
    June 13, 2012 at 10:01 pm #

    This does not update setting functioned. I can store nothing. Is there a solution?

  14. kd
    June 14, 2012 at 5:03 pm #

    Could you tell me where to put the codes? I just dont know where I’m supposed to paste these, which PHP file, and where in the PHP file? Also, where am I supposed to insert the short code for posts and pages? in a PHP file as well? which one?:

    [tell-a-friend id="1" title="Tell a friend"]

    • Gopi Ramasamy
      November 3, 2012 at 3:29 pm #

      you can use this short code in the page or post content.

  15. kd
    June 14, 2012 at 5:04 pm #

    and this code :

    • Admin
      June 15, 2012 at 1:21 am #

      Hi Kd, Nothing special in this plugin short code, like other wp plugin you can use the short code.

      just paste the given short code in the post (ie in the post description)
      PHP code for for your PHP file (You can paste it on sidebar.php)

  16. Berni
    July 2, 2012 at 2:20 pm #

    Hi Gopi, thanks a lot for your plugins, it’s just amazing!
    I’m trying to adjust the css file but even thougth I made the changes in the css file, the box container background has no change…
    What could it be?
    I’m pasting the lines below!!
    Can you help me?
    Regards,
    Bernardo
    —————————————————–
    I changed this lines:

    “#TellAFriend_BoxContainer
    {
    height:380px;
    width:390px;
    background:#a4ac9f; <————- I change this value
    border:1px solid #000;
    padding:0;
    position:absolute;
    z-index:999;
    cursor:default;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
    display:none;
    }

    #TellAFriend_BoxContainerHeader
    {
    height:30px;
    background:#a4ac9f; <———— and this one!
    border-top-right-radius:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;
    -khtml-border-top-right-radius: 10px;
    border-top-left-radius:10px;
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    -khtml-border-top-left-radius: 10px;

  17. Against
    July 6, 2012 at 8:26 am #

    Hello and thanks for the plugin dev!

    Currently popup window is located at the bottom of my web page. What is the way to move it upward. I have checked css files but didn’t find those options.

    Thanks for your answer!

  18. Li-An
    July 8, 2012 at 9:00 am #

    Very nice plugin. It could be nice the pop up close itself after sending the message.

  19. Justin
    July 10, 2012 at 3:10 pm #

    Thanks for this plugin! Works great and I really appreciate the admin options you included.

    To the commenters asking about adjusting the CSS, it’s best to override the CSS in your own theme’s CSS file (being sure to add !important to each declaration to make sure it’s overridden), that way your changes aren’t lost if the plugin is ever updated.

  20. Pam
    July 11, 2012 at 1:22 am #

    Hi Guys,

    At the moment the popup window [form] appears far to the right – sometimes off screen.

    How do I change the CSS [I guess] to have the popup window display in the centre of the screen?

    Tried changing the ‘absolute’ to left or center etc but all that did was to stop you being able to enter data into the form.

    Any answer much appreciated.

    • Justin
      July 11, 2012 at 1:53 am #

      I had the same issue, and here’s my way of doing that (include it in your theme’s CSS, and be sure that your negative margins are half the size of the container box):

      #TellAFriend_BoxContainer {
      position: fixed!important;
      top: 50%!important;
      left: 50%!important;
      margin-top: -195px!important;
      }

      • Justin
        July 11, 2012 at 1:55 am #

        Ug, forgot to include the left margin as well. Be sure to also include “margin-left: -195px!important;”

        • Gopi
          July 28, 2012 at 8:26 am #

          Thanks for your message…

  21. Justin
    July 11, 2012 at 1:47 am #

    And now that I’ve had some time to play with it, a couple feature requests…

    - only include the plugin’s JS/CSS in the header of pages it’s being used on (I only use the plugin on single posts, but the code is being placed in my home, pages, etc.)

    - have the popup close itself after the email is successfully sent

    - display error messages and successful submission message the same way the “Sending…” message is (in a div rather than a popup alert)

    Thanks again!

  22. Kieran
    August 7, 2012 at 8:13 pm #

    Hello.
    This is a super plugin!!

    I wanted to have the button change on mouseover, Maybe change in transparency or somethin gto happen to indicate a mouseover. How can i do that?

    I assume this could be applied to when the button is clicked too?

    Thanks :-)

  23. Ariel
    August 15, 2012 at 2:17 pm #

    The email is being sent to junk email or spam folders. I there away to change that so its sent to the primary inbox folder?

  24. Tom Farrell
    August 23, 2012 at 9:28 pm #

    Hello
    I have had this plugin on the site for a few months and worried why it was not being used. I tried it myself (in IE 8) and initialy thought it crashed the site but discovered that the box was to the right and below the bottom of the screen out of view. Is there a fix for this as it is a function I realy like and would use. I think I would like the box to appear on top of or very near the button. Looking forward to your relply

  25. Todd
    August 23, 2012 at 9:35 pm #

    Got it…just remove . $_SERVER['REQUEST_URI'] from the form :)

    • Sailen
      September 26, 2012 at 1:18 pm #

      From which page or which file

      • Gopi Ramasamy
        November 3, 2012 at 3:25 pm #

        Please remove the $_SERVER['REQUEST_URI'] to send only website link instead of full URL

        File name: wp-tell-a-friend-popup-form.php
        Line: 17

  26. alby54
    September 7, 2012 at 12:21 pm #

    Does it use wp internal editor for writing?…. doesn’t seem so, because all the accented vowels are screwed-up and emails get unreadable.
    Maybe adding some code like this would solve the problem..
    [code]
    $var0=preg_replace("/à/","0099", $var0);
    $var0=preg_replace("/è/","0088", $var0);
    $var0=preg_replace("/ì/","0077", $var0);
    $var0=preg_replace("/ò/","0066", $var0);
    $var0=preg_replace("/ù/","0055", $var0);
    [/code]

    Also….. wouldn’t be bad if the suggested links could be clickable

  27. alby54
    September 7, 2012 at 12:48 pm #

    OK…I fix it myself. If Utf-8 is in use as in default wp, modify this string in tell-a-friend-save.php
    from
    $headers .= “Content-type:text/html;charset=iso-8859-1″ . “\r\n”;
    to
    $headers .= ‘Content-type: text/html; charset=UTF-8′ . “\r\n”;

    For the linkable url in the email… unless the plugin will accept HTML text in the future, I guess there’s no way out. Actually, right now emails are in plain text and still get filtered and dumped in the junk repository probably because of the ‘noreply’ ….. I’ll take a look at that shortly.

  28. radiofranky
    September 9, 2012 at 7:03 am #

    hi,
    I was wondering is possible to auto-close the pop window when “send” is clicked? and if Is possible to auto insert the post title as the message body?
    Lastly, do I need to setup a SMTP server for this?

    thanks

  29. Vivian Harte
    September 12, 2012 at 5:32 am #

    Hi,

    1 – Half of the form goes under my large graphic at the top of my theme. Only the box that the friend is to type their message into shows. It doesn’t do this every time, but it does it many times. How do I make sure it doesn’t go under the graphic?

    2 – When the e-mail is received by the friend, my web address is: http://www.vivianharte.com/?page_id=333. How do I get the ?page_id=333 out so that they go to my home page instead of the page they clicked the “Tell a Friend” button on?

    Thanks!

    • Vivian Harte
      September 14, 2012 at 3:10 am #

      I figured out how to remove ?page_id=333 by typing the home page for my website instead of the ##LINK##.

      Could someone tell me how to make it so my form doesn’t go under my graphic at the top?

  30. Adam
    September 22, 2012 at 12:55 am #

    Great plugin! Thank you!

    I’m having a minor problem with the message portion of the sent email, though. When someone includes a word with an apostrophe, like “here’s,” for some reason it’s appearing in the sent email with an additional backslash, like this…

    here\’s

    Is there something I can do to fix this?

    Thanks again for your good work!

    • Gopi
      September 22, 2012 at 2:44 am #

      i will check and update the plugin, if it really the code issue.

  31. Pablo
    September 22, 2012 at 1:12 pm #

    Thank you for this nice piece of code!

    BTW, how can we manage to put anchor text directly on the PHP shortcode?

    Something like:

    < ? php TellAFriend();
    echo 'Tell it to your mum
    ? >

    This will be a nice value, IMO, for having different styles and anchors combinations.

    Thanks,
    Pablo.

    • Pablo
      September 22, 2012 at 1:16 pm #

      Sorry, I mean:
      < ? php TellAFriend();
      echo '*Tell it to your mum
      ? >

      • Pablo
        September 22, 2012 at 1:18 pm #

        Argh… the link doesn’t display… hope you understand.

  32. subhasis sahoo
    September 26, 2012 at 8:51 am #

    how to send user mail id through this plugin.
    how send mail .its mail id.

  33. Sailen
    September 26, 2012 at 11:33 am #

    How can i add From Email: in the front end popup ?It it possible to add in the frontend popup box or not?

  34. Marie
    October 2, 2012 at 11:54 am #

    Hi, I’m using your great plugin, I use it on a french website and I would like to know how to change the text message “Hello, I’d like to recommend you the following page…” and also instead of the page URL I would like to put the website URL itself, where do I do that?

    Also I need to make the height of the box shorter as I don’t use the social newtwork area and the emails bit at the bottom.

    Thanks a lot

  35. Stephie Smith
    October 13, 2012 at 5:01 pm #

    Sorry. I just sent a comment and didn’t notice until I hit submit that my email address was incorrect. My name has a 6 at the end of it (and the woman who has the other address is tired of getting my emails:-)

  36. Mickaël T.
    October 14, 2012 at 1:02 pm #

    Hello,
    For several days I try a plugin like yours.
    I finally decided to install it.
    My only problem is to call the function.
    In my theme, when I click on a button, I call a URL.
    For example, the plugin “Print” with the plugin WP_PRINT, I call ‘print /’.
    (which gives the url: http://domain.com/post_name/print/)
    So I wanted to know how and where I could edit the files to call the function with ‘email / ‘, for example?
    Thank you for your help

    • Mickaël T.
      October 14, 2012 at 1:09 pm #

      In wp_print, the code is :

      $print_link = $print_link.’print/’.$polyglot_append;

  37. Petra
    October 15, 2012 at 8:43 am #

    I installed the plugin and used php code in my single.php template, but when I test it, the email doesn’t seem to be received. I checked junk folder, but it’s not there. I tested it 3 times so far and email is not received, although the message says that it’s been sent. any ideas why email is not received? any help would be really appreciated. thanks.

  38. seochick
    October 17, 2012 at 7:59 pm #

    hello, can someone tell me where do I copy and paste this php code

    do I need to paste this into the widgets.php? The email box keeps going under the main header like this:

    http://screencast.com/t/sl0hTXV5

    and I adjusted the style sheet as well – can someone help?

    • Gopi Ramasamy
      November 3, 2012 at 3:21 pm #

      Hi seochick,

      Yes, you can use the code in any PHP file.

  39. seochick
    October 17, 2012 at 9:33 pm #

    Hi I just fixed the style sheet so now the box is showing -

    #TellAFriend_BoxContainer {
    position: fixed!important;
    top: 10%!important;
    left: 10%!important;
    margin-top: 100px!important;
    margin-left: 100px!important
    }

    • Gopi Ramasamy
      November 3, 2012 at 3:27 pm #

      thanks again for your comment…

  40. Bruce
    October 21, 2012 at 6:31 pm #

    Great plugin! If you need a brighter Tell-A-Friend logo, just copy and paste my Tell-A-Friend logo and download it on to your site. You’ll find it on my side bar at informationonblogging.com

  41. Joe
    October 26, 2012 at 2:50 pm #

    Thanks for the plugins. I’m not sure what the cause of this when I submit the form alert

    “There was a problem with the request”

    Please help. thanks

    • Gopi Ramasamy
      November 3, 2012 at 3:26 pm #

      Please check the FAQ section in the post, and try the second option. so we can find the exact problem.

  42. Joe
    October 28, 2012 at 3:16 pm #

    hi todd,

    thanks but from which file?

    thanks

  43. Balaji Arunachalam
    November 5, 2012 at 2:05 pm #

    Hi… I have used this plugin. working well. But i want how to close the popup box automatically when after submit the message.

  44. Balaji Arunachalam
    November 5, 2012 at 2:06 pm #

    Hi. How to close the popup automatically when submit the form.

  45. Liko
    December 3, 2012 at 3:20 pm #

    Is there a way for the plug-in to support multi-language sites?
    Can the button and text labels be translated somehow in other languages? \

    By the way, I really like this plug-in. Thanks for creating and sharing it!

  46. mark
    December 10, 2012 at 10:25 am #

    how do i get the link in the email to be clickable, at the moment you can only copy and paste it to go to the website not click on it.

  47. LJH
    December 12, 2012 at 9:55 pm #

    I would like to launch the “Tell a Friend popup” from my customized admin bar. Is it possible to do this? my current code is below that makes up my admin bar menu item

    $admin_bar->add_menu( array(
    ‘id’ => ‘my-item’,
    ‘parent’ => ‘top-secondary’,
    ‘title’ => ‘Invite a Friend’,
    Need Code to launch popup
    ‘meta’ => array(
    ‘title’ => __(‘Invite a Friend’),
    ),
    ) );

  48. Bernard
    December 17, 2012 at 9:30 am #

    I would like to catch the From Email in the front end popup.
    Is it possible to ask the sender email ? Thanks.
    Bernard

  49. Frank Lucas
    December 26, 2012 at 5:26 am #

    Can you include captcha?

  50. Linx
    December 30, 2012 at 4:35 pm #

    Thank you for this plug in, I have a small problem , I can’t get the titles to show up fr the text boxes. can you help. Thank you very much

  51. Niels
    January 14, 2013 at 8:40 pm #

    Hi there,
    I must say it is a great plugin!
    i’ve just one question, how can i make i possible to add the post image as an attachment?

    hope to here soon?

    thanx!

  52. Kelly
    January 15, 2013 at 10:27 pm #

    I’m doing a similar thing as Niels and am wondering how to add a post attachment as an attachment to the email? I have a PDF attached to the post and would like this to send that PDF.

    FABULOUS plugin!

    Thanks.

  53. Jouel Lacampuenga
    January 26, 2013 at 8:29 am #

    It doesnt work on Wp Genesis Theme. Please help how can I make this work on Genesis Theme

  54. jim mccann
    January 29, 2013 at 12:45 pm #

    Hi,

    I get the error
    “There was a problem with the request” and have uncommented the alerts which then shows 4 error boxes:

    Box 1 I get a box with a single 1
    Box 2 blank box
    Box 3 another box with a single 1
    Box 4 I another blank box

    Any ideas?

  55. Janis Searcey
    February 4, 2013 at 5:28 pm #

    I love this plugin, but when I updated WordPress to 4.5.1, it quit working. Does anyone know if there is a fix for this? Thank you.

  56. Carl
    February 20, 2013 at 6:00 pm #

    Hi there, I have the plugin working with the widget sidebar and successfully changed the image link in the settings area.

    I don’t seem to receive an email, I did the same that is on this website and I got the email straight away.

    I am working in MAMP (locally) does this have anything to do with the problem?

  57. Carl
    February 20, 2013 at 6:11 pm #

    It’s ok, I have already found that installing the plugin on another live website (not locally) it works fine and I get the email.

    If anyone is trying to get this great plugin to work locally then here is the answer.

  58. Andy Heidrich
    February 21, 2013 at 6:08 am #

    Hey all -

    This is a really killer plugin; it’s a shame that there are just a few items preventing it from being accessible to the masses. Gopi has really done a lot of great work here. I have been messing with this quite a bit, and I have found some stuff that it seems people might want – I’ll add it here. Gopi, it would be awesome if you could take what I write in the next couple of posts, add it to a page on your site, and link it from the plugin installation/FAQ pages. Thanks for the plugin. Now, we’ll talk about how to do the following:

    - Center the button in the sidebar (if used as a widget)
    - Send your emails to people as HTML (with images, links, whatever)
    - Make the form auto-close after a user submits it
    - Change the subject in the Admin email (by default it’s the same as the user email)
    - Remove \ characters in the message when people use apostrophes in their message (What\’s up?)
    - Change the labels of the input boxes (like change “Friend Email” to “Friend’s Email)
    - Modify the success popup to contain the text you want
    - Ditch the ‘From email’ setting and use another plugin that modifies wp mail to route through an email server (stop getting spam-foldered)

    I have this thing working killer. If you want to see, it’s at http://www.sacmusicmachine.com (bottom of the homepage). Go ahead and send yourself an email. Just do me a favor, if you test it put “Testing Tell A Friend” in the “Your Name” field. This is my business website.

    Writing this will take me a bit so I might not get all these written tonight, but here goes.

    • Andy Heidrich
      March 6, 2013 at 9:04 pm #

      (no longer bottom of the homepage, any page EXCEPT the homepage in the right sidebar)

  59. Andy Heidrich
    February 21, 2013 at 6:38 am #

    First things first – if you click the button and nothing happens, don’t worry. If you look carefully you’ll see that your scrollbar just got a lot longer. The popup is way down at the bottom. There are a couple of ways to fix it listed here; the one I used that worked on the first try is from Justin – add this to your theme’s style.css:

    #TellAFriend_BoxContainer {
    position: fixed!important;
    top: 50%!important;
    left: 50%!important;
    margin-top: -195px!important;
    }

    This will make the popup centered.

    Now that that’s done, let’s talk about CENTERING THE BUTTON IMAGE if you’re using this as a widget in the sidebar. This plagued me. There are several steps here, but they’re easy, and very reusable for later instructions. Even if you don’t need the centering part, you will need to refer to this for accessing the database in later instructions.

    This one killed me, but I figured it out so you don’t have to Here’s what you need to do:

    -First, get your image the exact way you want it. The one that comes with the plugin is not so good (no offense Gopi). If you want a killer high res button image, just Google image search “button vector free” and take your pick – I like this one:

    http://www.clipartsfree.net/clipart/31-blue-button-clipart.html

    Then download Inkscape (free), install it and open the vector and add your text, save it as a PNG in your preferred resolution and you’re good.

    Add the image to the tell a friend plugin via the settings page in WP Admin.

    Add this to your theme’s style.css and save it:

    .aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; }

    Then, here’s the fun part: you have to go into your database. For most of you it’s probably the PHPMyAdmin tool through your webhost. If not, customize these steps to whatever you use. For PHPMyAdmin it’s really easy:

    Open PHPMyAdmin from your cpanel or wherever.

    Click on your WordPress database on the left hand side.

    Click the “Browse” link next to the wp_options table.

    Scroll to the bottom and set the “Show” value to 200 records.

    Hit Ctrl+F (to use the Find feature in your browser) and search for the word Tell.

    There are several things we can do once in here (including changing our email message to HTML). But first, centering the dang image.

    Locate the record with option_name TellAFriend_Caption. The value in option_value for that record should be the link for your button. Click Edit on that row.

    Modify the image link and add this: class=”aligncenter” in between “<img " and " src".

    Your link should now look like this: "

    Click Go. Your button is centered. However, some themes might find that your footer is now not centered. If that happens, go back to style.css and locate the “Footer” section (it starts with .footer) and add this somewhere into the attributes inside the { }:

    clear:both;margin-left: auto; margin-right: auto;

    Voila! Your button is centered. Remember the connect-to-the-database method. You’ll use it more. Also remember that if you change your button image you will overwrite that database field and lose the css you added between img and src, uncentering your button – you’ll need to add it back in.

    • Andy Heidrich
      February 21, 2013 at 9:29 am #

      I just noticed that the image link example got scrubbed by the server. One more time – your image link should look like this (ignore the spaces inside the img and src terms, I put them so it doesn’t get scrubbed again):

      • Andy Heidrich
        February 21, 2013 at 9:30 am #

        Son of a B. Comments engine doesn’t like that. img class=”aligncenter” src. That’s it.

  60. Andy Heidrich
    February 21, 2013 at 6:53 am #

    Now – making your email HTML.

    First you need HTML. There are several ways to do this – one is to use something like http://ctrlq.org/html-mail/ – you can compose an email, then click the “Switch to HTML” button to grab proper code.

    The problem I had with this was Outlook. If you have Outlook you’ll notice that it renders HTML weird – big spaces between lines. What I wound up doing was composing the message in my GMail until it looked just how I wanted in Outlook, then right click-view source on the Outlook email to view and copy the HTML. There are several different ways to do this if you don’t have Outlook, be clever. If you’re going to use images make sure you hotlink them/drag them from the web into your email frame – they can’t be uploaded from your computer into your email or they won’t work.

    Use the codes provided in the plugin in the body of your email when you are composing – ##LINK##, ##MESSAGE##, ##USERNAME## (sender’s name).

    So, get your HTML and copy it to the clipboard. Then go back into the same wp_options table in the database described in the “center the button image” instructions, to the same set of records for TellAFriend.

    Find the record called TellAFriend_Usermail_Content and edit it. Replace what’s in there and paste in your HTML. Click Go.

    Now you need to edit a PHP file. Open the yoursite/wp-content/plugins/wp-tell-a-friend-popup-form and find wp-tell-a-friend-popup-form.php (you can use the Code Edit feature if you have hosted CPanel, otherwise you can download it and open it in Notepad++ – use something where you can see the number for each line of code).

    Change lines 21 and 22 from this:

    $headers = “MIME-Version: 1.0″ . “\r\n”;
    $headers .= “Content-type:text/html;charset=iso-8859-1″ . “\r\n”;

    To this:

    $headers .= “MIME-Version: 1.0\r\n”;
    $headers .= ‘Content-type: text/html; charset=utf-8′ . “\r\n”;

    That’s all you need to do – your email will now send as HTML – but keep this file open – we’re going to do some more stuff in it while we’re here.

    • Andy Heidrich
      February 21, 2013 at 7:12 am #

      EEEK!!! In the above instructions I listed the wrong PHP file. I hope you read this comment first. It’s the tell-a-friend-save.php file in the plugin folder. Sorry about that.

  61. Andy Heidrich
    February 21, 2013 at 8:29 am #

    We’re still in the tell-a-friend-save.php file. Now we’ll talk about how to…..

    AVOID GOING TO SPAM BY HAVING THE EMAIL BE SENT FROM A LEGITIMATE ACCOUNT/SERVER!

    You do not need to do this step if you are not having a problem with these emails going to spam. I was, so I did.

    Things you’ll need:

    - an actual email address that you control that you won’t mind mail coming from
    - SMTP access and credentials/config info for sending mail from that account.

    It was easy for me as I have a Google Apps domain for my business. The emails come from my partner’s Google Apps mail who is my booking agent anyway (mobile DJ).

    Leave the php file open (we still need it). Install this plugin on your site: http://wordpress.org/extend/plugins/wp-mail-smtp/
    This plugin will change the default WordPress WP Mail engine to send through an SMTP account you configure. That way, when the WP Mail function is called, it’s all legit.

    Configure the above plugin with your SMTP creds (make sure to check the “set the return path” option) and use its test function to make sure it’s working (save first, then click test, or you’ll have to reenter everything like I did).

    Once that plugin is working, comment out line 23 in the tell-a-friend-save.php file by putting 2 slashes (//) at the beginning of the line – like this:

    //$headers .= “From: \”$FromEmail\” \n”;

    This will render the line inactive. This is the only line that calls the “from” email address that you configured for the plugin and spoofs it in the “From” field of the popup’s email.

    If this is done, your WP Mail SMTP plugin will take over. Mail sent by the TellAFriend plugin to the WP Mail function will go through happy I’m-a-legitimate-sender SMTP land.

    • Andy Heidrich
      February 21, 2013 at 9:17 am #

      Keep in mind that if you use the SMTP plugin, the email address you configure will become the ‘From’ email for anything sent by your WP site. So it’s probably a bad idea to make it ‘noreply.’

      Make the message have content that people will want to reply to, and make the address something that will be monitored.

      Again, you’re welcome to check mine out (linked in my first post). I have an HTML email with logo, links, hyperlinked social media icons, etc. that gets sent.

  62. Andy Heidrich
    February 21, 2013 at 8:41 am #

    I hope you didn’t close that file – tell-a-friend-save.php – we’re not done there yet. In this one we’re doing a THREEFER – how to customize the message in the “Message sent successfully” popup modal, how to change the subject of the email sent to the admin, and how to get rid of those pesky \ characters that show up in the email whenever anybody types an apostrophe into the message box and sends it.

    First, the popup message. Go to line 57 of the php file. You will see the following:

    echo “Message sent successfully.”;

    Simple. Just change the text inside the quotes to whatever you want. I did:

    echo “Message sent successfully. If your recipient did not get the message, please ask them to check their spam folder.”;

    Just to be on the safe side :-)

    Now, to change the subject of the admin email:

    Take a few steps up to line 55.

    Change this line:

    @wp_mail($AdminEmail, $Subject, $Adminmail_Content, $headers);

    To this:

    @wp_mail($AdminEmail, ‘Whatever you want the subject to be’, $Adminmail_Content, $headers);

    Change the second parameter to whatever you want the subject to be. :-)

    OK, continuing our upward trek, go to the end of, oh, let’s say line 39. Press Enter so you get a new blank line at 40. Copy line 39 and paste it onto line 40.

    Line 40 should now look like this:

    $Usermail_Content = str_replace(“\n”, “”, $Usermail_Content);

    change it to this:

    $Usermail_Content = str_replace(“\’”, “‘”, $Usermail_Content);

    That’s ( doublequote backslash apostrophe doublequote comma doublequote apostrophe doublequote comma $Usermail_Content);

    What this is doing is adding a replace argument in the message the sender types that looks for any instance of \’ in the outgoing message and replaces it with ‘. Lovely.

    Moving on…

    • Andy Heidrich
      February 21, 2013 at 11:10 pm #

      After reviewing the above I notice the codes for apostrophe and colon were converted to the actual characters. Stupid comment system input :-( Just Google “HTML code for apostrophe” (or colon) to find out what the codes are.

  63. Andy Heidrich
    February 21, 2013 at 8:54 am #

    I think we’re finally done in tell-a-friend-save.php. So I’m telling you, friend, save it if you haven’t already.

    Let’s close that bad boy and open up wp-tell-a-friend-popup-form.php (it’s in the same folder).

    Now we’re going to give some grammar treatment to the “Friend Email” field. My preference is that it be “Friend’s email” but you can’t just go putting apostrophes inside of php code. It tends to make things not work.

    So do this:

    On line 32 of this php file you’ll find the following:

    Friend Email

    Change it to this:

    Friend’s Email:

    The &8217; will print an apostrophe onscreen for the user. The : will print a colon. So you go from Friend Email to Friend’s Email:. If you like the colon, you can go ahead and add : at the ends of the other field labels (lines 28 and 36).

    BAM.

    Keep this file open. We need it for the last thing. And it’s the best thing.

  64. Andy Heidrich
    February 21, 2013 at 9:10 am #

    Making the form close automatically. Yes. It’s a tiny bit awkward when a user submits the form, ready to keep perusing through the website they thought was awesome enough to email to somebody, they click Submit, get a success popup and click to close it, and then the form clears out its fields and continues staring at them and they have to click again to close it.

    So let’s look at line 41 of tell-a-friend-popup-form.php and see about changing that. What you want to do is change line 41 from this:

    <input type="button" name="button" class="TellAFriend_Button" value="Submit" onClick="javascript:TellAFriend_Submit(this.parentNode,'/wp-content/plugins/wp-tell-a-friend-popup-form/’);”>

    to this:

    <input type="button" name="button" class="TellAFriend_Button" value="Send" onClick="javascript:TellAFriend_Submit(this.parentNode,'/wp-content/plugins/wp-tell-a-friend-popup-form/’);javascript:TellAFriend_HideForm(‘TellAFriend_BoxContainer’,’TellAFriend_BoxContainerFooter’);”>

    That will do it! Now when a user clicks Submit (which, wait, is not submit anymore. The code above added the close automatically bit, and it also changed the button value from Submit to Send. Send. It has a nicer ring to it). Anyway, now, when a user clicks SEND, the form will close immediately.

    A couple of seconds will pass, and the “Message sent successfully. If your recipient did not get the message, please have them check their spam folder.” popup will appear. But the message won’t be in spam, because you’ll be coming from a legitimate SMTP sender with a properly formatted HTML email.

    That’s all I have to offer for this plugin. Gopi, again, thanks for all the great work; I just did really a tiny bit of QA on what was a very cool plugin. I like writing stuff down, and I figured I spent way too much time figuring these things out to not contribute (I am not a programmer). I saw it hadn’t been updated in a while and thought what the heck. Maybe Gopi will update this tomorrow and render everything here meaningless, but for version 4.1 this is good stuff.

    So Gopi, hope I didn’t overstep by documenting these things for your plugin. You have my license to take them and post them wherever you want, but please do give Andy a shoutout for recording it.

    I didn’t talk at all about using css to style the box; that’s another can of worms depending wholly on your theme. But it can be done pretty much any way you want it.

    I hope this helped somebody somewhere.

    • Leah
      March 28, 2013 at 9:12 pm #

      Soooo helpful, thanks dude!

  65. Andy Heidrich
    February 21, 2013 at 9:13 am #

    Oh and final note:

    If you changed anything in the database directly, (centering the button image or entering an HTML email) you should probably not Save the settings on the plugin admin page or you might step on your HTML.

    • Andy Heidrich
      February 21, 2013 at 9:34 am #

      Dang, this blog comment system is making this tough. The cut off bit of code above is repeated here with spaces so it wraps:

      <input type="button" name="button" class="TellAFriend_Button" value="Send" onClick="javascript:TellAFriend_Submit(this.parentNode,' /wp-content/plugins/wp-tell-a-friend-popup-form/’);javascript:TellAFriend_HideForm(‘TellAFriend_BoxContainer’, ‘TellAFriend_BoxContainerFooter’);”>

      • Ben
        March 4, 2013 at 4:45 pm #

        I think Im having the same problem as Wootie. I want the form to close after the customer hits send. This code above makes it look as if everything is dimmed and nothing can be clicked. Maxed out the Z Index and still no luck.

  66. Wootie
    February 24, 2013 at 11:59 pm #

    Andy – thanks for all your hard work and insight. Very helpful.

    Well…except for one thing. The popup launches weird, as you’ve noted…and adding your code to the css doesn’t change the biggest problem, which is that it launches “over” the main content, but “under” the menu bar and header image. I think it would be very confusing to the typical user. I was going through your other changes and it seems that when I tried to implement the input type code from your last post that the popup doesn’t launch with focus – it’s shaded out like the rest of the site, and you can’t actually click into the fields to type anything.

    But anyway…any thoughts on making the popup actually pop up in front of everthing else?

    The website (in development) in question is at http://www.northrupsystems.com/sandstrom

    Thanks!

  67. Andy Heidrich
    February 25, 2013 at 11:31 pm #

    Hey Wootie -

    Near as I can tell, you’ve got another element on your page with a higher z-index value than the popup. You should be able to fix this problem by editing line 22 of tell-a-friend.css. Change the z-index value of #TellAFriend_BoxContainer from 999 to 9999. That should do it.

  68. Wootie
    February 26, 2013 at 3:46 pm #

    That seems to be it! Now to get back to putting your other changes back in…thanks!

  69. Wootie
    February 26, 2013 at 5:45 pm #

    Never did get this change to work to make the form go away after submitting it:

    Every time I try to put that in there, it will de-focus everything, including the popup form. Othwerise, working well now. Thanks!

    • Ben
      March 4, 2013 at 4:46 pm #

      Were you ever able to get this to work?

      • Andy
        March 5, 2013 at 9:12 pm #

        Ben posted a fix for the auto-close issue over on the wordpress support forum (in the thread “this is great with some tweaking…”). FYI.

  70. Kelly
    February 28, 2013 at 9:02 pm #

    Hopefully someone can help me with this customization I’m doing to the plugin.

    I’m hoping to add an attachment to the email – the one related to the current post. I’ve placed the following in the tell-a-friend-save.php file:

    global $post;
    if ( $attachments = get_posts( array(
    ‘post_type’ => ‘attachment’,
    ‘post_mime_type’ => array(‘application/pdf’),
    ‘numberposts’ => 1,
    ‘post_status’ => null,
    ‘post_parent’ => $post->ID
    )));
    foreach ($attachments as $attachment) {
    $attachments = array(get_attached_file( $attachment->ID ));
    }

    and added $attachments to the @wp_email call. However, it’s returning the wrong attachment->ID for the post.

    Can anyone help me figure out why it’s pulling the wrong ID?

  71. tolga
    March 30, 2013 at 2:10 pm #

    Dear sir madam, it does not include sender friend email addres :( how to correct it?

  72. Bob
    April 16, 2013 at 11:02 pm #

    I cannot find the admin panel for this

  73. Bob
    April 22, 2013 at 3:33 pm #

    I found the admin panel…When I test it, it always sends the email…but, I always get “there was a problem with the request and the pop-up stays open.

  74. Mike
    April 30, 2013 at 6:43 pm #

    I am feeling extremely stupid right now… cannot find the the CSS file in editor… I am running Optimize Press theme and have a lot of files to sift through, but can seem to find the tell-a-friend.css.

    Any help would be greatly appreciated… thanks.

    Mike

  75. Mike
    April 30, 2013 at 10:40 pm #

    Hey there, thanks for the plugin… I’m getting an error upon form submit so, I did this as suggested:

    If you got any error or mail issue, just comment the below mentioned two lines in the JS file popup-contact-popup.js and try again. so it will display the exact error on the popup.

    //alert(http_req.readyState);
    //alert(http_req.responseText);

    I did this and am getting error 1 and the 4

    Can you help?

    Thanks,
    mike

  76. Katrina Starkweather
    May 15, 2013 at 5:24 pm #

    I used the shortcode [tell-a-friend id="1" title="Tell a friend"] at the bottom of a page, but the image did not appear. Instead, the form appeared. I have a screenshot if you wish to see it. I would appreciate an idea as to why the short code is not working for me. (I also tried it as a widget and had the same problem). Very odd. PS. I did not leave it up on the site live. I’d like to avoid that if possible.

  77. Katrina Starkweather
    May 15, 2013 at 5:42 pm #

    Update. I added it to the sidebar and it shows up. However, it does not pop up. Help. You can see it at ddranch.net/funfridays

  78. tobs
    May 21, 2013 at 5:22 am #

    i am getting this error “There was a problem with the request” but the message reaches the destination,only thing is it keeps showing “sending”.

  79. Learn Qigong Online
    May 31, 2013 at 1:48 am #

    Has anyone noticed that the plugin cuts off variables in the URL if there are more than one? I’m sure it’s because the & symbol gets filtered as it passes the Link URL via AJAX and GET, so, it basically kills it because the & is already part of the string. I’d like my full URL to get passed, otherwise this plugin won’t work for the project i’m on. Any insight is appreicated!

  80. Mark
    June 8, 2013 at 11:35 pm #

    Is it possible to have the Friends Email be all current wordpress USERS or a Group with WordPress?

    THanks.

  81. Kevin
    June 11, 2013 at 1:57 pm #

    Very handy plugin. Thanks so much for creating it and making it available. I have a question though.

    When contractions are used in the message box, a rear slash “\” is inserted before the apostrophe in the sent email. Example:

    Oh you\’ll dig this stuff. It\’s WHACK!

    Why is this occurring?

    Thank you

  82. Erik
    June 13, 2013 at 12:24 pm #

    Hello, I’m working on a project where we need a button like this. The button will work to share two different pages. Page A and page B with different messages. For example:

    The visitor is in page A and clicks the “tell a friend button” He then shares message A with his friend.

    The same person visits page B and finds out he can share the content on that page with his friend aswell. He clicks the button but this time he shares Message B.

    _

    Is there a way to achieve this? Having multiple buttons or displaying different messages depending on what page you are on? Or is the button set to one message tops?

    Best regards.

  83. doug
    June 19, 2013 at 3:55 pm #

    Hi,
    Great plugin – thanks!

    Is there a token to send referrer’s email address as well as name to Admin?

  84. chicky365
    July 15, 2013 at 4:33 pm #

    Hi,
    Great plugin but there seems to be a problem with the length you can add to the “Link button/text:” field as it chops the text after about 100 characters, which is not enough if you have a long URL path for the image and want to do a URL mouseover path too.

    Any help would be great, thanks.

  85. Abhay Singh
    July 16, 2013 at 4:56 am #

    Awesome plugin. your all plugins are awesome. specially popups.

  86. David
    April 12, 2014 at 9:53 pm #

    I like the plugin, it’s great but I have one request; that the comments field be made optional. I was surprised to find that you made it compulsory as there already is default text introducing the link.

    Also one more request, I would like the popup form to close on a successful send, makes it snappier; that way the user doesn’t have to do the work that the site should do.

    I know the work you have done is for free so I want to add how much I appreciate the time and effort you have put into the project.

    Thank you. David.

    • Gopi Ramasamy
      April 13, 2014 at 1:36 am #

      Hi David,

      Noted your requirements. i will consider this option in the next release. At present you can easily remove the comment box from the form by updating single plugin file in the plugin.

  87. Dave
    April 14, 2014 at 4:32 pm #

    Hi Gopi,

    I’d like to add a field to the form for the sender’s email address (ie Your name, **Your email address**, Friend email, Comments).

    If I add a field to wp-tell-a-friend-popup-form.php it displays correctly but the form doesn’t send, clearly I’m not skilled enough in PHP to add whatever code I need to the php or js file.

    In addition, I’d like the “Your email address” field to be sent in the email. I think doing so will give the email more credibility.

    Is this possible?

    • Gopi Ramasamy
      April 15, 2014 at 3:13 am #

      Adding the fields only in the forms is not enough. You have to modify tell-a-friend-form.js JS file to pass the email information. And you may need to modify tell-a-friend-save.php to send mail.

Leave a Reply

Your email address will not be published. Required fields are marked *

(Required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *