Tech tip: Campaign Monitor subscription form for Wordpress/Woothemes

/

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.

Woothemes's Campaign Monitor widget in action

However, at present that widget has only one formfield and adds only email addresses to your database -- the widget doesn't allow for the collection of names as well.

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.

Paste the javascript into the All-In-One SEO pack admin console

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

Text sidebar widget containing form code

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:

Subscription sidebar widget, unstyled

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:

<!-- start --> <div id="theForm"> <form action="http://YOURSITEADDRESS.createsend.com/t/r/s/xxxxx/" method="post" id="subForm"> <div> <label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br /> <label for="xxxxx-xxxxx">Email:</label><br /><input type="text" name="cm-xxxxx-xxxxx" id="xxxxx-xxxxx" /><br /> <input type="submit" value="Subscribe" /> </div> </form> </div> <div id="confirmation" style="display: none;">Thanks for subscribing</div> <!-- end -->

...to:

<!-- start --> <form action="http://YOURSITEADDRESS.createsend.com/t/r/s/xxxxx/" method="post" id="subForm"> <div> <input type="text" name="cm-name" id="name" value="Name" size="15" style="border: 1px solid #d9d9d9;" /> <input type="text" name="cm-xxxxx-xxxxx" id="xxxxx-xxxxx" value="Email address" size="15" style="border: 1px solid #d9d9d9;" /> <input type="submit" value="Go!" style="border: 1px solid #d9d9d9;" /> </div> </form> </div> <div id="confirmation" style="display: none; font-size:11px;padding-top:24px;">Thanks for subscribing!</div> <!-- end -->

And the form will look like this:

Subscription sidebar widget, styled

...which is of course the way it looks on our site right now. And, of course, this will work in any Wordpress site - not just Woothemed ones.

Mission accomplished. Thanks to the people behind Wordpress, Woothemes, Campaign Monitor, and All-In-One SEO for their work!

--