Smart capture - prefill form on external web page

Question

Is it possible to create a smart capture form using cloudpages, prefill the fields in the same form (using process like outlined in the link below), and then embed the form on an external web page (built outside of marketing cloud)? ...I have not found the prefill function to work successfully while embedding the form at the same time. If I embed the form should the ampscript parameters (like below) be included as part of the embedded form(coded in marketing cloud), or part of the code on the external web page? Any recommendations on how to accomplish this?
.....link
https://sfmarketing.cloud/2019/08/19/creating-a-smartcapture-form-prefilled-prepopulated-with-salesforce-data-in-cloudpages/
.....ampscript
%%[
SET @emailaddress = QueryParameter('emailaddress')
SET @FirstName = QueryParameter('FirstName')
SET @LastName = QueryParameter('LastName')
]%%

Macca · Answer

iFrames tend to be a bit tricky to get to work satisfactorily on mobile devices, but at a pinch you can embed them with a few CSS tricks. Outside the scope of the question, but I tend to opt for running your form natively on your site and create a form handler hosted in a CloudPages code resource to provide data to the form and handle form posts.

Aside from this, there are a number of ways of embedding your CloudPage in an iFrame. The key to all of them is passing "Context" to the page in order to pre-fill the form. The simplest way I have found is to use standard functionality found in the AMPScript CloudPagesURL() function that "wraps" the link to the CloudPage and provides Context through data encrypted in the "qs" query string parameter. You then need to pass this URL to the page on your site hosting the iFramed CloudPage in order to load the iFrame dynamically.

In your SmartCapture form, add personalization strings to pre-fill the form field on page load - you'll need to edit the HTML of the form field to add a "value" property:

In your email, define the URL of the page hosting your iFramed form:

%%[
  /* Get the wrapped link to the CloudPage to be iFramed */
  SET @iframeUrl = CloudPagesURL(11223)

  /* URLEncode using string replacement of illegal chars */
  SET @iframeUrl = Replace(@iframeUrl,'/','%2F')
  SET @iframeUrl = Replace(@iframeUrl,':','%3A')
  SET @iframeUrl = Replace(@iframeUrl,'?','%3F')

  /* Build the URL to the page hosting the CloudPage iFrame */
  SET @parentpage = Concat("htt","ps//:mysite.com/mypagewithiframe.html?p=",@iframeUrl)
]%%
<a alias="CloudPage Link" href="%%=RedirectTo(@parentpage)=%%">iFramed CloudPage</a>

In your page that hosts the iFrame, use Javascript to retrieve the URL of the CloudPage from the query string of the request:

<html>
<head><title>Embedded CloudPage</title></head>
<body>
    <iframe id="CloudPage" src="" height="100%" width="100%"></iframe>
    <script>
        document.getElementById('CloudPage').src = getUrlParameter('p');

        function getUrlParameter(name) {
            name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
            var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
            var results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
        };
    </script>
</body>
</html>

Smart capture - prefill form on external web page

One Answer

Add your own answers!

Ask a Question