Creating an AJAX subscribe form

May 28, 2009

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 download the code here. You'll find a zip file with two documents, a small PHP file that acts as a proxy, and the HTML page containing the form and JavaScript. Feel free to modify them both 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.

Posted in: Tips & Resources

10 Comments

Dean
May 28, 2009 5:41pm

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
May 28, 2009 5:44pm

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
May 29, 2009 8:24am

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() { return false; }); 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
May 29, 2009 10:33am

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
May 29, 2009 11:57am

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
May 29, 2009 5:45pm

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
May 30, 2009 9:37am

Lovely! Thanks.

...now if someone would wrap this into a WordPress widget…. ;-)
James Collins
June 18, 2009 5:40am

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
June 18, 2009 11:57am

James, just change this:

$(”:submit”).click(function() {

to this:

$(”:image”).click(function() {

Let me know if that gives you any grief.
Christopher J.
July 12, 2009 2:35am

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

Blog