A List Apart

Menu
Issue № 120

Build a “Send to Friend” Page

by Published in HTML, The Server Side

A note from the editors: This article, while helpful in its day, is now out of date.

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.

Article Continues Below

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

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:

  • 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!

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:

     

Field

Type

Value

FromEmail

TEXT

User input (their address)

ToEmail

TEXT

User input (their friend’s address)

Message

TEXTAREA

User input (their witty comment)

URL

HIDDEN

<%= Request.ServerVariables(“HTTP_REFERER”) %>

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

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.

Thanks for spreading the word!

Your email has been sent to <%= Request.Form("ToEmail") %>. Here is a copy of what was sent:

From: <%= Request.Form(“FromEmail”) %>
To: <%= Request.Form(“ToEmail”) %>Subject: Check out this Send-To-Friend tutorial!

Body:
<%= Request.Form(“FromEmail”) %> has recommended that you check out this page at A List Apart:

<%= Request.Form(“URL”) %>

<%= Request.Form(“Message”) %>

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.

Return to the page you just referred

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

No Comments

  1. Sorry, commenting is closed on this article.