Overview
This article walks you through creating 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="https://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 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. For example: <input type="hidden" name="list" value="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 autoresponder 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. For example: <input type="hidden" name="domain" value="example.com"> |
Section 2 — 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.
<!-- 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 — Submit and Unsubscribe buttons
Subscription confirmation emails:
- must be replied to in order to verify a subscription.
- are sent by default from donotreply@dreamhost.com, which cannot be modified. Only announcements sent to current subscribers will be sent from the list's address, not the initial confirmation email.
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. |
Full example of basic form
This is the full HTML-only code example of how a very simple subscription form would look like.
<html> <body> <form method="post" action="https://scripts.dreamhost.com/add_list.cgi"> <input type="hidden" name="list" value="MailingListName"> <input type="hidden" name="domain" value="DomainName"> <!-- 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> <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> </form>
<body> <html>
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:
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 |
|---|---|
| _https://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. |
| _https://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. |
| _https://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. |
| _https://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. |
| _https://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 https://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:
- https://example.com/wp-admin/post.php?post=3141?action="edit", so the post ID is 3141.
In this example, you would use something like:
- https://example.com/?p=3141
as the URL of the page even if it also has a "Pretty" permalink such as:
- https://example.com/mailing_list_unsubscribed
You may also create these pages outside WordPress to avoid the problems with permalinks.
