LPE – Use Case 4

How can I integrate a form as an iFrame or a similar embedded element?

Forms are usually integrated as iFrames. However, it is possible to redirect the form to a completely different page as well.

To do this, insert the following JavaScript code snippet below into the page containing the iFrame:

<script type="text/javascript">
/**
* Listen to landing page events. Currently navigation and resize events are supported.
*
* @see https://developer.mozilla.org/en-US/docs/Web/API/MessageEvent
*/
window.addEventListener('message', (message) => {
/**
* For navigation events the structure is as follows:
*
* message.data = {
* 'type': 'navigateTo',
* 'name': '<the navigation target URL/page name>'
* }
*
* The navigation target is either the internal name of the tab that is navigated to,
* or an URL if the navigation's target is an external URL.
*/
if(message.data.type === 'navigateTo') {
const isUrl = message.data.name.startsWith('https://') ||
message.data.name.startsWith('http://') ||
message.data.name.startsWith('//')

if (isUrl) {
console.log('The following URL was navigated to: ' + message.data.name)
} else {
console.log('The following tab was navigated to: ' + message.data.name)
}
/**
* For resize events the structure is as follows:
*
* message.data = {
* 'type': 'onResize',
* 'contentRect': {
* 'x': 0
* 'y': 0
* 'width': 1200
* 'height': 616
* 'top': 0
* 'right': 1200
* 'bottom': 616
* 'left': 0
* }
* }
*/
} else if(message.data.type === 'onResize') {
console.log('The page has been resized: ', message.data.contentRect)
/**
* For signup events the structure is as follows:
*
* message.data = {
* 'type': 'signup',
* 'contact': {
* 'standard': {
* 'EMAIL': 'test@example.com'
* },
* 'custom': {
* 'Color': 'red'
* },
* 'preferences': {
* 'Category###Name': true
* },
* 'transaction': {
* 'Transaction type>property': 'value'
* }
* }
* }
*/
} else if(message.data.type === 'signup') {
console.log('The signup form has been submitted: ', message.data.contact)
}
});
</script>

The page also needs to be opened and resaved after the update.