Version 2 of the AJAX subscribe form is now available. You can find it here.

Adding a subscribe form to your site has always been a simple matter of pasting some supplied code from your account. Recently we’ve had more and more customers asking how they can go about turning this standard form into an AJAX based form that could submit without refreshing the page.

We’ve just put the finishing touches on a simple code sample you can use to achieve just that. The best part is, we’ve built it so you can just drop in the supplied subscribe code and you’re done. The code will also check to make sure the email address entered is valid before it processes the form. Once a submission has been made, the form will be hidden and a confirmation message shown in its place.

This example was put together using jQuery and PHP. The concept is fairly simple and the code is well commented, so it could easily be adapted to another programming language.

You can copy the code here. Feel free to modify it to suit your needs.

On a side note, this sample code was put together by David Martin, Campaign Monitor’s new designer extraordinaire. You’ll be seeing much more of Dave’s work over the coming months when we release some exciting new features he’s been hard at work on.

  • Dean

    Good stuff. Two things:

    by “check to make sure the email address entered is valid” you mean valid format rather than the email address actually exists

    my javascript isn’t fantastic but as I understand it the function to call the server site code is attached to the submit input – what happens if I just press Enter after putting my last detail in – the form would just submit as normal? Perhaps you should tie the function to the onsubmit event of the form instead?

  • David Greiner

    Dean, some good suggestions there that we’ll look at incorporating. And yes, it’s basic email address validation, not actually using the API to see if the address already exists in the list.

  • Dave Martin

    Hey Dean. I just tested it on my end. It actually should work whether you press enter or click the submit button, and the $(‘form’).submit(function() &#123 return false; &#125); line should prevent the form from ever submitting like normal. However, if it doesn’t work the same for you, please let me know.

  • Glenn Nicholas

    If you are running a PPC campaign to drive email sign ups, it would be great to be able to use Ajax and track the conversion. Could you integrate the Google Conversion tracking code after a successful sign up?

  • Dave Martin

    That’s a great idea Glenn.

    There are a couple of ways you could go about doing that. What I would suggest is firing off a fake page view and then setting up a goal in Google Analytics to measure the number of fake pageviews. I’ve uploaded another example with the Google Analytics code included here.

    You will need to add your Google Analytics ID and optionally change the name of the page from “/newsletter_signup” to whatever works best for you. Hope that helps.

  • Dean

    Thanks Dave Martin – you are quite right, I did’t read beyond the first line! And in true developer style, didn’t actually try it out! Sorry for muddying the issue.

  • amy gail

    Lovely! Thanks.

    …now if someone would wrap this into a WordPress widget…. ;-)

  • James Collins

    How would I change the javascript if the Subscribe button (input type=”submit”) was an image (input type=”image”)? It seems to skip over the proxy file if the input is an image type. THANKS!

  • David Martin

    James, just change this:

    $(“:submit”).click(function() &#123

    to this:

    $(“:image”).click(function() &#123

    Let me know if that gives you any grief.

  • Christopher J.

    Have been playing around with this for quite a while and it does not seem to work out of the box in FF3 or in Safari 3.2.3 (OS X). I am getting the error:

    Warning: Unknown pseudo-class or pseudo-element ‘submit’.
    Source File: http://mydomain.com/index_test.html
    Line: 0

Want to improve your email marketing? Subscribe to get tips on improving your email marketing delivered to your inbox.
X

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free