Back to Top

Create a Cloud Page and Embed It on a Site

Updated 22 November 2024

Salesforce Marketing Cloud’s Cloud Pages are a powerful feature for creating interactive and dynamic forms.

These forms can be used for lead collection, surveys, or any other data-gathering purposes. Once created, you can easily embed these forms on third-party websites to maximize their reach.

This blog will walk you through the step-by-step process of creating a Cloud Page form and integrating it into a third-party site.

What is a Cloud Page?

A Cloud Page in Salesforce Marketing Cloud is a web page, designed for marketing purposes. These pages are highly customizable, making them ideal for forms, landing pages, and promotional content.

Steps to Create a Cloud Page Form

1: Navigate to Cloud Pages

  1. Log in to your Salesforce Marketing Cloud account.
  2. Go to Web Studio, then select Cloud Pages.
webstudio>> cloudPage

2: Create a New Landing Page

  1. Click the Create button and choose Landing Page as your page type.
  2. Give your page a meaningful name, like “Lead Capture Form.”
Landing cloud page

3: Design Your Form

  1. Use the drag-and-drop editor to add form components:
    • Text Fields: For name, email, etc.
    • Dropdowns: These are for options like country or preferences.
    • Check Boxes: For terms and conditions or subscriptions.
  2. Customize the form labels, placeholder text, and validation rules.

Example Fields:

Searching for an experienced
Salesforce Company ?
Find out More
  • Name: Text Field
  • Email: Text Field
  • Address: Text Field
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lead Capture Form</title>
</head>
<body>
    %%[      
            SET @FirstName = RequestParameter("FirstName")
            SET @LastName = RequestParameter("LastName")
            SET @Email = RequestParameter("Email")

            SET @upsert1 = UpsertData("YourDataExtensionName", 1, 
                            "subscriberkey", GUID(), 
                            "FirstName", @FirstName,
                            "LastName", @LastName,
                            "Email", @Email, 
                            ) 
    %%]

    <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>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

4: Configure Data Extensions

  1. Connect the form to a Data Extension to store the submitted data:
  • Navigate to the form settings.
  • Map the form fields to the corresponding columns in your Data Extension.

5: Add Form Submission Logic

  1. Use AMPscript to control what happens after form submission.
    For example, redirect users to a thank-you page:
    %%[
    SET @redirectURL = "https://your-thank-you-page-url.com"
    Redirect(@redirectURL)
    ]%%
  2. Save your changes.

6: Publish Your Cloud Page

  1. Click the Publish button.
  2. Copy the generated URL for your Cloud Page. This URL will be used to embed the form on a third-party site.

Steps to Embed a Cloud Page Form on a Site

1: Generate an iFrame

  • Embed your Cloud Page using an HTML
<iframe 
    src="https://pub.s10.exacttarget.com/xxxxxx" 
    width="100%" 
    height="600" 
    style="border: none;">
</iframe>

Replace the src attribute value with the URL of your Cloud Page

2: Customize the iFrame

  • Adjust the width and height attributes to fit your site’s design.
  • Add CSS for additional styling if required.

3: Add the Code to Your Site

  1. Log in to your website’s CMS (e.g., WordPress, Shopify, etc.).
  2. Paste the iFrame code in the desired location (e.g., a page editor or custom HTML block).
  3. Save and publish your changes.

Conclusion
Creating a Cloud Page form in Salesforce Marketing Cloud and embedding it into a third-party website is a straightforward process.

By following the steps outlined above, you can easily create a dynamic and responsive form to capture leads, feedback, or any other type of user data.

For advanced use cases, you can integrate Salesforce Marketing Cloud with third-party applications using APIs to enhance your data flow and automation.


. . .

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