Blog

I'm a huge fan of CMS theme agency Woothemes and of email newsletter service-provider Campaign Monitor. I use both to help serve my clients, and my clients' own clients. The Chilli Chocolate Marketing site is itself a tweaked version of a Woothemes design, and the "Subscribe to our newsletter" feature on each page of the website has a Campaign Monitor subscription database beneath the surface.
Many recent Woothemes Wordpress themes feature out-of-the-box support for Campaign Monitor in the form of a pretty "enter your e-mail address" widget.

Having names is really important when it comes to customer communications. I want to be able to begin emails to my subscriber John with "Dear John" and in some instances it's nice to have the recipient's name in the subject field too. In my experience campaigns that feature personalisation of subject line or salutation outperform those that don't, often by a huge margin. So, while Woothemes's built-in subscription applet is cool, it doesn't meet my requirements. When a site visitor subscribes to one do my newsletters, I want to know his or her name!

And you know what? I also want to have that site-interaction recorded in the site's Google Analytics stats.

So, what I want is a Wordpress widget that

subscribes a visitor to a Campaign Monitor subscription list with name AND email address

logs a hit in Google Analytics

looks as good as the Woothemes-supplied email-only widget

The easiest way to insert content of any sort into the sidebar of a site running Wordpress is to use a Text widget. So that's the first task: find some code to use in a Text widget that enables subscribers to enter both name and email address, and pipe that info to Campaign Monitor.

Fortunately Campaign Monitor has done most of the hard work already with this AJAX subscription form utilising PHP, cURL, and jQuery. At the bottom of the page you'll see a "bonus version" of the form tweaked for Google Analytics integration; that's the one we want. Follow the instructions on that page.

If you follow the instructions correctly, you'll end up with a static html page that subscribes a site visitor to your Campaign Monitor subscriber list and registers a pageview in your Google Analytics stats. So far so good. However since the javascript is within the <head> tag, the entire page's code can't be inserted into a Text widget.

So what we really need now is some way of inserting custom code - the form javascript - as a custom header in PHP pages generated by Wordpress so that the Text widget only contains the form itself.

We need the plugin that no Wordpress site administrator should ever be without: Semper Fi Web Design's All-In-One SEO Pack plugin. Aside from the fact that it's an utterly indispensable SEO tool, AIOSEO also allows you to add, you guessed it, custom headers to pages within your Wordpress site.

So, in the AIOSEO admin console, copy the segments of javascript from the working static html and paste them into the appropriate section -- or all of them if, like me, you want to be able to put a subscription form on pages, posts, and the front page.

Then create a Text widget, give it a title like "Subscribe to our newsletter", and as its body paste in the subscription form itself.

Position that Text widget in a widgetised space within your page. The form will show up in that space and, assuming you've pasted in your Campaign Monitor credentials correctly, it will function correctly.

However, it'll look ugly:

What we want is for it to look as slick as Woothemes's native widget.

This can be achieved with only a few characters of CSS (and a tweaked "Submit" input button). Change: