I would like to create a Cloud Page that will allow a subscriber to click in to from an email that was sent to them. The Cloud Page should then pre-populate their details on a form on the page that will allow the subscriber to submit more information for an event.
Implementation
Create the Landing Page
The first step to build our use case involves creating a Cloud Page, to create a Cloud Page you will need to log in to Marketing Cloud and then to Cloud Pages.
I performed the following steps to create my Cloud Page and have a form built-in
- Click the "Create Collection" button on the top right and label it anything you like, I'm going to call it "Web Forms"
- Click the "Add Content" button on your newly created collection
- Click "Create" and then "Landing Page", name the Landing Page anything you like
- You can select either "Classic Editor" or "Content Builder" for your page, I'm going with Classic Editor
I've created a simple web form asking for
- First Name
- Last Name
- Email Address
The following HTML can be pasted into the HTML editor
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<form>
<label>First Name:</label> <input type="text" name="firstName" value="" /><br />
<label>Last Name:</label> <input type="text" name="lastName" value="" /><br />
<label>Email:</label> <input type="text" name="email" value="" /><br />
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
After you have saved the Cloud Page after the modification you can click the "Schedule/Publish" button and publish the page.
When you have published the Cloud Page, you'll need to go ahead and create a Data Extension and Email that you would like to send to the Subscribers.
Create the Email and Data Extension
To speed things up, a Sendable Data Extension will be created with the following fields.
- SubscriberKey
- FirstName
- LastName
- EmailAddress
Once the Data Extension has been created you can import your data manually or through an Automation. Data can also be manually entered via Contact Builder.
Now that we have the data in the Data Extension, you can create or modify an existing email. The email we are going to use will contain a button that links to our created landing page.
In the Email drag and drop the "Button" widget in the email content area and change the text to whatever you like. Scroll down to the bottom of the widget settings and you'll see a section called "Link".
The link settings allow us to create a link directly to our Cloud page, you're probably thinking what's the difference between using a hyperlink to the address and this option?
Well, when you use the "Cloud Pages - Landing Page" drop-down item it automatically adds a hyperlink with some AMPscript code.
You can see in the HTML Editor of the Email Settings that the URL for the "Register your interest" button will look like
%%=CloudPagesURL(841)=%%
Save the email and now let's test out the link, you can do this by either
- Sending yourself a test email by sending it to the Data Extension we had just created
- Perform a "Preview and Test" on the Data Extension and send yourself a test from the screen.
Testing
You probably noticed when you clicked on the link that it took you to our web form, but nothing was pre-populated. The final step to achieve this is to add in personalisation into the Cloud Page.
Let's have a look at the changes needed to be made.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<form>
<label>First Name:</label> <input type="text" name="firstName" value="%%FirstName%%" /><br />
<label>Last Name:</label> <input type="text" name="lastName" value="%%LastName%%" /><br />
<label>Email:</label> <input type="text" name="email" value="%%emailaddr%%" /><br />
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
You can see the inputs for the form have personalisation included for each field from the Data Extension that we had sent from.
<input type="text" name="firstName" value="%%FirstName%%" />
How does this work? The link in the email is an AMPScript function called CloudPagesURL which allows you to use AMPScript to reference email data from where the Subscriber had clicked from.
Provides a way for users to reference a CloudPages URL in an account from an email message. Use this function in an email to pass information via a URL in an encrypted query string. For example, you could share a single unsubscription or profile center page for use in any sent email message. This method passes information in an encrypted query string without passing subscriber information or values in clear text.
You'll notice that the address bar for the Cloud Page you are on has a long string appended to it, this is automatically generated by the system which holds encrypted email data that can be used in the Cloud Page.
?qs=4cfaf423001b93bd59b94584d3f427816e0f982986d6913f7e382fc40de95fa73b02b8980a064b74a578a0
Conclusion
As you can see, achieving a simple pre-population on a Cloud Page without having to code any complex AMPScript in to the page can be fairly straightforward. It can also be used to code powerful custom profile and preference centres!
