How to create a subscribe form for your phpList mailing list

If you’re following along in our phpList tutorial, we previously have installed phpList and created a mailing list that users can subscribe to. The next step is to actually create a form that allows users to subscribe to your list. For example, in the right sidebar of your website, you may have an area where it says, “Subscribe to our mailing list!” and then asks for the user’s email address. We will create that form in this tutorial.

There are two approches to this step, depening on how much you want to customize the subscription page. The first step we’ll outline below is the easiest method, while the second approach gives you much more control over how your sign up for looks.

Sign up form 1 – A separate signup page

To create a subscribe page, follow these steps:

1. Log into your phpList admin page (if you’re following along with our tutorial, we go to phplist.inmotiontesting.com/phplist/admin )
2. Click “subscribe pages” in the right sidebar
3. Click the “add a new one” link at the bottom of the page
4. The page you’re looking at now gives you many options. If you have html experience, you can customize the header and footer of the page so it matches the layout of your own website. In our example, we did a very basic subscribe page. Here are the settings we used:
   

   Title:	Mailing List 3
   Language File to us:	english
   Select the lists to offer:	We selected, “Mailing list 3, this is our 3rd test Mailing list”.

5. Click Save and Activate.
6. After you’ve saved your changes, it will bring you back to a page that lists all of your subscribe pages. Find the subscribe page you just created, and click the “view” link next to it.
7. In our example, our subscribe page URL is https://***.***.com/phplist/?p=subscribe&id=1 and it looks like this:
   

On your website, you can now link to your custom subscribe page so your users can sign up for your mailing list!

Sign up form 2 – Integrating your Signup form on a current page

In our example, we’d like to incorporate the signup form into our WordPress sidebar. In this way users don’t need to leave the current page, and they can easily sign up for our mailing list from any page in our site that shows the sidebar.

1. If you haven’t already, create a custom subscribe page as we have described above. After you have created the subscribe page, visit the URL. In this example, we’ll visit https://***.***.com/phplist/?p=subscribe&id=1.
2. We will be copying the form code created by phpList. View the current page’s source code, and copy the code that begins with <form and ends with /form> into an editor on your computer, such as notepad in windows. In our example, the code we copied is:

    
   <form method=post name="subscribeform">
   <input type="hidden" name="formtoken" value="19ebe60baf0b60ef7cfb37536fb38459" />
   <table border=0>   
   <tr>
   <td>
   <div class="required"> Email</div>
      
      </td>
      <td class="attributeinput">
      <input type=text name=email value="" size="40">   
      <script language="Javascript" type="text/javascript">addFieldToCheck("email","Email");</script>
      
      </td>
      </tr>   
      <tr>
      <td>
      <div class="required">Confirm your email address</div>
      </td>   
      <td class="attributeinput">
      <input type=text name=emailconfirm value="" size="40">   
      
      <script language="Javascript" type="text/javascript"> 
      addFieldToCheck("emailconfirm","Confirm your email address");
      </script>
           
      </td>
      </tr>
      <tr>
      <td colspan=2>         
      <span class="attributeinput">
      <input type=checkbox name="htmlemail" value="1"  />
      </span>         
      <span class="attributename">I prefer to receive emails in HTML format
      </span>
      </td>
      </tr> 
      </table>
      <input type="hidden" name="list[4]" value="signup">
      <input type="hidden" name="listname[4]" value="Mailing List 3"/>
      <div style="display:none">
      <input type="text" name="VerificationCodeX" value="" size="20">
      </div>
      
      <p>
      <input type=submit name="subscribe" value="Subscribe to the Selected Newsletters" onClick="return checkform();">
      </p>     
      </form>
   
   

3. Next, you’ll need to update the form action to point to your actual subscribe page. In this step, you’ll be updating the code that you copied into a text editor. The original code will look like this:
   <form method=post name=”subscribeform”>
   You need to add an ‘action’ attribute and point it to your subscribe page. In our example, the updated code looks like this:
   <form method=post name=”subscribeform” action=”https://phplist.inmotiontesting.com/phplist/?p=subscribe&id=1″>
4. You now have the necessary code to use on your site to insert into your subscribe form! In our WordPress site, we copied the code into a new Text widget:
   
5. The code used by phpList for the subscribe form uses tables, which doesn’t always look nice (see the before and after images below). If you are familiar with html code, you can edit the code you pasted in step 4 above so the form looks better with your site:
   

   Before:	After: