Lee Willis

 

Campaign Monitor Ajax Subscription Widget for WordPress

January 11, 2011 by Lee | 44 Comments

I’m a big fan of Campaign Monitor for managing email lists and campaigns. I recently set up a list for a friend, and I agreed to put a small subscription form in his sidebar at the side of his WordPress site, but also have a dedicated page for people to visit to sign up – so that he could share the link to the page on Twitter, Facebook etc.

Now, Campaign Monitor make it pretty easy to create a sign-up form, but by default the form will take you off your original site, onto a Campaign Monitor “Thank you for subscribing” page. I wanted to see if I could improve on that a little, so, having worked with the Campaign Monitor API before for a Joomla! / Campaign monitor integration I sat down to see what we could do.

The result is the Ajax Campaign Monitor Forms plugin for WordPress.

Adding a form as a Widget

Currently it’ll let you create a widget in any of your sidebars, add in your list ID, and account ID, choose whether to show the “Name” field as well as “Email”:

The result is a mini-form in your sidebar, that submits the request via Ajax without the user leaving your site.


Adding a form inline in a post or page

You can also add a form as a shortcode to your posts and pages. Simply click on the “Campaign Monitor” button that appears above the post editor:

You’ll be asked to insert your API key details:

and a shortcode will be placed into your post to display the form:

If you like the free plugin, then you’ll love the Premium version, including list stats in your WordPress dashboard, spam protection, and automated social media links. Check it out today.

44 Comments

Leave a reply →

  1. Frederic Sidler
    January 14, 2011 at 12:06 pm

    This is really nice. Translation is very important. Here are the two places I would like to see it. In the Greet Box WordPress plugin. Especially with a mobile version of WordPress. And in the pop-up over plugin from WPMUDEV.

    Keep up the good work.

    Reply
  2. Quena
    February 1, 2011 at 10:12 pm

    Thanks, Lee!

    Can the plugin be expanded to multiple lists? If so, can it (at the webmaster’s option) display a check-box for each list?

    Does the plugin also work for confirmed (double) opt-in lists as well? If so, can the plugin be expanded to automatically detect the list type and display a different confirmation message? (the list type can be changed, so this might be tricky.)

    Can the plugin be improved to allow a custom confirmation message?

    Can I have a pony?

    Reply
  3. Harvey Young
    February 1, 2011 at 11:02 pm

    News of the WordPress plugin is very timely for me, because I’m now working to add a newsletter option to my website, which is accessed mostly in Japan, and therefore is bilingual.

    I’d like to know if the widget can be set up so that “Country” can be seen in the signup box, along with Name and Email.

    Reply
  4. Tommy
    February 2, 2011 at 3:02 am

    Hi,

    I’ve installed this on a website, but using the shortcode acts strangley. It displays fine in Safari, but not in Firefox or IE. It just shows:

    [cm_ajax_subscribe id=0]

    Do you know any way to fix this?

    Thanks,

    Tommy

    Reply
    • Lee
      February 2, 2011 at 8:18 am

      Hi Tommy,

      Shortcodes are converted to HTML by the server, before the page is sent to the browser, so I can’t see any reason why choice of browser would make any difference. If you’ve still not worked this out can you send me:
      - A link to a page showing the problem
      - Detailed steps of how you’ve configured the plugin and/or a login to your WordPress dashboard.

      You can send the info here: http://www.leewillis.co.uk/contact/

      Thanks

      Reply
      • Tommy
        February 2, 2011 at 11:37 pm

        Thanks for the quick reply Lee. I’ve come to a similar conclusion – the exact same setup works fine hosted somewhere else. Looks like GoDaddy is the issue…

        Reply
  5. Dozza
    February 2, 2011 at 12:12 pm

    Would you be able to ‘score’ a Google Analytics goal using this form? That’s one benefit of having the url redirect on submission, that you can use GA to monitor/track how many times a form has been completed by setting the redirect url as a goal.

    Tidy work nevertheless!

    Reply
    • Lee
      February 2, 2011 at 12:33 pm

      I guess there are two options. The “success” javascript could output the events either to generate a virtual “page visit”, or it could output a GA “event”. Not sure which would be people’s preferred approach – making it work for everyone would be the challenge I guess!

      Reply
  6. Paul McEwan
    February 4, 2011 at 6:41 pm

    Update: IE8, Safari 5.0.3 and Firefox 3.6.8 only display the short code [cm_ajax_subscribe id=1]. Chrome displays the HTML Form.

    Reply
  7. Lee
    February 4, 2011 at 6:46 pm

    I’ve had a couple of people report this, but in all cases they were using their “Client ID”, instead of the main “Account ID”. The account ID needs to be the first one listed here:

    http://www.campaignmonitor.com/api/getting-started/

    Reply
  8. Andy Clayton
    February 6, 2011 at 6:12 pm

    Cool plugin.. haven’t actually installed this yet but I know I will get a lot of use out of this plugin as I add Campaign Monitor sign up forms to nearly every website I do and I hate the Contact Form 7 plugin. Is there a way to add this to my templates with a template tag? I don’t tend to use widgets.

    Thanks

    Reply
    • Lee
      February 6, 2011 at 9:41 pm

      There isn’t a template tag as such. However – you should be able to achieve what you want as follows:

      • Edit a post / page, and use the Campaign Monitor button in the editor to create a shortcode for the list you want
      • Make a note of the shortcode generated (It should be something like this: [cm_ajax_subscribe id=0]
      • You can then add it to your template using the do_shortcode() function. e.g.
        do_shortcode('[cm_ajax_subscribe id=0]');
      Reply
      • Andy Clayton
        February 11, 2011 at 8:19 pm

        Great thanks for your help… keep up the good work

        Reply
      • J Mann
        February 14, 2011 at 3:20 pm

        I’m attempting to do as you describe here, but can’t quite get it to work.

        I want to add the shortcode to the footer.php of my template (I don’t really use widgets.)

        To make sure I had the shortcode set up correctly, I created a new post and used the visual editor as you describe. (Interestingly, when I entered both API keys and submitted them, I just got a white screen with the number “0″. But when I pasted the shortcode [cm_ajax-subscribe id=0] into the post and tested it, I was able to successfully add to my list. Great!)

        Unfortunately, when I add to my footer.php file, nothing shows up.

        Am I missing an obvious step here? Anyway, thanks for the plugin. I’m excited to get it working because it’s a HUGE improvement over what I had there.

        Reply
        • Lee
          February 14, 2011 at 6:33 pm

          Hi. Firstly I assume you meant:

          [cm_ajax_subscribe id=0]
          and not
          [cm_ajax-subscribe id=0]

          Secondly – you can’t just insert the shortcode into your template files as-is – you need to wrap it in a call to do_shortcode() as described here: If you’ve done that and it’s still not working – can you drop me some login details onto the contact form and I’ll see what I can see…

          Reply
          • J Mann
            February 14, 2011 at 6:45 pm

            Ah – yes. I did mean to use an underscore.

            I added the following to my template:

            and it didn’t show up.

            That said, it could be that my theme (which is one I customized by modifying TwentyTen) is somehow causing the problem. In case it’s not obvious by now, I’m not an expert in this stuff, but trying to learn.

            I will send you login details, and I GREATLY appreciate your time. Thanks!

          • Lee
            February 14, 2011 at 8:32 pm

            For future record, you have to “echo” the output from do_shortcode, ie:

            < ?php echo do_shortcode('[cm_ajax_subscribe id=0]'); ?>

  9. Piers
    February 10, 2011 at 1:29 pm

    Thanks for the great plugin.

    I have been tinkering with it to try to make the form disappear when the subscription is successful and only display the success_style. What would be the best way to do this.

    Thanks

    Reply
    • Lee
      February 10, 2011 at 10:34 pm

      Hi,

      You didn’t say whether you’re using a widget – or a shortcode. I’ve assumed widget below – the changes will be similar for a shortcode – just in a different file!

      Open up cm-ajax-widget.php and look for these lines (Around line 187):

      if (data == 'SUCCESS') {
      jQuery('form#cm_ajax_form_< ?php echo $this->number; ?> .cm_ajax_success').show();

      Add an extra line to hide the form:
      jQuery('form#cm_ajax_form_< ?php echo $this->number; ?>').hide();

      Note: There shouldn’t be a space between ? and php …

      Reply
      • Piers Rueb
        February 11, 2011 at 2:29 pm

        Thanks for your quick response, i added something to the code you posted so it would still display the successful subscription text.

        jQuery(‘form#cm_ajax_form_number; ?> .cm_ajax_success’).show();
        jQuery(‘#cm-ajax-name’).hide();
        jQuery(‘label’).hide();
        jQuery(‘#cm-ajax-email’).hide();

        Thanks for pointing me in the right direction.

        Reply
  10. Lee
    February 16, 2011 at 9:22 pm

    Hiya – can you drop me a note using the Contact form with details of the site that’s failing …

    Reply
  11. Greg
    March 28, 2011 at 6:26 pm

    Great idea, but I’m getting the following error message: “Sorry, we weren’t able to sign you up. Please check your details, and try again.” I’m on hostgator running PHP 5.2 so I don’t think that’s the problem. Any help would be greatly appreciated… would love to use it.

    Reply

  12. Pingback: Debugging Problems with the Campaign Monitor Widgets – Lee Willis’ Blog | leewillis.co.uk

  13. Mark
    May 12, 2011 at 3:20 am

    Hi, just installed your widget and it works great. One question though, is there a way to edit the confirmation message? I am using a single confirmation and getting a few people who aren’t aware there’s an email that needs to be approved before they’re actually subscribed.

    Reply
    • Lee
      May 12, 2011 at 7:47 am

      Not currently, without editing the string in cm-ajax-widget.php or cm-ajax-shortcode.php.

      I’ll look at making this either filterable, or translatable so that you can make a local configuration without having to change it each time you upgrade.

      Reply
      • Stephen Danelutti
        September 23, 2011 at 9:21 am

        Great widget :) I’m just having a problem with presentation of the web page that should be displayed after someone completes the subscribe form. I set up a link to the subscribe confirmation page in CM and with the normal CM subscribe function in a page the subscriber is redirected to the page after subscribing. Using your widget just gives the subscribe confirmation message but no automatic redirect to the confirmation page. Any ideas?

        Reply
  14. Tom
    May 12, 2011 at 10:22 am

    This is a great widget – but is it possible to have custom fields in the form too? Thanks

    Reply
    • Lee
      May 12, 2011 at 8:14 pm

      Not currently no. Creating the UI for adding form fields is quite a big job, so it’s unlikely to make it into this free version. My “WP e-Commerce / Campaign Monitor” plugin includes a filter so that you can add custom fields programatically, e.g. if you always want to add a fixed value, but not sure if that would meet your need?

      Reply
  15. Vincent
    November 30, 2011 at 2:47 pm

    Hi Lee,

    Great plugin.

    It does not check if the email address is already in the list. Is there an option you will add this in the future?

    Reply
    • Lee
      November 30, 2011 at 8:30 pm

      I hadn’t planned on it – there’s no real need since re-adding someone isn’t an “error”, and should fail silently? Is there some other issue it’s causing you?

      Reply
  16. Atranaz
    January 7, 2012 at 4:52 pm

    this is the nice plug in ….. can we adjust pop-up massage on success & failed massages ?

    Reply
  17. Frédéric Sidler
    January 9, 2012 at 9:31 am

    Would be perfect if it was possible to use it in a pop over plugin like this one http://premium.wpmudev.org/project/the-pop-over-plugin

    Reply
    • Lee
      January 9, 2012 at 7:38 pm

      I’ve not used the WPMU plugin so don’t know exactly how it works. However, my plugin can show the form either as a widget, or as a shortcode (and also via template tag-like syntax, by using do_shortcode()).

      So there’s quite a lot of ways of generating the form. If none of the above work in the WPMU pop-up plugin then I’d ask them to provide support for either shortcodes, or publishing widgets into the popover, there’s nothing else I can do to make this happen, but seems like it would be sensible if their plugin supported shortcodes and/or widgets in the content.

      Reply

Leave a Reply

Required fields are marked *.

*