Back to Top

Create a Cloud Page to Save User Input into a Data Extension

Updated 22 November 2024

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.

  1. Go to Email Studio > Subscribers > Data Extensions.
  2. Click Create and set up a Data Extension with fields corresponding to the input fields in your form. For example:
  • FirstName
  • LastName
  • Email
  • PhoneNumber

2. Create a Cloud Page

  1. Navigate to Cloud Pages from the Marketing Cloud dashboard( Web Studio >> cloud Page).
  2. Click Create Collection, then select Landing Page.
  3. Name your collection and click Create.
Landing CLoud Page

3. Add and Design the Form

  1. Inside your collection, click Create Content and select HTML.
  2. 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>
cloudpageview

4. Replace YourDataExtensionName

In the AMPscript UpsertData function, replace YourDataExtensionName with the actual name of your Data Extension.

Searching for an experienced
Salesforce Company ?
Find out More

5. Publish the Cloud Page

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

Testing the Form

  1. Open the form URL in a browser.
  2. Fill in the details and submit.
  3. 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.


. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home