Setting Up Mailing Lists

When visitors come to your site, your best chance of initiating a follow-up conversation is if you can induce them to give you their email address, and permission to send them something.

Since this is such a common need, there's a plethora of services that you can use to help you capture names and email addresses, and to send emails to the list this creates. If you're already using one of them, there's no need to change.

If you aren't yet using one, we can recommend Constant Contact, Vertical Response, and aWeber from personal experience. There's a dozen or more additional companies that are worth considering, including Campaign Monitor, iContact, MailChimp, StreamSend, and Emma. The best fit for your needs will depend on how many people are on your list, how frequently you mail, and what features you need.

For example, aWeber offers autoresponder series, which many services do not, and it charges by the size of your list but not for each individual email. Vertical Response, on the other hand, charges on a per-email-sent basis. It is especially attractive for non-profits because it offers 10,000 free emails a month for 501(c)(3) organizations.

Managing email marketing is a fairly complext task, and these services provide an assortment of features including:

• Simplified authoring of HTML emails that work in most email programs.
• Sending of large numbers of emails with good deliverability.
• Handling join list requests, email address confirmations, and unsubscribe requests.
• Sending a series of emails in a timed sequence.
• Splitting the list into sections for testing of different email versions.

Integrating Email Services with Webvanta

It's easy to integrate any of these services into your Webvanta site. All of them will generate for you a code snippet that you can paste onto your site for the signup form. Paste this code into a Webvanta snippet, and then invoke that snippet wherever you want to show the form (e.g., <w:snippet name="signup-form" />).

The stock forms that these services provide aren't likely to match the styling of your site, so we recommend stripping off any styling information in the form code (which is likely to be using old HTML attributes instead of CSS) and replacing it with your own styles. As long as you don't modify any ID or Name attributes, you can modify the form code without affecting how it submits the information to the email service.

Using the Vertical Response service, for example, you'll find the form code under Lists > Opt-In Forms. Here's the default form code:

<form method="post" action="http://oi.vresp.com?fid=1234512345" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
  <div style="font-family: verdana; font-size: 11px; width: 160px; padding: 10px; border: 1px solid #000000; background: #dddddd;">
    <strong><span style="color: #333333;">Sign Up Today!</span></strong>
    <p style="text-align: right; margin-top: 10px; margin-bottom: 10px;"><span style="color: #f00;">* </span><span style="color: #333333">required</span></p>
    <label style="color: #333333;">Email Address:</label>    <span style="color: #f00">* </span>
    <br/>
    <input name="email_address" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
    <label style="color: #333333;">First Name:</label>
    <br/>
    <input name="first_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
    <label style="color: #333333;">Last Name:</label>
    <br/>
    <input name="last_name" size="15" style="margin-top: 5px; margin-bottom: 5px; border: 1px solid #999; padding: 3px;"/>
    <br/>
    <input type="submit" value="Join Now" style="margin-top: 5px; border: 1px solid #999; padding: 3px;"/><br/>
    <br/><span style="color: #333333"><a href="http://www.verticalresponse.com" title="Email Marketing by VerticalResponse">Email Marketing</a> by VerticalResponse</span>
  </div>
</form>

And here's what we would edit it down to:

<form method="post" action="http://oi.vresp.com?fid=1234512345" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
  <div id="join_list_form">
    <h3>Sign Up Today!</h3>
    <p>* required</p>
    <label>Email Address:*</label>
    <br/>
    <input name="email_address" size="30" />
    <br/>
    <label>First Name:</label>
    <br/>
    <input name="first_name" size="15" />
    <br/>
    <label>Last Name:</label>
    <br/>
    <input name="last_name" size="15" />
    <br/>
    <input type="submit" value="Join Now" /><br/>
  </div>
</form>

To style the form in our CSS, you can use the id to target the elements, such as:

#join_list_form input {
  border: 1px solid #999;
  padding: 3px;
  margin: 3px 0;
}

Confirmation Pages

Most of the services will, by default, provide generic pages that are displayed to thank someone for signing up for the list, or for confirming their email address. To provide a polished experience, you should create pages on your site to replace these pages.

The details vary according to which service you're using, but there should be someplace where you can specify custom URLs for these pages. Then, on your Webvanta site, create the two pages (assuming you are doing email confirmation, which we highly recommend). Since the pages don't appear in the navigation or in other links on the site, they're only seen by people who submit the list sign-up form, or click a link in the confirmation email, and then see the page to which the email service redirects.