Categories Technology

Create a cloud page to save user input to a data extension


Salesforce Marketing Cloud offers robust tools for creating personalized experiences, and one of its most useful features is Cloud pages.

It allows you to create a Cloud page to collect user inputs and store them in a Data extension.

There are many use cases for Cloud Pages, but here we will create a Cloud Page that collects user input and stores it in a data extension.

Steps to Create a Cloud Page Form

1. Configure a data extension

Before creating the form, you need a data extension to store user input.

  1. Go to Email Studio > Subscribers > Data extensions.
  2. Click Create and configure a data extension with fields corresponding to your form input fields. For example:
  • FirstName
  • LastName
  • Email
  • PhoneNumber

2. Create a cloud page

  1. Go to Cloud pages from the Marketing Cloud dashboard( Web Studio >> Cloud Page).
  2. Click Create a collectionthen select Landing page.
  3. Name your collection and click Create.

3. Add and design the form

  1. In your collection, click Create Content and select HTML.
  2. Use the following HTML and AMPscript 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>
cloud page view

4. Replace YourDataExtensionName

In the AMP script UpsertData function, replace YourDataExtensionName with the actual name of your data extension.

5. Publish Cloud Page

  1. After adding the code, click To safeguard and then Publish.
  2. Copy the generated URL to test your form.

Test the form

  1. Open the form URL in a browser.
  2. Fill in the details and submit.
  3. Check the data in your data extension under Email Studio > Subscribers > Data extensions.

Best practices

  • Validate entries: Use JavaScript or AMPscript to validate user input to avoid errors.
  • Error handling: Includes 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 later use in Marketing Cloud.

This feature is particularly useful for surveys, event registrations, or any user interactions that require data collection.




Technology

More From Author