Communicating With Forms in an iFrame

Note: Formstack for Salesforce Native Cloud does not have the option to embed within an iframe. It currently only supports javascript. 

When deploying a form to your website, one available option in your form's Publishing Options is to deploy to your site through an iFrame.

This option is available for cases where conflicts might occur between your website and a Formstack form. For example, existing style customizations on your site might cause issues with how a form is displayed. You might have custom javascript that alters the behavior of a certain type of tag, and you don't want to have that same javsacript mess up the tags on your form.

When you embed inside an iFrame, you are basically creating a wall between the form and the page that contains the form. We're going to look at of how to communicate over that wall using a built-in browser method called postMessage.

postMessage requires custom javascript to be set up on both sides of the iFrame wall. It allows for two-way communication, allowing you to send data back and forth between your site and your form. The side that is sending data needs to call postMessage to broadcast information to a parent site. The side that is receiving data needs to use an event listener to wait for that broadcast.

In this example, the site listens for data to come from the form, and redirect's itself site based on the form's contents.

SENDER - In the "Custom Javascript" box on the form:

function  FF_OnAfterSave() {
    var courseList = document.getElementById("Course_Signup__c.Choose_a_Product__c");
    var selectedOption = courseList.value;
    //In these two lines we are retrieving the value of a picklist on our form

    var messageData = "";   

    switch(selectedOption) {
        case "Beginner Courses":
            messageData = "BEGINNER";
            break;
        case "Advanced Courses":
            messageData = "ADVANCED";
            break;
        case "Expert Courses":
            messageData = "EXPERT";
            break;
    }   

    //Here is where we broadcast the data
    //Place your site url as the second variable
    window.parent.postMessage(messageData, "YOUR_SITE_URL");
}

//Here is where we listen for an incoming message
window.addEventListener("message", onFormSubmission, false);
//Once we receive the message, we call the method "onFormSubmission"

//This method handles the broadcast from our form
function onFormSubmission(event) {
  //"event" is a variable containing data about our message

  var eventOrigin = event.origin;
  //event.origin is the form's URL.
  //This can change, so make sure to check your form's URL
  //ALWAYS check the origin first to prevent cross-site scripting attacks
  if (eventOrigin  !== "https://formstack.io")
    return;

  var selectedCourse = event.data;
  //event.data is the information broadcast from our form
  //data can be more than a simple string, it can even be a complex object!
  //We are redirecting to a different "Thank You" page based on which course
  //the user signed up for

  switch (selectedCourse) {
    case "BEGINNER":
      window.location = "https://www.formstack.com/beginner_signup_thanks";
      break;
    case "ADVANCED":
      window.location = "https://www.formstack.com/advanced_signup_thanks";
      break;
    case "EXPERT":
      window.location = "https://www.formstack.com/expert_signup_thanks";
      break;
  }
}