Skip to main content

How to Setup Custom Landing Pages For Embedded CloudForms

Updated

Overview

This tutorial explains how to setup a custom landing page for a cloudform that is embedded in a website.

Browser Security Changes

Recent browser security changes have restricted automatically forwarding a cloudform embedded in a website using an iframe to a new landing page without doing the steps listed in this tutorial.

Update the CloudForm to version 3.1.585 or later

For the steps below to work the CloudForm will need to be updated to StudioCloud version 3.1.585 or later.

To update the CloudForm to have this version do the following steps:

  1. Click on the Cloud Services component
  2. Click on the CloudForms tab
  3. Click on the Manage Forms button
  4. Edit the CloudForm
  5. Click the Save button

Add the iframe to your website

For the steps below to work you will need to do them using StudioCloud version 3.1.585 or later.

  1. Click on the Cloud Services component
  2. Click on the CloudForms tab
  3. Click on the Manage Forms button
  4. Click on the Select Actions button and then click on the Embed In Website button for the desired CloudForm

Add the code below to your website

The code below must be added in one, and only 1, of the locations below:

  • Between the <head> and </head> html tag
  • Right after the <body> html tag
 <script>
window.addEventListener('message', e => {
   if (e.origin == "https://cloudforms.co" && e.data.message == "ForwardToLandingPage") {
     window.location = e.data.value;
   }
 }, false);
</script>

 

Related articles