Sign Me Up

Add a simple straightforward sign-up form to your WordPress site. Integrates with phpList, the most popular open-source newsletter manager.

 

 

Features

• Provides a back-end connection to the powerful open-source mailing list manager, phpList
• Maintains the consistent look, feel, and branding of your WordPress site
• Uses AJAX – no page refresh or redirects. Status & feedback are displayed on the same page as the form
• Minimal, elegant, simple. Seamlessly blends in with your theme by incorporating existing styling rules
• Easy customization – change the text of each form element so it says exactly what you want
• Widgetized – easily add it to your site via drag & drop
• Error checking – client side validation via popular jQuery Validation library provides immediate feedback to the user and reduces erroneous data

 

---

Download

To download the plugin, visit the official “Sign Me Up” page on WordPress.org. It’s fully automated, so any updates will automatically appear here first. You can also browse version history and download older versions, if needed.

go to plugin page

---

 

Introduction

Sign Me Up is a WordPress plugin that I recently wrote. It allows you to add a sign-up form to your WordPress site. Yes, there are a million other signup form plugins available for WordPress. But what makes this one standout is that it is specifically designed for use with phpList. According to their website, phpList is the most popular open-source newsletter manager with over 1.5 million downloads. But miraculously, there are only a handful of WordPress plugins that work with it. And most of these are outdated and haven’t been updated in a few years.

The two most promising ones that I did find were yPHPlista and Newsletter Sign-Up. Unfortunately, I found problems with both. For yPHPlista, it hasn’t been updated in almost 4 years.  Furthermore, you can only have one instance of the widget in your entire site. This didn’t work for me, because I wanted to place the form on different pages – Home Page, Contact, and Upcoming Shows. For Newsletter Sign-Up, this plugin is actively being developed and supported. And it supports pretty much all of the major mailing list services, such as MailChimp, Aweber, ConstantContact, and phpList. However, I just could not get it to work with phpList. It kept refreshing the page and redirecting me to the subscribe page on phpList, when instead I wanted to use the AJAX form on my existing WordPress site and avoid the page refresh.

Design Goals

Before we dive into the nitty gritty, let’s take a look at how an ideal signup form should behave (IMO). These behaviors served as the target or roadmap while developing this plugin.

First and foremost, the user should not be whisked away to a different page after (or during) sign up. No page refreshes or redirects should happen. Any feedback to the user, such as error messages, validation messages, status, etc, should occur in place. There are a few reasons for this. Your WordPress site/theme is your branding, and you don’t want to send users to a different page where the visual elements are completely different (see two screenshots below).

 

But there is also a more practical reason: signing up for your mailing list was most likely a tangent for them. Keeping them on the same page lets them go back to whatever it is they were looking at, faster, without any additional mouse clicks to return to a previous page.

Secondly, a signup form should integrate seamlessly into whatever WordPress theme is being used. Additionally, if the theme being used is responsive (i.e. mobile friendly), then form should also be responsive. I’ve come across other signup forms that work great, but you end up spending so much time overriding existing styles with CSS in order to get it to fit your theme.

 

Requirements

Ok, now that we know what we’re aiming for, here are some basic requirements. You must have installed:

• A WordPress site (self-hosted), version 4.0.1 or later
• phpList, version 3.0.10 or later (hosted or self-hosted)

I realize that these are very recent versions of both pieces of software. These happen to be lowest versions that I’ve personally tested the plugin with. Conceptually, I believe the plugin could work with older versions – WordPress 3.0.0 or later, and phpList 3.0.0 or later. But this assumption is based on change log notes and looking at code, not actual testing. So, use older versions at your own risk – it may or may not work.

Cross-Domains

If your phpList and WordPress installations exist on different domains or subdomains, then you’ll need to enable cross-domain calls for AJAX. This is also true if you use the hosted version of phpList. To do this, you will need to add the following lines of code to your .htaccess file:

# Allow Cross-Domain AJAX with AJAX withCredentials=false (cookies NOT sent)
Header always set Access-Control-Allow-Origin "http://www.mydomain.com"
Header always set Access-Control-Allow-Methods "POST, GET"

This .htaccess file needs to reside at the root directory of the phpList domain/subdomain. If the file does not already exist, then just go ahead and create a new one. Also, be sure to replace “www.mydomain.com” with your own domain name where phpList is installed.

WWW prefix

Related to the issue of cross-domains is the www prefix, i.e. “www.mydomain.com”. Most websites are setup to use this prefix, but it’s not required. Some people just prefer the shorter URL without the prefix – e.g. “mydomain.com”. Whatever you choose, just make sure that you are consistent throughout your website. If not, you’ll run into the cross-domain issue with AJAX. Below is an example that ensures consistent www-prefix usage throughout your website. Add this bit of code to the .htaccess file (in the root directory of your domain):

RewriteEngine On
RewriteCond %{HTTP_HOST} ^yourdomain.com [NC]
RewriteRule ^(.*)$ http://www.yourdomain.com/$1 [L,R=301]

NOTE: replace your domain.com with your own domain name.

 

Install & Configure phpList

Make sure your phpList installation is properly setup, configured, and working. Sign Me Up is basically just a front-end to phpList, so if phpList is not working first, then Sign Me Up won’t work either. Specifically, you’ll need to create a subscribe page that’s more basic than the default page. In the end it will look like the page below.

 

 

Notice that the subscribe page only contains a single field – the email address. No additional fields (or “attributes” as phpList calls them) are allowed – no email confirmation boxes, or checkboxes for HTML or text. Unfortunately, the AJAX handling code in phpList only allows for the email address. So, in order for the Sign Me Up plugin to work correctly, this restriction needs to be followed. If need be, you can use the following screenshots as a guideline to help you:

 

 

 

 

After you’ve created this subscribe page, test it out and make sure it works – i.e. sign up as if you were a user and make sure you get all of the confirmation emails, that your email address gets added to the list of subscribers, etc. If this works, then you’re ready to move on to the next step.

Install & Configure Sign Me Up

Install the Sign Me Up plugin into your WordPress site. Sign Me Up installation is no different than any other plugin, so if you’ve installed plugins before then you know what to do. If you need help with this, you can find a good guide here at WPBeginner.

Once the plugin is installed and activated, you are ready to configure it. Head over to the widget control panel in your Dashboard (Appearance -> Widgets). You’ll see a page with two columns – on the left is a list of all the available widgets; on the right is list of widgetized areas of your website – places where you can add a widget. Locate the Sign Me Up widget and add it to the widgetized area where you want it to appear on your website.

You can add as many instances of the Sign Me Up widget as you’d like to your website, but there is one restriction – you can only have one single Sign Me Up widget per page. So for example, you can place the widget in a sidebar, but then it can’t also appear in the footer for that same page. The reason for this restriction is largely because the coding becomes way more complex. And for me, having one form per page really isn’t a deal breaker. I don’t want to bombard my users with subscribe forms all over the place – one well-placed form is really all I need.

Next, we are going to customize the form. Click the little triangle next to the widget and it will expand, showing you options for Sign Me Up. Here you set up the following parameters:

 

 

In case the screenshot isn’t totally self-explanatory, here’s a list of the parameters and their function:

• Title – (optional), this is the widget title, such as “Join Our Mailing List” or “Newsletter Sign-Up”
• Text before form – (optional), this goes after the title, in case you want to elaborate, add disclaimers, etc.
• URL of phpList ‘Subscribe Page’ – (required), this is the URL of your Subscribe Page that you setup in the steps above
• Placeholder text – (optional), this initially shows up inside the email address box, then disappears once the user starts to type
• Label text – (optional), this goes above the email box, and is usually something straightforward like “email address”
• Button text – (required), also usually something straightforward like “submit”, “subscribe”, “sign up”, etc.

 

Testing & Results

Once everything is setup, go ahead and visit your website page containing the Sign Me Up widget. Try it out and see what happens – resize the window, submit without typing anything, try an invalid email address. Finally, try submitting a valid email address such as your own. Double-check that your email address gets registered in phpList and that you get the proper email notifications.

Speaking of email notifications, those are handled directly by phpList. Sign Me Up does not handle any of that, so any styling or formatting must be set up in phpList. It’s not entirely obvious how to do this, so if you need help, check out another post I’ve written here: How to configure phpList to send HTML emails.

Below are some screenshots of the plugin installed in the default WordPress theme, Twenty Fourteen. This first set shows how the plugin layout remains fluid and responsive with the theme:

---

 

---

 

The next few screenshots illustrate the different types of feedback given to the user. The form does some basic error checking – for example it will show an error if the user leaves the box blank. It also does some validity checking on the email format. This just checks that the form is correct – i.e. “user@domain.com”. It won’t actually check if the domain is valid, so “john@gmails.com” will pass. If everything checks out OK, then the form will be submitted and you’ll get a response from phpList. The exact message (and HTML formatting) can be specified in the subscribe page you set up earlier.

 

---

 

---

Support

If you have any questions, feel free to leave them here in the comments section. Chances are, someone else might also have the same exact question!

Also, if you do like this plugin and/or have found this guide to be helpful, please consider making a donation. Behind the mass of wires, electrons, servers, and cloud data, there is an actual human being that actually has bills to pay so that he can have a roof to sleep underneath and food to eat. Any amount truly does help. Furthermore, the benefits are tied directly to this project – your financial support will enable me to continue to provide technical support and future updates for this plugin.

Please donate

Summary

I hope this guide has been helpful. WordPress has an amazing community of users and open-source contributors, and I am incredibly grateful for this. Sign Me Up is my contribution back to that community. I hope many of you will find this plugin useful and beneficial, making your website building just a little bit easier.

 

Cheers!

-J