How to enhance your forms with asynchronous calls using AMPscript and plain JavaScript

How to enhance your forms with asynchronous calls using AMPscript and plain JavaScript

This article explains how to use Javascript and AMPscript to extend the functionality of your forms by creating asynchronous calls towards Marketing Cloud pages.

Not a fan of reading? Jump to the code snippet.

Ever heard of AJAX?

In a nutshell, AJAX is technique that allows us to retrieve the data from the server at any point in time after the page has been loaded.

It can be used in a multitude of cases, such as creating an autocomplete on an input field or checking if the specified email address is already in use.

But how does AJAX work within the limits of Marketing Cloud?

Return structured data with JSON

For starters, we need to create a page that would return Marketing Cloud data upon request.

The perfect candidate for this task is a JSON Code Resource page that can be created from the Web Studio.

Like any other page, a Code Resource page can run AMPscript and server-side Javascript, meaning that the content of the JSON object written on our page can be defined by whatever we want to retrieve from the Data Extensions.

Consider a JSON page with the URL https://somedomain.com/subscriptions and the following content:

%%[
	SET @NumberOfSubscriptions = DataExtensionRowCount('Subscriptions')
]%%
{
    "Subscriptions": %%=v(@NumberOfSubscriptions)=%%
}

In this particular example, the JSON object has a key named Subscriptions which is equal to number of records that can be found in a Data Extension with the same name.

Retrieving the data from a JSON page

So far so good, but how do we actually make an AJAX call to retrieve the data from the JSON page?

Let’s create a Cloud Page with a single button.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cloud page</title>
</head>
<body>
	<button>Get Subscriptions</button>
</body>
</html>

Now, we need a proper Javascript to make the call and display it as an alert in our browser.

var xhr = new XMLHttpRequest();
xhr.onload = function () {
	if (xhr.status >= 200 && xhr.status < 300) {
		var response = JSON.parse(xhr.response);
		alert("Number of subscriptions: " + response['Subscriptions']);
	} else {
		alert('The request failed!');
	}
};
xhr.open('GET', 'https://somedomain.com/subscriptions');
xhr.send();

Seems about right. The only thing left to do is to attach an Event Listener to the button to trigger our script.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cloud page</title>
</head>
<body>
	<button>Get Subscriptions</button>
	<script>
		function getSubscriptions() {
			var xhr = new XMLHttpRequest();
			xhr.onload = function () {
				if (xhr.status >= 200 && xhr.status < 300) {
					var response = JSON.parse(xhr.response);
					alert("Number of subscriptions: " + response['Subscriptions']);
				} else {
					alert('The request failed!');
				}
			};
			xhr.open('GET', 'https://somedomain.com/subscriptions');
			xhr.send();
		}
		var button = document.querySelector('button');
		button.addEventListener("click", getSubscriptions, false);
	</script>
</body>
</html>

Sending data to a JSON page

Retrieving a predefined piece of data from a JSON page is pretty sweet. But what if we wanted to retrieve something according to our parameters.

Consider it as a dialog, where you ask a question and receive a reply.

To accomplish this, let’s modify the JSON page to look for an email parameter, coming from the form or the URL.

%%[
	SET @AlreadyInUse = false
	SET @EmailAddress = RequestParameter('email')
	IF NOT EMPTY(@EmailAddress) THEN
		SET @Id = Lookup('Subscriptions','Id','EmailAddress',@EmailAddress)
		IF NOT EMPTY(@Id) THEN
			SET @AlreadyInUse = true
		ENDIF
	ENDIF
]%%
{
	"AlreadyInUse" : %%=v(Lowercase(@AlreadyInUse))=%%
}

From this point on, if we put a value in a URL parameter called email, the page will look for a matching email address in the Data Extension.

If the email parameter matches a value from any record in the Data Extension, the JSON key “AlreadyInUse” will be equal to “true“.

Note that, in order for this to work, we need to consider the following:

  • The Data Extension must have these 2 fields: Id and EmailAddress.
  • AMPscript boolean values are in capital case, which means that in order for the JSON to be valid, we’ll need to convert it to lower case.

Now that the JSON page is dealt with, let’s modify the Cloud page that sends the request.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cloud page</title>
</head>
<body>
	<form action="" method="post">
		<input id="email" name="EmailAddress" type="email" placeholder="Your email" required>
		<button>Does it exist?</button>
	</form>
</body>
</html>	

As you can see, the page now accommodates a form where we can fill out the email address.

The next step is to write some Javascript that will send an AJAX request to the JSON page when a user submits the form.

var form = document.querySelector('form');
var button = document.querySelector('button');
var email = document.querySelector('input');
form.addEventListener("submit", onFormSubmit, false);
function onFormSubmit(e) {
	e.preventDefault();
	button.disabled = true;
	var xhr = new XMLHttpRequest();
	xhr.onload = function () {
		if (xhr.status >= 200 && xhr.status < 300) {
			var response = JSON.parse(xhr.response);
			if(response['AlreadyInUse'] == true) {
				button.disabled = false;
				alert('This email is already in use');
			} else {
				form.submit(); 
			}
		} else {
			alert('The request failed!');
		}
	};
	xhr.open('POST', 'https://somedomain.com/subscriptions?email=' + email.value);    
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send();
}

As you can see, the script will first wait for the response from the JSON page and then according to the response it got, it will either submit the form or display an error message.

Disabling the submit button while the request is being sent is just a simulation of a loading screen, but also prevents the user from submitting the form several times during the request.

Congratulations! We have now created a form that verifies that the email address is unique before submitting the form. Isn’t that something.

Full code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Cloud page</title>
</head>
<body>
	<form action="" method="post">
		<input id="email" name="EmailAddress" type="email" placeholder="Your email" required>
		<button>Does it exist?</button>
	</form>
	<script>
		var form = document.querySelector('form');
		var button = document.querySelector('button');
		var email = document.querySelector('input');
		form.addEventListener("submit", onFormSubmit, false);
		function onFormSubmit(e) {
			e.preventDefault();
			button.disabled = true;
			var xhr = new XMLHttpRequest();
			xhr.onload = function () {
				if (xhr.status >= 200 && xhr.status < 300) {
					var response = JSON.parse(xhr.response);
					if(response['AlreadyInUse'] == true) {
						button.disabled = false;
						alert('This email is already in use');
					} else {
						form.submit(); 
					}
				} else {
					alert('The request failed!');
				}
			};
			xhr.open('POST', 'https://somedomain.com/subscriptions?email=' + email.value);    
			xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			xhr.send();
		}
	</script>
</body>
</html>	

Consider the possibilities

In this example, we have only considered 2 Javascript events: click and submit. But there are many others that you can use.

For instance, we can run the same script every time there is a blur event on the email input field. The blur event is fired every time we click on an input field and then click away.

What about the keyup event which is fired every time a keyboard key is released? This would work as follows: if the value of the email field is equal to something @ someding dot and the keyboard key is released, send a query to figure out if the email address already exists.

There are so many things we can do, but of course, it depends on what your requirements are.

Have I missed anything?

Please poke me with a sharp comment below or use the contact form.

Pay me a coffee

Want to say thanks? Pay me a coffee! Remember, I turn coffee into code.

Leave a Reply

Your email address will not be published. Required fields are marked *

ampscript
Up Next:

How to use delimited strings to store more data in a single Data Extension record with AMPscript

How to use delimited strings to store more data in a single Data Extension record with AMPscript