Create a Cloud Page and Embed It on a Site
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
- Log in to your Salesforce Marketing Cloud account.
- Go to Web Studio, then select Cloud Pages.
2: Create a New Landing Page
- Click the Create button and choose Landing Page as your page type.
- Give your page a meaningful name, like “Lead Capture Form.”
3: Design Your Form
- 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.
- Customize the form labels, placeholder text, and validation rules.
Example Fields:
- 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
- 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
- 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)
]%% - Save your changes.
6: Publish Your Cloud Page
- Click the Publish button.
- 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
- Log in to your website’s CMS (e.g., WordPress, Shopify, etc.).
- Paste the iFrame code in the desired location (e.g., a page editor or custom HTML block).
- 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.
For any queries regarding Salesforce Marketing Cloud or personalized solutions, contact our expert Salesforce Consultants at support@webkul.com or via Live Chat.
Let me know if you have any questions or need assistance with Salesforce Marketing Cloud! Our team is available year-round to provide customized solutions tailored to your business needs.