Add a simple straightforward sign-up form to your WordPress site. Integrates with phpList, the most popular open-source newsletter manager.
Sign Me Up installed in WordPress Twenty Fourteen Theme
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).
Default subscribe page in phpList. Any form not using AJAX will result in being redirected to this.
Example of Sign Me Up widget in a WordPress site. Styling is inherited from the theme (Flycase by WPWolf)
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.
Default subscribe page in phpList. Any form not using AJAX will result in being redirected to this.
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:
Subscribe Pages overview in phpList
Configuration settings for subscribe page
More configuration settings for the subscribe page
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:
Configuration options for the widget
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:
Responsive layout - normal width
Responsive layout - narrower width. Notice the submit button has moved below the email address box.
Responsive layout - mobile. Layout collapses to single column (no sidebar)
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.
Error message - email left blank
Error message - invalid email
Success message
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.
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
Thanks for starting again to create a plugin to integrate wordpress and phplist
You’re welcome!
It’s a shame that phpList Ajax handler only allows one attribute. You did a great job, I like it a lot and may use it somewhere, but that restriction is very limiting.
I agree that it is limiting. One idea as a workaround is to request more information from your user during the email confirmation process. For example, after their email has been confirmed, also have another form that request other info (such as first name, last name, zip code, etc).
There is some API development happening with phpList which will hopefully expose more functionality, especially with regards to the AJAX handling.
Hey Jaromy, im using your plugin, is very good, but i have a problem. always say the same message when i suscribe to my newsletter.”Unfortunately a network error occurred. Please try again. If this problem persists, please contact the webmaster.” but the email add to my list in phplist. can you help me?
Hi Sergio,
Are your domains for wordpress and phplist the same? E.G. site is on http://www.sergio.com, and phplist is on http://www.sergio.com/phplist? Check out this link for more info: https://wordpress.org/support/topic/unfortunately-a-network-error-occurred-on-self-hosted-phplist?replies=14.
If you are still having problems, let me know a few more details about your site & setup. Also, make sure you are running phplist version 3.0 or later.
Cheers,
J
Hi Sergio!
Just dropping a lot that I really appreciate this plugin. I had a hard time, surfing through all the opt-in and playing with all kinds of plugins. I finally wrote the code, but I really do appreciate your hard work in bringing this plugin!
Mistake, it was Jaromy ~~~ Thank you Jaromy
You’re welcome Lim!
I’m having the same problems as Sergio. Sad as I really like the look of this app! But I don’t know how to generate the URL that is required for the ‘Subscribe Page’. I’ve just no idea where to find it on the PHP site – and I cant see anywhere in your instructions where I can find it? You’re instructions are so clear in all other respects – but I think you miss something out here for the inexperienced, like me.
Hey Ben – in phpList, go to the Config menu, then choose Subscribe Pages. Click on the subscribe page that you want, then just cut and paste the URL from your browser.
Great, thanks so much! Works a treat
Hi Jaromy,
I’m having trouble getting your plugin to work. Even though the subscription process works, I’m getting the infamous “Unfortunately a network error occurred” message.
The signup widget is at http://www.website.com/category/news/ and the subscription page is at http://newsletter.mydomain.com/?p=subscribe&id=1
I’ve enabled the cross-domain workaround in an .htacess placed at the document root of http://newsletter.mydomain.com
It seems strange to me that the signup process is OK but I still get that error.
Do you know what the problem could be?
Thanks in advenace,
Jeremy
Jeremy,
Hmmm… that’s odd. Not sure why it is not working. If you want, send me the real URL’s (i.e. real domain names) and I can take a look at it.
Cheers,
J
Hi Jaromy,
you can test the described behaviour here: http://jeremy.aws.xaos.it
Thanks,
Jeremy
Hi Jeremy, sorry for the delay in getting back to you. It looks like there are 2 problems:
1) Cross-domain AJAX – phpList is on a different domain or subdomain than WordPress, so you will need to change your .htaccess file to allow access. See “Cross-Domains” section in this article for more info, or you can also see this thread: https://wordpress.org/support/topic/unfortunately-a-network-error-occurred-on-self-hosted-phplist.
2) On the phpList subscribe page (http://newsletter.funweek.it/?p=subscribe&id=1), you cannot have the three checkboxes. You can only have one mailing list for the subscribe page, and it must be automatically set (don’t allow the user to choose).
Hope this helps,
Jaromy
Hello,
I have this error message every time, even if the email is correct :
“Please check that you have entered a valid email address and try again.”
I can’t see where the problem could come from ?
Thanks in advance,
Nicolas
Hey Nicolas – What is the email address that you are trying?
Hello,
I try various Gmail adresses, including mine. You can test by yourself here (bottom left column) : http://source001.com/wordpress/
Thanks,
Nicolas
Nicolas – your phpList subscribe page is configured to require the email confirmation field. Sign Me Up does not support this, so you will have to make sure to check the option “Don’t display email address confirmation field” in the phpList Subscribe Page Configuration. Review the screenshots above if this is not clear.
Cheers,
J
It worked!
Thanks 🙂
Nicolas
Hello,
i have phplist 3.0.12 with wordpress 4.2.2 with default install configs. I was not able to subscribe email adresses, because the emailconfirm variable was not sent to phplist.
So I added in ‘wp-content/plugins/sign-me-up/assets/js/magic.js’ following lines after line 40:
var params = ‘&’ + $(form).serialize();
var emailconfirm = params.replace(/&email=/,’&emailconfirm=’);
params = params + emailconfirm;
That is the correct default behavior – Sign Me Up will not send the emailconfirm variable. The correct way to fix this problem is to configure phpList to not require this variable. You do this in the Subscribe Pages Configuration part of phpList. If you do this, then you should not have to alter any of the code.
As an aside, the emailconfirm variable is not really needed because of phpList’s double opt-in system – an email will get sent to the user signing up. If they enter the wrong email, then they will never get the confirmation email, and so will know to try filling out the form again.
Of course, if you want to alter the plug-in code to customize to your needs, feel free – that is what open source code is all about! I’m not trying to discourage you from experimentation :).
-J
By the looks of it, this plugin only works with a single email list. I would like to offer users a choice of several lists they could join (or on some pages just one particular list). I’m assuming this is due to the inflexibility of the phpList AJAX code? Do you think this is something you will be able to add in the future?
thanks, Rob
Hey rawrob – yes, unfortunately it’s due to the existing AJAX handling code in phpList. I know they are adding some new plugin capabilities for the new version of phpList, so I’ll take a look at see what can be done for the future.
Great, thanks.
I will expect PhpList improve ajax
Very thaks
Thank you for the plugin.
Hello Jaromy,
How to implement the plugin in a post or page and not just within a widget?
Hi Lestraw,
Unfortunately, there are no separate embed codes for placing the plugin into a post or page. You must do this within a widget.
Cheers,
Jaromy
UPDATE – pls see my reply to Stefan. There are a few workarounds that might help you.
Hi Jaromy,
can I use a shortcut for insert the formula on the page?
Hi Stefan – unfortunately, no. Please see my previous reply to Lestraw. Perhaps in a future release… until then, try using a theme or plugin that allows for custom widget areas. Flycase theme by WPWolf is one example of a great theme that allows for custom widget areas, and you can place these anywhere on a page via shortcode embeds. Also, keep in mind that the Sign Me Up plugin can only appear once per page.
Cheers,
J
Hi. I’m getting the error message “unfortunately a network error occurred…” I’m not very good at this sort of thing so there is probably something simple I have missed. It does seem to be working, sort of, because I have tried to sign up with my own email address and I get a message saying I must click on the link to confirm. But still, on my site it says there was an error. I guess it is related to which page URL I use – can you be clearer about what the URL I should use would be?
Hayley – the page URL is for the phpList subscribe page you setup, ie http://www.hayleybarrett.net/phplist/?p=subscribe&id=3. Make sure to include the “www” prefix in the URL in the Sign Me Up widget – it looks like you are just using “hayleybarrett.net”, and it’s this difference that would be causing the error message.
For more info, see this post – specifically my reply about six entries from the top: https://wordpress.org/support/topic/unfortunately-a-network-error-occurred-on-self-hosted-phplist
Hope that helps!
Cheers,
Jaromy
I was trying to get this to work yesterday when I was tired. Just had another look at it and the URL link was missing the “www”. All sorted and working now.
Glad it is working!
Hey Jaromy, im using your plugin, is very good, but i have a problem. It throws always error ”Unfortunately a network error occurred. Please try again. If this problem persists, please contact the webmaster.” but the email is added to the list. can you help me?
My main WordPress site is installed in: http://domain.tld
PHPList is installed in the same domain but in subdomain: http://newsletter.domain.tld
My website runs on nginx server and .htaccess is not supported.
Please help to solve this problem.
Hi Sarangan T. – unfortunately right now the only way is to use .htaccess. I understand that not all hosts support/allow this, and also it does not solve the problem for people wanting to use the hosted version of phpList. So I am working on an alternate method to eliminate this error. As of yet, I don’t have a release date. Thanks!
Hi Jaromy, if I wish to sign in to a phplist newsletter, I leave the wordpress-page and go to my phplist-page. I want to stay on the WordPress page. What can I do? Thanks a lot!
Hello, is your plugin compatible with phplist.com subscription ?
Hi Alain,
Unfortunately at this time my plugin is not compatible with phplist.com, due to cross-domain AJAX issues. I’m hoping to resolve this in the next major release of the plug-in. Release date is still TBD.
Cheers,
Jaromy
hi, i have been trying to use the plugin but it is giving me in invalid email address error for any email address i type. you can check yourself at my website!
http://www.bhabiskitchen.com/test-email/
Hi, sorry I was not able to help you with your issue. It’s been a busy November. Looks like you have figured out a workaround. Best of luck with your website and business.
J
Thanks a lot for such a simple to use but extremely useful plugin
Thank you! I’m glad you find it useful and easy to use 😉
I have a phplist setup and working on a separate domain/server http://newsletter.thecoachhouse.com/?p=subscribe&id=1
Trying to embed with you plugin to coachhouseconcerts.com, this is a dev site.
As you will see I have disabled all features as stated in post. I also disabIedsecurity measures that my effect this.
I have added the htaccess mod, server enabled. Still getting Unfortunately a network error occurred. Unfortunately our old All-in-One just crashed for the last time. We are down with a 43k list that needs to go out.
Donation is not a problem. Any assistance please
Hi Cliff – you need to remove the email confirmation field on the subscribe page (http://newsletter.thecoachhouse.com/?p=subscribe&id=1). Unfortunately, the plugin won’t work with it and you’ll get the “network error occurred” error message. The only thing that can be on the subscribe page is a single field – the email address. Let me know if this solves your problem.
Cheers,
J
Check out these two screenshots – this is how the phplist subscribe page should look and be configured as:
http://www.jaromy.net/wp-content/uploads/2015/01/phpList-default-front-end-600×477.png
http://www.jaromy.net/wp-content/uploads/2015/01/phpList-Subscribe-page-config1-600×498.png
BTW – I’m honored that the coach house is using my plugin! Some great concerts happening there …
Also – I’m still getting this error when submitting:
"XMLHttpRequest cannot load http://newsletter.thecoachhouse.com/?p=asubscribe&id=1. Origin http://coachhouseconcerts.com is not allowed by Access-Control-Allow-Origin."So, looks like something is still not correct with the .htaccess. Double check that the file exists in the root directory of your phplist domain – so it should be in the root dir of newsletter.thecoachhouse.com (note: the root/base directory, not the phplist directory). Also, make sure the contents of .htaccess look like:
# Allow Cross-Domain AJAX with AJAX withCredentials=false (cookies NOT sent)Header always set Access-Control-Allow-Origin "http://coachhouseconcerts.com"
Header always set Access-Control-Allow-Methods "POST, GET"
That is, no www prefix in the URL.
Hi Jaromy, thanks for this plugin, it’s great, really.
Just a quick question: since I’m working on a website where there is no widgets area (because the client doesn’t need it), is there something like a shortcode to embed the Subscribe form inside of a page (instead of a widget)?
Thanks in advance for your kind reply. 🙂
Hi Riccardo,
Unfortunately no, there is no support for shortcodes to embed the form. When you say your client doesn’t need widgets, are you talking about, for example, a sidebar?
As a workaround, you could still use widgets, but just not setup a sidebar area (i.e. have it be blank and zero width). For example, if you just wanted to place the subscribe form at the bottom of the page, just use a single widgets to place it there, without having a sidebar.