In addition to our original subscription form, we added a new “Ajax Subscription Form” for your convenience. We’ve tried to make this subscription process as easy both for you and for your customers as possible. With this new Ajax Subscription Form, you will add your subscribers without redirecting them to the Sendloop “Subscription Conformation Page”.

Adding this Ajax Subscription Form to your site is easy. Before adding the form to your site, I’d like to show you how it will be seen on your site.

 Ajax Subscription Form :

Subscription Complete Result :

Subscription Error Result :

Let’s take a look at the code. Below is the screen shot of the code. You need to change the “List ID” and “Sendloop Domain”. You can also customize the form to your own business.

How to set the form with your account and list information :

To get the form to add subscribers to your list, simply copy and paste the code below to your site. Once it is done, the new Ajax Subscription Form is ready to add to your site.

Complete HTML ajax subscription form :

For Jquery Users :

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="Message"></div>
<fieldset>
<input type="text" id="EmailAddress" name="EmailAddress" />
<input type="hidden" id="ListID" name="ListID" value="YOUR_LISTID_HERE" />
<button id="Add">Add</button>
</fieldset>
<script type="text/javascript">
function AddSubscriber(EmailAddress,ListID) {
var jqxhr = $.getJSON("http://YOUR_SENDLOOP_DOMAIN_HERE/subscribe.php?callback=?", {
'ResultType': "json",
'FormValue_Fields[EmailAddress]': EmailAddress,
'FormValue_ListID': ListID,
'FormValue_Command': "Subscriber.Add"
})
.success(function(data) {
if (data.Success) {
$('#Message').html('Subscription Complete');
} else {
$('#Message').html(data.Message);
}
})
.error(function() {})
.complete(function() {});
}
$('#Add').click(function() {
AddSubscriber($('#EmailAddress').val(),$('#ListID').val());
});
</script>
</body>
</html>

 

For MooTools users :

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<script type="text/javascript">
google.load("mootools", "1.4.1");
</script>
<!-- mootools more library with JSONP support -->
<script type="text/javascript" src="mootools-more-1.4.0.1.js"></script>
<div id="Message"></div>
<fieldset>
<input type="text" id="EmailAddress" name="EmailAddress" />
<input type="hidden" id="ListID" name="ListID" value="YOUR_LISTID_HERE" />
<button id="Add">Add</button>
</fieldset>
<script type="text/javascript">
var Message = document.id('Message');
function AddSubscriber(EmailAddress,ListID) {
var myJSONP = new Request.JSONP({
url: 'http://YOUR_SENDLOOP_DOMAIN_HERE/subscribe.php',
callbackKey: 'callback',
data: {
'ResultType': 'json',
'FormValue_Fields[EmailAddress]': EmailAddress,
'FormValue_ListID': ListID,
'FormValue_Command': "Subscriber.Add"
},
onRequest: function(url){
},
onComplete: function(data){
if (data.Success) {
Message.set('text', 'Subscription Complate');
} else {
Message.set('text', data.Message);
}
}
}).send();
}
document.id('Add').addEvent('click', function(event){
AddSubscriber(document.id('EmailAddress').get('value'),document.id('ListID').get('value'));
});
</script>
</body>
</html>

We are still working on Sendloop new version and after we release Sendloop 2012 update, we will make it and every other process even easier than before. If you have any questions in regards to using above code, feel free to contact us.