Build a “Send to Friend” Page

Ah, yes, the “send to friend” service. That wonderful little tool that everyone uses to build their community. A website is like any other community, in that it’s built by word of mouth. One friend tells another, who tells another, who tells another, until your community has begun to grow exponentially.

At least, that’s how it works in theory. In practice, there’s a slight problem with expecting your visitors to publicize your site.

Users aren’t workers#section2

Unfortunately, telling one’s friends about a new site isn’t always quick and easy. Your visitors first have to find the site, then decide their friends really need to know about it. Next, they must open their mail app, copy and paste your URL, dash off a witty comment, and finally, click Send. That’s more work than many web users are willing to do.

Well, we’re going to make it easier for your visitors to invite their friends by cutting out those middle steps. With the SEND TO FRIEND form in place, all visitors need do is decide they like your page, type a comment, and click a button.

(Of course, it helps if they actually like your website, but building sites that people like is more than we can cover in a tutorial.)

Prerequisites:#section3

• Basic knowledge of HTML and ASP (and I mean basic; we’ll have the full
     app for download at the end)
• Familiarity with, and knowledge of how to use, HTML forms
• Ability to copy and paste
• Access to a server with ASP and CDOMail
• Ability to create three simple web pages, two of which must be ASP files (a link on the page you want to send, one to get the email information, and one to send the email)

Start building your form!#section4

The first thing we need to do is to place a link on the page we want to send. There’s absolutely nothing special about this link. It’s just a regular <a href="sendtofriend.asp"> link. All the work will be done on our next page. This makes it very simple to integrate the Send To Friend pages into your existing site, as there is no change to your current markup or structure.

Now that our users have clicked the link to our Send To Friend page, we need
  to build a form for them to fill out. This will require four form fields:

Here’s the form we’re going to use to collect this information from our visitor:

<form method="post">
<p>Your Email: 
<input type="text" name="FromEmail">
</p>
<p>What is your email address?: 
<input type="text" name="ToEmail">
</p>
<p>Your Message:
 <textarea cols="40" rows="5" name="Message">
</textarea>
</p>
<p> <input type="hidden" name="URL"
    value="<%= Request.ServerVariables("HTTP_REFERER")%>">
 <input type="submit" value="Send the Link!" name="SUBMIT">
 <input type="reset" value="Clear" name="RESET">
</form></p>

Now that we have our form built, let’s look at exactly what we’ve done. The only thing really special about this page is the hidden form element named URL. We’ve stuffed this hidden element with the HTTP_REFERRER server variable that’s built into ASP. (Basically, any time you move from one page to another, the URL of the page you came from goes into the HTTP_REFERRER variable.) We also set the action of our form to the next page, which will actually send our email.

Sending the mail#section5

Now we come to the juicy part of our application. After the visitor clicks Submit, the form values will be fed to to a page entitled send.asp. Send.asp does all the work for us, including sending our email, giving the visitor a confirmation that it’s been done, and providing him or her with a link back to the page where the whole process started (the referred page).

We’ll send our email via the following code at the top of our page; the comments
  will tell you what each section does:

<%@LANGUAGE="VBSCRIPT"%> 
<% 
'Create our email object so the server
'knows we want to send a new email message   Dim objCDO
   Set objCDO = Server.CreateObject("CDONTS.NewMail") 'Set our from and to email addresses   objCDO.To = Request.Form("ToEmail")
   objCDO.From = Request.Form("FromEmail")'Send a BCC to ourselves, so we can tell when people are
'using our service, and what they're telling their friends
'This is also a good way to ensure that people aren't 
'using your service for nefarious purposes, such as spam.   objCDO.bcc = "sendtofriend@alistapart.com"'Create our subject   objCDO.Subject = "Check out this Send-To-Friend Tutorial!"'Create the body of our message, what our new visitor
'will see in their email reader.   objCDO.Body = strFrom & " has recommended that you check out " _
  & "this page at A List Apart:" _
  & VbCrLf & VbCrLf & Request.Form("URL") _
  & VbCrLf & VbCrLf & Request.Form("message") _
  & VbCrLf & VbCrLf & VbCrLf _
  & "This page was sent using our Send-to-Friend service." _
  & "Your email address has not been added to any list of any sort, " _
  & "and has not been recorded at our site."'Finally, send our email and delete it once we're done.   objCDO.Send
   Set objCDO = Nothing
%>

I know what you’re saying: What the heck are all those references to VbCrLf? Those are carriage returns for our email, so we can break up our text, making it nice and clean.

Now that the comment has been mailed, we display a smart little “copy” of same, so the visitor can see what was sent; and we provide the visitor with a means to get back to where he or she started. All items in ASP delimiters (<% %>) will be pulled from what was submitted by the visitor.

If you’re having trouble creating the pages on your own, feel free to download our example, and modify it as needed.