Creating a Subscription Form for PHPlist

In our previous articles we've walked through the initial steps and settings needed to get our PHPlist installation set up properly. So, we have everything ready to go, but we need to have a way for our users to sign up and be added to the mailing list.

Create the Subscription Form

If you are not already logged into your PHPlist admin area, begin by logging in. In the example for this article, we installed PHPlist to our newsletter directory, so our admin login is located at example.com/newsletter/admin.

Click the subscribe pages link in the menu on the right side of the screen.

Click the add a new one link

On the next page, you will see quite a few options available. It's not required, but if you're comfortable with HTML, you can edit the Header and Footer of this page to more closely match your website's look and feel (colors, font, etc.).

To set up a quick and simple subscription form for our site, we will enter the following information:

Click the Save and Activate button at the bottom of the page.

Adding the Subscription Form to Your Website

The quickest way to add the subscription form to your site is to simply add a link from your main site to your PHPlist directory. In our example, we installed PHPlist to the newsletter directory, so we would link to http://example.com/newsletter. From the main PHPlist page, users will see all of the available mailing lists (newsletters) which they can subscribe to. Users can also unsubscribe from any of the lists as well. While this is an easy way to link to the form, the form doesn't contain any links back to your site and will not necessarily fit in with your site's overall design.

Inserting the subscription list into a page on your site.

In order for us to integrate the subscription form with our site, we will first need to view the subscription page so we can copy the form code.

By clicking on the mailing list link on the PHPlist main page, we are taken to the subscription page for our mailing list. For our example, this is located at: http://example.com/newsletter/?p=subscribe&id=1

By viewing the source code of the page, locate the code beginning with <form> and ending with </form>. This is the code we want to copy so we can insert it into another page. Here's the code from our example:

You'll want to paste this code into a text editor such as Notepad (for Windows) or TextEdit (for Mac). So that this code will work in the page where we will be inserting it, we will need to add an action to our form tag. Here's what the original tag looks like:

<form method=post name="subscribeform">

We want to edit this so that it has an action that points to the actual subscription form in PHPlist:

<form method=post name="subscribeform"action="http://example.com/newsletter/?p=subscribe&id=1">

Now we have the code to insert this into a page on our site. Depending on how your site is built, you can go about this in different ways. If you create your code yourself (for instance using Dreamweaver, iWeb, etc.) you can either insert this code into an existing page or create a new page for your site and place the code in that page.

If you use a CMS (Content Management System) such as WordPress, Joomla, or Drupal, you can either use a plugin/module specifically for adding PHPlist or a method to manually insert code. Using WordPress as an example, we'll add a text widget, which allows us to manually insert code into our sidebar (or other widgetized area in WordPress). You could also simply add this code to a WordPress page in the HTML tab of the TinyMCE editor in WordPress (the editor you use when creating or editing Pages and Posts).

Because the PHPlist form code uses tables, depending on your theme (which dictates the width of your sidebar), this may not look the way we want it to at first.

In order for the form code to look good on our site, we'll either want to increase the size of our sidebar (using CSS styles) or edit the code. If you're comfortable with HTML, you can edit the code so it fits a bit better. For this example I removed the table code, shortened the field sizes and edited the Subscribe button.

Now the form fits nicely into the sidebar:

In our next two articles we'll walk through importing contacts to a mailing list and sending our first message to our subscribers.