Marketing Cloud comes with the default preference center to manage the subscription and profile information of the subscribers. It is possible to create a custom page to create it!
(This is a skeleton or boilerplate without any fancy styles. You can use this to build one for your requirement)
To achieve this custom development, we need to create a Cloud Page. (Web > Cloud Pages)
At the time of writing New Cloud Pages Experience Preview is available. I used it. You can either use classic or new experience. It is just an experience and the improved performance. You can use whichever you prefer.
Being a developer turned SFMC developer, I personally prefer IDE to work on scripts. You can connect Marketing Cloud with Visual Studio easily.
Here is the code (explanations to follow then):
Line 11-26 are the AMPScript that helps us use the Profile Attributes, used to populate our Form with the initial values. These are the attributes I created manually in my Marketing Cloud instance. You may need to change based on the attributes you created in your Marketing Cloud instance.
Line 44-54 are the SSJS that fetches the POST variables from the HTML form. For instance, from the following lines,
<label>First Name: </label><input type="text" name="firstName" value="%%=v(@firstName)=%%"><br> <label>Last Name: </label><input type="text" name="lastName" value="%%=v(@lastName)=%%"><br> <label>* Email: </label><input type="email" required name="email" value="%%=v(@emailAddress)=%%"><br> <label>Website: </label><input type="url" name="website" value="%%=v(@website)=%%"><br>
SSJS lines would be: (
name attribute in the HTML would be the argument for the
var firstName = Platform.Request.GetFormField('firstName') || ""; var lastName = Platform.Request.GetFormField('lastName') || ""; var email = Platform.Request.GetFormField('email') || ""; var website = Platform.Request.GetFormField('website') || "";
Line 93-121 is the form with a sample fields.
- First we have Profile fields – First Name, Last Name, Email, Website and Gender
- Followed by Subscription Preferences – Checkboxes
- Finally an overall Subscription or Unsubscribe from all.
Line 123-150 utilizes the open source Sweet Alert 2 plugin that gives an appealing alert box replacing the old fashioned browser alert still an one-liner.
Now Save and Publish the Cloud Page. It should look like this:
In your email content, call this cloud page in the place you call for unsubscribe link:
<a alias="Manage Preferences" conversion="false" data-linkto="cloudpageslandingpage" href="%%=CloudPagesURL(34567)=%%" title="Manage Preferences"> Manage Preferences </a>
34567 with your Cloud Page ID.
Now, your subscriber on clicking the link, you see them landing by the brand new cloud page created by you!