Create a Cloud Page to Save User Input into a Data Extension
Salesforce Marketing Cloud offers robust tools for building personalized experiences, and one of its most useful features is Cloud Pages.
It enables you to create a Cloud Page to collect user input and store it in a Data Extension.
There are many use cases for Cloud Pages, but here we will create a Cloud Page that collects input from users and stores it in a Data Extension.
Steps to Create a Cloud Page Form
1. Set Up a Data Extension
Before creating the form, you need a Data Extension to store the user input.
- Go to Email Studio > Subscribers > Data Extensions.
- Click Create and set up a Data Extension with fields corresponding to the input fields in your form. For example:
FirstNameLastNameEmailPhoneNumber
2. Create a Cloud Page
- Navigate to Cloud Pages from the Marketing Cloud dashboard( Web Studio >> cloud Page).
- Click Create Collection, then select Landing Page.
- Name your collection and click Create.
3. Add and Design the Form
- Inside your collection, click Create Content and select HTML.
- Use the following HTML and AMPscript code to create the form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cloud Page Form</title>
</head>
<body>
%%[
SET @FirstName = RequestParameter("FirstName")
SET @LastName = RequestParameter("LastName")
SET @Email = RequestParameter("Email")
SET @Address = RequestParameter("Address")
SET @upsert1 = UpsertData("YourDataExtensionName", 1,
"subscriberkey", GUID(),
"FirstName", @FirstName,
"LastName", @LastName,
"Email", @Email,
"Address", @Address)
%%]
<h1>Submit Your Details</h1>
<form method="POST" action="">
<label for="FirstName">First Name:</label><br>
<input type="text" id="FirstName" name="FirstName" required><br><br>
<label for="LastName">Last Name:</label><br>
<input type="text" id="LastName" name="LastName" required><br><br>
<label for="Email">Email:</label><br>
<input type="email" id="Email" name="Email" required><br><br>
<label for="Address">Address:</label><br>
<input type="text" id="Address" name="Address"><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
4. Replace YourDataExtensionName
In the AMPscript UpsertData function, replace YourDataExtensionName with the actual name of your Data Extension.
5. Publish the Cloud Page
- After adding the code, click Save and then Publish.
- Copy the generated URL to test your form.
Testing the Form
- Open the form URL in a browser.
- Fill in the details and submit.
- Verify the data in your Data Extension under Email Studio > Subscribers > Data Extensions.
Best Practices
- Validate Inputs: Use JavaScript or AMPscript to validate user input to prevent errors.
- Error Handling: Include error messages if data submission fails.
- Security: Ensure sensitive information is stored securely and use SSL for the Cloud Page.
Conclusion
With Cloud Pages and AMPscript, you can easily collect user input from any external site and store it in a Data Extension for further use in Marketing Cloud.
This functionality is especially useful for surveys, event registrations, or any user interaction requiring data collection.
For any queries regarding Salesforce Marketing Cloud or personalized solutions, contact our expert Salesforce Consultants at support@webkul.com or via Live Chat.
Our team is available year-round to provide customized solutions tailored to your business needs.