Tell A Friend Templates

ShopSite's Tell A Friend feature is a great marketing tool, designed to allow visitors browsing your site to send an e-mail message to a friend, telling them about a product on your site. Tell A Friend Templates include definitions for the form which the customer must fill out to send the e-mail message, a confirmation screen indicating the e-mail has been sent, and the e-mail message itself.

Tell A Friend Form

When a visitor clicks on a Tell A Friend link, a pop-up window opens with the Tell A Friend Form. The form contains fields for the visitor to enter their name and e-mail address, as well as the name and e-mail address for the friend they want to send the message to. There is also an area where the visitor can select the text for the message included in the e-mail.

The elements of a Tell A Friend Form are listed below. The JavaScript and form elements are necessary in order for the Tell A Friend form to work. Although the other elements are not strictly required for the form to function, it is a good idea to include them as well.

Form Validation JavaScript

The Form Validation JavaScript is generated by ShopSite, and checks to make sure the fields of the form have been filled in with valid information before trying to send an e-mail message.

Form Tags

The opening form tag, along with several essential hidden form fields, are generated by ShopSite, and need to be included before any of the other form elements. You will also need to include a closing form tag at the end of the form.

Name of Link

The name of the link being sent to the friend is not required, but can be displayed on the screen in order to let the visitor know what page their friend will be taken to.

Form Instructions

Form Instructions are written by the merchant, in the Back Office. Although the instructions are not required, the merchant may have important information or helpful notes about filling out the form.

Sender's Name Field

The form element that captures the name of the person sending the e-mail.

Sender's E-Mail Adddress Field

The form element that captures the e-mail address of the person sending the e-mail. This address is set as the From: field of the message.

Recipient's Name Field

The form element for the name of the person who will recieve the e-mail message. This can be used at the beginning of the message, to address the recipient.

Recipient's E-Mail Address Field

The e-mail address of the person recieving the message. This address is used for the message To: field, and must contain a valid e-mail address in order for the message to be sent.

E-Mail Recipient Policy

The E-Mail Recipient Policy is written by the merchant in the Back Office. The intended purpose for this field is to provide instructions regarding how many different recipients can be specified, and how to specify multiple recipients.

Message Selection

ShopSite allows the merchant to specify up to four different messages that can be selected by the visitor. These messages are displayed on the form with radio buttons to allow the visitor to pick which message to include in the e-mail.

Form Action Buttons

There are two buttons that can apepar on the form. The first is, of course, the submit button, which is required in order to submit the form and send the e-mail message. The second button is a cancel button, which will close the pop-up window without sending an e-mail message.

There is no requirement about what order form information be presented to the customer, provided all the necessary fields are included. This leaves considerable flexibility on the part of the designer.

Message Sent Screen

The Message Sent Screen is used to notify the visitor that the form was successfully submitted and an e-mail message has been sent, or that an error occoured either submitting the form or trying to send the e-mail. Although it is not required, you may design the message sent screen to show an example of the message sent to the friend.

The Message Sent Screen can contain any of the following. Because the Message Sent Screen does not contain a form, there are no strictly required elements for the screen. A highly practical design, however, will display a notice if the message was not sent, along with the error message generated and a link to return to the form, or a notification that the message was sent with a button to close the pop-up window.

Notification of Success/Failure

If ShopSite encounters a problem with the form information, or if ShopSite is unable to send the message for some reason, an error will be generated; otherwise, the message will be sent. ShopSite allows the merchant to design a specific message to be displayed if the message is sent, and another one to be displayed if the message can not be sent.

Error Message and Back Button

If an error occours, ShopSite will create an error message detailing what happened, which you may want to display on the screen, along with a link to return to the form and try again.

Sender/Recipient Info

The names and e-mail addresses for the sender, as well as those of the recipients, can be displayed on the confirmation screen. These could be displayed within the e-mail message, or they could be displayed separately, like e-mail message headers.

Sample Message

There are several basic parts of the e-mail message, which are spelled out in detail in the Message Definition. Providing this information in the form of a "copy" of the e-mail message the friend will recieve is one practical use for this information. Ultimately, however, the designer can choose if and how this information gets included.

Close Window Button

A button that will close the pop-up window and return the visitor to the main site can be displayed on the confirmation screen.

E-Mail Message

The e-mail message definition creates the structure for the e-mail message the friend will recieve. E-mail messages require special consideration because the presentation of the message depends largely on the e-mail client the recipient uses. Although full HTML support including CSS is available in many e-mail clients, some HTML functions may be turned off or limited for security reasons. One very common practice is to not allow remote images to load in a message, and some people disable HTML display of e-mail content entirely. It is a good practice to design your e-mail definitions so they can be viewed and understood, even if all HTML is disabled.

The Tell A Friend e-mail can contain any of the following information. The Tell A Friend e-mail serves little purpose without the link to the store, and if the visitor selects a message to include, it would seem strange if that message were not included. Beyond those two items, however, the content and layout of the e-mail are up to you, the designer.

Selected Message

The default messages the visitor can select assume that the link to the store will be displayed below the message, and may include text that indicates this. In designing the e-mail message, the content of the selected messages can influence the optimal positioning of the message relative to the link.

Link to Store

The link to the store is the primary purpose for the e-mail message, and as such, it is a good idea to display the link in a visually prominient manner. One way to do this so that non-HTML e-mail messages will maintain this prominence is to put the link on a line by itself, without any text or graphics that might obscure the link.

Sender Information

The name and e-mail address of the message sender are not essential to the message, but one way to make the message appear more personalized is to include the sender's name at the end, like a signature. The sender's e-mail address could also be displayed, although it is already included as the From: header for the message.

Recipient Information

Like the sender's name and address, the recipeint's name and e-mail address do not have to be included in the message body, but including the name as part of a greeting may make the message seem more personal to the recipient.

Next Topic: Gift Certificate Design