101 Tutorials: Email to Friend script and design for Asp.net

It's obviously important to give your readers a way to tell their friends and colleagues about your site - it's free advertising after all. That's why it is important to put the Email to Friends or Tell your Friends link at the top of every page of the site.

What we have here is just a link Email to Friend which open a pop-up div where user can enter their email address, the email addresses of his friends and a note(optional).

First thing we will do is to create the div.



<body>
<%--the link that will appear in the page--%>

Email to Friend

<%--the div that will pop-up--%>

 
   
     Email a Friend
close
   

   Please enter a valid email address.

   
     <%--onsubmit="send_thisEmail();return false;"--%>
      To:(email address)
         
      From:(email address)
         
      Note:(optional)
          
         255 character limit


      
         
         
      

    

   

 


</body>

Second is to put a css for the div that pop-up.


 
 #popUpDivEmail
 {
  border: 8px solid #5E5E5E;
  font-size:12px;
  left:50%;
  margin:-185px auto 0 -155px;
  padding:10px;
  position:absolute;
  top:50%;
  width:300px;
  z-index:10000001;
  display:none;
 }
 .emailPopUp
 {
  color:#333333;
  font-family:arial,helvetica,tahoma,verdana,sans-serif;
  font-size:11px;
 }
 #EmailContainer
 {
  background:#FFFFFF none repeat scroll 0 0;
  border:1px solid #CCCCCC;
  height:370px;
  position:static;
  text-align:left;
  width:298px;
 }
 #EmailTitleContainer
 {
  background:#F2F2F2 none repeat scroll 0 0;
  height:13px;
  padding:5px 10px;
  position:relative;
 }
 #EmailTitleContainer a 
 {
  color:#4C4C4C;
  position:absolute;
  right:10px;
  text-decoration:none;
  top:5px;
 }
 #the_form input, #the_form textarea
 {
  background:#FFFFFF none repeat scroll 0 0;
  border:1px solid #BBBBBB;
  color:#333333;
  font-family:arial,helvetica,tahoma,verdana,sans-serif;
  font-size:11px;
  font-weight:normal;
  line-height:1.4em;
  margin:0 0 8px;
  padding:3px;
  width:272px;
 }
 .btn
 {
  background:#FFFFFF none repeat scroll 0 0;
  border:1px solid #B5B5B5;
  color:#333333;
  cursor:pointer;
  font-size:11px ;
  font-weight:bold;
  margin:0 2px;
  padding:2px 4px;
  width:60px;
 }

  #addthis-pop-email-btns .btn:hover
 {
  color:#41BBFF;
  border: 1px solid #ececec;
 }

 #errorEmail
 {
  background:#F26D7D none repeat scroll 0 0;
  border-bottom:1px solid #DF5666;
  color:#FFFFFF;
  padding:5px 10px;
  display:none;
 }

So have this script in the header

To get the latest js that we exported on the header just copy and paste this latest.js and create a new js file and save it as jquery.js.

The function openThis() and closeThis() are for opening and closing the pop-up div respectively.
In the sendThis() function notice the variable emailRegex, its a regular expression for email. We check first the email enter before we call the server side function EmailToFriend. Another thing is the variable emails = Toemail.split(/[;?,?]/) in function GetAllEmail() this variable will split all the Email To either the user input semicolon ; or comma , to separate the multiple emails. The last function will limit the user number of character inputed on the notes to 255 only.

Basically the form will look like this:

Email To Friend

And last part is the sever side function EmailToFriend where sending of email will take place. This is just a simple asp.net C# code, you can have your own code in here depending on your scope and limitation on how you will have it.


public JsonResult EmailToFriend(string[] To_Email, string From_Email, string msg)
 {
     for (int i = 0; i < To_Email.Count(); i++)
     {
         MailMessage message = new MailMessage();

         //subject
         message.Subject = From_Email + " has shared something with you at Chenz101Tutorials";
         string url = HttpContext.Request.UrlReferrer.ToString();

         string body = msg + " " + url;
         body += "P.S. This message was sent by" + From_Email + "via chenz101tutorials.blogspot.com";

         //body
         message.Body = body;
         message.IsBodyHtml = true;
         //from
         message.From = new MailAddress(From_Email);
         try
         {
             message.To.Add(To_Email[i]);
             //Set SMTP Client
             SmtpClient SmtpHost = new SmtpClient();
             SmtpHost.EnableSsl = true;
             SmtpHost.Host = "smtp.gmail.com";
             SmtpHost.Port = 587;
             NetworkCredential netCred = new NetworkCredential("username", "password");

             SmtpHost.Credentials = netCred;

             //Send Email
             SmtpHost.Send(message);
         }
         catch (Exception ex)
         {
             return Json(false);
         }
     }

     return Json(true);
 }

101 Tutorials

September 29, 2009

Email to Friend script and design for Asp.net

Email a Friend

2 comments: