Custom form to subscribe or unsubscribe to an Announcement List

Subscribe / unsubscribe form

Form example

This article walks you through how to create a custom contact form to allow users to subscribe to your Announcement List.

Please note that if you have multiple mailing lists, you must have a separate subscription form for each one.

Section 1 — Adding your list's values

This first section is responsible for sending information to your list. You must change the _MailingListName_ and _DomainName_ values to your specific list values.

<form method="post" action="http://scripts.dreamhost.com/add_list.cgi">

<input type="hidden" name="list" value="_MailingListName_">
<input type="hidden" name="domain" value="_DomainName_">

You must customize the text between underscore ("_") characters for _MailingListName_ and _DomainName_ according to your needs. The other fields can remain as they are, but these two must be updated to your specific Announcement List details. See below for an explanation of these fields.

Explanation of the fields above

Field Explanation
_MailingListName_ This is the part of your mailing list "From Email" that comes before the @ sign. So if your list is mylist@example.com, this would be mylist. Please note that people won't actually be able to send email to listname@example.com unless you set that up as an independent email address or auto-responder in the panel.
_DomainName_ This is the domain name of the site where this form is residing. It's not necessary to have this field, but having it will ensure full compatibility with all browsers.

Section 2 — Name and email fields

This section adds an input field for the user's name and email address. The second email field validates that you've entered your email correctly.

<!--Visible Fields-->
<div>
    <label for="name">Name:</label>
    <input type="text" name="name">
</div>
<!-- Required: -->
<div>
    <label for="email">Email:</label>
    <input type="text" name="email" placeholder="Enter a valid email" required>
</div>

<!-- Optional: -->
<div>
    <label for="confirm-email">Confirm Email:</label>
    <input type="text" name="address2" placeholder="Please verify you email" required>
    <input type="hidden" name="req_address2" value="1" input name="email" />
</div>

Section 3 — Optional fields

After you've added fields for the user's name and email, you can add additional fields to suit your list's needs. The following fields are optional, but show how to add additional fields for:

  • street
  • city
  • state
  • zip
  • country
<div>
    <label for="street">Street:</label>
    <input type="text" name="street" required >
</div>

<div>
    <label for="city">City:</label>
    <input type="text" name="city" required>
</div>

<div>
    <label for="state">State:</label>
    <input type="text" name="state"  required>
</div>

<div>
    <label for="zip">Zipcode:</label>
    <input type="text" name="zip"  required>
</div>

<div>
    <label for="zip">Country:</label>
    <input type="text" name="country" required>
</div>

Section 4 — Submit and Unsubscribe buttons

The submit button is required as it sends the form data. You can also add the Unsubscribe button as well to make it easy for users to remove themselves from your list. You should change this text to suit your needs.

<div class="button">
    <input type="submit" name="submit" value="Join Our Announcement List">
</div>

<!-- Optional Unsubscribe Button -->
<div class="button">
    <input type="submit" name="unsub" value="Remove from list">
</div>

Explanation of the fields above

Field Explanation
Join Our Announcement List This label can be changed to anything that doesn't contain the words "remove", "out", "unsub", "leave", or "delete," and will act as the subscribe button. Also if you're an HTML expert you can use an image for the submit button.
Remove from list This will be the label on your "unsubscribe" button. It's not mandatory to have this button, but it's more convenient if your list members can unsubscribe over the web, without your intervention. The name of this button must include one of the following: "remove", "out", "unsub", "leave", or "delete". If it doesn't, it will act as though it is a subscribe button.

How do I use images for my subscribe and unsubscribe submit buttons?

If you don't want to use the standard submission buttons but would rather use your own images, you can do that with this code:

<input type="image" border="0" name="submit" src="subscribe.gif">
<input type="image" border="0" name="unsub" src="unsubscribe.gif">

General CSS code

This is some general CSS code you can use to style your form. You will most likely need more depending on your site's needs.

/* Centers the form on the page */
form {
  margin: 0 auto;
  width: 400px;
  /* Add a border */
  border: 1px solid #CCC;
  padding: 15px;
  border-radius: 15px;
}

/* add space between fields */
form div {
  margin-bottom: 15px;
}

/* Space input fields */
label {
  display: inline-block;
  width: 125px;
  text-align: left;
}

Creating custom URLs

There are several default pages that display depending on the information the user enters into your form. For example, this is how the default Success page looks:

Announcement_List_Success_add.png

You can change these default URLs to a custom URL you have created. To change where the URLs redirect, you must add your custom URLs in the panel while editing the list.

For example, the following items can be adjusted from your list's 'Edit' page.

  • Unsubscribe URL
  • Already Subscribed URL
  • Not Subscribed URL
  • Invalid Email Address URL
  • Confirmation URL

Explanation of the fields above

Field Explanation
_http://UnsubscribedURL_ The URL of the page that appears if someone successfully unsubscribed from the list. You can create your own .html page or omit this field from the HTML form. If omitted, the value in the Unsubscribe URL field on the Announcement List edit page will be used instead.
_http://AlreadyOnURL_ The URL of the page that appears if someone who is already on the list attempts to subscribe to it. You can create your own .html page or omit this field from the HTML form. If omitted, the value in the Already Subscribed URL field on the Announcement List edit page will be used instead.
_http://NotOnURL_ The URL of the page that appears if they are not on the list, and they have attempted to unsubscribe. You can create your own .html page or omit this field from the HTML form. If omitted, the value in the Not Subscribed URL field on the Announcement List edit page will be used instead.
_http://InvalidURL_ The URL of the page that will appear if the email address entered is invalid. You can create your own .html page or omit this field. If omitted, the value in the Invalid Email Address URL field on the Announcement List edit page will be used instead.
_http://EmailConfirmURL_ The URL of the page that will appear when the user confirms their opt-in to your list by clicking a link in an email message just sent to them. If you customized the URL field, you should probably customize this one as well. You basically need a message that says something like "You are not QUITE subscribed yet.. please now check your email right now for the last step to confirm your subscription to our list!". You can create your own .html page with this message, or omit this field. If omitted the Confirmation URL field on the Announcement List edit page will be used instead.
<input type="hidden" name="emailit" value="1" /> If you have this hidden input in the form, you will automatically receive a default email sent to _MailingListName_@example.com. You can then set this up as an auto-responder whenever someone signs up for the mailing list. Plus, you will also get a default email sent to unsubbed-_MailingListName_@example.com whenever somebody unsubscribes as well.

If you use your own custom URLs, you can still access some of the information submitted in the form. The DreamHost script redirects your URLs with the following variables:

  • address=user@example.com
  • name=Their+Name

The following example reads the name and address entered on the form on a custom Subscribe URL response page:

<?php
$email = $_GET['address'];
$name = $_GET['name'];
?>
Thanks for subscribing, <?php echo $name; ?> - we'll send our next newsletter to you at <?php echo $email; ?>!

This example assumes you're using a PHP file and the name form field is required, otherwise you'd need to get a little fancier to display something else if the name field is blank.

Using a PHP conditional to check for data in the name field:

<?php
if ($name!="")
echo "$name"; ?>

Thanks for subscribing<?php if ($name!="") echo ", $name"; ?> - we'll send our next newsletter to you at <?php echo $email; ?>!

This way, the name field does not print if it contains nothing.

If you need to suppress these query variables (e.g., if you are using WordPress), you can do so by adding the nourlvars=1 query variable when adding someone to the list.

A note for WordPress sites

If your site uses WordPress, you must link to the default "Ugly" permalink type (of the form "http://example.com/?p=N"), even if you use any of the "Pretty" permalinks instead. This is because the mailing list scripts automatically add parameters to the URLs which don't work with "Pretty" permalinks.

If you edit a post or a page, you can find the post ID number in the URL line after the post= text. For example, you might see something like:

  • http://example.com/wp-admin/post.php?post=3141?action="edit", so the post ID is "3141".

In this example, you would use something like:

  • http://example.com/?p=3141

as the URL of the page even if it also has a "Pretty" permalink such as:

  • http://example.com/mailing_list_unsubscribed

You may also create these pages outside WordPress to avoid the problems with permalinks.

See also

 

Did this article answer your questions?

Article last updated PST.