A new and improved AJAX subscribe form

August 31, 2011

We've recently revised our original AJAX subscribe form to make it even easier to add to your sites. All you have to do is take the subscribe form as generated from within your account and follow some simple instructions to get it to work. The result is a form which does not require a new page to be loaded after subscribing to an existing list, meaning faster signups and no need to redirect subscribers to a subscription confirmation page. There's even email address validation built in, so your lists don't get filled up with junk data.

First of all, we thought we'd let you try out the form for yourself. Go ahead, feel free to enter real or foo email addresses. We promise that we won't send you anything - ever.

Adding the AJAX form to your site

Since version 1 of the AJAX form, we've made some pretty substantial improvements, such as cutting out server-side scripting and ensuring you don't have to tweak the default subscribe form code in order to get it to work. As straightforward as the end result is, we still recommend having a basic understanding of CSS and JavaScript in order to use and customize the form to your liking.

With that in mind, let's take a look at the code:

To get the form to add subscribers to your list, simply replace the code beneath 1. Take your Campaign Monitor subscribe form... with the subscribe form code from your account. Once done, the form is ready to add to your site.

The sample above just uses the alert function to show the result of the subscription attempt. You're free to modify this code to taste - for example, this tutorial on Nettuts+ features a few tips on adding more presentable form status messages.

Finally, you can find details on how this form works on our AJAX subscribe form page. Should you have any questions in regards to using this code, feel free to post away on our API Developer forum. Happy AJAX subscribing!

Posted in: Tips & Resources

17 Comments

Ian Atkins
August 31, 2011 4:30pm

Nice work, much cleaner.
Jusitn V
September 1, 2011 11:38pm

Fantastic. Easy to implement and works great, thanks!
Okke
September 2, 2011 10:08am

Thanks for the new, clean code. Works perfect.

One small thing; when I change the type of the input from “text” to the HTML5 type “email”, the form keeps returning an “Error: Invalid e-mail address”...

Any reason the type=“email” isn’t supported jet?
James Dennes
September 3, 2011 1:52am

Thanks guys - glad this is helpful.

Okke, I can’t think of a reason why your browser wouldn’t send our tracking servers the value of that field if you use type=“email”. I’ve successfully tested this myself in a few different browsers.

If you’re still having a problem using type=“email”, please feel free to post your question in the forums, with details such as your form markup and the browser you’re testing this in.
Lauren
September 3, 2011 9:06pm

I can’t get this to work… is there another step beyond copying and pasting the JavaScript after my existing sign-up code?
Gareth
September 4, 2011 11:18am

There shouldn’t be. Are there any errors in the console Lauren?
Luke Sturgeon
September 5, 2011 1:24pm

I cannot seem to get my custom field to work using the AJAX form. But if I submit the HTML only form then it works fine.
Ketan
September 6, 2011 5:24am

How do you customize the “success” or “failure” message with this approach? Do not see this in your writeup. Thanks!
Lauren
September 6, 2011 10:27pm

I’m not sure what you mean by errors in the console. I simply added the Javascript above to the existing subscribe form I had, and it’s not working. What else should I be doing?
James Dennes
September 6, 2011 11:22pm

Hey Lauren,

The JavaScript selects the form based on the form id “subForm” (as set when you generate a subscribe form through the app). If you have changed this in the form you are using, you will need to adjust the JavaScript to suit that.

If you’re still having problems getting this working, I would suggest that you get in touch with support, where we’ll be able to look at your specific form and see what the issue is.
Lauren
September 7, 2011 2:08am

Thanks, James. I confirmed that I’m using the id “subForm” - I’ve tried it on two of my sites. It’s still not working. I’ll contact support.
Tony Loxton
September 7, 2011 1:15pm

How would this work if I wanted to have google analytics goals setup for form submissions? Is there way that we can code a goal into this? At present we always send people to a confirmation page and have the goal set as that page’s url.
Nickolas Simard
September 7, 2011 7:22pm

Good works!
I also want to know how to customize the “success/failure” message since my website are mostly in French (or bilingual, in which case I still have to customize them :p).
JB
September 8, 2011 11:59am

I’m avoiding this, as a “confirmed” page can be tracked by Google Analytics but the Ajax form can’t.

Or can it? Please prove me wrong!
Mathew Patterson
September 8, 2011 9:38pm

JB, you can actually track it with Google Analytics - see the note at the bottom of the page here: http://www.campaignmonitor.com/downloads/ajax-subscription-form/
D. Hall
September 27, 2011 8:58am

Is it possible to use the AJAX form on a Facebook tab?
Ros Hodgekiss
September 28, 2011 3:34am

Hi D Hall, you can potentially use iframes to add a subscribe form to a Facebook tab - here’s a tutorial on this.

We are working on an email subscribe app for Facebook which should make this process radically easier, so get in touch with us and we’ll keep you updated on its release.

Blog